/*
 Theme Name:   Neytri Child
 Theme URI:    https://neytri.wpengine.com/
 Description:  Neytri Child Theme
 Author:       the WeDesignTech team
 Author URI:   https://wedesignthemes.com/
 Template:     neytri
 Version:      4.2.0
 Text Domain:  neytri-child
*/

/* ---- Aesthetic top bar + brand strip (v2, 2026-08-20) ---- */
[data-id="aesblk01"] .aes-topbar-icons{display:flex;align-items:center;gap:20px;justify-content:flex-end}
.aes-ico{width:15px;height:15px;display:inline-block;background-color:#fff;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.aes-ico-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' viewBox%3D'0 0 512 512'%3E%3Cpath fill%3D'white' d%3D'M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' viewBox%3D'0 0 512 512'%3E%3Cpath fill%3D'white' d%3D'M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E")}
.aes-ico-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' viewBox%3D'0 0 512 512'%3E%3Cpath fill%3D'white' d%3D'M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' viewBox%3D'0 0 512 512'%3E%3Cpath fill%3D'white' d%3D'M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/%3E%3C/svg%3E")}
[data-id="aesblk01"] select.woocommerce-currency-switcher{background:#000;color:#fff;border:none;font-size:13px;font-weight:500;padding:0 4px;outline:none;cursor:pointer;width:auto !important;min-width:80px;height:22px}
[data-id="aesblk01"] .elementor-widget-shortcode{display:flex;justify-content:flex-start;width:100%}
@media (max-width:767px){
  .elementor-section[data-id="aesblk01"] .elementor-container{display:flex}
  .elementor-section[data-id="aesblk01"] .elementor-column{width:50%}
}
/* brand strip: real logos at full colour, consistent size, slides travel left to right */
.wdt-custom-branding-icon-box-style .swiper{direction:rtl}
.wdt-custom-branding-icon-box-style svg, .wdt-custom-branding-icon-box-style img{opacity:1 !important;filter:none !important}
.wdt-custom-branding-icon-box-style .wdt-content-icon svg{width:auto;height:auto;max-width:170px;max-height:40px}
[data-id="aesblk01"] p{margin:0}
[data-id="aesblk01"] .elementor-widget-wrap{align-content:center}
[data-id="aesblk01"] .select2-container .select2-selection--single{background:#000;border:none;height:24px;line-height:24px}
[data-id="aesblk01"] .select2-selection__rendered{color:#fff !important;line-height:24px !important;font-size:13px;font-weight:500;padding-left:0}
[data-id="aesblk01"] .select2-selection__arrow{height:24px !important}
[data-id="aesblk01"] .select2-selection__arrow b{border-color:#fff transparent transparent transparent}
.wdt-custom-branding-icon-box-style .wdt-content-icon span, .wdt-custom-branding-icon-box-style .wdt-content-icon i{opacity:1 !important}
.aes-ico-phone{transform:scaleX(-1)}
/* ---- footer 557: black bg, white text (site-wide footer, 2026-08-20) ---- */
.wdt-footer-tpl.footer-557{background:#000}
.elementor-557 .elementor-heading-title, .elementor-557 h1, .elementor-557 h2, .elementor-557 h3, .elementor-557 h4, .elementor-557 h5, .elementor-557 h6, .elementor-557 p, .elementor-557 span, .elementor-557 li, .elementor-557 a, .elementor-557 .elementor-icon-list-text{color:#fff !important}
.elementor-557 a:hover, .elementor-557 a:hover .elementor-icon-list-text{color:#bdbdbd !important}

/* ── 2026-08-20 · Shop Left Sidebar becomes THE shop (Rohit round 5) ─────────
   1) page carries the homepage header (setting change, not CSS)
   2) the whole shop box (#main > .container: sidebar + grid) caps at 1400px
   3) the title band gets the homepage hero treatment: the approved grey-studio
      model photo painted on the WRAPPER itself - the theme's own
      .main-title-section-bg div is position:absolute against the PAGE (the
      wrapper resists position:relative), so a background there lands behind
      the header, not the band. */
.page-id-651 #main > .container { max-width: 1400px; }
.page-id-651 .main-title-section-wrapper .container { max-width: 1400px; }
.page-id-651 .main-title-section-wrapper {
  min-height: 120px;
  display: flex;
  align-items: center;
  /* round 5i: Rohit picked sample 3 - the INK band: black strip, white title */
  background: #0c0c0c;
}
/* dark text on the light grey photo, same as the homepage hero */
/* even air above and below the title: the theme's container ships 100px top /
   20px bottom, which reads as a hole above the heading */
.page-id-651 .main-title-section-container { padding-top: 10px; padding-bottom: 10px; }
.page-id-651 .main-title-section h1 { color: #ffffff; }
.page-id-651 .breadcrumb, .page-id-651 .breadcrumb a { color: #bbbbbb; }
.page-id-651 .breadcrumb .current { color: #ffffff; }
/* category cards: one-line labels */
[data-id="62dd4be"] .wdt-content-title a{white-space:nowrap;font-size:12px;padding:10px 12px}

/* round 5c (Rohit): type-2 cards on the shop - stars and price share a row.
   Selector rides ul/li so it out-specifies the theme's own card rules. */
body.page-id-651 ul.products li.product .product-details { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
body.page-id-651 ul.products li.product .product-details .product-title { width: 100%; }
body.page-id-651 ul.products li.product .product-details .product-rating-wrapper { margin: 0 auto 0 0; width: auto; }
body.page-id-651 ul.products li.product .product-details .product-price { margin: 0; width: auto; }
body.page-id-651 ul.products li.product .product-details .product-buttons-wrapper.product-button { width: 100%; }

/* round 5f (Rohit): the 100px hole between the band and the products is
   #header-wrapper's own margin-bottom. Cut to 36. */
body.page-id-651 #header-wrapper { margin-bottom: 42px; }

/* round 5i: ink band text - white title, dim breadcrumb, centred as sample 3 */

/* ── the RAIL, as the refined sample (1.4.0): no boxes, no folds, plain
   headings, one search unit, a bare slider, a clean select, brand chips ─── */
body.page-id-651 .main-title-section h1 { font-size: 24px; }
.page-id-651 .secondary-sidebar .widget {
  /* #ececec was too faint to read as a box on white - #ddd matches the
     search and select borders, so the sections actually look like sections */
  border: 1px solid #ddd; background: #fff; padding: 18px; margin-bottom: 14px;
}
.page-id-651 .secondary-sidebar .widget > *:not(h2):not(h5):not(.widget-title) { padding: 0; }
.page-id-651 .secondary-sidebar .widget h2,
.page-id-651 .secondary-sidebar .widget h5,
.page-id-651 .secondary-sidebar .widget-title {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: #111; margin: 0 0 12px; padding: 0; border: none;
}

/* SEARCH as one unit (restored 1.4.1): field + black square icon button */
.page-id-651 .secondary-sidebar .woocommerce-product-search,
.page-id-651 .secondary-sidebar form[role="search"],
.page-id-651 .secondary-sidebar .widget_product_search form {
  display: flex !important; border: 1px solid #ddd; align-items: stretch;
}
.page-id-651 .secondary-sidebar .woocommerce-product-search .search-field,
.page-id-651 .secondary-sidebar form[role="search"] input[type="search"],
.page-id-651 .secondary-sidebar form[role="search"] input[type="text"] {
  flex: 1 1 auto; min-width: 0; width: auto !important; margin: 0 !important;
  padding: 11px 12px; border: none !important; outline: none; font-size: 13.5px; background: #fff;
}
.page-id-651 .secondary-sidebar .woocommerce-product-search button,
.page-id-651 .secondary-sidebar form[role="search"] button,
.page-id-651 .secondary-sidebar form[role="search"] input[type="submit"] {
  flex: 0 0 46px; width: 46px !important; margin: 0 !important; padding: 0 !important;
  background: #0c0c0c; color: transparent; border: none; cursor: pointer;
  font-size: 0 !important; line-height: 0; position: relative; border-radius: 0;
}
.page-id-651 .secondary-sidebar .woocommerce-product-search button::before,
.page-id-651 .secondary-sidebar form[role="search"] button::before {
  content: ''; position: absolute; inset: 0;
  background: no-repeat center / 15px 15px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
}

.page-id-651 .secondary-sidebar select {
  width: 100% !important; min-width: 100%; padding: 11px 12px; border: 1px solid #ddd;
  background: #fff; font: inherit; font-size: 13.5px; color: #333; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* brands as soft chips (sample 5) */
/* BRAND CHIPS. The theme lays sidebar list items out as full-width rows, so
   the li has to be released before the chip can be a chip (1.2.4). */
/* every chip the same box: a two-column grid, so "Abib" and
   "Teosyal (Teoxane)" occupy identical cells (Rohit, 2026-08-20) */
.aes-brands {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.page-id-651 .secondary-sidebar .aes-brands li {
  width: auto !important; flex: 0 0 auto; display: block;
  margin: 0 !important; padding: 0 !important; border: none !important; background: none !important;
}
.page-id-651 .secondary-sidebar .aes-brands li::before,
.page-id-651 .secondary-sidebar .aes-brands li::marker { content: none; display: none; }
.page-id-651 .secondary-sidebar .aes-brands li a {
  display: flex; align-items: center; justify-content: center; height: 100%;
  width: 100% !important; background: #f4f4f4; color: #2a2a2a; text-align: center;
  text-decoration: none; font-size: 11.5px; line-height: 1.25; padding: 8px; border: none;
  /* one tile size for every brand, logo or name */
  min-height: 44px;
}
/* a logo sits INSIDE the tile at a consistent height, never stretched */
.page-id-651 .secondary-sidebar .aes-brands li a img {
  max-width: 100%; max-height: 26px; width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply;
}
.page-id-651 .secondary-sidebar .aes-brands li a:hover { background: #0c0c0c; color: #fff; }

/* CATEGORIES: WooCommerce hands the dropdown to select2, so the visible
   control is a span, not the <select> (the native one is 1px and hidden). */
.page-id-651 .secondary-sidebar .select2-container { width: 100% !important; }
.page-id-651 .secondary-sidebar .select2-container .select2-selection--single {
  height: 42px !important; min-height: 42px; padding: 0 !important;
  border: 1px solid #ddd; border-radius: 0; background: #fff; outline: none;
}
.page-id-651 .secondary-sidebar .select2-container .select2-selection__rendered {
  line-height: 40px; padding-left: 12px; color: #2a2a2a; font-size: 13.5px;
}
.page-id-651 .secondary-sidebar .select2-container .select2-selection__arrow { height: 40px; right: 8px; }
.select2-dropdown { border: 1px solid #ddd; border-radius: 0; }
.select2-results__option { font-size: 13.5px; padding: 9px 12px; }
.select2-results__option--highlighted { background: #0c0c0c !important; color: #fff !important; }

/* PRICE SLIDER (1.3.0) - two handles over one track */
.aes-sl { position: relative; padding-top: 6px; }
.aes-sl__track { position: relative; height: 3px; background: #e2e2e2; margin: 10px 0 6px; }
.aes-sl__fill { position: absolute; height: 3px; background: #0c0c0c; left: 0; right: 0; }
.aes-sl input[type="range"] {
  position: absolute; top: 8px; left: 0; width: 100%; margin: 0; height: 12px;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.aes-sl input[type="range"]::-webkit-slider-thumb {
  pointer-events: all; -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%; background: #0c0c0c; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #0c0c0c;
}
.aes-sl input[type="range"]::-moz-range-thumb {
  pointer-events: all; width: 14px; height: 14px; border-radius: 50%; background: #0c0c0c;
  cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px #0c0c0c;
}
.aes-sl__vals {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-size: 12.5px; color: #444; font-variant-numeric: tabular-nums;
}
.aes-price button {
  margin-top: 12px; width: 100%; background: #0c0c0c; color: #fff; border: none;
  padding: 11px 0; cursor: pointer; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* round 5f: the theme's 100px hole between band and products */
body.page-id-651 #header-wrapper { margin-bottom: 42px; }

/* round 5o: THE CARD - Rohit picked sample 2 (hover button).
   Brand eyebrow, name clamped to two lines so a row never goes ragged, price
   under it, and the Add button slides up over the photo on hover. The button
   is MOVED into .product-thumb by the footer script. */
/* THE alignment fix: supplier photos come in every shape, so a natural-height
   image block puts each card's price and button at a different height and the
   row reads ragged (that is what "all different sizes" actually was). One
   square box, image contained inside it, and every row lines up. */
body.page-id-651 ul.products li.product .product-thumb { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
/* CORRECTED 2026-09-13 (ecommerce-64): the paragraph this replaces claimed
   switching .image to position:absolute had "zero effect on the working <img>
   cards, tested side by side" - that was WRONG, and it shipped: every plain <img>
   card sitewide (shop, every category) rendered 0px tall for a window until
   caught. The side test that produced the wrong claim forced position via a NEW
   rule without also removing aspect-ratio from the original one, so it never
   actually reproduced what got shipped. The real mechanism: the theme has a MORE
   SPECIFIC rule, `.woocommerce ul.products:not(.product-thumb-bg-image) li.product
   .product-thumb a.image {position:relative}` - it targets plain <img> cards only
   and wins there no matter what position is written here, so .image stays
   position:relative on shop/category pages regardless. With no aspect-ratio and
   every child absolutely positioned (nothing left in flow to derive a height
   from), that collapses to 0. aspect-ratio on BOTH .product-thumb and .image
   (restored below) fixes it whichever way position resolves: grid-stretch gives
   .image its width either way, aspect-ratio derives the height from that - and
   it's a no-op, not a conflict, on the background-image card two rules down,
   where position:absolute + inset:0 already makes both dimensions definite on
   their own. Do not remove these two aspect-ratio declarations; backups
   style.css.bak-thumbheight-20260913 and .bak-imageaspect-20260913. */
body.page-id-651 ul.products li.product .product-thumb .image {
  display: block; position: absolute; inset: 0; aspect-ratio: 1 / 1; background: #f6f6f6;
}
/* the link also holds an overlay div that eats the full height, so the photo
   layers must be ABSOLUTE inside the square or the image is pushed out of the
   clipped box and the card renders empty */
body.page-id-651 ul.products li.product .product-thumb .image .primary-image,
body.page-id-651 ul.products li.product .product-thumb .image .secondary-image,
body.page-id-651 ul.products li.product .product-thumb .image .product-thumb-overlay {
  position: absolute !important; inset: 0; height: 100%; width: 100%;
}
/* the grey must sit on the layer DIRECTLY behind the photo: mix-blend-mode
   blends with its immediate backdrop, and these layers are transparent, so
   grey on the outer link alone leaves the photo's own white showing */
body.page-id-651 ul.products li.product .product-thumb .image .primary-image,
body.page-id-651 ul.products li.product .product-thumb .image .secondary-image { background: #f2f2f2; }
body.page-id-651 ul.products li.product .product-thumb .image { background: #f2f2f2; }
body.page-id-651 ul.products li.product .product-thumb .image img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* 2026-09-13: a product with a gallery (2+ photos) gets a DIFFERENT theme card -
   no <img> at all, the photo is a CSS background-image on .primary-image /
   .secondary-image (swapped on hover). Every rule above this one only ever
   targeted an <img>, so this card variant inherited none of it: no
   background-size, so the browser's default (native pixel size, top-left
   corner only) showed a near-blank crop of a 747x747 photo inside a ~235px
   box - "no photo" on every Dr.Pen / derma roller card, the first products
   here with real galleries. Same fix as the <img> rule, for a background
   instead of a src. */
body.page-id-651 ul.products li.product .product-thumb .image .primary-image,
body.page-id-651 ul.products li.product .product-thumb .image .secondary-image {
  background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important;
  mix-blend-mode: multiply;
}
body.page-id-651 ul.products li.product .product-thumb .product-buttons-wrapper.product-button {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; width: 100%;
  transform: translateY(100%); transition: transform 0.22s ease;
}
body.page-id-651 ul.products li.product:hover .product-thumb .product-buttons-wrapper.product-button,
body.page-id-651 ul.products li.product:focus-within .product-thumb .product-buttons-wrapper.product-button { transform: none; }
/* FULL-WIDTH button: the theme nests wrapper > wrapper > inline-block anchor,
   so every link in that chain has to be told to span (1.2.1) */
body.page-id-651 ul.products li.product .product-thumb .product-button .wc_inline_buttons,
body.page-id-651 ul.products li.product .product-thumb .product-button .wcct_btn_wrapper,
body.page-id-651 ul.products li.product .product-thumb .product-button .wdt-button,
body.page-id-651 ul.products li.product .product-thumb .product-button a {
  display: block !important; width: 100% !important; max-width: none;
  text-align: center; border-radius: 0; margin: 0;
}
body.page-id-651 ul.products li.product .product-thumb .product-button .wdt-button { padding: 13px 0; }
/* the theme adds a cart glyph after the label; the label alone is cleaner */
body.page-id-651 ul.products li.product .product-thumb .product-button .wdt-button::after,
body.page-id-651 ul.products li.product .product-thumb .product-button a::after { display: none; }

/* NO wishlist / compare / quick-view on the card (Rohit, 2026-08-20) */
body.page-id-651 ul.products li.product .product-thumb-content { display: none !important; }

/* the photo sits ON the light grey: supplier shots are on white, so the white
   is blended away and the card's grey shows through (this is the trick the
   sample page used and the first live cut missed) */
body.page-id-651 ul.products li.product .product-thumb .image img { mix-blend-mode: multiply; }

/* sizes: the name was shouting at 20px, the price whispering at 14 */
/* name and price must not read as the same thing: the name is quiet regular
   text, the price is heavier, larger and black (1.2.4) */
body.page-id-651 ul.products li.product .product-title h5,
body.page-id-651 ul.products li.product .product-title h5 a {
  font-size: 13px !important; font-weight: 700 !important; color: #111111;
}
body.page-id-651 ul.products li.product .product-price,
body.page-id-651 ul.products li.product .product-price .price,
body.page-id-651 ul.products li.product .product-price .amount,
body.page-id-651 ul.products li.product .product-price bdi {
  font-size: 17px !important; font-weight: 700 !important; color: #0c0c0c;
}
body.page-id-651 ul.products li.product .product-price { margin-top: 4px; }
/* no hover on touch: the button just sits there */
@media (hover: none) {
  body.page-id-651 ul.products li.product .product-thumb .product-buttons-wrapper.product-button { transform: none; }
}
body.page-id-651 ul.products li.product .product-details { padding-top: 14px; }

body.page-id-651 ul.products li.product .product-title { margin-bottom: 6px; }
/* the clamp needs display:-webkit-box to bite, and the theme sets display on
   the heading, so it has to be forced; the LINK carries the text, so it takes
   the clamp and the heading just holds the two-line height */
body.page-id-651 ul.products li.product .product-title h5 {
  min-height: 2.7em; line-height: 1.35; margin: 0;
}
body.page-id-651 ul.products li.product .product-title h5 a {
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
/* stars stay out: these products carry no reviews, the brand line says more */
body.page-id-651 ul.products li.product .product-details .product-rating-wrapper { display: none !important; }

/* ── round 5s: Rohit's mash - REFINED rail + RULED cards ─────────────────── */

/* cards breathe: real gaps between them and inside them */
body.page-id-651 ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 30px 26px; }
body.page-id-651 ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; }
body.page-id-651 ul.products li.product .wdt-col { width: 100% !important; padding: 0 !important; }
body.page-id-651 ul.products li.product .product-details { padding-top: 12px !important; }
body.page-id-651 ul.products li.product .product-title { margin-bottom: 0; }

/* the RULE above the price (sample 3) and tabular figures so a column of
   prices lines up digit for digit */
body.page-id-651 ul.products li.product .product-price {
  border-top: 1px solid #efefef; padding-top: 9px; margin-top: 9px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}


/* Clinical Ledger (2026-09-13): a category label as a quiet outlined pill, and
   a pack-size chip on the photo when the title parsed one out. */
.aes-cat-pill {
  display: inline-block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #111111; border: 1px solid #cccccc; padding: 3px 8px; margin: 2px 0 8px; background: #fff;
}
body.page-id-651 ul.products li.product .product-thumb .aes-size-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #111111; color: #ffffff; font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; line-height: 1; padding: 7px 9px;
}

/* PAGINATION (the live page had none at all) */
body.page-id-651 .wdt-pagination, body.page-id-651 .woocommerce-pagination,
body.page-id-651 nav.pagination, body.page-id-651 .pagination {
  display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 38px; padding-top: 24px; border-top: 1px solid #eee; list-style: none;
}
body.page-id-651 .wdt-pagination ul, body.page-id-651 .woocommerce-pagination ul {
  display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; border: none;
}
body.page-id-651 .wdt-pagination li, body.page-id-651 .woocommerce-pagination li { border: none; margin: 0; }
body.page-id-651 .page-numbers {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e0e0e0; font-size: 13.5px; color: #333; text-decoration: none;
  font-variant-numeric: tabular-nums; padding: 0 12px; background: #fff;
}
body.page-id-651 .page-numbers:hover { border-color: #0c0c0c; }
body.page-id-651 .page-numbers.current { background: #0c0c0c; color: #fff; border-color: #0c0c0c; }
body.page-id-651 .page-numbers.dots { border-color: transparent; }

/* (the homepage New Arrivals image-box rule moved to the other session's
   mu-plugin aes-home-cards.css on 2026-08-20, handover agreed - see
   mu-plugins/_OWNERSHIP.md. Nothing of ours styles page 507 now.) */
/* the theme borders every input; the slider handles must stay invisible or
   the track renders inside a rounded rectangle (Rohit caught this) */
.page-id-651 .secondary-sidebar .aes-sl input[type="range"] {
  border: none !important; box-shadow: none !important; padding: 0 !important;
  background: transparent !important; min-height: 0; height: 12px;
}
.page-id-651 .secondary-sidebar .aes-sl input[type="range"]:focus { outline: none; }
.page-id-651 .secondary-sidebar .aes-price { margin: 0; }
.page-id-651 .secondary-sidebar .aes-sl__vals { color: #6a6a6a; }

/* the categories control is select2's span stack: the visible box is
   .select2-selection--single (black 1px from the theme) and the label span
   overflows it. Match the sample: thin grey border, own chevron, no arrow. */
.page-id-651 .secondary-sidebar .select2-container--default .select2-selection--single {
  height: 42px !important; border: 1px solid #ddd !important; border-radius: 0; background: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.page-id-651 .secondary-sidebar .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 40px !important; line-height: 40px !important; padding: 0 34px 0 12px !important;
  color: #333; font-size: 13.5px;
}
/* the theme's own arrow would sit on top of the chevron */
.page-id-651 .secondary-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: block !important; height: 40px !important; right: 10px !important; width: 14px;
}
.page-id-651 .secondary-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #555 transparent transparent transparent !important; border-width: 6px 5px 0 5px !important;
  margin-left: -5px !important;
}

/* ── round 5v (Rohit) ─────────────────────────────────────────────────────
   4. the price gets its own face: Jost's geometric numerals read oddly at
      small sizes, so prices use a neutral grotesque with lining figures
   5. the photo lifts on hover, so a card feels alive before you reach the
      button */
body.page-id-651 ul.products li.product .product-price,
body.page-id-651 ul.products li.product .product-price .amount,
body.page-id-651 ul.products li.product .product-price bdi {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0;
}
body.page-id-651 ul.products li.product .product-thumb .image img {
  transition: transform 0.45s ease;
}
body.page-id-651 ul.products li.product:hover .product-thumb .image img { transform: scale(1.06); }

/* 3. the pager: one even row of square tiles, arrow included */
body.page-id-651 .wdt-pagination, body.page-id-651 .woocommerce-pagination {
  gap: 6px;
}
body.page-id-651 .page-numbers {
  min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid #e0e0e0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center; background: #fff;
}
body.page-id-651 .page-numbers.next, body.page-id-651 .page-numbers.prev { font-size: 0; position: relative; }
body.page-id-651 .page-numbers.next::before, body.page-id-651 .page-numbers.prev::before {
  content: ''; position: absolute; inset: 0;
  background: no-repeat center / 13px 13px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M9 5l7 7-7 7'/></svg>");
}
body.page-id-651 .page-numbers.prev::before { transform: rotate(180deg); }

/* the pager's real markup is UL.page-numbers > LI > A/SPAN.page-numbers -
   not the .wdt-pagination wrapper the theme docs imply (1.6.1) */
body.page-id-651 ul.page-numbers {
  display: flex !important; justify-content: center; align-items: center; gap: 6px;
  list-style: none; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid #eee;
  grid-template-columns: none !important;
}
body.page-id-651 ul.page-numbers li {
  list-style: none; margin: 0; padding: 0; border: none; width: auto; background: none;
}
body.page-id-651 ul.page-numbers li::before, body.page-id-651 ul.page-numbers li::marker { content: none; }
body.page-id-651 ul.page-numbers .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #e0e0e0; background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13.5px; color: #333;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
body.page-id-651 ul.page-numbers .page-numbers:hover { border-color: #0c0c0c; }
body.page-id-651 ul.page-numbers .page-numbers.current { background: #0c0c0c; color: #fff; border-color: #0c0c0c; }
/* the » / « links become clean chevrons */
body.page-id-651 ul.page-numbers .page-numbers.next,
body.page-id-651 ul.page-numbers .page-numbers.prev { font-size: 0; position: relative; padding: 0; width: 40px; }
body.page-id-651 ul.page-numbers .page-numbers.next::before,
body.page-id-651 ul.page-numbers .page-numbers.prev::before {
  content: ''; position: absolute; inset: 0;
  background: no-repeat center / 13px 13px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M9 5l7 7-7 7'/></svg>");
}
body.page-id-651 ul.page-numbers .page-numbers.prev::before { transform: rotate(180deg); }

/* ── round 5w (Rohit) ─────────────────────────────────────────────────────
   the BRANDS box gets arrows in its heading, and the bottom bar is rebuilt:
   the theme puts the page numbers in a UL and the » in a SEPARATE .next-post
   div, which is why the pager looked broken and stacked. */
.page-id-651 .secondary-sidebar .widget h2,
.page-id-651 .secondary-sidebar .widget h5,
.page-id-651 .secondary-sidebar .widget-title { display: flex; align-items: center; justify-content: space-between; }
.aes-brandnav { display: inline-flex; align-items: center; gap: 6px; }
.aes-brandnav__n { font-size: 10px; letter-spacing: 0.04em; color: #999; font-weight: 500; }
/* the theme paints every sidebar button solid black - these arrows need the
   same weight the fold headings needed (1.7.2) */
body.page-id-651 .secondary-sidebar .widget button.aes-brandnav__b {
  appearance: none; border: 1px solid #ddd !important; background: #fff !important; cursor: pointer;
  width: 24px !important; height: 24px; min-height: 0; line-height: 1; padding: 0 !important;
  color: #333 !important; font-size: 14px; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 0;
}
body.page-id-651 .secondary-sidebar .widget button.aes-brandnav__b:hover {
  border-color: #0c0c0c !important; background: #0c0c0c !important; color: #fff !important;
}

/* THE BOTTOM BAR: numbers and the next arrow on ONE centred row */
body.page-id-651 .wdt-product-pagination {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  margin-top: 34px; padding-top: 24px; border-top: 1px solid #eee; min-height: 0;
}
body.page-id-651 ul.page-numbers {
  margin: 0 !important; padding: 0 !important; border: none !important; width: auto !important;
}
body.page-id-651 .wdt-product-pagination .next-post { margin: 0; }
body.page-id-651 .wdt-product-pagination .next-post a {
  width: 40px; height: 40px; border: 1px solid #e0e0e0; background: #fff; color: #333;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px;
}
body.page-id-651 .wdt-product-pagination .next-post a:hover { border-color: #0c0c0c; }

/* ── Front-page mini-shop HEADER, sample 1 "quiet editorial" (Rohit's pick,
   2026-08-20). Scope is the OTHER session's header row c200001 only, with
   their written go-ahead; their card rules (.wdt-aes-minishop in
   mu-plugins/aes-home-cards.css) are untouched by design. ──────────────── */
.elementor-element-c200001 .wdt-heading-title {
  font-size: 30px !important; font-weight: 600 !important; letter-spacing: -0.01em;
}
/* the black slab becomes a text link: that slab is what read as "rough" */
.elementor-element-c200001 .aes-shopall--head a {
  background: none !important; color: #1c1c1c !important; padding: 0 0 2px !important;
  border: none !important; border-bottom: 1px solid #1c1c1c !important; border-radius: 0 !important;
  font-size: 14px !important; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: none !important; min-height: 0 !important; line-height: 1.4;
  display: inline-block;
}
.elementor-element-c200001 .aes-shopall--head a::after { content: ' \203A'; }
.elementor-element-c200001 .aes-shopall--head a:hover { color: #6a6a6a !important; border-bottom-color: #6a6a6a !important; }
/* one hairline under the whole header row, the sample's rule */
/* Elementor writes its own padding for this section, so the rule needs
   !important, and the columns carry their own bottom padding too */
.elementor-element-c200001 { border-bottom: 1px solid #e8e8e8; padding-bottom: 6px !important; margin-bottom: 26px; }
.elementor-element-c200001 > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-bottom: 0 !important; padding-top: 0 !important; align-content: center;
}
/* the heading widget carries its own bottom margin on top of the row padding */
.elementor-element-c200001 .wdt-heading-holder,
.elementor-element-c200001 .wdt-heading-title-wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* ── the mini-shop grid c200007: same card behaviour as the shop page.
   Scoped to that grid; the other sessions' .wdt-aes-minishop cards and the
   New Arrivals row are untouched. ─────────────────────────────────────── */
.elementor-element-c200007 li.product .product-thumb { position: relative; overflow: hidden; }
.elementor-element-c200007 li.product .product-thumb .image { position: relative; display: block; aspect-ratio: 1 / 1; background: #f2f2f2; }
.elementor-element-c200007 li.product .product-thumb .image .primary-image,
.elementor-element-c200007 li.product .product-thumb .image .secondary-image,
.elementor-element-c200007 li.product .product-thumb .image .product-thumb-overlay {
  position: absolute !important; inset: 0; width: 100%; height: 100%;
}
.elementor-element-c200007 li.product .product-thumb .image .primary-image,
.elementor-element-c200007 li.product .product-thumb .image .secondary-image { background: #f2f2f2; }
.elementor-element-c200007 li.product .product-thumb .image img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.45s ease;
}
.elementor-element-c200007 li.product:hover .product-thumb .image img { transform: scale(1.06); }

/* the theme's own button bar is hidden on this grid; the card gets OUR bar
   with the real add-to-cart anchor inside it (see the footer script) */
.elementor-element-c200007 li.product .product-buttons-wrapper { display: none !important; }
.elementor-element-c200007 li.product .product-thumb .aes-mini-cart {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  background: #0c0c0c; transform: translateY(100%); transition: transform 0.22s ease;
}
.elementor-element-c200007 li.product:hover .product-thumb .aes-mini-cart,
.elementor-element-c200007 li.product:focus-within .product-thumb .aes-mini-cart { transform: none; }
@media (hover: none) { .elementor-element-c200007 li.product .product-thumb .aes-mini-cart { transform: none; } }
.elementor-element-c200007 li.product .product-thumb .aes-mini-cart a {
  display: block !important; width: 100% !important; margin: 0 !important; padding: 13px 0 !important;
  background: #0c0c0c !important; color: #fff !important; border: none !important; border-radius: 0 !important;
  text-align: center; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  min-height: 0 !important; line-height: 1.2;
}
.elementor-element-c200007 li.product .product-thumb .aes-mini-cart a::after { display: none; }

.elementor-element-c200007 li.product .yith-wcqv-button { display: none !important; }
/* NOTE: do NOT hide .product-buttons-wrapper.product-icons wholesale here -
   on this grid that same bar also carries the Add To Cart link
   (.wcct_btn_wrapper), so hiding it takes the button with it. Hide the icon
   wrappers only, which is what the rules above do. */
.elementor-element-c200007 li.product .product-thumb .product-buttons-wrapper .wcct_btn_wrapper { display: block !important; width: 100%; }

/* THE MINI-SHOP PAGER (.aes-pager, another session's markup): its buttons
   render white-on-white and stretch to ~78px, so the row reads as five empty
   boxes. Same shape as the shop pager. */
.aes-pager { display: flex !important; justify-content: center; align-items: center; gap: 6px; }
.aes-pager button {
  min-width: 40px !important; width: auto !important; height: 40px; padding: 0 12px !important;
  border: 1px solid #e0e0e0 !important; background: #fff !important; color: #333 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13.5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 0; box-shadow: none;
}
.aes-pager button:hover { border-color: #0c0c0c !important; }
.aes-pager button.cur { background: #0c0c0c !important; color: #fff !important; border-color: #0c0c0c !important; }

/* ── round 6b: the front page's bands must carry the SAME width (Rohit).
   Measured before touching anything: New Arrivals container 1600, Browse
   Categories 1560, but the mini-shop sat at 1400 starting 260px in, and the
   perks strip's four items are fixed 385px so they stopped at 1195 of 1600
   and the row read left-heavy. ─────────────────────────────────────────── */

/* the mini-shop's width is set in the Customizer block (it needs the
   .elementor-507 prefix to beat Elementor's own boxed cap); nothing here. */

/* the perks strip: four items spread across the full band instead of
   stopping three-quarters of the way */
.elementor-element-60d4de8 .wdt-content-items-wrapper,
.elementor-element-60d4de8 .wdt-content-items,
.elementor-element-60d4de8 .swiper-wrapper {
  display: flex !important; width: 100% !important; gap: 20px;
}
.elementor-element-60d4de8 .wdt-content-item {
  flex: 1 1 0 !important; width: auto !important; max-width: none !important; margin: 0 !important;
}
/* The perks band is the one section on 507 that is genuinely full bleed:
   measured 1440 / 1600 / 1920 at those three viewports while every sibling is
   boxed (1080 at 1440, 1640 at 1920). That is exactly what Rohit meant by the
   perks not carrying "the same weight" as New Arrivals and Browse Categories.
   The 1px rules top and bottom keep spanning the page (they read as a divider);
   only the CONTENT is pulled into the boxed column. The numbers below are not
   invented, they mirror the site's own boxed cascade from post-5.css, every
   breakpoint included, so this band tracks the siblings at any width rather
   than at the one width someone happened to measure. */
.elementor-507 .elementor-element-60d4de8 > .elementor-container{
  max-width:1640px !important; margin-left:auto !important; margin-right:auto !important;
}
@media (max-width:1540px){.elementor-507 .elementor-element-60d4de8 > .elementor-container{max-width:1080px !important}}
@media (max-width:1280px){.elementor-507 .elementor-element-60d4de8 > .elementor-container{max-width:900px !important}}
@media (max-width:1024px){.elementor-507 .elementor-element-60d4de8 > .elementor-container{max-width:710px !important}}
@media (max-width:767px){.elementor-507 .elementor-element-60d4de8 > .elementor-container{max-width:420px !important}}
@media (max-width:479px){.elementor-507 .elementor-element-60d4de8 > .elementor-container{max-width:290px !important}}

/* ── round 6c (Rohit 2026-08-20): "a little bit of padding between the bottom
   of the products section and the 4 sections under it". The store section's
   own bottom padding was only 16px on desktop (post-507.css: 70/0/16/0), so
   the pager finished 12-16px above the perks strip and the two bands read as
   one. Raised to sit under the section's TOP padding rather than to a number
   picked by eye: 70 top / 56 bottom, and the same ratio down the cascade.
   Every breakpoint is covered, so this tracks the siblings at any width.
   This is section padding only. It does not move the pager relative to the
   brands panel, so the homepage chat's alignRail (which lands the panel bottom
   exactly on the pager bottom) is unaffected: verified 0 at all three widths
   after this change. ─────────────────────────────────────────────────────── */
.elementor-507 .elementor-element.elementor-element-b900000{padding-bottom:56px !important}
@media (max-width:1540px){.elementor-507 .elementor-element.elementor-element-b900000{padding-bottom:44px !important}}
@media (max-width:1280px){.elementor-507 .elementor-element.elementor-element-b900000{padding-bottom:36px !important}}
@media (max-width:767px){.elementor-507 .elementor-element.elementor-element-b900000{padding-bottom:28px !important}}

/* ── round 6f (Rohit 2026-08-21): "on the bottom of the homepage, we have the
   one we like the most. Let's just use that exact one. You don't need to
   reinvent the wheel."
   So the hand-built .aes-perks replica AND its five samples are DELETED, and
   mu-plugins/aes-perks-strip.php now renders the real Elementor section from
   page 507 on every page. Only one rule is needed here.

   Why: outside page 507's body the Elementor container is no longer in the same
   containing block, and width:auto resolved to ZERO (measured: 0px wide, shoved
   to the right edge, the four items collapsed to ~95px each, at both 1440 and
   1920). Every CSS rule matching it was byte-identical on both pages, so this is
   the containing block, not a stylesheet. width:100% restores exactly what the
   homepage computes (1080 at 1440, 1640 at 1920) and lets the existing max-width
   cascade do the rest. ──────────────────────────────────────────────────────── */
.aes-perks-host .elementor-container{ width:100%; }

/* ── round 6g (Rohit 2026-08-21): the pager dots. "I don't like this whole
   double dots in these numbers ... I agree that it should stop; I think there's
   a nicer way to showcase it." With 8 pages the dots are now gone entirely
   (mu-plugins/aes-shop-pagination.php shows every page up to 12). When a list is
   long enough to genuinely need truncation, the gap should read as a gap, not as
   a boxed button you can click. ─────────────────────────────────────────────── */
.wdt-product-pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots,
ul.page-numbers li .page-numbers.dots{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  color:#b4b4b4; min-width:22px; width:auto; padding:0 2px; cursor:default;
  letter-spacing:.14em;
}

/* ── round 6h (Rohit 2026-08-21): "whenever I click a new page, it flashes the
   incorrect one for a split second". The move-it-back fix now runs before paint
   (see aes-front-store-grid.php), which is the real fix. This is the safety net:
   if a frame ever does slip through with the AJAX markup still in place, it
   looks IDENTICAL rather than wrong. Same declarations as the .product-thumb
   block above, aimed at the AJAX nesting (.product-details). Belt and braces on
   purpose: a flash is a timing bug, and timing bugs come back. ────────────── */
body.page-id-651 ul.products li.product .product-details .product-buttons-wrapper.product-button .wc_inline_buttons,
body.page-id-651 ul.products li.product .product-details .product-buttons-wrapper.product-button .wcct_btn_wrapper,
body.page-id-651 ul.products li.product .product-details .product-buttons-wrapper.product-button .wdt-button,
body.page-id-651 ul.products li.product .product-details .product-buttons-wrapper.product-button a {
  display: block !important; width: 100% !important; max-width: none;
  text-align: center; border-radius: 0; margin: 0;
}
body.page-id-651 ul.products li.product .product-details .product-button .wdt-button {
  padding: 13px 0; background: #0c0c0c; color: #fff;
}
body.page-id-651 ul.products li.product .product-details .product-button .wdt-button::after,
body.page-id-651 ul.products li.product .product-details .product-button a::after { display: none; }

/* the incoming grid is held until its photos have decoded, then faded in
   (see aes-shop-pagination.php). Without this the new page showed 16 empty grey
   boxes for up to a second. */
/* !important is needed: without it the class had NO effect (measured, opacity
   stayed 1), because the theme's own product-grid animation styles the same
   property at higher weight. */
body.page-id-651 ul.products{ transition:opacity .2s ease; }
/* Hiding must be INSTANT and revealing may fade. With a transition on the hide
   too, the 200ms fade-out was itself showing the half-built page on its way
   out, which is the flash we are removing. */
body.page-id-651 ul.products.aes-grid-loading,
ul.products.aes-grid-loading{ opacity:0 !important; transition:none !important; }

/* ── round 6j (Rohit 2026-08-21): brand and category filter the grid in place,
   and the sidebar has to SHOW what is on. A selected tile must read as selected
   at a glance without hiding a brand logo, so the mark is an ink border and
   ink text, never a filled black tile (half the tiles are logos on white).
   ─────────────────────────────────────────────────────────────────────────── */
body.page-id-651 .widget_aes_brands_widget ul.aes-brands a.aes-on{
  border-color:#0c0c0c !important;
  box-shadow:inset 0 0 0 1px #0c0c0c;
  background:#fff;
}
body.page-id-651 .widget_aes_brands_widget ul.aes-brands a.aes-on span{
  color:#0c0c0c; font-weight:600;
}
body.page-id-651 .widget_aes_brands_widget ul.aes-brands a{ transition:box-shadow .12s ease, border-color .12s ease; }

/* the clear control only earns its space while a filter is on */
.aes-filter-clear{ display:none; }
body.aes-filtered .aes-filter-clear{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid #e0e0e0; padding:10px 12px; margin:0 0 18px;
  font-size:13px; color:#0c0c0c;
}
.aes-filter-clear__what{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aes-filter-clear button{
  border:1px solid #0c0c0c !important; background:#0c0c0c !important; color:#fff !important;
  font-family:inherit; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; cursor:pointer; border-radius:0; line-height:1; min-height:0;
}
.aes-filter-clear button:hover{ background:#333 !important; border-color:#333 !important; }
.aes-noresults{ width:100%; padding:50px 0; text-align:center; color:#777; font-size:15px; list-style:none; }

/* ── round 7 (2026-08-22): the category MENU, estetik.pl's shape. Rows, not a
   dropdown: with a dozen categories there is no reason to hide them, and their
   rail leads with category and treats brand as a way of narrowing once you are
   already somewhere. Quiet type, a count on the right so weight is visible at a
   glance, and a chevron only where there is something to drill into. ──────── */
.aes-catmenu{ list-style:none; margin:0; padding:0; }
.aes-catmenu li{ margin:0; }
/* !important because the theme styles every widget list link (display and
   padding), which was collapsing the row and jamming the count against the name */
.aes-catmenu__link{
  display:flex !important; align-items:center; gap:10px; width:100%;
  padding:8px 4px;
  font-size:14px; line-height:1.3; color:#0c0c0c !important; text-decoration:none;
}
/* No rules BETWEEN the rows. A border on every row but the last reads as an
   arbitrary line when a category has two children ("why is there a line under
   Korean Skincare and not Dental Materials?"). Spacing separates them, and the
   only rule on screen is the one under the category you are in, which means
   something. Colour and weight are forced because the theme paints widget links
   its own way, which is what made one row look bolder than the other. */
.aes-catmenu__link,
.aes-catmenu__link span{ font-weight:400; }
.aes-catmenu__link:hover{ color:#0c0c0c; background:#fafafa; }
.aes-catmenu__name{ flex:1 1 auto; min-width:0; }
.aes-catmenu li a.aes-catmenu__link{ padding:9px 4px; }
/* the count is information, not decoration, so it stays quiet until it matters */
.aes-catmenu__n{ flex:0 0 auto; font-size:12px; color:#9a9a9a; font-variant-numeric:tabular-nums; }
.aes-catmenu__more{ flex:0 0 auto; color:#bdbdbd; font-size:15px; line-height:1; }
.aes-catmenu__link.is-on,
.aes-catmenu__link.is-on span{ font-weight:600; }
.aes-catmenu__link.is-on .aes-catmenu__n{ color:#0c0c0c; }
.aes-catmenu__link.is-on .aes-catmenu__name{ box-shadow:inset 0 -1px 0 #0c0c0c; }

.aes-catmenu__back{
  display:inline-block; margin:0 0 10px; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#6c6e6e; text-decoration:none;
}
.aes-catmenu__back:hover{ color:#0c0c0c; }
.aes-catmenu__here{
  display:flex; align-items:baseline; gap:8px;
  padding:0 4px 10px; margin:0 0 6px; border-bottom:2px solid #0c0c0c;
}
.aes-catmenu__here a{ flex:1 1 auto; font-size:15px; font-weight:600; color:#0c0c0c; text-decoration:none; }
.aes-catmenu__here span{ font-size:12px; color:#9a9a9a; font-variant-numeric:tabular-nums; }
.aes-catmenu__leaf{ margin:10px 4px 0; font-size:13px; color:#9a9a9a; }

/* ── round 7b (2026-08-22): "when I click on a category, the whole page reloads
   and it doesn't feel seamless". Nothing was reloading, but blanking the grid
   while the new one loaded LOOKED like a reload. The products now stay on screen
   and dim instead, so the page never goes away. ──────────────────────────── */
body.page-id-651 ul.products.aes-busy{
  opacity:.38; pointer-events:none; transition:opacity .12s ease;
}
body.page-id-651 ul.products{ transition:opacity .18s ease; }

/* "make it more distinct when we are inside a specific category ... add a
   heading at the top". Same quiet editorial voice as the rest of the shop:
   crumb, name, count. */
.aes-cathead{ margin:0 0 22px; }
.aes-cathead__crumb{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9a9a9a;
  margin:0 0 8px;
}
.aes-cathead__crumb a{ color:#6c6e6e; text-decoration:none; }
.aes-cathead__crumb a:hover{ color:#0c0c0c; }
.aes-cathead__crumb span{ margin:0 4px; color:#c9c9c9; }
.aes-cathead__crumb em{ font-style:normal; color:#0c0c0c; }
.aes-cathead__title{
  margin:0; font-size:28px; line-height:1.15; font-weight:500; color:#0c0c0c;
  letter-spacing:-.01em;
}
.aes-cathead__meta{
  margin:6px 0 0; font-size:13px; color:#9a9a9a; font-variant-numeric:tabular-nums;
}
@media (max-width:767px){ .aes-cathead__title{ font-size:23px; } }

/* ── round 7c: an empty result must say so. A brand and a category that share no
   products (CG Dimono inside Cosmeceuticals) used to leave a blank white column
   under a heading claiming 105 products. ─────────────────────────────────── */
.aes-empty{ padding:44px 0 10px; max-width:52ch; }
.aes-empty__t{ margin:0 0 6px; font-size:17px; color:#0c0c0c; }
.aes-empty__s{ margin:0; font-size:14px; color:#7d7d7d; }
/* The theme paints EVERY <button> as a filled black slab, which turned this
   inline "clear the filters" into a giant block sitting across the sentence.
   That trap has caught this project four times now (fold headings, the search
   submit, the brand arrows, the pager), so everything here is stated. */
.aes-empty__clear,
.aes-empty .aes-empty__clear{
  border:0 !important; background:none !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; font:inherit !important;
  color:#0c0c0c !important; text-decoration:underline; cursor:pointer;
  min-height:0 !important; height:auto !important; width:auto !important;
  line-height:inherit !important; letter-spacing:inherit !important;
  text-transform:none !important; border-radius:0 !important; display:inline !important;
}
.aes-empty__clear:hover{ background:none !important; color:#6c6e6e !important; }
.aes-cathead__narrowed{ color:#b0b0b0; }

/* ── round 7d: brands scoped to the category, with how many products each holds
   there. The count sits quietly in the corner of the tile: it must not fight the
   brand logos, which are the reason the tiles exist. ─────────────────────────── */
body.page-id-651 .widget_aes_brands_widget ul.aes-brands a{ position:relative; }
.aes-brand-n{
  position:absolute; top:3px; right:5px;
  font-size:10px; line-height:1; color:#b0b0b0; font-variant-numeric:tabular-nums;
  pointer-events:none;
}
body.page-id-651 .widget_aes_brands_widget ul.aes-brands a.aes-on .aes-brand-n{ color:#0c0c0c; }
/* a brand switched on that is not in this category: kept so it can be switched
   off, but shown as the odd one out rather than silently reading as stocked */
.aes-brand-n:empty::after{ content:"0"; }