/* ALOFTAURA — logo menu bar (.header-icon-box) corrections.

   Goes either in Elementor → Site Settings → Custom CSS, or inside the
   <style> of aura-bar-paste.html — see README.txt. Either way it must land
   after the theme's own rules, which both routes do.

   Housekeeping: the old "cart has items: invert the disc" block in Site
   Settings (the `body.aura-cart-full …` rules) is dead once this is in — the
   JS strips that class — but it is worth deleting.

   The bar has two looks and every state rule has to answer to both:
     .header-icon-box.on-top      black disc, white glyph  (top of a page)
     .header-icon-box / .on-bottom  white / transparent disc, black glyph
   `.ic-*` discs carry inline `z-index:2`, so their ::before/::after live in
   the disc's own stacking context — that is why the badge below can sit
   above ::after (z-index 1) with a plain z-index. */


/* ── 0. The face ──────────────────────────────────────────────────────
   Every `font:` shorthand below used to hard-code
   `"Helvetica Neue", Helvetica, Arial` — fourteen of them, and because they
   are the SHORTHAND rather than `font-family`, no separate rule could ever
   correct them: the shorthand resets the family every time it is used.

   So the bar and its nine cards were the one part of the storefront that was
   never going to be Intrepid, no matter what was done elsewhere.

   `Intrepid` first and `intrepid-regular` second because the site carries
   both names — see aura-mobile.css section 13, which declares the face and
   explains why the theme's own @font-face has been supplying nothing at all. */
:root {
  --aura-face: "Intrepid", "intrepid-regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* AND THE FACE ITSELF, declared here as well as in aura-mobile.css section 13,
   because of load order — this is the copy that actually wins.

   The child theme's @font-face is broken: `format('ttf')` is not a valid
   token, so its `src` parses to nothing and the face has never loaded. The
   full account is in aura-mobile.css section 13. Correcting it from Site
   Settings alone is NOT enough, and the reason is measured:

     index 17   elementor-post-4-css   <- Site Settings, where section 13 lands
     index 38   style-style-css        <- the child theme's BROKEN rule
     index 89   aloftaura-bar-css      <- this file, last on the page

   When two @font-face rules declare the same family at the same weight and
   style, the LAST one wins — so the broken rule at 38 overrides the correct
   one at 17 and `intrepid-regular` goes on resolving to nothing. The sweep
   caught exactly that: at one width the `Intrepid` alias measured 455.2px
   while `intrepid-regular` was still 516.6px, the fallback.

   This copy sits at index 89, after the broken one, so it is the copy that
   makes the NAME work. */
@font-face {
  font-family: "intrepid-regular";
  src: url("https://aloftaura.com/wp-content/uploads/intrepid.woff2") format("woff2"),
       url("https://aloftaura.com/wp-content/uploads/2024/11/Intrepid-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Intrepid";
  src: url("https://aloftaura.com/wp-content/uploads/intrepid.woff2") format("woff2"),
       url("https://aloftaura.com/wp-content/uploads/2024/11/Intrepid-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}


/* ── 1. Touch feedback ────────────────────────────────────────────────
   Every tappable thing in the bar was showing the platform's default
   rgba(51,181,229,.4) flash (measured on the live shop page). Kill it, and
   give the press a real affordance instead: the disc's ::after already has
   `transition: all 200ms`, so scaling it reads as a soft pulse under the
   thumb without touching `transform` on the disc itself — the fan positions
   (.header-icon-box.clicked .ic-*) own that property with !important. */
.header-icon-box,
.header-icon-box *,
.middle-logo,
.container_mouse,
.container_mouse a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.header-icon-box .header-icon > div,
.middle-logo {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.header-icon-box .header-icon > div:active::after {
  transform: scale(1.22);
}

/* The theme's :hover rule sticks after a tap on touch devices — the icon
   stays enlarged and inverted until you tap elsewhere. Scope it to devices
   that actually have a pointer. */
@media (hover: none) and (pointer: coarse) {
  .header-icon-box .header-icon > div:hover::after {
    background: inherit;
    transform: scale(1);
  }
  .header-icon-box .header-icon > div:hover img { transform: none; }
  .header-icon img:hover { height: auto !important; }
}


/* ── 2. Cart: keep the outline glyph, carry the count as a number ──────
   The old treatment swapped the artwork (`content: url(Cart-Filled.svg)`),
   flipped the disc to white and ran `filter: brightness(0)` over it. That
   last one is why it came out as a dark blob rather than a cart: these
   icons are authored with a luminance mask, and a CSS filter resolves
   BEFORE the mask, so brightness(0) drives the mask to zero and collapses
   the artwork. Never recolour them with filter().

   So: leave the glyph exactly as it is in both looks, and say "3" on it. */
body.aura-cart-full .ic-cart img,
.ic-cart img {
  content: normal !important;
}

/* The disc colours the old block forced are NOT undone here on purpose.
   `revert` would roll them back to the browser default (transparent), not to
   the theme's black/white, so the cure would look worse than the disease — and
   the two looks want opposite values, which one reset cannot express. Instead
   aura-bar.js removes `aura-cart-full` from <body> on every cart sync, so the
   block simply never matches. Delete it from Site Settings anyway; nothing
   adds that class any more and the badge is the state now. */

/* `.ic-cart { overflow: visible }` alone is not enough, and this is why the
   badge kept arriving with its top cut off — a black notch across the pill.
   The clip is one level up: **`.header-icon-outer` computes to
   `overflow: auto`**, it is 50px tall, and the badge sits at `top: -3px`, so
   3px of it is outside the scroll box and gets cut. The badge's containing
   block is `.ic-cart`, and `.header-icon-outer` is in that chain, so it
   clips.

   The same property cuts the ICONS at the top in the row states. There the
   discs are still in flow inside that 50px box, so anything the fan or a
   hover lifts above it is trimmed at the outer's edge — most visible in the
   home page's first section, where the bar sits over the hero.

   `visible` is safe here: the row is nine items across, 360px at a 390px
   screen and 320px at a 320px one, so there is nothing to scroll and the
   `auto` was never doing any work. Section 5 already pins this element to
   `width: 100%` in the clicked row states, which is what would otherwise
   have made it overflow. */
.header-icon-box .header-icon-outer { overflow: visible !important; }

.ic-cart { overflow: visible; }

/* The old ::before count badge was retired 2026-10-15: it squashed the cart
   disc's frosted ::before into a 15px black square. The .aura-count span is
   the only badge now. */


/* ── 3. The logo hint ─────────────────────────────────────────────────
   Was a grey pill reading "CLICK LOGO SHOW MENU". Text only, and the copy
   is fixed in aura-bar.js (it pre-creates the node, so the theme's own
   inserter finds one already there and never adds the old wording). */
.menu-text {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font: 600 11px/1.2 var(--aura-face);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0c0c0e;
  opacity: 0.62;
}

.header-icon-box.on-top .menu-text,
.header-icon-box.on-bottom .menu-text {
  color: #fff;
}


/* ── 4. The cards the bar opens ───────────────────────────────────────
   A card is anything carrying .aura-card, and these rules own all of it:
   where it sits, how big it is if this file built it, and how it moves.

   That one decision is what keeps the JS free of geometry. The theme
   centres its own six panels with `left: 51%` + `translate(-51%, -50%)`,
   each with its own height; taking the position over here means a state
   can be written as a whole transform in CSS instead of being assembled
   in JS out of whatever matrix the theme happened to compute. (The 1%
   nudge goes with it — these are centred now.)

   Four states, always paired with .aura-card so they win at equal
   specificity wherever the theme's rules landed:

     .is-pre    the frame before it arrives, transitions off
     .is-in     up and interactive
     .is-out    leaving, because you pressed it again, scrolled, or Esc'd
     .is-swap   leaving because a DIFFERENT option was picked

   .is-out and .is-swap differ on purpose. A dismissal drops the card back
   and down — it retreats the way it came. A swap sends it FORWARD, scaling
   past you as the next card rises from behind it, which is the one shape
   that reads as the same card changing rather than as two unrelated boxes
   trading places. */

.aura-card {
  position: fixed !important;
  left: 50% !important;
  top: 46% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999;
  /* Blur is in the transition as well as opacity and transform: the card is
     GLASS, and glass that arrives already sharp reads as a flat rectangle
     fading up. Coming out of a 7px blur it resolves — the same language the
     scroll scrub (section 6) already uses on the way out, so arriving and
     leaving are the same material behaving the same way. */
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Transitions off: this is the state the card is HELD at for one frame, not
   a state it travels to. Anything that forces a style flush before it lands
   would otherwise be a place the browser animates away from. */
.aura-card.is-pre {
  opacity: 0;
  pointer-events: none;
  transition: none;
  filter: blur(7px);
  transform: translate(-50%, -50%) scale(0.94) translateY(10px) !important;
}

.aura-card.is-in {
  opacity: 1;
  filter: blur(0px);
}

.aura-card.is-out {
  opacity: 0;
  pointer-events: none;
  filter: blur(5px);
  transform: translate(-50%, -50%) scale(0.96) translateY(8px) !important;
  transition-duration: 200ms, 260ms, 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* Under the arriving card — the theme gives all six panels z-index: 999. */
.aura-card.is-swap {
  opacity: 0;
  pointer-events: none;
  z-index: 998;
  filter: blur(5px);
  transform: translate(-50%, -50%) scale(1.06) !important;
  transition-duration: 170ms, 200ms, 170ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* ── 4c. The soft keyboard ────────────────────────────────────────────
   `vh` is the LAYOUT viewport, and on iOS the layout viewport does not change
   when the keyboard comes up — only the visual one does. So a card sized and
   centred in `vh` keeps its full height and its 46% centre while the keyboard
   takes the bottom half of the screen: the chat composer, the search field and
   the account form all end up behind it, which is precisely when they matter.

   `dvh` is the dynamic viewport — it tracks the keyboard. Same numbers, so
   nothing moves when no keyboard is up; the whole change is that the card now
   shrinks and re-centres when one is.

   Kept inside `@supports` with the `vh` rules above left intact as the
   fallback, so a browser without `dvh` gets exactly what it got before rather
   than nothing. */
@supports (height: 100dvh) {
  .aura-card {
    top: 46dvh !important;
  }

  .aura-card-built {
    max-height: 66dvh;
  }

  @media only screen and (max-width: 768px) {
    body.home .home-category-menu,
    body:not(.home) .home-category-menu,
    body.home .home-menuquicklinks,
    body:not(.home) .home-menuquicklinks {
      max-height: min(84dvh, calc(100dvh - 150px)) !important;
    }

    /* Chat is the one that is always focused when the keyboard is up — it is
       the only card whose whole purpose is typing — so it gets the tightest
       budget of the three and gives up its floor entirely. */
    body.home .home-chatform,
    body:not(.home) .home-chatform {
      min-height: 0 !important;
      max-height: min(84dvh, calc(100dvh - 120px)) !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .aura-card,
  .aura-card.is-out,
  .aura-card.is-swap {
    transition-duration: 1ms, 1ms, 1ms;
  }
  .aura-card.is-pre,
  .aura-card.is-out,
  .aura-card.is-swap { filter: none; }
}


/* ── 4b. Cards this file builds ───────────────────────────────────────
   Only ever used off the home page, where the theme renders no panels at
   all. Same grey, same radius as the site's own cards, so the two routes
   are indistinguishable to look at. */
.aura-card-built {
  width: min(88vw, 460px);
  max-height: 66vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #e8e8eb;
  border-radius: 10px;
  box-sizing: border-box;
}

.aura-card-body { padding: 20px 26px; }

.aura-card-link,
.aura-card-note {
  display: block;
  padding: 13px 2px;
  font: 600 12px/1.25 var(--aura-face);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0c0c0e;
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 12, 14, 0.12);
}

.aura-card-link:last-child { border-bottom: none; }
.aura-card-link:hover,
.aura-card-link:focus-visible { color: #6b6b73; outline: none; }

/* A child category, under its parent — the shape the home page's own
   category panel shows, and the only thing that tells three categories all
   named "T-Shirts" apart. */
.aura-card-link.is-sub {
  padding-left: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #55555c;
}

.aura-card-note {
  border-bottom: none;
  color: #6b6b73;
}

.aura-card-search { display: flex; gap: 8px; padding: 6px 0; }

.aura-card-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  background: #fff;
  color: #0c0c0e;
  font: 400 15px/1 var(--aura-face);
}

.aura-card-search input:focus { outline: 2px solid #0c0c0e; outline-offset: 0; }

.aura-card-search button {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 6px;
  background: #0c0c0e;
  color: #fff;
  font: 600 11px/1 var(--aura-face);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Ask AI mounts straight into this one, so it gets no inner padding — the
   panel brings its own — only a floor so it is not a hairline while the
   bundle is still on its way. */
.aura-card-chat { min-height: 96px; }


/* ── 5. The bar in its row states ─────────────────────────────────────
   Two measured faults, both of which made options simply not work. Neither
   is about looks; both are about where a tap lands.

   a) THE LOGO IS INVISIBLE IN A ROW STATE AND STILL TAKES TAPS. At the top
      and the bottom of every page the theme parks the mark with
      `transform: translate(-50%, 100%); opacity: 0` — but it is still an
      86x80 box sitting at the middle of the row, i.e. squarely over
      CATEGORY, SEARCH and ACCOUNT. Measured at the foot of the shop page:
      those three fail a hit test at their own centres and the other six
      pass. Three of the nine options were simply dead there.

   b) TAPPING THE LOGO WHILE THE BAR IS ALREADY A ROW PUSHES ITS ENDS OFF
      THE SCREEN. `.clicked` widens .header-icon-outer from 100% to its
      content (measured: 390px -> 630px) and each item from 40px to 70px.
      Collapsed that is right — the fan transforms pull the icons back into
      an arc around the mark. In a row there are no fan transforms (the
      theme's own `translate(0,0)` wins there), so nothing pulls them back
      and a 630px row is left centred on a 390px phone: HOME, SHOP and
      OTHERS fall off the edges. The row IS the nav in that state, so there
      is nothing for the press to expand — it just has to leave it alone.

   c) THE ROW IS 720px WIDE INSIDE A 600px SCREEN. Measured live across
      fourteen ratios: at 320-480 the outer is 100% of the viewport and each
      item is 35-40px, but from 481 up the theme switches to 80px items and
      the outer becomes a fixed 720px — so at **600px the outer sits at
      x=-60 and two of the nine options are off the screen entirely.** It is
      correct again at 768 and above, which is why it has never been seen on
      a phone or a desktop; the whole fault lives in the tablet band.

      Both faults have the same answer, and section 17 needs it anyway: the
      row's geometry is DECLARED here, once, for every state, instead of
      being inherited from three different theme rules (80px base, 53px in
      `.on-bottom`, 40px under 480px). Nine items sharing a known width is
      what lets section 17 express the row as a transform — `--aura-pitch`
      below IS this width, and the fan's dx is measured in it. */

.header-icon-box.on-top .middle-logo,
.header-icon-box.on-bottom .middle-logo {
  pointer-events: none;
}

/* THE ROW, DECLARED. Unconditional on purpose — section 17 anchors every
   disc to the bar in all three states and reaches its row position with
   `--ix * --aura-pitch`, so the pitch has to be the same number in the
   middle state as in the two row states or the discs land off their labels.

   `min(100vw, 720px)` keeps the desktop row exactly the 720px it already
   is and stops the 481-719px band overflowing. `space-between` + `flex:1 1 0`
   is section 19's own arrangement, lifted here so it applies in every state
   rather than only where the labels show. */
body .header-icon-box .header-icon-outer {
  width: var(--aura-outer-w) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: space-between !important;
}

body .header-icon-box .header-icon {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
}


/* ── 6. The scroll fade ───────────────────────────────────────────────
   The dismissal is scrubbed against the scroll rather than fired by it:
   --aura-k is written from JS on every frame the page moves, 1 while the
   card is whole and 0 at the point it is let go. Everything below reads
   that one number.

   Transitions are OFF here on purpose. --aura-k is already a position
   sampled once per frame, so transitioning it would put the card a beat
   behind the finger — the fade would keep running after the scroll had
   stopped, which is exactly the lag the theme's slideUp had.

   The blur is what makes it read as a dissolve rather than a dimmer: at
   full scrub the card is 5px soft and 3% smaller, so it recedes as it
   thins instead of just going pale. Kept to blur + opacity + transform,
   all compositor properties, so the scrub costs no layout. */
.aura-card.is-fading {
  /* Short, not absent. The scrub samples once per frame, and jumping straight
     to each sample is what makes a fast flick look like the card is strobing
     rather than dissolving; a 110ms ease lets the browser carry the value
     between samples. It stays well under the ~160ms that would read as the
     card lagging behind the finger, and it is the same curve the card arrives
     on, so a fade that reverses does not change character halfway. */
  transition: opacity 110ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 110ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 110ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  opacity: var(--aura-k, 1);
  filter: blur(calc((1 - var(--aura-k, 1)) * 5px));
  transform: translate(-50%, -50%)
             scale(calc(0.97 + (0.03 * var(--aura-k, 1))))
             translateY(calc((1 - var(--aura-k, 1)) * 6px)) !important;
}

/* A card being scrubbed away should not swallow taps meant for the page
   moving underneath it. Scrolling back restores the card and, with it,
   pointer events — .is-fading comes off the moment the scrub is released. */
.aura-card.is-fading { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .aura-card.is-fading { filter: none; }
}


/* ── 7. The basket card ───────────────────────────────────────────────
   Contents are a live WooCommerce fragment, and they arrive as Elementor
   Pro Menu Cart markup OUTSIDE Elementor's own widget — so they land with
   none of the widget's CSS and everything here has to be supplied. That is
   why these selectors look like someone else's: they are.

   Three states, one card: loading (the fragment has been asked for and has
   not come back), empty, and filled. Only one is ever visible. */
.aura-cart-none,
.aura-cart-skel { display: none; }

.aura-cart.is-loading .aura-cart-live,
.aura-cart.is-empty .aura-cart-live { display: none; }
.aura-cart.is-loading .aura-cart-skel { display: block; }
.aura-cart.is-empty   .aura-cart-none { display: block; }
.aura-cart.is-empty   .aura-cart-go .is-primary { display: none; }

.aura-cart-none {
  margin: 0;
  padding: 18px 2px 22px;
  font: 500 12px/1.4 var(--aura-face);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b73;
}

.aura-cart .elementor-menu-cart__products,
.aura-cart .cart_list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.aura-cart .elementor-menu-cart__product,
.aura-cart .cart_item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(12, 12, 14, 0.12);
}

.aura-cart .elementor-menu-cart__product:last-child,
.aura-cart .cart_item:last-child { border-bottom: none; }

.aura-cart .elementor-menu-cart__product-image,
.aura-cart .cart_item img {
  grid-column: 1;
  width: 56px;
  height: 70px;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #d9d9de;
}

.aura-cart .elementor-menu-cart__product-image img,
.aura-cart .cart_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aura-cart .elementor-menu-cart__product-name,
.aura-cart .elementor-menu-cart__product-name a {
  font: 600 11px/1.35 var(--aura-face);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0c0c0e;
  text-decoration: none;
}

.aura-cart .elementor-menu-cart__product-price,
.aura-cart .quantity {
  font: 500 12px/1.3 var(--aura-face);
  color: #55555c;
  letter-spacing: 0.04em;
}

/* Woo's remove control is an <a> with a × in it — give it a hit area
   rather than leaving a 10px glyph on a touch screen. */
.aura-cart .elementor-menu-cart__product-remove,
.aura-cart .remove {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #6b6b73 !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.aura-cart .elementor-menu-cart__product-remove:hover,
.aura-cart .remove:hover { background: rgba(12, 12, 14, 0.08); color: #0c0c0e !important; }

.aura-cart .elementor-menu-cart__subtotal,
.aura-cart .total {
  display: flex;
  justify-content: space-between;
  padding: 14px 2px 4px;
  margin: 0;
  border-top: 1px solid rgba(12, 12, 14, 0.18);
  font: 600 12px/1 var(--aura-face);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0c0c0e;
}

/* Elementor's own buttons come back inside the fragment; the card brings
   its own pair, so hide the duplicates rather than style two sets. */
.aura-cart .elementor-menu-cart__footer-buttons,
.aura-cart .woocommerce-mini-cart__buttons { display: none; }

.aura-cart-go {
  display: flex;
  gap: 10px;
  padding: 14px 0 2px;
}

.aura-btn {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 6px;
  border: 1px solid #0c0c0e;
  background: transparent;
  color: #0c0c0e;
  font: 600 11px/1 var(--aura-face);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.aura-btn.is-primary { background: #0c0c0e; color: #fff; }
.aura-btn:hover { transform: translateY(-1px); }
.aura-btn:not(.is-primary):hover { background: rgba(12, 12, 14, 0.06); }
.aura-btn:active { transform: translateY(0); }


/* ── 8. Search, answering while you type ──────────────────────────────
   The field keeps the same shape it had as a submit-only form; everything
   under it is new. */
.aura-card-search { display: block; padding: 6px 0; }

.aura-find-field { position: relative; display: block; }

.aura-find-in {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 44px 0 14px;
  border: none;
  border-radius: 6px;
  background: #fff;
  color: #0c0c0e;
  font: 400 15px/1 var(--aura-face);
  -webkit-appearance: none;
  appearance: none;
}

.aura-find-in:focus { outline: 2px solid #0c0c0e; outline-offset: 0; }
.aura-find-in::-webkit-search-cancel-button { -webkit-appearance: none; }

/* The spinner is the whole loading affordance at the field: a ring that
   only exists while a request is in flight. It sits inside the field's own
   padding, so nothing reflows when it appears.

   `.is-busy` is set on the CARD, not on the form — build() wraps whatever it
   is given in .aura-card-body, so the form is two levels down from the node
   the JS holds. Written against `.aura-card-search.is-busy` these rules
   matched nothing and the spinner never appeared, while the skeleton (plain
   innerHTML) did — which is what made it look like only half the loading
   state was working. */
.aura-find-spin {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(12, 12, 14, 0.18);
  border-top-color: #0c0c0e;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 180ms ease, transform 180ms ease;
}

.aura-card.is-busy .aura-find-spin {
  opacity: 1;
  transform: scale(1);
  animation: aura-spin 620ms linear infinite;
}

@keyframes aura-spin { to { transform: rotate(360deg) scale(1); } }

.aura-find-out { padding-top: 6px; }

/* Results already on screen stay put while the next answer is fetched,
   dimmed rather than replaced — swapping them for grey bars on every
   keystroke is what makes a live search flicker. */
.aura-card.is-busy .aura-find-out {
  opacity: 0.45;
  transition: opacity 160ms ease;
}

.aura-find-hit {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 9px 2px;
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 12, 14, 0.12);
  border-radius: 4px;
  transition: background 160ms ease;
}

.aura-find-hit:hover,
.aura-find-hit:focus-visible { background: rgba(12, 12, 14, 0.05); outline: none; }

.aura-find-pic {
  width: 44px;
  height: 56px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  background: #d9d9de;
}

.aura-find-text { min-width: 0; }

.aura-find-name {
  display: block;
  font: 600 11px/1.35 var(--aura-face);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0c0c0e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aura-find-price {
  display: block;
  margin-top: 3px;
  font: 500 12px/1.2 var(--aura-face);
  color: #55555c;
}

.aura-find-all {
  display: block;
  padding: 13px 2px 4px;
  font: 600 11px/1.2 var(--aura-face);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b73;
  text-decoration: none;
}

.aura-find-all:hover { color: #0c0c0e; }

/* The skeleton, used only when there is nothing to keep on screen: the
   first query of a session, and the basket waiting on its fragment. The
   sweep is a background-position animation on a gradient — one composited
   property, no layout, and it stops existing the moment real rows land. */
.aura-skel-row {
  display: block;
  height: 56px;
  margin: 8px 0;
  border-radius: 4px;
  background: linear-gradient(100deg,
              rgba(12, 12, 14, 0.06) 30%,
              rgba(12, 12, 14, 0.13) 50%,
              rgba(12, 12, 14, 0.06) 70%);
  background-size: 300% 100%;
  animation: aura-sweep 1.25s ease-in-out infinite;
}

.aura-skel-row:nth-child(2) { animation-delay: 0.1s; }
.aura-skel-row:nth-child(3) { animation-delay: 0.2s; }

@keyframes aura-sweep {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aura-skel-row { animation: none; }
  .aura-card.is-busy .aura-find-spin { animation: none; }
}


/* ── 9. Desktop ───────────────────────────────────────────────────────
   The bar is authored phone-first and the built cards were sized for a
   phone: `min(88vw, 460px)` is right at 390px and lost on a 1440px screen,
   where the home page's own panels measure 1000x587. These give the built
   cards a comparable presence without pretending to be those panels.

   Everything here is additive and gated at 992px, the same breakpoint the
   theme swaps its own layouts at. */
@media (min-width: 992px) {
  .aura-card-built {
    width: min(64vw, 640px);
    max-height: 72vh;
  }

  .aura-card-body { padding: 26px 34px; }

  .aura-card-link,
  .aura-card-note {
    padding: 15px 2px;
    font-size: 13px;
  }

  /* A single column of categories is a long thin ribbon on a wide screen.
     Two columns, with a parent and its children kept together. */
  .aura-card-list {
    column-count: 2;
    column-gap: 34px;
  }

  .aura-card-list .aura-card-link { break-inside: avoid; }

  .aura-find-in { height: 52px; font-size: 16px; }
  .aura-find-hit { grid-template-columns: 56px 1fr; padding: 11px 6px; }
  .aura-find-pic { width: 56px; height: 70px; }
  .aura-find-name { font-size: 12px; }

  .aura-cart .elementor-menu-cart__products,
  .aura-cart .cart_list { max-height: 42vh; }

  .aura-btn { height: 50px; font-size: 12px; }

  /* A pointer can hover, so the discs get a real hover state back — the
     touch block in section 1 only suppresses it on coarse pointers. */
  .aura-card-link:hover { padding-left: 6px; transition: padding 160ms ease; }
  .aura-card-link.is-sub:hover { padding-left: 22px; }
}

/* Very wide screens: the card should not become a billboard. */
@media (min-width: 1600px) {
  .aura-card-built { width: min(48vw, 720px); }
}


/* ── 10. The home panels' box, off the home page ──────────────────────
   The panels themselves now render on every page (the plugin renders the
   same Elementor templates Home.php does), but their BOX does not come
   with them. Verified 2026-08-24: `post-7358.css` — the sitewide copy of
   Home.php's stylesheet — contains ZERO occurrences of .home-category-menu,
   .home-my-account, .home-menuquicklinks, .home-social-icons1 or
   .home-chatform. Every width, height and radius those panels have lives in
   the inline <style> block that Home.php emits after </head>, i.e. on the
   home page only.

   So a panel rendered elsewhere arrives with nothing but its Elementor
   content's own size — measured before this section: Account 219x130 and
   Policies 195x255 against home's 368x170 and 368x220.

   These are Home.php's own values, transcribed, at Home.php's own
   breakpoints, and scoped to `body:not(.home)` so that the home page keeps
   getting them from Home.php exactly as before. That scoping is not
   optional: this stylesheet is printed at wp_footer 9999, which is AFTER
   Home.php's block, so an unscoped rule here would silently take over the
   home page too — the one page that was never broken.

   WIDTH is deliberately absent for .home-category-menu. It already gets one
   sitewide from Site Settings (`body .home-category-menu { width:min(1000px,
   92vw)!important }`, and 94% under 767px), which is why that panel already
   measures the same on every page. Only its height is missing, and only
   below 768px, where Home.php pins it with !important. */

/* These are the values the home page RESOLVES to, not a transcription of
   its rules. Home.php declares each panel three times over — a base rule, a
   768px block and a 480px block — with !important sprinkled unevenly, so
   which one wins is decided by specificity in some cases and by source order
   in others. Copying the declarations reproduced the accidents but not the
   outcome: Others came out 367px wide against home's 353px, because at 390px
   home lands on the 768 block's 90% and not the 480 block's 94%.

   So each panel is stated once per breakpoint, at the width and height it
   actually has on home. Measured there at 390x844: Category 368x290,
   Account 368x170, Policies 368x220, Others 353x120, Chat 353x530. */

/* .home-category-menu belongs in this list even though its WIDTH comes from
   Site Settings. Left out, it opened as a transparent, unclipped box off home:
   the page showed straight through it, the category list overlapped the
   product title and the thumbnail grid spilled outside the panel. Measured
   background-color rgba(0,0,0,0) and border-radius 0px against home's own
   #e8e8eb / 10px. The width being right is what made it look like the panel
   was fine. */
body:not(.home) .home-category-menu,
body:not(.home) .home-my-account,
body:not(.home) .home-menuquicklinks,
body:not(.home) .home-social-icons1,
body:not(.home) .home-chatform {
  background-color: #e8e8eb;
  border-radius: 10px;
  overflow: hidden;
}

/* Above 768px: Home.php's base values. */
body:not(.home) .home-my-account      { width: 50%; height: 170px; }
body:not(.home) .home-menuquicklinks  { width: 50% !important; height: 140px; }
body:not(.home) .home-social-icons1   { width: 50% !important; height: 120px; }
body:not(.home) .home-chatform        { width: 50% !important; height: auto; }

body:not(.home).logged-in .home-my-account { width: 80%; height: 410px; }

@media only screen and (max-width: 768px) {
  /* Category takes only a height here. Its width already comes from Site
     Settings (`body .home-category-menu { width: min(1000px, 92vw) }`, 94%
     under 767px), which loads on every page — which is why that one panel
     already measured the same everywhere. */
  body:not(.home) .home-category-menu {
    height: 290px !important;
    overflow: overlay !important;
  }

  body:not(.home) .home-my-account      { width: 90%; height: 170px; }
  body:not(.home) .home-menuquicklinks  { width: 90% !important; height: 225px; }
  body:not(.home) .home-social-icons1   { width: 90% !important; }
  body:not(.home) .home-chatform        { width: 90% !important; }

  body:not(.home).logged-in .home-my-account {
    width: 90%;
    overflow: overlay;
    height: 410px;
  }
}

@media screen and (max-width: 992px) and (min-width: 768px) {
  body:not(.home).logged-in .home-my-account { width: 94% !important; }
}

@media only screen and (max-width: 480px) {
  /* Only the three that home itself resolves differently at phone width.
     Others and Chat keep the 90% from the 768 block — on home the 480
     declarations for those two lose on source order, and matching home is
     the whole point of this section. */
  body:not(.home) .home-my-account {
    top: 44%;
    width: 94%;
    overflow: overlay;
    height: 170px;
  }
  body:not(.home) .home-menuquicklinks { width: 94% !important; height: 220px; }
  body:not(.home) .home-chatform       { height: 530px; overflow: overlay; }
}


/* ── 10b. A card is as tall as what is IN it ───────────────────────────
   Section 10 transcribes the heights Home.php resolves to, which is right for
   matching home — but two of them are shorter than their own contents, and a
   card that is shorter than its contents is a card showing less than it could.
   Measured on a 390x844 screen, with the box the card actually got:

     card       box        contents   not shown
     Category   367x290    504px      216px
     Policies   367x220    235px       17px      <- overflow:hidden, unreachable
     Account    367x170    168px        0
     Others     351x120    118px        0
     Chat       351x530    528px        0
     Cart       343x161    159px        0

   Policies is the clear defect: `overflow: hidden` on a box 17px shorter than
   its contents means that content is not scrollable, not reachable, simply
   gone. Category is the milder one — its list is reachable, but through a
   nested scroll in a 290px box when there are 243px of empty screen above the
   card and 261px below it before the bar starts.

   WHAT THIS DOES NOT CLAIM. The category GRID inside the card
   (`.aura-cat-grid`, from the 6322 template, not from this file) is a fixed
   height scroller with fade edges BY DESIGN, and it is one at every width —
   measured, it hides 90px of itself on a phone and **643px** on a 1440px
   desktop. So the phone was never showing less of the category list than the
   desktop; if anything it shows more. Do not "fix" that grid to match the
   desktop, because the desktop is the one that shows less of it. All this
   block does is stop the CARD from being the second, unnecessary constraint
   on top of it: the visible grid goes from roughly 1.3 rows to 2.5.

   So the fixed height becomes a MINIMUM rather than a cap. Cards whose
   contents already fit keep the exact size they have — Account stays 170,
   Others 120, Chat 530, Cart 161 — and only the two that were cutting content
   grow, still well inside the screen (Category ends 153px clear of the bar).

   The transition is untouched: it animates opacity and transform, not height,
   so the card fades and lifts exactly as before and simply arrives at its
   real size.

   SPECIFICITY, deliberately. Section 10's rules are `body:not(.home) …`
   (0,2,1) with `!important`, so a plain `body .home-category-menu` (0,1,1)
   loses to them off home wherever it sits — that was tried from a separate
   stylesheet and it lost. The pair below matches that weight and comes later
   in this same file, which settles it off home; on home the competitor is
   Home.php's inline block and this stylesheet prints at wp_footer 9999, after
   it. Both halves verified live. */
@media only screen and (max-width: 768px) {
  body.home .home-category-menu,
  body:not(.home) .home-category-menu {
    height: auto !important;
    min-height: 290px;
    max-height: min(84vh, calc(100vh - 150px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body.home .home-menuquicklinks,
  body:not(.home) .home-menuquicklinks {
    height: auto !important;
    min-height: 220px;
    max-height: min(84vh, calc(100vh - 150px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Chat is the tallest card at 530px, and that is a FIXED height — so on a
     short window (measured: 288x530 in a 320x568 viewport) it hangs off the
     screen top and bottom. It is the one card where the height has to be
     allowed to come down as well as up, so it gets the same treatment with a
     floor that yields on a short screen rather than a fixed one. */
  /* The chat card sizes to the conversation, not to a fixed 530px — that
     floor left a band of empty glass under the composer whenever the panel
     was shorter than it.

     `.aura-card` IS LOAD-BEARING ON EVERY RULE THAT SETS `display` HERE.
     The plugin renders all five panels into the footer with an inline
     `style="display:none"` and aura-bar.js adds `.aura-card` at the moment
     one is opened. An author `!important` outranks an inline declaration, so
     an unscoped `display: flex !important` re-opened the chat panel
     permanently — measured on /shop/: `.home-chatform` sitting at y=1941,
     611px tall, display:flex, opacity 1, parked in the middle of the page
     content where scrolling would run straight into it.

     Height and overflow are safe unscoped — they do not reveal a hidden
     box. Only `display` needs the card. */
  body.home .home-chatform,
  body:not(.home) .home-chatform {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(84vh, calc(100vh - 150px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* NO `display` ON THE CARD ITSELF, EVER.
     shut() closes a card with `el.style.display = "none"` — an INLINE
     declaration — and an author `!important` outranks inline non-important,
     so `display: flex !important` here meant the chat card could be opened
     and never closed again. The blank band this block was written for came
     from the fixed 530px floor above, which is gone; the flex column was
     never the part that fixed it. */
  body.home .home-chatform > .search-form,
  body:not(.home) .home-chatform > .search-form {
    min-height: 0 !important;
  }

  /* CLOSING THE CHAT CARD WITHOUT OWNING `display`.
     Some sheet on the live page forces `display: flex !important` on this
     card from a stylesheet the document will not expose (cross-origin, so it
     cannot be read or out-ordered), which defeats shut()'s inline
     `display: none`. Rather than escalate a fight over one property, the
     closed state is expressed in properties nothing else claims — and those
     are transitionable, which `display` never was.

     open() sets .is-pre then .is-in; shut() swaps to .is-out and then clears
     every state class. So "not .is-pre and not .is-in" is exactly closed,
     including the exit frame and the untouched page load. */
  body .home-chatform.aura-card:not(.is-pre):not(.is-in) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
    transform: translateY(8px) scale(0.985) !important;
    transition: opacity 200ms var(--aura-ease-in, cubic-bezier(0.55, 0, 0.2, 1)),
                transform 230ms var(--aura-ease-in, cubic-bezier(0.55, 0, 0.2, 1)),
                max-height 230ms var(--aura-ease-in, cubic-bezier(0.55, 0, 0.2, 1)),
                visibility 0s linear 230ms !important;
  }

  body .home-chatform.aura-card .aloft-panel,
  body .home-chatform.aura-card [class*="aloft-panel"],
  body .home-chatform.aura-card > .search-form > .elementor,
  body .home-chatform.aura-card > .search-form > .elementor > .e-con {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
  }

  body .home-chatform.aura-card .aloft-log,
  body .home-chatform.aura-card [class*="aloft-log"],
  body .home-chatform.aura-card [class*="aloft-messages"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  body .home-chatform.aura-card > *:last-child,
  body .home-chatform.aura-card .search-form > *:last-child { margin-bottom: 0 !important; }

  /* And the wrapper INSIDE the card, or none of the above is visible.
     `scrollHeight` on the card says 504px and reports nothing hidden, which
     is what made this look finished. It is wrong: the card's only child,
     `.search-form`, is itself pinned to the card's old inner height with
     `overflow: hidden`, and the fifth product tile runs from 555px to 730px —
     89px past the bottom of the card, clipped, and not counted. The picture
     showed a product cut in half while every number said the content fitted.

     Height on the card alone therefore fixes nothing on Category: the card
     grows and the wrapper keeps clipping at the same place. Release both and
     let the card be the only thing that scrolls. */
  body.home .home-category-menu > .search-form,
  body:not(.home) .home-category-menu > .search-form,
  body.home .home-menuquicklinks > .search-form,
  body:not(.home) .home-menuquicklinks > .search-form,
  body.home .home-chatform > .search-form,
  body:not(.home) .home-chatform > .search-form {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ── 11. All nine icons behave as one set ─────────────────────────────
   An earlier version pulled HOME and SHOP out of the fold — kept them at
   full opacity, in their row positions, on a frosted disc — so that they
   stayed reachable with the logo closed. That was the wrong answer to the
   right problem. It gave two of the nine options a different shape, a
   different resting place and no part in the merge, so the bar had one
   language at the top of a page and another in the middle of it.

   They are reachable now because the press is handled properly rather than
   because they are exempt from the animation: the theme's markup leaves
   HOME and SHOP with an EMPTY anchor sitting BESIDE the disc instead of
   around it, so the icon has never been inside its own link, in any state,
   on any page. aura-bar.js resolves that in take() -> navigate(). Nothing
   here has to hold them out of the fold to make them work, so nothing does.

   The one rule kept from that attempt: the theme's own scale circle on
   ::after is left alone. Everything else is the theme's, unchanged, which
   is the point — the icons expand and close identically everywhere. */


/* ── 12. The card, as glass ───────────────────────────────────────────
   One treatment for every card — the theme's own panels and the ones this
   file builds — so Category off home and Cart on home are the same object.

   It is a LIGHT frosted glass, not a dark one, and that is a legibility
   decision rather than a taste one: everything inside these cards is the
   site's near-black text (#0c0c0e), including Elementor content this file
   does not control. A dark glass would put dark text over whatever the page
   happens to be showing. At .82/.70 the panel is close to opaque where it
   matters and still reads as glass at the edges.

   `!important` on the background is load-bearing. Home.php sets
   `body .home-chatform { background-color: #e8e8eb }` at (0,1,1), which beats
   a plain `.aura-card` at (0,1,0) whatever the source order.

   Gold is carried by the border and one inset hairline, not by the text.
   Two lines of it against a frosted panel reads as an edge treatment; more
   than that reads as a border colour someone picked. */
.aura-card {
  background: linear-gradient(152deg,
              rgba(252, 252, 253, 0.74) 0%,
              rgba(243, 243, 246, 0.66) 46%,
              rgba(232, 232, 237, 0.62) 100%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);
  border: 1px solid rgba(198, 166, 100, 0.38);
  border-radius: 16px !important;

  /* The depth is four layers, and the order is what keeps it from looking
     like a drop shadow someone turned up. A tight contact shadow sits the
     card ON something; a mid shadow gives it thickness; a wide ambient one
     is the room. Then two inner strokes light the top edge and darken the
     bottom, which is the whole of the "slightly 3D" — an extruded slab, not
     a bevel. */
  box-shadow:
    0 1px 2px rgba(12, 12, 14, 0.10),
    0 8px 20px rgba(12, 12, 14, 0.12),
    0 32px 64px rgba(12, 12, 14, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(12, 12, 14, 0.06);
}

/* Where the blur is not available the panel has to stop pretending: the
   same alphas over no blur are a washed-out box with the page legible
   through the text. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .aura-card {
    background: linear-gradient(152deg,
                rgba(252, 252, 253, 0.97) 0%,
                rgba(238, 238, 242, 0.96) 100%) !important;
  }
}

/* The shine: a single gold specular running across the top edge, brightest
   at the left shoulder. Pointer-events off — it covers the whole card. */
.aura-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(232, 205, 148, 0.30) 14%,
      rgba(255, 255, 255, 0.00) 42%) top left / 100% 1.5px no-repeat,
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.00) 38%);
}

/* Elementor renders its own opaque backgrounds inside some of these panels,
   which would sit on top of the glass as a solid slab. The panel is the
   surface; its contents are not. */
.aura-card > .search-form,
.aura-card > .search-form > .elementor,
.aura-card > .search-form > .elementor > .e-con,
.aura-card .aura-card-body {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.aura-card-built {
  border-radius: 14px;
  background: none;         /* the .aura-card gradient above is the surface */
}

/* Separators inside a glass card need less weight than they did on a solid
   grey one — at .12 they read as scratches over the blur. */
.aura-card .aura-card-link,
.aura-card .aura-find-hit,
.aura-card .elementor-menu-cart__product,
.aura-card .cart_item {
  border-bottom-color: rgba(12, 12, 14, 0.09);
}

/* The one thing that must NOT be glass. A search field you type into has to
   look like a field, and a translucent one over a moving page is unreadable
   while the results below it change. */
.aura-card .aura-find-in {
  background: #fff !important;
  border: 1px solid rgba(198, 166, 100, 0.34);
  box-shadow: 0 1px 3px rgba(12, 12, 14, 0.06);
}

.aura-card .aura-find-in:focus {
  outline: none;
  border-color: rgba(198, 166, 100, 0.85);
  box-shadow: 0 0 0 3px rgba(198, 166, 100, 0.18);
}

.aura-btn {
  border-color: rgba(12, 12, 14, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.aura-btn.is-primary {
  border-color: #0c0c0e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* ── 13. Account: content centred ─────────────────────────────────────
   Template 6412 is a login button on its own for a logged-out visitor and a
   form for a logged-in one; neither was centred in the panel, which is most
   obvious at the phone width where the panel is 94% and the button is not.
   Centred on both axes, and only inside the card, so the template is
   unchanged anywhere else it is used. */
.aura-card.home-my-account > .search-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}

.aura-card.home-my-account > .search-form > .elementor { width: 100%; }


/* ── 14. Account, as the home page has it ─────────────────────────────
   Home.php styles the account panel's INSIDES as well as its box, and that
   block is home-only for the same reason the box was (section 10) — none of
   it is in post-7358.css. So off home the template arrives with Minimog's
   default account chrome: the navigation collapsed behind its hamburger
   toggle, list bullets down the left, and the avatar hard against the left
   edge.

   These are Home.php's own three rules, plus the avatar centring, scoped to
   the card so the template is untouched anywhere else it is used. */
.aura-card.home-my-account #btn-toggle-account-nav,
.aura-card.home-my-account .minimog-wc-account-nav-toggle,
.aura-card.home-my-account .woocommerce #btn-toggle-account-nav {
  display: none !important;
}

.aura-card.home-my-account .minimog-wc-account-nav-inner {
  text-align: center;
}

/* The bullets. `list-style: none` alone leaves the indent behind, which
   reads as the list still being bulleted, just invisibly. */
.aura-card.home-my-account ul,
.aura-card.home-my-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: center;
}

.aura-card.home-my-account li::marker { content: ""; }
.aura-card.home-my-account li::before { display: none !important; }

/* The avatar. Minimog floats it; centred it becomes the head of the panel. */
.aura-card.home-my-account .minimog-wc-account-nav-inner img,
.aura-card.home-my-account .my-account-profile img,
.aura-card.home-my-account .avatar {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.aura-card.home-my-account .my-account-profile,
.aura-card.home-my-account .my-name {
  text-align: center !important;
  padding-left: 0 !important;
}

.aura-card.home-my-account .woocommerce-MyAccount-navigation ul li a,
.aura-card.home-my-account .minimog-wc-account-content a,
.aura-card.home-my-account .minimog-wc-account-content p {
  color: #000;
}


/* ── 15. Chat sits on the same glass ──────────────────────────────────
   Ask AI mounts INTO .home-chatform rather than opening a panel of its own
   (it is configured `host: .home-chatform`), so the card it appears in is
   already covered by section 12. What is not covered is what it brings with
   it: an assistant panel carries its own surface, and a solid one inside a
   glass card is a white box with a frosted rim.

   Only DIRECT children are cleared. Anything deeper is the assistant's own
   content — message bubbles, buttons, its composer — and those need their
   backgrounds. A blanket `[class*=aloft] { background: transparent }` would
   dissolve the conversation into the page. */
.aura-card.home-chatform > .aloft-panel,
.aura-card.home-chatform > [class*="aloft"],
.aura-card.home-chatform > .search-form > .aloft-panel,
.aura-card.home-chatform > .search-form > [class*="aloft"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Its composer is a field, and fields stay solid for the same reason the
   search field does — you type into it while the page moves behind. */
.aura-card.home-chatform input[type="text"],
.aura-card.home-chatform textarea,
.aura-card.home-chatform [contenteditable="true"] {
  background: #fff !important;
  border: 1px solid rgba(198, 166, 100, 0.32) !important;
  border-radius: 10px !important;
}


/* ── 16. The icons get a surface where the theme gives them none ──────
   The bar has three looks and only two of them were designed:

     .on-top     black disc, white glyph   — legible, deliberate
     .on-bottom  white disc, black glyph   — legible, deliberate
     (no class)  NO DISC AT ALL            — a bare black glyph

   The third is what you get through the whole middle of every page, which
   is most of every page. Folded it does not matter, because the icons are
   at opacity 0. Fanned open it very much does: nine unbacked glyphs land on
   top of whatever the page is showing — measured on a product page they sit
   across the SKU, the categories row and the title, and on a photo they
   would disappear entirely.

   So the missing surface is supplied, in the same glass as the cards, only
   in the states the theme left bare. .on-top and .on-bottom are untouched —
   they are correct, and they are legible against the bar's own black and
   white backgrounds in a way a translucent disc would not be.

   The result is what makes the set read as one thing in every state: the
   icons expand and close identically everywhere, and wherever they land
   they land on the same material as the card they open.

   ── THE SURFACE IS THREE LAYERS, AND THAT IS THE SECOND HALF OF THE FOLD ──

   An earlier version of this section put the frost on the disc itself, as a
   `background:` shorthand. That is a background-IMAGE, and a background-image
   is not interpolable: it is present or it is not. So at the exact frame the
   page crossed `scrollY === 10` and `.on-top` came off, the gradient
   appeared in full while the `background-color` underneath it was still
   easing — half the disc's appearance cut, the other half faded. Same story
   for the 1px gold border arriving from nothing.

   Measured, that was the visible half of the glitch; section 17 fixes the
   geometry half. Both had to go or the fold still tears.

   So the disc is separated into three layers that each change ONE
   interpolable property:

     .ic-box          transform only. No background, no border, no shadow.
     .ic-box::before   THE FROST — gradient, blur, gold hairline, depth.
                       Toggled by `--aura-frost` (0 or 1) as an OPACITY, so
                       the material cross-fades instead of cutting. Free to
                       use: Home.php defines only ::after.
     .ic-box::after    THE STATE COLOUR. Already exists (Home.php:138), is
                       already a full-size circle at z-index 1, and already
                       carries `transition: all 200ms`. It is #fff by
                       default, #000 under .on-top, and the theme leaves it
                       #fff under .on-bottom — so simply letting it keep its
                       own colours reproduces both looks exactly, and
                       background-color is interpolable, so it cross-fades.

   Paint order needs no z-index juggling: ::before is positioned with an auto
   z-index, so it sits below the theme's ::after (z-index 1), which sits below
   the glyph (inline z-index 2). */

/* Layer 1 — the disc carries no surface of its own in ANY state. The
   theme's own `background-color` (#fff base, #000 on-top, transparent
   on-bottom) is deliberately left alone: it is a colour, it interpolates,
   and ::after sits on top of it anyway. */
body .header-icon-box .header-icon > .ic-box {
  border: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Layer 2 — the frost. Present in every state, revealed by opacity only. */
body .header-icon-box .header-icon > .ic-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  background: linear-gradient(150deg,
              rgba(252, 252, 253, 0.76) 0%,
              rgba(238, 238, 242, 0.62) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(198, 166, 100, 0.34);
  box-shadow:
    0 1px 2px rgba(12, 12, 14, 0.10),
    0 6px 16px rgba(12, 12, 14, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
  opacity: var(--aura-frost, 0);
  transition: opacity 260ms var(--aura-fan-ease-in, ease);
}

/* The frost belongs to the un-classed state — the two row states have the
   bar's own black and white behind them and a translucent disc on either
   would be less legible, not more. This is the one declaration that changes
   across the fold, and it is an opacity. */
.header-icon-box:not(.on-top):not(.on-bottom) { --aura-frost: 1; }
.header-icon-box.on-top,
.header-icon-box.on-bottom { --aura-frost: 0; }

/* Layer 3 — the state colour. In the un-classed state the frost IS the
   surface, so the theme's white circle underneath it has to go; it goes by
   fading, not by cutting, because ::after already transitions. */
.header-icon-box:not(.on-top):not(.on-bottom) .header-icon > .ic-box::after {
  background-color: transparent !important;
  background-image: none !important;
}

/* The glyph is a luminance-masked SVG — never recolour it with filter(),
   brightness(0) collapses the mask and the icon becomes a blob. Nothing here
   touches it: on this surface the artwork's own black already reads. */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body .header-icon-box .header-icon > .ic-box::before {
    background: linear-gradient(150deg,
                rgba(252, 252, 253, 0.96) 0%,
                rgba(238, 238, 242, 0.94) 100%);
  }
}


/* ── 17. The fan expands out of the aura ──────────────────────────────
   Two faults, and the second is the one you can feel.

   THE ARC WAS NEVER A CIRCLE. The theme positions the icons by writing an
   inline `transform: translate(...)` on each DISC from its own JS, and those
   offsets are relative to `.header-icon-outer`, whose width CHANGES when
   `.clicked` is applied — so the arc is computed against a moving baseline.
   Measured live, distance and angle from the centre of the logo:

                    radius min -> max    spread     gaps between angles
     phone 390px       118 -> 132          14px     25 23 21 21 23 25 25
     desktop 1440px     96 -> 165        **69px**   25 30 33 33 30 25 17

   THE ICONS SET OFF IN THE WRONG DIRECTION. Sampling the HOME disc every
   60ms from the moment the logo is pressed, on the live site:

     t=0    355,807      <- folded, stacked in the row
     t=40   533,772      <- LURCHES 178px to the RIGHT
     t=160  388,764
     t=340  123,751
     t=800   73,748      <- its place on the arc, 282px to the LEFT

   It leaves the logo travelling the wrong way and then doubles back across
   the whole screen. That is the "random" feel: the folded position is
   wherever the row happened to stack the disc, so nine icons set off in nine
   unrelated directions and only converge at the end.

   Both faults have one cause and one fix: measure from the LOGO, not from
   the row. Every disc is anchored to the same point — the aura ring above
   the figure's head — in BOTH states. Folded it sits there at scale 0.28,
   invisible. Open it travels out along a true arc, an even 22.5 degree step
   across a full 180 degree span:

     i:  1     2     3     4    5    6     7     8     9
     t: 180  157.5  135  112.5  90  67.5   45   22.5    0   (degrees)

   So the set expands out of the halo and folds back into it, which is the
   one motion the mark itself suggests.

   ONLY `transform` ANIMATES. `bottom` stays pinned to the aura in both
   states and the arc's own centre is reached with a constant downward
   `--aura-fan-drop` folded into every dy — so the whole movement is one
   compositor property with no layout, and the arc still sits low, around the
   middle of the mark, rather than up around the halo.

   `.header-icon` and `.header-icon-outer` go `position: static` for the
   duration, or an absolutely positioned disc would resolve against its own
   item instead of the bar. Both carry the theme's inline
   `position: relative`, which is why these need `!important` — an author
   `!important` outranks an inline declaration, the same mechanism section 10
   relies on.

   ── ONE COORDINATE SPACE, IN ALL THREE STATES ────────────────────────────

   This section used to be gated `:not(.on-top):not(.on-bottom)` on the
   argument that taking the discs out of flow in a row state would collapse
   the row. That was true of the rule as written, and it cost the thing this
   pass was opened to fix.

   MEASURED, live, sampling every animation frame while crossing the
   threshold that drops `.on-top` (home page, 390x844, Chromium 1228):

     frame N     disc 1 at (19, 784)   position: relative   nine in a row
     frame N+1   disc 1 at (196, 729)  position: absolute   <- 21ms later
     ...
     settled     nine on the folded arc, scale 0.18, opacity 0

   **One frame. 177px.** All nine at once. `position` and `bottom` are not
   interpolable, so the instant the gate stopped matching, every disc
   teleported to the aura anchor — and only THEN did the transitioned
   `transform` run out to the folded arc. The eye reads the teleport, not the
   transition. That is the glitched frame.

   So the gate goes, and the row becomes a POSITION IN THE SAME SPACE rather
   than the absence of one. Every disc is anchored to the bar in all three
   states; `position`, `left` and `bottom` are set once at parse and never
   change again. The only thing that differs between the row, the fold and
   the fan is `transform` — which is exactly what the transition can carry.

     row     translate(--ix * pitch,  row-dy)            scale(1)
     folded  translate(--ux * r0,     drop + uy * r0)    scale(--aura-fan-s0)
     open    translate(--ux * r,      drop + uy * r)     scale(1)

   `--ix` is the item's own place in the row, -4 through +4, in units of
   `--aura-pitch` (section 5 declares the row so that pitch is one number in
   every state). `--ux`/`--uy` are the arc's unit vectors. Both live on the
   same element and the three states are three readings of them.

   TWO THINGS THIS BREAKS IF THEY ARE NOT HANDLED, and both are handled below:

   a) THE ROW COLLAPSES. An absolutely positioned disc is out of flow, so the
      `.header-icon` column loses its first item and the `<span>` label rides
      up to where the disc was. A `::before` of exactly the disc's size takes
      its place in flow — same width, same height, same order — so the label
      does not move by a pixel. Verified at all fourteen ratios.

   b) AN INVISIBLE FULL-WIDTH LINK BAND. `.header-icon` must be `static` for
      the disc to resolve against the bar, and HOME, SHOP and CART each carry
      an EMPTY `<a>` with `position:absolute; inset:0` (Home.php:937,944,951).
      With their offset parent gone those three stretch to the whole bar and
      stack, so the last one wins and a 100vw x 50px invisible Cart link lies
      across the bottom of every page. This was ALREADY TRUE in the middle
      state — it simply never showed, because the fanned discs sit above the
      bar and nothing else is down there to tap. Making the row states static
      too would have put it directly under the nine options. Neutralised
      below, and asserted against by the sweep.

   Hit testing is unaffected: the disc stays a DESCENDANT of its
   `.header-icon`, so `closest('.header-icon')` still resolves the option. It
   is only painted somewhere else. */
.header-icon-box {
  /* the aura ring, measured above the bar's bottom edge */
  --aura-origin-y: 85px;
  /* how far below the aura the arc is actually drawn, so the open options
     sit low around the mark instead of high around the halo */
  --aura-fan-drop: 46px;
  /* THE FOLDED RADIUS IS THE CROWN'S OWN. The mark already wears an arc —
     the ring of strokes above the head — and it is the same shape the nine
     icons make when they are out. So folded they sit ON that ring, at the
     same nine angles, small; opening simply grows the radius. The aura is not
     a point the icons fly out of, it is the closed state of the fan. */
  --aura-fan-r0: 30px;
  /* At a 180 degree span the widest point IS the horizontal, so the radius
     is bounded by the viewport, not the diagonal: a disc is 35px, so the arc
     needs r + 17.5px either side of centre. 390px allows about 169px. */
  --aura-fan-r: 122px;

  /* ---- the row, in the same coordinate space (see the header) ---- */
  /* the disc's own size, which the ::before spacer has to match exactly */
  --aura-disc: 35px;
  /* section 5 pins the row to this width in every state, so one item is
     exactly a ninth of it and `--ix * --aura-pitch` lands each disc over its
     own label without measuring anything per breakpoint */
  --aura-outer-w: min(100vw, 720px);
  --aura-pitch: calc(var(--aura-outer-w) / 9);
  /* Where the row sits relative to the arc's own centre line. CALIBRATED,
     not chosen: with `--aura-fan-drop` already tuned to put the folded arc
     about where the row is, the residual is small. Measured at 390x844,
     `.on-top`: the disc's flow position is y=784 and this formula without a
     correction puts it at 787.5, so the correction is -3.5px.
     `.on-bottom` is the same row seated 20px lower by the theme's
     `margin-bottom:-5px` and lifted 10px by section 19 — net +10. */
  --aura-row-dy: -3.5px;

  /* THE OVERSHOOT, TURNED UP — AND THE CLOSE GIVEN ITS OWN CHARACTER.
     An earlier pass held the overshoot at 1.25 on the argument that 122px of
     travel makes a big overshoot read as a wobble. That was too cautious: at
     1.25 the discs arrive and simply stop, which is tidy and says nothing.

     The scale does most of the work. Folded is now 0.10 rather than 0.18, so
     each disc grows TENFOLD on the way out instead of five and a half times
     — that is the single biggest lever on how much the movement reads as the
     aura BLOOMING rather than the icons sliding, and it costs nothing,
     because scale is a compositor property at any magnitude.

     `--aura-fan-spin` is the other half. Mirrored on the sign of `--ux`, so
     the left half of the arc unwinds one way and the right half the other,
     it turns an expansion into a fan opening. Folded into the same
     `transform`, so it is still one property.

     A 10x scale change needs the frames or it looks snatched: 620ms, and
     52ms a step, which puts 208ms between the centre icon and the outermost
     pair (was 176).

     ---- THE CLOSE ----
     The close used to reuse the overshoot curve, which is wrong at that end
     of the motion: an overshoot on the way IN carries the discs PAST the
     aura and back out again, a bounce where the movement should be
     finishing. It also used no stagger at all, on the argument that a
     staggered close reads as hesitation.

     That argument is right about a SLOW stagger and wrong about stagger. So
     the close gets its own three values: quicker than the open, a curve that
     accelerates away and settles with no overshoot, and a stagger that runs
     OUTSIDE -> IN over 56ms total. Fifty-six milliseconds does not read as a
     sequence — it reads as the arc closing like a fan rather than nine rigid
     objects sliding at once, which is what the original comment was after.
     The opacity is held back 70ms so the discs are still visible for most of
     the gather instead of vanishing at the start of it. */
  --aura-fan-ease: cubic-bezier(0.34, 1.58, 0.5, 1);
  --aura-fan-ms: 620ms;
  --aura-fan-step: 52ms;   /* stagger, per step out from the centre icon */
  --aura-fan-s0: 0.10;     /* the folded scale — the bloom */
  --aura-fan-spin: 26deg;  /* mirrored on --ux, folded into the transform */

  --aura-fan-ease-in: cubic-bezier(0.55, 0, 0.2, 1);
  --aura-fan-ms-in: 380ms;
  --aura-fan-step-in: 14ms;  /* stagger, per step IN from the outermost pair */
  --aura-logo-open: 1.62;    /* the mark's growth when the fan opens */
  /* disc half (17.5) + the breathing room between an icon and its name */
  --aura-label-dy: 27px;
}

@media (min-width: 993px) {
  /* The desktop mark is larger (150px against 96px) and sits higher, so the
     aura, the drop and the room for the arc are all bigger. */
  .header-icon-box {
    --aura-origin-y: 127px;
    --aura-fan-drop: 68px;
    --aura-fan-r0: 32px;
    --aura-fan-r: 158px;
  }
}

/* ---- the anchor, unconditional ---- */
/* `.header-icon` must be static or an absolutely positioned disc resolves
   against its own 40px item instead of the bar. Both carry the theme's
   inline `position: relative`, which is why these need `!important` — an
   author `!important` outranks an inline declaration, the same mechanism
   section 10 relies on. */
body .header-icon-box .header-icon-outer,
body .header-icon-box .header-icon {
  position: static !important;
}

/* (a) THE SPACER. Takes the disc's place in flow so the label does not move
   when the disc leaves it. `.header-icon` is `display:flex;
   flex-direction:column; align-items:center` (Home.php:96), so this becomes
   the first flex item — exactly where the disc was, exactly its size. */
body .header-icon-box .header-icon::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: var(--aura-disc);
  height: var(--aura-disc);
  pointer-events: none;
}

/* (b) THE INVISIBLE LINK BAND. Three of the nine items carry an EMPTY <a>
   with `position:absolute; inset:0`; with `.header-icon` static they escape
   to the bar and stretch across it. aura-bar.js already owns Home/Shop/Cart
   navigation in take() -> navigate(), so with the script present the anchors
   are dead weight and can be taken out of the layout entirely.

   Gated on `html.aura-js`, which aura-bar.js sets on <html> as its first
   statement: without the script — the Site-Settings-only route, no plugin —
   these are the ONLY working links for those three options and must stay. */
/* HOME / SHOP / CART keep their real anchors — the link is what makes them
   work without JS — but sized and placed over their own disc instead of
   stretching to the bar. */
body .header-icon-box .header-icon > a[href] {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--aura-origin-y) !important;
  width: var(--aura-disc) !important;
  height: var(--aura-disc) !important;
  margin: 0 !important;
  border-radius: 50%;
  z-index: 3;
  transform: translate(calc(-50% + var(--ix) * var(--aura-pitch)),
                       calc(50% + var(--aura-fan-drop) + var(--aura-row-dy))) !important;
  transition: transform var(--aura-fan-ms-in) var(--aura-fan-ease-in) !important;
}

body .header-icon-box:not(.on-top):not(.on-bottom) .header-icon > a[href] {
  transform: translate(calc(-50% + var(--ux) * var(--aura-fan-r0)),
                       calc(50% + var(--uy) * var(--aura-fan-r0) + var(--aura-fan-drop)))
             scale(var(--aura-fan-s0)) !important;
  pointer-events: none;
}

/* THE FAN'S ANCHORS DO NOT TAKE THE TAP THAT OPENED IT.
   Folded, HOME's and SHOP's anchors sit INSIDE the logo's own box — measured
   at 390px, SHOP at (167,797) against a logo box of (153,749,86,80). Opening
   the fan sends them out along the arc, straight under the finger that just
   pressed the logo, and the moment they became clickable that finger was on
   SHOP: the shop page opened on its own.

   With this file's JS present nothing is lost by leaving them inert here —
   take() -> navigate() is what routes HOME, SHOP and CART in the fanned
   state, and it reads the item, not the anchor. Gated on `html.aura-js` so
   the no-JS route keeps real links. */
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon > a[href] {
  transform: translate(calc(-50% + var(--ux) * var(--aura-fan-r)),
                       calc(50% + var(--uy) * var(--aura-fan-r) + var(--aura-fan-drop)))
             scale(1) !important;
  pointer-events: auto;
}

html.aura-js body .header-icon-box:not(.on-top):not(.on-bottom) .header-icon > a[href] {
  pointer-events: none !important;
}

/* THE ITEM BOX TAKES NO PRESSES.
   `.header-icon` is `static` now, so its inline `z-index: 4` no longer
   applies and the nine items paint in DOM order — a disc thrown out onto the
   arc lands UNDER the in-flow box of whichever later item sits at that x.
   Measured at 390px: HOME's disc at (73,805) hit-tested to item 1, and a real
   tap on HOME did nothing while every other option worked.

   Raising the disc's z-index is the wrong lever — it re-parents the whole
   set against the page and the discs then lost to `.minimog-grid` at 1440.
   The item box now holds only a spacer and an absolutely positioned label,
   so nothing in it needs to be hittable: take it out of hit-testing and the
   topmost thing at a disc's centre is always that disc. */
body .header-icon-box .header-icon { pointer-events: none; }
body .header-icon-box .header-icon > .ic-box,
body .header-icon-box .header-icon > a[href] { pointer-events: auto; }
body .header-icon-box .header-icon > .ic-box {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--aura-origin-y) !important;
  margin: 0 !important;
  transform-origin: 50% 50%;
}

/* THE ROW. Not the absence of a transform — a transform, so the fold is an
   interpolation between two readings of the same expression. Specificity is
   load-bearing: this is (0,4,1) with !important, which beats Home.php's own
   `.header-icon-box.on-top .header-icon>div` (0,3,1) !important, and an
   author !important outranks the inline `transform: translate(320px, 0)`
   the theme writes on every disc. */
body .header-icon-box.on-top .header-icon > .ic-box,
body .header-icon-box.on-bottom .header-icon > .ic-box {
  transform: translate(calc(-50% + var(--ix) * var(--aura-pitch)),
                       calc(50% + var(--aura-fan-drop) + var(--aura-row-dy)))
             rotate(0deg)
             scale(1) !important;
}

/* the theme seats `.on-bottom` 20px lower; section 19 lifts the ITEM (and so
   the label) back by 10, and the disc travels with it from here */
.header-icon-box.on-bottom { --aura-row-dy: 6.5px; }

/* Folded: on the crown's own ring, at rest, tiny. */
body .header-icon-box:not(.on-top):not(.on-bottom) .header-icon > .ic-box {
  transform: translate(calc(-50% + var(--ux) * var(--aura-fan-r0)),
                       calc(50% + var(--uy) * var(--aura-fan-r0) + var(--aura-fan-drop)))
             rotate(calc(var(--ux) * var(--aura-fan-spin) * -1))
             scale(var(--aura-fan-s0)) !important;
}

/* Open: out along the arc, full size, unwound. */
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon > .ic-box {
  transform: translate(calc(-50% + var(--ux) * var(--aura-fan-r)),
                       calc(50% + var(--uy) * var(--aura-fan-r) + var(--aura-fan-drop)))
             rotate(0deg)
             scale(1) !important;
}

/* The unit vector of each angle, and the item's own place in the row.
   `--ux`/`--uy` are multiplied by whichever radius the state wants, so the
   folded arc and the open arc are the same shape at two sizes rather than
   two unrelated sets of numbers; `--ix` is the same idea for the row. */
body .header-icon-box .header-icon:nth-child(1) > .ic-box,
body .header-icon-box .header-icon:nth-child(1) > a[href],
body .header-icon-box .header-icon:nth-child(1) > span { --ux: -1;     --uy: 0;      --ix: -4; }
body .header-icon-box .header-icon:nth-child(2) > .ic-box,
body .header-icon-box .header-icon:nth-child(2) > a[href],
body .header-icon-box .header-icon:nth-child(2) > span { --ux: -0.924; --uy: -0.383; --ix: -3; }
body .header-icon-box .header-icon:nth-child(3) > .ic-box,
body .header-icon-box .header-icon:nth-child(3) > a[href],
body .header-icon-box .header-icon:nth-child(3) > span { --ux: -0.707; --uy: -0.707; --ix: -2; }
body .header-icon-box .header-icon:nth-child(4) > .ic-box,
body .header-icon-box .header-icon:nth-child(4) > a[href],
body .header-icon-box .header-icon:nth-child(4) > span { --ux: -0.383; --uy: -0.924; --ix: -1; }
body .header-icon-box .header-icon:nth-child(5) > .ic-box,
body .header-icon-box .header-icon:nth-child(5) > a[href],
body .header-icon-box .header-icon:nth-child(5) > span { --ux:  0;     --uy: -1;     --ix:  0; }
body .header-icon-box .header-icon:nth-child(6) > .ic-box,
body .header-icon-box .header-icon:nth-child(6) > a[href],
body .header-icon-box .header-icon:nth-child(6) > span { --ux:  0.383; --uy: -0.924; --ix:  1; }
body .header-icon-box .header-icon:nth-child(7) > .ic-box,
body .header-icon-box .header-icon:nth-child(7) > a[href],
body .header-icon-box .header-icon:nth-child(7) > span { --ux:  0.707; --uy: -0.707; --ix:  2; }
body .header-icon-box .header-icon:nth-child(8) > .ic-box,
body .header-icon-box .header-icon:nth-child(8) > a[href],
body .header-icon-box .header-icon:nth-child(8) > span { --ux:  0.924; --uy: -0.383; --ix:  3; }
body .header-icon-box .header-icon:nth-child(9) > .ic-box,
body .header-icon-box .header-icon:nth-child(9) > a[href],
body .header-icon-box .header-icon:nth-child(9) > span { --ux:  1;     --uy: 0;      --ix:  4; }


/* ── 18. …and it opens like one set ───────────────────────────────────
   The theme animates the discs with a bare `transition: 0.5s` — every
   property, half a second, default ease. That eases IN as well as out, so
   the icons leave the mark slowly, and all nine move in lockstep, which
   reads as one rigid object rather than a fan opening.

   Instead: the overshoot curve above, and a stagger measured from the CENTRE
   icon outwards, so the arc unfurls from the middle in both directions
   rather than sweeping left to right. 52ms a step puts 208ms between the
   middle icon and the outermost pair — enough to read as a sequence, short
   enough that the whole movement is over in well under a second.

   THE TWO DIRECTIONS ARE DIFFERENT OBJECTS, and the mechanism is the base
   rule versus the `.clicked` override:

     base rule (no .clicked)   the CLOSE values — 380ms, no overshoot,
                               outside-in, opacity held back 70ms
     .clicked                  the OPEN values — 620ms, overshoot,
                               centre-out

   A transition is read from the element's state AT THE MOMENT THE CHANGE IS
   COMMITTED, so removing `.clicked` re-reads the base rule and the close
   runs on the close values. That is the same mechanism section 18 already
   used for the delays; it is only now carrying duration and easing too. */
body .header-icon-box .header-icon > .ic-box {
  transition: transform var(--aura-fan-ms-in) var(--aura-fan-ease-in),
              opacity 240ms var(--aura-fan-ease-in) 70ms,
              background-color 260ms var(--aura-fan-ease-in),
              box-shadow 260ms ease !important;
  will-change: transform;
}

body .header-icon-box.clicked .header-icon > .ic-box {
  transition-duration: var(--aura-fan-ms), 300ms, 260ms, 260ms !important;
  transition-timing-function: var(--aura-fan-ease), var(--aura-fan-ease),
                              ease, ease !important;
}

/* open — from the centre outwards */
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(5) > .ic-box { transition-delay: 0s !important; }
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(4) > .ic-box,
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(6) > .ic-box { transition-delay: calc(var(--aura-fan-step) * 1) !important; }
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(3) > .ic-box,
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(7) > .ic-box { transition-delay: calc(var(--aura-fan-step) * 2) !important; }
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(2) > .ic-box,
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(8) > .ic-box { transition-delay: calc(var(--aura-fan-step) * 3) !important; }
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(1) > .ic-box,
body .header-icon-box:not(.on-top):not(.on-bottom).clicked .header-icon:nth-child(9) > .ic-box { transition-delay: calc(var(--aura-fan-step) * 4) !important; }

/* close — from the outside in, and five times tighter. 56ms end to end. */
body .header-icon-box:not(.clicked) .header-icon:nth-child(1) > .ic-box,
body .header-icon-box:not(.clicked) .header-icon:nth-child(9) > .ic-box { transition-delay: 0s, 70ms, 0s, 0s !important; }
body .header-icon-box:not(.clicked) .header-icon:nth-child(2) > .ic-box,
body .header-icon-box:not(.clicked) .header-icon:nth-child(8) > .ic-box { transition-delay: calc(var(--aura-fan-step-in) * 1), 70ms, 0s, 0s !important; }
body .header-icon-box:not(.clicked) .header-icon:nth-child(3) > .ic-box,
body .header-icon-box:not(.clicked) .header-icon:nth-child(7) > .ic-box { transition-delay: calc(var(--aura-fan-step-in) * 2), 70ms, 0s, 0s !important; }
body .header-icon-box:not(.clicked) .header-icon:nth-child(4) > .ic-box,
body .header-icon-box:not(.clicked) .header-icon:nth-child(6) > .ic-box { transition-delay: calc(var(--aura-fan-step-in) * 3), 70ms, 0s, 0s !important; }
body .header-icon-box:not(.clicked) .header-icon:nth-child(5) > .ic-box { transition-delay: calc(var(--aura-fan-step-in) * 4), 70ms, 0s, 0s !important; }

/* THE MARK ANSWERS THE PRESS. The theme animates `height` here — 80px to
   140px on `all 500ms` — which is a layout property driving a reflow of the
   whole bar on every tap. A scale says the same thing on the compositor, so
   the height stays put and the logo grows with the fan rather than against
   it. `translate(-50%, 0)` has to be restated: it is the theme's own
   centring and a bare `scale()` would drop it. */
body .header-icon-box .middle-logo {
  transition: transform 420ms var(--aura-fan-ease),
              opacity 300ms var(--aura-fan-ease-in) !important;
}

body .header-icon-box:not(.on-top):not(.on-bottom).clicked .middle-logo {
  height: 80px !important;
  transform: translate(-50%, 0) scale(var(--aura-logo-open, 1.62)) !important;
  transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: reduce) {
  /* the bloom and the spin are the two things that must not merely go
     faster — they have to not happen */
  .header-icon-box {
    --aura-fan-spin: 0deg;
    --aura-fan-s0: 1;
  }
  body .header-icon-box .header-icon > .ic-box,
  body .header-icon-box.clicked .header-icon > .ic-box,
  body .header-icon-box .middle-logo {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
  body .header-icon-box:not(.on-top):not(.on-bottom).clicked .middle-logo { transform: translate(-50%, 0) !important; }
}


/* ── 19. The row states say what each icon IS ─────────────────────────
   Every item already carries its name — `<span>Home</span>`, `<span>Category</span>`
   and so on — laid out under the glyph and rendered at `opacity: 0`. So the
   space is already reserved and already correct; the theme simply never turns
   them on. Nine unlabelled glyphs is a guessing game on first visit, and CART
   and CATEGORY in particular are not distinguishable by icon alone.

   They are shown in the ROW states only — `.on-top` and `.on-bottom`, where
   the icons sit in their row and each name is directly under its own glyph.
   In the fanned state the discs are absolutely positioned out on the arc
   while the spans stay behind in the row, so a label there would be stranded
   under the wrong icon; that state keeps them off.

   THE SIZE IS MEASURED, NOT CHOSEN. The item is 40px wide and there are nine
   of them across a 390px bar. Rendering each name in the site's own face
   (`intrepid-regular`) at a range of sizes, with no tracking:

     name        6px  6.5px   7px  7.5px   8px
     CATEGORY     34    36     39    42     45     <- the longest
     ACCOUNT      30    33     35    38     40
     POLICIES     28    30     33    35     37
     SEARCH       26    28     30    32     34
     OTHERS       26    28     30    32     34
     HOME         18    20     21    23     24

   So 8px overflows the item by 5px on CATEGORY and 7.5px by 2px, while **7px
   fits every one of the nine** with a pixel to spare. An earlier draft set
   8px with 0.04em tracking and hid the overflow, which is why CATEGORY,
   ACCOUNT and POLICIES were arriving cut off — the ellipsis was doing its job
   on a size that was never going to fit.

   Tracking is therefore zero, and nothing clips: no `overflow: hidden`, no
   `text-overflow`, because at 7px there is nothing to clip. If a longer name
   is ever added, re-measure rather than reinstating the ellipsis.

   The colour follows the state the same way `.menu-text` does in section 3. */
/* MORE ROOM FIRST, THEN A BIGGER SIZE. Nine items at 40px is 360px of a
   390px bar, and the row is centred — so 30px sits unused at the ends while
   CATEGORY is squeezed into 40. Letting the items share the bar gives each
   43.3px at 390 and 47.8px at 430, which is what pays for the larger type;
   without it, raising the size just reinstates the clipping.

   The size is then fluid rather than fixed, so it takes the room when there
   is room. The floor is 6.2px, not 7: at 320px the nine items are 35.5px
   each and CATEGORY needs 39px at 7px — measured, it was the one name still
   overflowing its own box. 8px is the cap, where it stops being a caption and
   starts competing with the glyph. Verified complete, inside its box, with no
   collisions, at 320, 390 and 430.

   THE ROOM ITSELF IS NOW SECTION 5's. `space-between` on the outer and
   `flex: 1 1 0` on the item used to be declared here, scoped to the two row
   states. Section 17 needs the same arrangement in the MIDDLE state as well
   — `--aura-pitch` is one ninth of the row and the fan measures its dx in it
   — so those two rules moved up to section 5 and are unconditional there.
   Do not re-declare them here; what is left is the type. */
/* THE LABEL RIDES THE DISC'S ANCHOR, not the flow. Measured on home: the
   disc sits at 789..824 while the in-flow label ran 819..829 — a 5px overlap,
   the names printed across the icons. The disc is absolutely positioned to
   the bar and the label was not, so the two drifted apart by whatever the
   row's own offset happened to be on that page. Same anchor, same --ix, one
   fixed drop: they cannot separate again. */
body .header-icon-box.on-top .header-icon > span,
body .header-icon-box.on-bottom .header-icon > span {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--aura-origin-y) !important;
  width: max-content !important;
  max-width: calc(var(--aura-pitch) + 10px) !important;
  margin: 0 !important;
  transform: translate(calc(-50% + var(--ix) * var(--aura-pitch)),
                       calc(50% + var(--aura-fan-drop) + var(--aura-row-dy) + var(--aura-label-dy))) !important;
  opacity: 1;
  font-size: clamp(7.2px, 2.15vw, 8.6px);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  color: #fff;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ON THE BOTTOM STATE THE NAMES FALL OFF THE SCREEN, and it took a
   screenshot to notice: the width checks all passed because they only tested
   the horizontal. Measured at 390x844 —

     .on-top     item y=789..832, label 824..832   -> 12px clear of the fold
     .on-bottom  item y=809..852, label 844..852   -> ENTIRELY below it

   The theme seats the row 20px lower in `.on-bottom`, which put the disc's
   bottom edge exactly on the viewport's and the label past it. Ten pixels of
   lift puts the whole item back inside the bar.

   THE LIFT IS ON THE LABEL, NOT ON THE ITEM, and that is not a stylistic
   choice. It used to be `.on-bottom .header-icon { transform: translateY(-10px) }`.
   A transform on ANY element — `position: static` included — makes that
   element the containing block for its absolutely positioned descendants.
   Section 17 anchors every disc to the BAR with `bottom: var(--aura-origin-y)`;
   put a transform back on `.header-icon` and in `.on-bottom` alone the discs
   would suddenly resolve that 85px against a 45px item instead of the 270px
   bar, and the whole row would fly off the top of the fold.

   So the label takes the lift and the disc takes its own, through
   `--aura-row-dy: 6.5px` in section 17 — which is this -10 and the theme's
   +20 already folded together. Two numbers, one result, and no containing
   block created anywhere near the fan. */
.header-icon-box.on-bottom { --aura-label-dy: 27px; }

/* Fanned open, the discs leave the row — the names must not stay behind. */
body .header-icon-box.clicked .header-icon > span {
  opacity: 0 !important;
}


/* ── 20. One link, one press, in every card ───────────────────────────
   Five cards, four different link treatments. Measured, the first text link
   in each, live:

     card        size    weight  tracking   what it is
     Policies    20px    400     none       a list of three text links
     Account     16px    500     none       one LOGIN button
     Category    14px    400     none       product tiles, 177px tall
     Cart        11px    600     0.14em     the built card's own buttons
     Others       —       —        —        icon links, no text

   `.aura-card-link` in section 4b is the house scale — 11px, 600, 0.14em,
   uppercase — and it is the one that was designed rather than inherited. So
   the text lists move onto it and everything else keeps the shape its job
   needs: tiles stay tiles, buttons stay buttons.

   WHAT IS DELIBERATELY NOT UNIFIED. Category's links are 177px product tiles
   with images in them and Account's is a filled button; dragging either onto
   an 11px text scale would not be consistency, it would be damage. Uniformity
   here means the type RAMP and the INTERACTION are shared, not that every
   link becomes the same object.

   Policies is the outlier that prompted this: 20px with no tracking is nearly
   double the house size and reads as a different designer's work sitting
   inside the same glass. */
.aura-card.home-menuquicklinks a,
.aura-card .home-menuquicklinks a {
  display: block;
  padding: 13px 2px !important;
  font-family: var(--aura-face) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #0c0c0e !important;
  border-bottom: 1px solid rgba(12, 12, 14, 0.09);
}

.aura-card.home-menuquicklinks a:last-child,
.aura-card .home-menuquicklinks a:last-child { border-bottom: none; }

/* The Elementor list these sit in brings its own bullets and indent. */
.aura-card.home-menuquicklinks ul,
.aura-card.home-menuquicklinks ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.aura-card.home-menuquicklinks li::marker { content: ""; }

/* ── the press, everywhere ───────────────────────────────────────────
   The theme's own links carry `transition: 0.25s cubic-bezier(.645,.045,.355,1)`
   — an ease-in-out on ALL properties, which is the curve for something
   travelling between two places, not for something answering a finger. The
   cards use ease-out-quint everywhere else; this brings their contents onto
   it too, and adds the one thing none of them had: a state for the moment of
   the press itself.

   Transform and colour only. Both composited, so a press costs no layout
   inside a card that may be scrolling. */
.aura-card a,
.aura-card button,
.aura-card [role="button"] {
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* A text link takes the press as a shift toward the gold and a hair of
   travel; a tile or a button takes it as a scale, because moving a 177px
   image sideways reads as a glitch. */
.aura-card a:active,
.aura-card [role="button"]:active { color: #8a7238 !important; }

.aura-card .aura-card-link:active,
.aura-card.home-menuquicklinks a:active { transform: translateX(2px); }

.aura-card button:active,
.aura-card .aura-btn:active,
.aura-card .aura-find-hit:active,
.aura-card .aura-tile:active { transform: scale(0.975); }

/* Keyboard users get the gold too, rather than the browser's blue ring. */
.aura-card a:focus-visible,
.aura-card button:focus-visible {
  outline: 2px solid rgba(198, 166, 100, 0.85) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .aura-card a,
  .aura-card button,
  .aura-card [role="button"] { transition-duration: 1ms !important; }
  .aura-card a:active,
  .aura-card button:active,
  .aura-card .aura-card-link:active,
  .aura-card .aura-btn:active,
  .aura-card .aura-find-hit:active,
  .aura-card .aura-tile:active { transform: none !important; }
}


/* ── 21. Legible row: sized labels and a frosted dock (2026-10-15) ──────
   Label size follows the row: the widest pair (CATEGORY/SEARCH) fits up to
   2.53% of the row width, measured; 2.45% / 2.36% keeps a margin. */
body .header-icon-box.on-top .header-icon > span,
body .header-icon-box.on-bottom .header-icon > span {
  font-size: clamp(8px, calc(var(--aura-outer-w) * 0.0245), 12.5px) !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 993px) {
  .header-icon-box, .header-icon-box.on-bottom { --aura-label-dy: 30px; }
  body .header-icon-box.on-top .header-icon > span,
  body .header-icon-box.on-bottom .header-icon > span { letter-spacing: .06em !important; }
}
@media (max-width: 992px) {
  .header-icon-box { --aura-row-dy: -17.5px; }
  .header-icon-box.on-bottom { --aura-row-dy: -7.5px; }
  body .header-icon-box.on-top .header-icon > span,
  body .header-icon-box.on-bottom .header-icon > span {
    font-size: clamp(7.6px, calc(var(--aura-outer-w) * 0.0236), 12px) !important;
    font-weight: 500 !important;
  }
}
/* No panel behind the row (the frosted dock read as a grey slab over white
   pages). Instead the labels follow what is behind them: aloftaura-bar.php
   samples the background under the row on scroll and sets
   .aura-surface-light when it is light, so the names turn dark there and stay
   white over the black header, hero and footer. */
body .header-icon-box.aura-surface-light.on-top .header-icon > span,
body .header-icon-box.aura-surface-light.on-bottom .header-icon > span {
  color: #111 !important;
  text-shadow: 0 0 2px rgba(255,255,255,.9), 0 1px 3px rgba(255,255,255,.7);
}
body .header-icon-box.on-top .header-icon > span,
body .header-icon-box.on-bottom .header-icon > span {
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease, text-shadow 200ms ease;
}


/* ── 22. Every card, one look (2026-10-15) ──────────────────────────────
   One width, one glass, one type scale, one close control — for the theme's
   Elementor panels (Category, Account, Policies, Others), the cards this file
   builds (Search, Cart) and the Ask AI card alike.

   Width: `html body` because Home.php sizes some panels at (0,1,1) with
   !important (`body .home-category-menu { width: min(1000px, 92vw) }`).
   Glass: near-opaque. The .62–.74 frost of section 12 turned grey over
   product photos and took the text contrast with it. */
html body .aura-card {
  width: min(640px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
}
.aura-card {
  background: linear-gradient(160deg, rgba(255,255,255,.95) 0%, rgba(247,247,249,.93) 100%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  color: #0c0c0e;
}
.aura-card a, .aura-card p, .aura-card li, .aura-card label,
.aura-card button, .aura-card input, .aura-card textarea { font-family: var(--aura-face); }

/* Primary lines: policy links, account navigation, top-level categories,
   the cards this file builds. */
.aura-card.home-menuquicklinks a,
.aura-card .home-menuquicklinks a,
.aura-card.home-my-account .woocommerce-MyAccount-navigation a,
.aura-card .aura-card-link:not(.is-sub),
.aura-card .aura-cat-item.is-parent > .aura-cat-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #0c0c0e !important;
}
/* Secondary lines: sub-categories and the like. */
.aura-card .aura-cat-item.is-child .aura-cat-label,
.aura-card .aura-card-link.is-sub {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  color: #3a3a40 !important;
}

/* The close control, everywhere: a soft disc with a thin chevron pointing
   down ("put this away"), replacing Elementor's boxed window-close glyph and
   Ask AI's ✕. aura-bar.js closes the card when any of them is pressed. */
.aura-card .elementor-icon > svg.e-far-window-close { display: none !important; }
.aura-card .elementor-icon:has(> svg.e-far-window-close),
.aura-card .aura-card-x,
.aura-card .aloft-close {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(12,12,14,.06) !important;
  border: 1px solid rgba(12,12,14,.10) !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.aura-card .elementor-icon:has(> svg.e-far-window-close):hover,
.aura-card .aura-card-x:hover,
.aura-card .aloft-close:hover { background: rgba(12,12,14,.12) !important; }
.aura-card .elementor-icon:has(> svg.e-far-window-close):active,
.aura-card .aura-card-x:active,
.aura-card .aloft-close:active { transform: scale(.94); }
.aura-card .elementor-icon:has(> svg.e-far-window-close)::before,
.aura-card .aura-card-x::before,
.aura-card .aloft-close::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.6px solid #0c0c0e;
  border-bottom: 1.6px solid #0c0c0e;
  transform: translateY(-2px) rotate(45deg);
}
.aura-card .aura-card-x { position: absolute !important; top: 12px; right: 12px; z-index: 3; }
.aura-card-built .aura-card-body { padding-top: 34px; }

/* Basket items: one quiet round remove control instead of Elementor's empty
   anchor rendering as a black square beside each line. */
.aura-cart .elementor_remove_from_cart_button { display: none !important; }
.aura-cart .remove_from_cart_button {
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(12,12,14,.10) !important;
  font-size: 0 !important;
  color: transparent !important;
  background: rgba(12,12,14,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  transition: background-color .18s ease;
}
.aura-cart .remove_from_cart_button:hover { background-color: rgba(12,12,14,.11) !important; }
.aura-cart .remove_from_cart_button::before,
.aura-cart .remove_from_cart_button::after { display: none !important; }
/* The checkout and cart pages flatten every radius with
   `body.woocommerce-checkout :not(...) { border-radius: 0 !important }`
   (Site Settings CSS). The card's round controls are exempt. */
/* :not(#aura-none) adds ID weight: that checkout rule chains five :not()
   classes, (0,6,1), which no class-only selector here can outrank. */
html body .aura-card .aura-card-x:not(#aura-none),
html body .aura-card .aloft-close:not(#aura-none),
html body .aura-card .elementor-icon:has(> svg.e-far-window-close):not(#aura-none),
html body .aura-cart .remove_from_cart_button:not(#aura-none),
html body .aura-cart .aura-cart__rm:not(#aura-none) { border-radius: 50% !important; }
/* Cards are square-cornered (2026-10-15, by request); their round controls stay round. */
html body .aura-card:not(#aura-none),
html body .aura-card:not(#aura-none)::before,
html body .aura-card-built:not(#aura-none) { border-radius: 0 !important; }

/* The bag rows are drawn by the "ALOFTAURA — CART" WPCode snippet; its
   remove control is a bare × that rendered as a black square. Same round
   trash control as above. */
html body .aura-cart .aura-cart__rm:not(#aura-none) {
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(12,12,14,.10) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: rgba(12,12,14,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .18s ease;
}
html body .aura-cart .aura-cart__rm:not(#aura-none):hover { background-color: rgba(12,12,14,.11) !important; }

/* Cart count: always a circle with a thin outline ring (2026-10-15).
   :not(#aura-none) beats the cart/checkout rule that flattens every radius. */
html body .header-icon-box .header-icon > .ic-box > .aura-count:not(#aura-none) {
  border-radius: 999px !important;
  min-width: 17px;
  height: 17px;
  box-sizing: border-box;
  border: 1.5px solid #0c0c0e !important;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.35) !important;
}
html body .header-icon-box.on-top .header-icon > .ic-box > .aura-count:not(#aura-none),
html body .header-icon-box.on-bottom .header-icon > .ic-box > .aura-count:not(#aura-none) {
  background: #fff !important;
  color: #0c0c0e !important;
}

/* One close control per card, in one place (2026-10-15). aura-bar.js adds
   .aura-card-x as the card's first child on every open. The panels' own
   close icons (Elementor's, Ask AI's) stay in the layout but are invisible,
   so nothing slides into the corner the shared button occupies. */
html body .aura-card > .aura-card-x:not(#aura-none) {
  position: absolute !important;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 32px !important;
  height: 32px !important;
}
html body .aura-card .elementor-icon:has(> svg.e-far-window-close):not(#aura-none),
html body .aura-card .aloft-close:not(#aura-none) {
  visibility: hidden !important;
  pointer-events: none !important;
}
.aura-card .aura-cart__head { padding-right: 46px !important; }
.aura-card-built .aura-card-body { padding-top: 30px; }

/* ── 23. Cards: transparent glass and one inner frame (2026-10-15) ───────
   Glass: a light, see-through white gradient over a strong blur, a fine
   white edge and one soft shadow — the frost keeps text legible without
   the near-solid panel. */
html body .aura-card:not(#aura-none) {
  box-sizing: border-box !important;
  background: linear-gradient(155deg,
              rgba(255,255,255,.80) 0%,
              rgba(255,255,255,.64) 52%,
              rgba(248,248,251,.55) 100%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow: 0 18px 50px rgba(12,12,14,.18), 0 2px 6px rgba(12,12,14,.08),
              inset 0 1px 0 rgba(255,255,255,.75) !important;
}
html body .aura-card:not(#aura-none)::before {
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 40%) !important;
}

/* One frame: 56px on top (the shared close button's row), 28px elsewhere.
   The Elementor panels' own close row (a container holding only the old
   close icon) leaves the layout, and their outer container's padding is
   cleared so the card's frame is the only one. */
html body .aura-card:not(#aura-none):not(.home-chatform) {
  padding: 56px 28px 28px !important;
}
.aura-card .e-con:has(> .elementor-widget-icon .e-far-window-close):not(:has(> .elementor-widget:not(.elementor-widget-icon))) {
  display: none !important;
}
html body .aura-card > .search-form:not(#aura-none),
html body .aura-card > .search-form > .elementor > .e-con:not(#aura-none),
html body .aura-card > .search-form > .elementor > .elementor-section:not(#aura-none),
html body .aura-card-built .aura-card-body:not(#aura-none) {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
/* Every card is as tall as its content (Home.php fixes some at 120/140px,
   which pushed the content against the bottom edge once the frame was
   added), one width, and no inner Elementor padding or empty spacer rows
   doubling the frame. */
html body .aura-card:not(#aura-none) {
  width: min(640px, calc(100vw - 24px)) !important;
}
html body .aura-card:not(#aura-none):not(.home-chatform) {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(84vh, calc(100vh - 150px)) !important;
  overflow-y: auto !important;
}
html body .aura-card > .search-form > .elementor > .e-con > .e-con-inner:not(#aura-none) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .aura-card > .search-form > .elementor > .e-con > .e-con-inner > .e-con:not(#aura-none) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.aura-card .e-con:not(:has(.elementor-widget)) { display: none !important; }


/* ── 24. The Category card, refined (2026-10-15) ────────────────────────
   Two calm columns: a typographic menu on the left (capitals, a fine guide
   line under each parent, the active item marked by a slim bar, not a grey
   block) and uniform 4:5 product tiles on the right. One line on phones. */
html body .aura-card .aura-cat:not(#aura-none) {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
  opacity: 1;
  transform: none;
}
html body .aura-card .aura-cat .aura-cat-rule { display: none !important; }

/* the menu */
html body .aura-card .aura-cat-list:not(#aura-none) {
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}
html body .aura-card .aura-grp { display: block; }
html body .aura-card .aura-cat-item:not(#aura-none) {
  position: relative;
  display: block;
  padding: 3px 0 3px 12px !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: color .2s ease;
}
html body .aura-card .aura-cat-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: #0c0c0e;
  transform: translateY(-50%);
  transition: height .22s ease;
}
html body .aura-card .aura-cat-item.is-on::before,
html body .aura-card .aura-cat-item[aria-selected="true"]::before { height: 14px; }
html body .aura-card .aura-cat-item.is-parent > .aura-cat-label:not(#aura-none) {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #0c0c0e !important;
}
html body .aura-card .aura-sub:not(#aura-none) {
  margin: 6px 0 0 12px !important;
  padding: 0 0 0 10px !important;
  border-left: 1px solid rgba(12,12,14,.12) !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html body .aura-card .aura-cat-item.is-child { padding-left: 10px !important; }
html body .aura-card .aura-cat-item.is-child > .aura-cat-label:not(#aura-none) {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6b6b73 !important;
}
html body .aura-card .aura-cat-item:hover > .aura-cat-label,
html body .aura-card .aura-cat-item[aria-selected="true"] > .aura-cat-label { color: #0c0c0e !important; }

/* the products */
html body .aura-card .aura-cat-grid:not(#aura-none) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 18px 14px !important;
  max-height: min(60vh, 560px);
  overflow-y: auto;
  padding: 0 4px 4px 0 !important;
  margin: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .aura-card .aura-tile:not(#aura-none) {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: #0c0c0e !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
html body .aura-card .aura-tile-img:not(#aura-none) {
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f1f1f3 !important;
}
html body .aura-card .aura-tile-img img:not(#aura-none) {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
html body .aura-card .aura-tile:hover .aura-tile-img img { transform: scale(1.045); }
html body .aura-card .aura-tile-meta:not(#aura-none) {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 0 !important;
  background: none !important;
}
html body .aura-card .aura-tile-name:not(#aura-none) {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #0c0c0e !important;
}
html body .aura-card .aura-tile-price:not(#aura-none),
html body .aura-card .aura-tile-price .price:not(#aura-none) {
  font-size: 12px !important;
  letter-spacing: .04em !important;
  color: #3a3a40 !important;
  margin: 0 !important;
}

/* phones: categories as one swipeable row of chips over a two-up grid */
@media (max-width: 767px) {
  html body .aura-card .aura-cat:not(#aura-none) { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  html body .aura-card .aura-cat-list:not(#aura-none) {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }
  html body .aura-card .aura-cat-list::-webkit-scrollbar { display: none; }
  html body .aura-card .aura-grp { display: contents; }
  html body .aura-card .aura-sub:not(#aura-none) { display: contents; }
  html body .aura-card .aura-cat-item:not(#aura-none),
  html body .aura-card .aura-cat-item.is-child:not(#aura-none) {
    flex: 0 0 auto;
    padding: 8px 14px !important;
    border: 1px solid rgba(12,12,14,.14) !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }
  html body .aura-card .aura-cat-item::before { display: none; }
  html body .aura-card .aura-cat-item[aria-selected="true"]:not(#aura-none) { background: #0c0c0e !important; border-color: #0c0c0e !important; }
  html body .aura-card .aura-cat-item[aria-selected="true"] > .aura-cat-label:not(#aura-none) { color: #fff !important; }
  html body .aura-card .aura-cat-grid:not(#aura-none) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-height: 58vh; }
}


/* ── 25. Row → logo, scrubbed by scroll (2026-10-15) ────────────────────
   The theme switches the row (.on-top) to the logo in one frame at 10px of
   scroll. aloftaura-bar.php now drives --aura-p from 0 to 1 across the first
   part of the scroll and sets .aura-scrub while in between: every icon is
   placed part way between its place in the row and its folded place under the
   logo, shrinking as it goes; the names fade first; the logo rises in. At 0
   and 1 the class comes off and the theme's own states take over unchanged. */
html body .header-icon-box.aura-scrub .header-icon > .ic-box:not(#aura-none),
html body .header-icon-box.aura-scrub .header-icon > a[href]:not(#aura-none) {
  transform:
    translate(calc(-50% + var(--ix) * var(--aura-pitch) * (1 - var(--aura-p)) + var(--ux) * var(--aura-fan-r0) * var(--aura-p)),
              calc(50% + var(--aura-fan-drop) + var(--aura-row-dy) * (1 - var(--aura-p)) + var(--uy) * var(--aura-fan-r0) * var(--aura-p)))
    scale(calc(1 - (1 - var(--aura-fan-s0)) * var(--aura-p))) !important;
  opacity: calc(1 - var(--aura-p) * 0.9) !important;
  transition: transform .14s cubic-bezier(.2,.7,.2,1), opacity .14s linear !important;
}
html body .header-icon-box.aura-scrub .header-icon > span:not(#aura-none) {
  opacity: calc(1 - var(--aura-p) * 2.4) !important;
  transform: translate(calc(-50% + var(--ix) * var(--aura-pitch) * (1 - var(--aura-p))),
                       calc(50% + var(--aura-fan-drop) + var(--aura-row-dy) + var(--aura-label-dy) - var(--aura-p) * 10px)) !important;
  transition: transform .14s cubic-bezier(.2,.7,.2,1), opacity .14s linear !important;
}
html body .header-icon-box.aura-scrub .middle-logo:not(#aura-none) {
  opacity: calc(var(--aura-p) * 1.2) !important;
  transform: translate(-50%, calc((1 - var(--aura-p)) * 100%)) scale(calc(0.86 + 0.14 * var(--aura-p))) !important;
  transition: transform .14s cubic-bezier(.2,.7,.2,1), opacity .14s linear !important;
}
/* Toward the end of the page the row unfolds into the expanded bottom state,
   so it is scrubbed with the bottom row offset to land on it exactly. */
.header-icon-box.aura-scrub-b { --aura-row-dy: 6.5px; }
@media (max-width: 992px) { .header-icon-box.aura-scrub-b { --aura-row-dy: -7.5px; } }

/* The theme's white gradient behind the logo is no longer needed (the
   discs carry their own frosted surface) and showed as a pale square over
   photographs while the bar changed state. */
html body .header-icon-box::after { display: none !important; }

/* ── 26. Category card: a clear selection, a seamless product wall ─────
   The chosen category is a solid black bar with white type (the slim rule
   alone was too quiet); the others recede to grey. Product photographs sit
   edge to edge with no gutters, bled to the card's right edge, with name
   and price laid on a soft shade across the foot of each picture. */
html body .aura-card .aura-cat-item:not(#aura-none) {
  padding: 7px 12px !important;
  transition: background-color .2s ease, color .2s ease;
}
html body .aura-card .aura-cat-item.is-child:not(#aura-none) { padding: 6px 10px !important; }
html body .aura-card .aura-cat-item::before { display: none !important; }
html body .aura-card .aura-cat-item.is-child > .aura-cat-label:not(#aura-none) { color: #8a8a92 !important; }
html body .aura-card .aura-cat-item.is-parent > .aura-cat-label:not(#aura-none) { color: #3a3a40 !important; }
html body .aura-card .aura-cat-item:hover:not(#aura-none) { background: rgba(12,12,14,.06) !important; }
html body .aura-card .aura-cat-item:hover > .aura-cat-label:not(#aura-none) { color: #0c0c0e !important; }
html body .aura-card .aura-cat-item.is-on:not(#aura-none),
html body .aura-card .aura-cat-item[aria-selected="true"]:not(#aura-none) {
  background: #0c0c0e !important;
  box-shadow: 0 6px 16px -8px rgba(12,12,14,.55) !important;
}
html body .aura-card .aura-cat-item.is-on > .aura-cat-label:not(#aura-none),
html body .aura-card .aura-cat-item[aria-selected="true"] > .aura-cat-label:not(#aura-none) {
  color: #fff !important;
  font-weight: 600 !important;
}
html body .aura-card .aura-cat-list:not(#aura-none) { gap: 14px; }
html body .aura-card .aura-sub:not(#aura-none) { gap: 3px; margin-top: 6px !important; }

html body .aura-card .aura-cat-grid:not(#aura-none) {
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 -28px 0 0 !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}
html body .aura-card .aura-tile:not(#aura-none) { position: relative; gap: 0; overflow: hidden; }
html body .aura-card .aura-tile-img:not(#aura-none) { background: #e9e9ec !important; }
html body .aura-card .aura-tile-meta:not(#aura-none) {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  padding: 34px 12px 11px !important;
  background: linear-gradient(to top, rgba(8,8,10,.78), rgba(8,8,10,.34) 62%, rgba(8,8,10,0)) !important;
  pointer-events: none;
}
html body .aura-card .aura-tile-name:not(#aura-none),
html body .aura-card .aura-tile-price:not(#aura-none),
html body .aura-card .aura-tile-price .price:not(#aura-none),
html body .aura-card .aura-tile-price .amount:not(#aura-none) { color: #fff !important; }
html body .aura-card .aura-tile-name:not(#aura-none) { font-size: 10.5px !important; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
html body .aura-card .aura-tile-price:not(#aura-none) { font-size: 11.5px !important; opacity: .92; }
html body .aura-card .aura-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 0 #fff; transition: box-shadow .25s ease;
}
html body .aura-card .aura-tile:hover::after { box-shadow: inset 0 0 0 2px #fff; }
@media (max-width: 767px) {
  html body .aura-card .aura-cat-item.is-child:not(#aura-none),
  html body .aura-card .aura-cat-item:not(#aura-none) { padding: 8px 14px !important; }
  html body .aura-card .aura-cat-grid:not(#aura-none) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 0 -28px !important;
  }
}

/* ── 27. "Your sacred aura" pull slider: no white corners ───────────────
   The input itself kept the browser's white background behind a rounded
   track, which showed as white edges on the grey section. Transparent
   input, one fine outlined capsule, solid black thumb. */
html body .center-btn .pullee:not(#aura-none) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}
html body .center-btn .pullee::-webkit-slider-runnable-track {
  height: 1rem;
  padding: .25rem;
  box-sizing: content-box;
  border-radius: 999px;
  background: rgba(12, 12, 14, .06);
  box-shadow: inset 0 0 0 1px rgba(12, 12, 14, .22);
  border: 0;
}
html body .center-btn .pullee::-moz-range-track {
  height: 1rem;
  padding: .25rem;
  border-radius: 999px;
  background: rgba(12, 12, 14, .06);
  box-shadow: inset 0 0 0 1px rgba(12, 12, 14, .22);
  border: 0;
}
html body .center-btn .pullee::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1rem; height: 1rem;
  border: 0; border-radius: 50%;
  background: #0c0c0e;
  box-shadow: 0 2px 6px rgba(12, 12, 14, .28);
}
html body .center-btn .pullee::-moz-range-thumb {
  width: 1rem; height: 1rem;
  border: 0; border-radius: 50%;
  background: #0c0c0e;
  box-shadow: 0 2px 6px rgba(12, 12, 14, .28);
}
html body .center-btn .pullee:focus-visible::-webkit-slider-runnable-track { box-shadow: inset 0 0 0 1px rgba(12, 12, 14, .55); }

/* ── 28. Viewport units that survive mobile browser toolbars ────────────
   `vh` on iOS Safari and Android Chrome is the LARGE viewport (toolbar
   hidden), so anything sized to it is cut off under the address bar until
   the visitor scrolls. Section 23's card height and the home film used
   plain vh after the dvh block above; these restate them where the browser
   understands the newer units, keeping vh as the fallback. */
@supports (height: 100dvh) {
  html body .aura-card:not(#aura-none) { max-height: min(84dvh, calc(100dvh - 150px)) !important; }
}
@supports (height: 100svh) {
  body.home .container-fluid[style*="height: 100vh"] { height: 100svh !important; }
}

/* ── 29. No sideways scroll, anywhere ────────────────────────────────────
   The theme's product grid sits 2px wider than its column (margin-right:
   -2px for its hairline borders), which gave the home page a 2px sideways
   scroll on every screen. Clipped at the grid's own container, plus a
   page-wide guard. `clip` rather than `hidden`, so sticky headers keep
   working; browsers without `clip` simply keep today's behaviour. */
html body .elementor-widget-container:has(> .minimog-grid-wrapper) { overflow-x: clip; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* ── 30. Touch targets ───────────────────────────────────────────────────
   On phones the size chips on every product card were 25–30 × 26px, under
   the ~32px a fingertip can hit reliably; the "+1" link was 13px wide. The
   breadcrumb links get the same vertical room. Desktop is unchanged. */
@media (hover: none), (max-width: 991px) {
  html body .loop-product-variation-selector .term-link:not(#aura-none) {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 34px;
  }
  html body .loop-product-variation-selector .term-link-rest:not(#aura-none) {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 34px;
  }
  html body .page-breadcrumb a:not(#aura-none),
  html body .woocommerce-breadcrumb a:not(#aura-none),
  html body .insight_core_breadcrumb a:not(#aura-none) { display: inline-block; padding-top: 8px; padding-bottom: 8px; }
}

/* ── 31. FAQ: the "Your fashion feast" promo lost its pictures ──────────
   Its image (Group-95-2.png) and section background (Group-96-5.png) were
   deleted from the media library and 404. The empty image column goes and
   the words stand centred on their own until new artwork is added. */
html body .elementor-element-af27660 .elementor-element-eed14a3 { display: none !important; }
html body .elementor-element-af27660 > .elementor-container > .elementor-column { width: 100% !important; text-align: center; }
html body .elementor-element-af27660 { background-image: none !important; }
@media (hover: none), (max-width: 991px) {
  /* footer / card social icons: a 40px target without moving the glyphs */
  html body .tm-social-networks .link:not(#aura-none),
  html body .elementor-social-icon:not(#aura-none) { position: relative; }
  html body .tm-social-networks .link:not(#aura-none)::after,
  html body .elementor-social-icon:not(#aura-none)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
}

/* ── 32. Category card: 3:4 photographs, one seamless wall (2026-10-16) ──
   Every tile is 3:4, tiles touch with no gutter or rule, and the wall runs
   to the card's edges on phones and to its right and bottom edge on desks. */
html body .aura-card .aura-tile-img:not(#aura-none) { aspect-ratio: 3 / 4 !important; border: 0 !important; margin: 0 !important; }
html body .aura-card .aura-tile:not(#aura-none),
html body .aura-card .aura-tile-img img:not(#aura-none) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html body .aura-card .aura-cat-grid:not(#aura-none) { gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; margin: 0 -28px -28px 0 !important; padding: 0 !important; }
html body .aura-card .aura-cat-grid > *:not(#aura-none) { margin: 0 !important; }
@media (max-width: 767px) {
  html body .aura-card .aura-cat-grid:not(#aura-none) { margin: 0 -28px -28px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── 33. Category card: legible type (2026-10-16) ───────────────────────
   Names and prices on the photographs read on any picture, light or dark:
   a deeper, taller shade at the foot, a firmer weight, a soft shadow, and
   two lines for long names instead of a cut-off one. The list on the left
   moves from pale grey to near-black so every category reads at a glance. */
html body .aura-card .aura-tile-meta:not(#aura-none) {
  padding: 48px 12px 12px !important;
  background: linear-gradient(to top, rgba(6,6,8,.9) 0%, rgba(6,6,8,.62) 45%, rgba(6,6,8,.22) 78%, rgba(6,6,8,0) 100%) !important;
}
html body .aura-card .aura-tile-name:not(#aura-none) {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}
html body .aura-card .aura-tile-price:not(#aura-none) {
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  margin-top: 3px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
html body .aura-card .aura-tile-price del:not(#aura-none),
html body .aura-card .aura-tile-price del .amount:not(#aura-none) { color: rgba(255,255,255,.7) !important; }
html body .aura-card .aura-cat-item.is-parent > .aura-cat-label:not(#aura-none) { color: #0c0c0e !important; font-weight: 500 !important; }
html body .aura-card .aura-cat-item.is-child > .aura-cat-label:not(#aura-none) { color: #4a4a52 !important; }
html body .aura-card .aura-cat-label:not(#aura-none) { font-size: 12.5px !important; letter-spacing: .1em !important; }
@media (max-width: 767px) {
  html body .aura-card .aura-tile-name:not(#aura-none) { font-size: 11px !important; letter-spacing: .06em !important; }
  html body .aura-card .aura-tile-meta:not(#aura-none) { padding: 44px 10px 10px !important; }
  html body .aura-card .aura-cat-label:not(#aura-none) { font-size: 13px !important; }
}

/* ── 35. Row → logo on phones, clean (2026-10-16) ───────────────────────
   Mid-scroll the nine names were still half visible while the row drew in,
   so they ran together ("CATEGORYSEARCHACCOUNT"); they now leave in the
   first sixth of the move. The "click logo" hint sat flush on the aura's
   rays and showed through the scrub — it now keeps a clear gap above the
   mark, appears only once the mark has settled, and hides while the menu is
   open. The language pill steps aside while the menu is open too. */
html body .header-icon-box.aura-scrub .header-icon > span:not(#aura-none) {
  opacity: clamp(0, calc(1 - var(--aura-p) * 6), 1) !important;
}
html body .header-icon-box .menu-text:not(#aura-none) {
  transform: translateY(-12px) !important;
  transition: opacity .3s ease !important;
}
html body .header-icon-box.aura-scrub .menu-text:not(#aura-none),
html body .header-icon-box.on-top .menu-text:not(#aura-none),
html body .header-icon-box.clicked .menu-text:not(#aura-none) { opacity: 0 !important; }
@media (max-width: 767px) {
  html body .header-icon-box .menu-text:not(#aura-none) { font-size: 10px; letter-spacing: .14em; }
}
body:has(.header-icon-box.clicked) .aura-lt,
body:has(.aura-card.is-in) .aura-lt { opacity: 0 !important; pointer-events: none !important; }

/* scrub hand-off: the stand-in rays give way to the logo's own in the last stretch */
html body .header-icon-box.aura-scrub .middle-logo #Layer_2_Image > path {
  opacity: clamp(0, calc((var(--aura-p) - 0.86) * 7.2), 1) !important;
  transition: opacity .14s linear !important;
}

/* ── 36. One square minimise control on every card (2026-10-16) ────────
   The square, hairline-bordered chevron the Others card uses, everywhere:
   cart, category, search, account, chat, policies. Dark cards get a light
   edge. */
html body .aura-card > .aura-card-x:not(#aura-none) {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(12, 12, 14, .16) !important;
  box-shadow: none !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}
html body .aura-card > .aura-card-x:not(#aura-none):hover,
html body .aura-card > .aura-card-x:not(#aura-none):focus-visible {
  background: #0c0c0e !important; border-color: #0c0c0e !important; color: #fff !important; outline: none;
}
html body .aura-card > .aura-card-x:not(#aura-none):hover::before { filter: invert(1); }
html body .aura-card.home-chatform > .aura-card-x:not(#aura-none) { border-color: rgba(255, 255, 255, .22) !important; }

/* ── 37. Home hero: the mark centred (2026-10-16) ───────────────────────
   The intro film sat 130px (100px on phones) from the top, so its centre was
   well above the middle of the space over the menu row. It now centres in
   that space — the screen minus the row and the scroll cue — on every size. */
html body.home div#top-header:not(#aura-none) {
  padding-top: 0 !important;
  height: calc(100vh - 150px);
  height: calc(100svh - 150px);
  display: flex;
  align-items: center;
  justify-content: center;
}
html body.home div#top-header #top-logo:not(#aura-none) {
  height: min(52svh, 100vw) !important;
  width: auto !important;
  aspect-ratio: 1 / 1;
  margin: 0 auto !important;
}
html body.home #top-logo-in:not(#aura-none) {
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block;
}
@media (max-width: 767px) {
  html body.home div#top-header:not(#aura-none) { height: calc(100vh - 140px); height: calc(100svh - 140px); }
}

/* ── 39. Phones: collection and product pages breathe (2026-10-16) ──────
   On phones both pages sat inside a 1px box at the screen edge with the
   content flush against its border — title, price, rating, sizes and the
   cart buttons touched the line. The box goes on phones and the page keeps
   one even 18px gutter (plus the notch/safe area), so nothing meets an edge. */
@media (max-width: 767px) {
  html body .container-extended:not(#aura-none) {
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
  }
  html body.single-product div.entry-product.product:not(#aura-none),
  html body .shop-archive-block:not(#aura-none) {
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .shop-archive-block:not(#aura-none) { padding-top: 8px !important; }
  html body.single-product .woo-single-images:not(#aura-none),
  html body.single-product .woo-single-gallery:not(#aura-none) { padding-left: 0 !important; padding-right: 0 !important; }
  html body.single-product .col-woo-single-summary:not(#aura-none),
  html body.single-product .col-woo-single-images:not(#aura-none) { padding-left: 0 !important; padding-right: 0 !important; }
  html body.single-product .woo-single-info > .row:not(#aura-none) { margin-left: 0 !important; margin-right: 0 !important; }
  html body.single-product .entry-summary .product_title:not(#aura-none) { padding-right: 4px; }
  /* the description / reviews block keeps a light frame, but an inside gutter */
  html body.single-product .woocommerce-tabs:not(#aura-none) { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 767px) {
  /* the grid's own -31px bleed was sized for the old box padding */
  html body .shop-archive-block .minimog-grid-wrapper:not(#aura-none) { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
  html body .shop-archive-block .minimog-grid-wrapper .product-info:not(#aura-none),
  html body .shop-archive-block .minimog-grid-wrapper .product-info-wrap:not(#aura-none) { padding-left: 8px !important; padding-right: 8px !important; }
  html body .shop-archive-block .woocommerce-result-count:not(#aura-none) { margin-left: 0 !important; padding-left: 0 !important; }
}

/* ── 40. One header, every page; the hero logo flies into it (2026-10-16) ─
   A slim black bar with the white mark sits at the top of every page. On
   home the intro film's logo is the same mark: as the first section scrolls,
   it rises and shrinks on an eased curve into the bar's centre, the bar
   fades in beneath it, and the film hands over to the crisp mark. Elsewhere
   the mark settles into the bar as the page opens. Replaces the old
   jump-to-80px behaviour, which clipped the logo (desktop) and left a black
   block stuck over the page (phones). */
:root { --aura-top-h: 56px; --aura-top-y: 0px; }
@media (min-width: 1025px) { :root { --aura-top-h: 64px; } }
html body.admin-bar { --aura-top-y: 32px; }
@media (max-width: 782px) { html body.admin-bar { --aura-top-y: 46px; } }

#aura-top {
  position: fixed; left: 0; right: 0; top: var(--aura-top-y);
  height: var(--aura-top-h); z-index: 99990;
  display: flex; align-items: center; justify-content: center;
  background: #000; pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
}
#aura-top .aura-top__logo {
  pointer-events: auto; display: block; height: calc(var(--aura-top-h) - 16px);
  animation: aura-top-in .7s cubic-bezier(.22, 1, .36, 1) both;
}
#aura-top .aura-top__svg { display: block; height: 100%; width: auto; overflow: visible; }
#aura-top .aura-top__svg path { fill: #fff !important; stroke: none !important; opacity: 1 !important; }
@keyframes aura-top-in { from { opacity: 0; transform: translateY(6px) scale(1.18); } to { opacity: 1; transform: none; } }

/* inner pages: the page starts below the bar; the old video logo row goes */
#aura-top-space { display: block; height: calc(var(--aura-top-h) + env(safe-area-inset-top, 0px)); }
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-543e42e9 { display: none !important; }

/* home: the bar waits for the logo */
html.aura-has-top body.home #aura-top { opacity: var(--aura-bar-o, 0); }
html.aura-has-top body.home #aura-top .aura-top__logo { animation: none; opacity: var(--aura-mark-o, 0); }
html.aura-has-top body.home div#top-header #top-logo:not(#aura-none) {
  position: relative !important; top: auto !important; height: auto !important; width: auto !important;
  aspect-ratio: auto !important; overflow: visible !important; z-index: 99991; margin: 0 auto !important;
}
html.aura-has-top body.home #top-logo-in:not(#aura-none) {
  height: min(52svh, 100vw) !important; width: auto !important; max-width: 100vw !important;
  aspect-ratio: 1 / 1; object-fit: contain !important; display: block;
  transform-origin: 50% 50%; will-change: transform, opacity;
  transform: translate3d(var(--aura-hx, 0px), var(--aura-hy, 0px), 0) scale(var(--aura-hs, 1));
  opacity: var(--aura-film-o, 1);
}
@media (prefers-reduced-motion: reduce) { #aura-top .aura-top__logo { animation: none; } }
/* Elementor's sticky search row sits under the bar, not behind it */
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-3a7b767,
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-67742c3e { top: calc(var(--aura-top-y) + var(--aura-top-h)) !important; }

/* ── 41. The aura motion — one system (2026-10-16) ──────────────────────
   Replaces sections 34 and 38. Four states, each written once:

     row        .on-top / .on-bottom      the nine options in a line
     scrub      .aura-scrub, --aura-p     row ⇄ logo, bound to scroll pixels
     open       .clicked                  the fan around the logo
     folded     none of the above         the exact logo artwork

   Folding — by scroll or by closing the fan — every option travels to ONE
   of the nine rays of the aura (positions measured from the artwork), shrinks,
   and reshapes into that ray's own outline (a mask cut from the logo's own
   SVG path), then hands over to the painted ray. The closed mark is always
   the untouched logo. Classes from aura-bar.js: .aura-closing (the close is
   running) and .aura-handoff (the painted rays take over). */
.header-icon-box {
  --aura-fold-s: .3;
  --aura-ray-oy: 0px;
  --aura-fan-ms-in: 460ms;
  --aura-fan-ease-in: cubic-bezier(.65, 0, .25, 1);
}
@media (min-width: 993px) { .header-icon-box { --aura-ray-oy: 52px; } }
body .header-icon-box .header-icon:nth-child(1) > * { --rx: -26.65px; --ry: 7.80px; --rw: 4.57px; --rh: 6.02px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='59.538 83.778 19.360 25.475'%3E%3Cpath d='M78.298794942540553%2C84.513446674464831c-3.539957407087059%2C7.804115405373523-5.660035402256653%2C15.774574395130003-6.8991798200841%2C24.140283406201888-.547464171562751-.258861065851306-.894154191310008-.364607782081293-1.17411158817049-.564043822680105-3.204991602146038-2.283098623545811-6.056150178830649-4.943462869468931-8.436025345244161-8.083895319752628-1.081426851642391-1.427043170888282-1.617515483932038-3.05192441478448-1.649816397911309-4.867109072351013-.036911179367053-2.074433109500205.686251561920471-3.822977675996299%2C2.058207458888319-5.32726563199958%2C1.945725700419644-2.133402956113059%2C4.385873306918256-3.551090753080643%2C7.141901575629163-4.20389441221414%2C2.606746713347093-.617444994334619%2C5.307422741164373-.839775552483843%2C7.968591893983103-1.22335556802409.191016079599649-.027533465905435.396826655787663.047571011089531.990432222909476.129280420819669Z'/%3E%3C/svg%3E"); }
body .header-icon-box .header-icon:nth-child(2) > * { --rx: -22.67px; --ry: 0.41px; --rw: 5.11px; --rh: 5.60px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='75.259 53.389 21.618 23.702'%3E%3Cpath d='M96.277033290242798%2C55.397431138011598c-5.863657070927729%2C6.330832863049181-10.225326484580364%2C13.464533069452045-14.173457030435202%2C21.09328847933557-.417781086791365-.488493851687963-.701641712544188-.771813506409671-.929680353969161-1.094569064460302-2.207789262630286-3.12472394458473-4.164662894683715-6.377963222475955-4.973841952922157-10.181474747762877-.185955441655096-.874059220902382-.349033894161948-1.776673638511056-.340273421390521-2.664344637934846.037414821797029-3.79146866040719%2C2.368276862217499-6.778660860587479%2C6.057806387615528-7.782039240915765%2C4.286084306402699-1.165620514559123%2C8.584401312763475-.911742202206369%2C12.871037688762954.021107699241838.437849300815287.09528729196154.843300833334069.339437371283566%2C1.488408682338559.608031512496382Z'/%3E%3C/svg%3E"); }
body .header-icon-box .header-icon:nth-child(3) > * { --rx: -16.17px; --ry: -6.37px; --rw: 5.59px; --rh: 5.04px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='101.747 25.838 23.658 21.330'%3E%3Cpath d='M124.805568562187545%2C31.095907959071155c-7.290660117696461%2C4.703365817052145-14.049028292244657%2C9.568191732665582-20.008309628151437%2C15.472253452999212-.250678337504723-.229201818811816-.41504979511501-.309574746549515-.465191273872733-.435446169834904-1.71483469942541-4.304755221456617-2.477562428295641-8.744328063572539-1.648363583192804-13.348668312945847.746339978808464-4.144161899254868%2C3.431742081184893-6.33222987411682%2C7.63624599825107-6.346204827093061%2C3.612230096772691-.012006547434794%2C6.996068033871779.977435618532581%2C10.244019367338296%2C2.468656557699433%2C1.337916448035685.614263586117886%2C2.621032724775432%2C1.3478154532595%2C4.241599119627608%2C2.189409299175168Z'/%3E%3C/svg%3E"); }
body .header-icon-box .header-icon:nth-child(4) > * { --rx: -8.42px; --ry: -11.00px; --rw: 6.15px; --rh: 4.65px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='133.381 7.080 26.056 19.705'%3E%3Cpath d='M158.836194062560935%2C17.318891115693987c-8.788521781159943%2C1.513113095223162-16.881581155057575%2C4.609200734144906-24.774258637114144%2C8.866743276638772-.038267139769232-.57102403567751-.111643968643875-.86153938690677-.067604311719151-1.133009869788111.447612215743902-2.759319599868832.842448515365504-5.53016272514742%2C1.399457679651277-8.26779475722833.413509811509357-2.032394455920439%2C1.330294013464481-3.889857462206237%2C2.531210033253046-5.592920481303736%2C2.112557257619301-2.995876306654282%2C5.212989784250567-4.195811964746099%2C8.741344044426114-3.128023384493645%2C1.69747840621767.513707843412703%2C3.34140606179426%2C1.311081567865585%2C4.887229981932251%2C2.194147515216173%2C2.335690228007479%2C1.334289020740471%2C5.91495111603308%2C4.907763425971098%2C7.282621209570607%2C7.060857700958877Z'/%3E%3C/svg%3E"); }
body .header-icon-box .header-icon:nth-child(5) > * { --rx: 0.37px; --ry: -13.07px; --rw: 6.73px; --rh: 3.90px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='169.373 -0.100 28.480 16.520'%3E%3Cpath d='M184.258514605283381.500000029580406c.061444377295629.080924650263114.107024017828735.209518179567567.186580151983435.235962046451277%2C4.899588592505097%2C1.628813250473286%2C7.896958442777759%2C5.311563519690026%2C10.26872690304117%2C9.615135397722042.908706552099829%2C1.648839862596105%2C1.596643379098168%2C3.419321376672997%2C2.538997120158456%2C5.468946039252842-9.270585076668794-1.486328979273821-18.197008031205769-1.53351139370443-27.195781158880891-.087561360758627-.034305798297282-.333918330175038-.125368225049897-.553943941129546-.063555801360053-.715509360285068%2C1.861055658442638-4.864988133543193%2C4.466862884941293-9.234010101014974%2C8.675454054086913-12.441952445183233%2C1.110454089786799-.846430421703189%2C2.450646614219295-1.391539841599297%2C3.685345419000441-2.075018123018708.634744437324116-.000002118516932%2C1.269488874650051-.000002118516932%2C1.904233311970529-.000002194180524Z'/%3E%3C/svg%3E"); }
body .header-icon-box .header-icon:nth-child(6) > * { --rx: 9.04px; --ry: -10.99px; --rw: 6.11px; --rh: 4.70px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='207.389 7.007 25.849 19.894'%3E%3Cpath d='M232.526714692477071%2C26.300758272952407c-4.110884536403319-1.860303030512114-7.999604645570798-3.869943396336566-12.070740171193393-5.391760572631938-4.031967640719813-1.507183666981291-8.247861625208316-2.522389428684619-12.466990543804059-3.778356852053548.029559936869191-.084655965131788.041027487735846-.315094998248242.162056639484945-.434725873833486%2C2.061098560183382-2.037511583974265%2C4.048549099412412-4.161921130035807%2C6.234609096525674-6.056818948415639%2C1.807533964094546-1.566818122835684%2C3.974145614800364-2.568341892291755%2C6.400384941694938-2.927176411144501%2C2.972265211883496-.439591806223689%2C5.409681526702116.504362154144474%2C7.358487194336703%2C2.742182607982613%2C1.514665887074443%2C1.739279986188194%2C2.543762352443082%2C3.756453800760028%2C3.153731456048263%2C5.972212617127298.772626239842793%2C2.806604913722367%2C1.279929769782029%2C5.661602823380235%2C1.338778451437975%2C8.581525430112379.007961424676978.39575120205518-.06533792074697.793136689157109-.110317064531046%2C1.292918002856823Z'/%3E%3C/svg%3E"); }
body .header-icon-box .header-icon:nth-child(7) > * { --rx: 17.04px; --ry: -6.33px; --rw: 5.50px; --rh: 5.14px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='242.519 25.816 23.303 21.763'%3E%3Cpath d='M243.11903186118343%2C30.965441168370489c4.859142230645375-3.335338494865937%2C9.948972068228613-5.046778738022113%2C15.667696342525232-4.422263947657484%2C3.193925996682083.348797587536865%2C5.611758369050222%2C2.552566804608432%2C6.122432429147011%2C5.757862212301006.32087834486083%2C2.013962141821139.371397555447402%2C4.105234440153254.257748702488243%2C6.145923800594574-.158996043139268%2C2.85411297457722-1.298700135987019%2C5.491514910379919-2.188907513967933%2C8.53249566829345-6.10065957918232-6.21960463373216-12.706608118567601-11.334698907633538-19.858969960192553-16.014017733531546Z'/%3E%3C/svg%3E"); }
body .header-icon-box .header-icon:nth-child(8) > * { --rx: 23.28px; --ry: 0.48px; --rw: 5.27px; --rh: 5.71px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='269.440 53.430 22.320 24.177'%3E%3Cpath d='M284.95957283163898%2C77.007894566214418c-4.033497938897199-8.097013181015427-8.704084189534115-15.395952921471689-14.919787323817218-22.117871405434926%2C1.459904457504308-.236402357644693%2C2.513892481776566-.446951536519919%2C3.577914613051689-.571869021573548%2C3.158361092295308-.37078659011695%2C6.325787748453877-.43661801273629%2C9.464138739314876.122999923935822%2C1.180402275920642.210476543991717%2C2.366209022598923.584599496753981%2C3.452527017139801%2C1.091857361877373%2C3.08190429620845%2C1.439139301358409%2C4.567068359003315%2C4.002497229564142%2C4.623224490711436%2C7.336332182191654.029250003060952%2C1.736148211810359-.2041688955469%2C3.491733520387243-1.039517989640444%2C5.072041153009195-1.379476634505409%2C2.60958277266127-2.793084729544717%2C5.20122956963769-4.209075440725428%2C7.791283241348538-.193979821635367.354763333225492-.484213461297259.656914793946271-.949424106034712%2C1.275226564645891Z'/%3E%3C/svg%3E"); }
body .header-icon-box .header-icon:nth-child(9) > * { --rx: 27.26px; --ry: 7.86px; --rw: 4.62px; --rh: 6.11px; --ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='287.650 83.826 19.564 25.856'%3E%3Cpath d='M295.32131861859034%2C109.082488998231383c-1.384048158170117-8.635649318925971-3.418240589709967-16.7392722749928-7.071430376205171-24.376821348977501.268325193663259-.147245450459195.398458650994144-.281891168539914.525918929246473-.279431266910251%2C4.263972466340419.082251750248361%2C8.44494078491698.579064718083828%2C12.216137868532314%2C2.780947849165386%2C1.043101599287183.60902903166243%2C2.04011991560219%2C1.332278850132752%2C2.950627957961842%2C2.126507483815658%2C2.995703956059515%2C2.613229044171931%2C3.51457189118446%2C6.487893708406773%2C1.338662226262386%2C9.847083080217089-1.651637259034032%2C2.549804257601863-3.785841456012349%2C4.675788770206964-6.07053788729354%2C6.653123557804975-1.1859423427195%2C1.02637942905767-2.406616642718291%2C2.012654713787924-3.889378718504304%2C3.248590644884644Z'/%3E%3C/svg%3E"); }

/* ── folded: on its ray, ray-sized (rest and closing) ── */
html body .header-icon-box:not(.on-top):not(.on-bottom):not(.clicked):not(.aura-scrub) .header-icon > .ic-box:not(#aura-none):not(#aura-n2),
html body .header-icon-box:not(.on-top):not(.on-bottom):not(.clicked):not(.aura-scrub) .header-icon > a[href]:not(#aura-none):not(#aura-n2) {
  transform: translate(calc(-50% + var(--rx)), calc(50% + var(--ry) + var(--aura-ray-oy))) scale(var(--aura-fold-s)) !important;
}
.header-icon-box:not(.on-top):not(.on-bottom):not(.clicked) { --aura-frost: 0; }
html body .header-icon-box:not(.on-top):not(.on-bottom):not(.clicked) .header-icon > .ic-box:not(#aura-none):not(#aura-n2),
html body .header-icon-box.aura-scrub .header-icon > .ic-box:not(#aura-none):not(#aura-n2) { opacity: 1 !important; }
html body .header-icon-box:not(.on-top):not(.on-bottom):not(.clicked) .header-icon > .ic-box:not(#aura-none):not(#aura-n2),
html body .header-icon-box:not(.on-top):not(.on-bottom):not(.clicked) .header-icon > .ic-box:not(#aura-none):not(#aura-n2)::after {
  background-color: transparent !important; background-image: none !important; box-shadow: none !important;
}
html body .header-icon-box:not(.on-top):not(.on-bottom):not(.clicked) .header-icon > .ic-box > .aura-count:not(#aura-none),
html body .header-icon-box.aura-scrub .header-icon > .ic-box > .aura-count:not(#aura-none) { opacity: 0 !important; }

/* the glyph shrinks away as it lands; blooms back when the fan opens */
html body .header-icon-box:not(.on-top):not(.on-bottom):not(.clicked):not(.aura-scrub) .header-icon > .ic-box img:not(#aura-none):not(#aura-n2) {
  opacity: 0 !important;
  transform: scale(.4) !important;
  transition: opacity 220ms ease 110ms, transform 380ms cubic-bezier(.65, 0, .25, 1) !important;
}
html body .header-icon-box.clicked .header-icon > .ic-box img:not(#aura-none):not(#aura-n2) {
  transition: opacity 220ms ease 70ms, transform 360ms cubic-bezier(.22, 1, .36, 1) !important;
}

/* the ray stand-in: the frost layer, cut to the ray's exact outline */
html body .header-icon-box:not(.on-top):not(.on-bottom):not(.clicked) .header-icon > .ic-box::before,
html body .header-icon-box.aura-scrub .header-icon > .ic-box::before {
  inset: auto !important; left: 50% !important; top: 50% !important;
  width: calc(var(--rw) / var(--aura-fold-s)) !important;
  height: calc(var(--rh) / var(--aura-fold-s)) !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: #0c0c0e !important;
  -webkit-mask: var(--ray) center / 100% 100% no-repeat;
          mask: var(--ray) center / 100% 100% no-repeat;
  transition: none !important;
}
/* light around the travelling shapes: the mark's own white edge + gold */
html body .header-icon-box.aura-closing:not(.clicked) .header-icon > .ic-box:not(#aura-none):not(#aura-n2) {
  filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, .95)) drop-shadow(0 0 7px rgba(203, 185, 148, .7));
}

/* closing: arrive → become the ray → hand over to the painted ray */
html body .header-icon-box.aura-closing:not(.clicked) .header-icon > .ic-box::before { animation: aura-ray-hand 840ms linear both; }
@keyframes aura-ray-hand { 0%, 30% { opacity: 0; } 55%, 64% { opacity: 1; } 90%, 100% { opacity: 0; } }
/* closing from the fan: the frosted disc travels in and condenses into the ray */
html body .header-icon-box.aura-closing:not(.clicked) .header-icon > .ic-box:not(#aura-none):not(#aura-n2):not(#aura-n3)::after {
  background-color: rgba(248, 248, 250, .92) !important;
  animation: aura-disc-hand 840ms cubic-bezier(.65, 0, .25, 1) both;
  transition: none !important;
}
@keyframes aura-disc-hand {
  0%   { opacity: 1; transform: scale(1);   border-radius: 50%; }
  45%  { opacity: 1; transform: scale(.6);  border-radius: 44%; }
  62%  { opacity: 0; transform: scale(.5);  border-radius: 40%; }
  100% { opacity: 0; transform: scale(.5);  border-radius: 40%; }
}

/* painted rays: shown at rest; hidden while the options are out or moving */
body .header-icon-box .middle-logo #Layer_2_Image { opacity: 1 !important; transition: none !important; }
body .header-icon-box .middle-logo #Layer_2_Image > path { opacity: 1; transition: opacity 200ms ease; }
html body .header-icon-box.clicked .middle-logo #Layer_2_Image > path,
html body .header-icon-box.aura-closing .middle-logo #Layer_2_Image > path { opacity: 0 !important; transition: opacity 100ms ease; }
html body .header-icon-box.aura-closing.aura-handoff .middle-logo #Layer_2_Image > path { opacity: 1 !important; transition: opacity 200ms ease; }

/* ── scrub: row ⇄ logo, bound to scroll pixels ── */
.header-icon-box.aura-scrub {
  --aura-pe: calc(var(--aura-p) * var(--aura-p) * (3 - 2 * var(--aura-p)));   /* smoothstep */
}
html body .header-icon-box.aura-scrub .header-icon > .ic-box:not(#aura-none):not(#aura-n2),
html body .header-icon-box.aura-scrub .header-icon > a[href]:not(#aura-none):not(#aura-n2) {
  transform:
    translate(calc(-50% + var(--ix) * var(--aura-pitch) * (1 - var(--aura-pe)) + var(--rx) * var(--aura-pe)),
              calc(50% + (var(--aura-fan-drop) + var(--aura-row-dy)) * (1 - var(--aura-pe)) + (var(--ry) + var(--aura-ray-oy)) * var(--aura-pe)))
    scale(calc(1 - (1 - var(--aura-fold-s)) * var(--aura-pe))) !important;
  transition: none !important;
}
/* the round disc condenses onto its ray's footprint, then gives way to the ray */
html body .header-icon-box.aura-scrub .header-icon > .ic-box:not(#aura-none):not(#aura-n2)::after {
  opacity: clamp(0, calc((.86 - var(--aura-pe)) * 3.4), 1) !important;
  transform: scale(calc(1 - .48 * var(--aura-pe))) !important;
  transition: opacity .12s linear, transform .12s linear !important;
}
html body .header-icon-box.aura-scrub .header-icon > .ic-box img:not(#aura-none):not(#aura-n2) {
  opacity: clamp(0, calc(1.3 - var(--aura-pe) * 1.9), 1) !important;
  transform: scale(calc(1 - var(--aura-pe) * .55)) !important;
  transition: opacity .12s linear, transform .12s linear !important;
}
html body .header-icon-box.aura-scrub .header-icon > .ic-box::before {
  opacity: clamp(0, min(calc((var(--aura-pe) - .45) * 3.5), calc((1 - var(--aura-p)) * 8)), 1) !important;
}
html body .header-icon-box.aura-scrub .middle-logo #Layer_2_Image > path {
  opacity: clamp(0, calc((var(--aura-p) - .86) * 7.2), 1) !important;
  transition: none !important;
}
html body .header-icon-box.aura-scrub .middle-logo:not(#aura-none):not(#aura-n2) {
  opacity: clamp(0, calc((var(--aura-pe) - .15) * 1.6), 1) !important;
  transform: translate(-50%, calc((1 - var(--aura-pe)) * 14px)) scale(calc(.94 + .06 * var(--aura-pe))) !important;
  transform-origin: 50% 100%;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body .header-icon-box.aura-closing .header-icon > .ic-box::before,
  html body .header-icon-box.aura-closing .header-icon > .ic-box::after { animation: none !important; }
  html body .header-icon-box .header-icon > .ic-box img:not(#aura-none):not(#aura-n2) { transition: none !important; }
}

/* ── 42. Home: the film beneath the menu, a quieter scroll cue (2026-10-16)
   The 8-second logo film now flies one layer BELOW the menu bar, so the
   options always stay visible over it; the header bar appears only at the
   hand-off so it never dims the film on the way up. The thin arrow is
   replaced by a small mouse outline whose wheel rolls down — the familiar
   "scroll" sign — with a quiet SCROLL label on larger screens. It fades as
   soon as the page starts to move, and a tap still scrolls to section 2. */
html.aura-has-top body.home div#top-header #top-logo:not(#aura-none) { z-index: 4 !important; }
/* The scroll guide: a finger that swipes up (2026-10-16). One small SVG,
   animated inside itself so it costs no layout: every four seconds a hand
   fades in, presses (a soft gold ripple at the fingertip), drags up drawing
   a gold trail, and lifts away. No arrow, no words. Tap target 44px. */
html body.home .container_mouse:not(#aura-none) { transition: opacity .35s ease !important; }
html body.home .container_mouse:not(#aura-none) > a > *,
html body.home .container_mouse:not(#aura-none)::before,
html body.home .container_mouse:not(#aura-none)::after,
html body.home .container_mouse:not(#aura-none) > a::after { display: none !important; content: none !important; }
html body.home .container_mouse:not(#aura-none) > a {
  position: relative !important; display: block !important; width: 44px !important; height: 48px !important;
  margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; transform: none !important; overflow: visible !important;
}
html body.home .container_mouse:not(#aura-none) > a::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  -webkit-mask: none !important; mask: none !important; animation: none !important; transform: none !important; opacity: 1 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23cbb994'/%3E%3Cstop offset='1' stop-color='%23cbb994' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='18' y1='26' x2='18' y2='7' stroke='url%28%23g%29' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='19' stroke-dashoffset='19' opacity='0'%3E%3Canimate attributeName='stroke-dashoffset' values='19;19;0;0;19' keyTimes='0;.13;.38;.47;1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;1;0;0' keyTimes='0;.13;.33;.47;1' dur='4s' repeatCount='indefinite'/%3E%3C/line%3E%3Ccircle cx='18' cy='26' r='2' fill='none' stroke='%23cbb994' stroke-width='1' opacity='0'%3E%3Canimate attributeName='r' values='2;2;8;8' keyTimes='0;.1;.25;1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;.9;0;0' keyTimes='0;.09;.11;.25;1' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.92' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0'%3E%3CanimateTransform attributeName='transform' type='translate' values='10 25;10 25;10 24;10 8;10 6;10 25' keyTimes='0;.06;.12;.38;.45;1' dur='4s' repeatCount='indefinite' calcMode='spline' keySplines='0 0 1 1;.3 0 .7 1;.45 0 .2 1;.2 0 .6 1;0 0 1 1'/%3E%3Canimate attributeName='opacity' values='0;1;1;0;0' keyTimes='0;.06;.36;.45;1' dur='4s' repeatCount='indefinite'/%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}
@media (max-width: 767px) { html body.home .container_mouse:not(#aura-none) > a { width: 40px !important; height: 42px !important; } }
html body.home:has(.header-icon-box:not(.on-top)) .container_mouse:not(#aura-none) { opacity: 0 !important; pointer-events: none !important; }

/* scroll-bound motion runs on the compositor, frame for frame (2026-10-16) */
html body .header-icon-box.aura-scrub .header-icon > .ic-box:not(#aura-none):not(#aura-n2),
html body .header-icon-box.aura-scrub .middle-logo:not(#aura-none):not(#aura-n2) { will-change: transform, opacity; backface-visibility: hidden; }

/* ── 43. The film flies pinned, the page ends at its footer (2026-10-16) ── */
html.aura-has-top body.home div#top-header #top-logo.aura-fly:not(#aura-none) {
  position: fixed !important; left: var(--fl) !important; top: var(--ft) !important;
  width: var(--fw) !important; height: var(--fh) !important; margin: 0 !important;
  pointer-events: none;
}
html.aura-has-top body.home div#top-header #top-logo.aura-fly.aura-gone:not(#aura-none) { visibility: hidden; }
/* off home the scroll-cue placeholder takes no room at the foot of the page */
html body:not(.home) .container_mouse:not(#aura-none) {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
}
/* the swipe guide keeps clear air above the menu row */
html body.home .container_mouse:not(#aura-none) > a { top: -10px !important; }
@media (max-width: 767px) { html body.home .container_mouse:not(#aura-none) > a { top: -18px !important; } }

/* ── 44. Frame-perfect fold, film kept to section 1 (2026-10-16) ─────────
   Everything that moves during the scroll fold is transform or opacity on
   its own compositor layer — no border-radius, filter or size changes — so
   the GPU draws every frame without a repaint. The intro film's black frame
   is screened out, so only the glowing mark ever shows over content. */
html body .header-icon-box.aura-scrub .header-icon > .ic-box::before,
html body .header-icon-box.aura-scrub .header-icon > .ic-box::after,
html body .header-icon-box.aura-scrub .header-icon > .ic-box img,
html body .header-icon-box.aura-closing .header-icon > .ic-box::before,
html body .header-icon-box.aura-closing .header-icon > .ic-box::after { will-change: transform, opacity; }
html body .header-icon-box .header-icon > .ic-box { contain: layout style; }
html.aura-has-top body.home div#top-header #top-logo.aura-fly:not(#aura-none) { mix-blend-mode: screen; will-change: transform; }
html.aura-has-top body.home #top-logo-in:not(#aura-none) { backface-visibility: hidden; }

/* ── 45. The header keeps the moving logo (2026-10-16) ──────────────────
   Home: the intro film docks in the bar and keeps playing there. Other
   pages: the same film plays in the bar once the page has loaded; the still
   mark holds its place until then. The film's black frame is screened out. */
html.aura-has-top body.home div#top-header #top-logo.aura-fly.aura-dock:not(#aura-none) { z-index: 99991 !important; }
#aura-top .aura-top__logo { position: relative; }
#aura-top .aura-top__film {
  position: absolute; left: 50%; top: 50%; height: calc(100% / .66); width: auto; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
  mix-blend-mode: screen; transition: opacity .6s ease;
}
#aura-top { overflow: hidden; }
#aura-top.is-film .aura-top__film { opacity: 1; }
#aura-top .aura-top__svg { transition: opacity .6s ease; }
#aura-top.is-film .aura-top__svg { opacity: 0; }

/* ── 46. Category card: true 3:4, edge to edge, legible list (2026-10-16) ─
   The tiles were flex items squeezed by the scroll area (196×180 instead of
   196×261); they no longer shrink. On desktop the card's right and bottom
   padding — and a clipping wrapper — cut the bleeding grid short; the card
   now has no padding on those sides, so the wall runs to both edges. The
   card is a solid warm white so the list reads clearly, and the chosen
   category is a mild highlight (soft tint, thin rule) instead of a black
   slab that hid its own name. */
html body .home-category-menu.aura-card:not(#aura-none) {
  background: #f7f6f3 !important; background-image: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body .aura-card .aura-tile-img:not(#aura-none):not(#aura-n2) {
  flex: 0 0 auto !important; height: auto !important; max-height: none !important; aspect-ratio: 3 / 4 !important;
}
html body .aura-card .aura-cat-grid:not(#aura-none):not(#aura-n2) { grid-auto-rows: max-content !important; align-content: start !important; }
@media (min-width: 768px) {
  html body .home-category-menu.aura-card:not(#aura-none) { padding-right: 0 !important; padding-bottom: 0 !important; }
  html body .home-category-menu.aura-card .search-form:not(#aura-none) { overflow: visible !important; }
  html body .home-category-menu.aura-card .aura-cat-grid:not(#aura-none):not(#aura-n2) { margin: 0 !important; }
  html body .home-category-menu.aura-card .aura-cat-list:not(#aura-none) { padding-bottom: 28px !important; }
}

/* the list: dark, readable type; the chosen one gently lit */
html body .aura-card .aura-cat-item:not(#aura-none) > .aura-cat-label { color: #2a2a30 !important; }
html body .aura-card .aura-cat-item.is-child:not(#aura-none) > .aura-cat-label { color: #55555d !important; }
html body .aura-card .aura-cat-item:hover:not(#aura-none) { background: rgba(12, 12, 14, .05) !important; }
html body .aura-card .aura-cat-item.is-on:not(#aura-none):not(#aura-n2),
html body .aura-card .aura-cat-item[aria-selected="true"]:not(#aura-none):not(#aura-n2) {
  background: rgba(203, 185, 148, .18) !important;
  box-shadow: inset 2px 0 0 #0c0c0e !important;
  border-color: transparent !important;
}
html body .aura-card .aura-cat-item.is-on:not(#aura-none):not(#aura-n2) > .aura-cat-label,
html body .aura-card .aura-cat-item[aria-selected="true"]:not(#aura-none):not(#aura-n2) > .aura-cat-label {
  color: #0c0c0e !important; font-weight: 600 !important;
}
@media (max-width: 767px) {
  html body .aura-card .aura-cat-item.is-on:not(#aura-none):not(#aura-n2),
  html body .aura-card .aura-cat-item[aria-selected="true"]:not(#aura-none):not(#aura-n2) {
    background: rgba(203, 185, 148, .22) !important; box-shadow: none !important;
    border: 1px solid rgba(12, 12, 14, .55) !important;
  }
}

/* ── 47. Personalize my aura: choices show what they are (2026-10-16) ───
   The theme fixes every <button> at 45px tall, so each choice (body shapes
   above all) was cropped to a sliver — figure cut in half, name and note
   hidden. Choices now size to their content; body shapes are a clear figure
   with its name and a one-line note, five across on desktop and three a
   row on phones. */
html body .aura-fit .aura-fit__choice:not(#aura-none) { height: auto !important; line-height: 1.25 !important; }
html body .aura-fit .aura-fit__choices--fig:not(#aura-none) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; }
html body .aura-fit .aura-fit__choice--shape:not(#aura-none) {
  min-height: 0 !important; padding: 14px 6px 12px !important; gap: 8px !important;
  align-items: center !important; justify-content: flex-start !important; text-align: center !important;
}
html body .aura-fit .aura-fit__choice--shape .aura-fit__fig:not(#aura-none) { width: 48px !important; height: 72px !important; flex: 0 0 auto; overflow: visible; }
html body .aura-fit .aura-fit__choice--shape .aura-fit__choice-label:not(#aura-none) {
  display: block !important; font-size: 11px !important; letter-spacing: .08em !important; text-transform: uppercase; white-space: normal !important;
}
html body .aura-fit .aura-fit__choice--shape .aura-fit__choice-note:not(#aura-none) {
  display: block !important; font-size: 10px !important; line-height: 1.35 !important; white-space: normal !important; text-transform: none !important; letter-spacing: .02em !important;
}
@media (min-width: 1024px) {
  html body .aura-fit .aura-fit__choice--shape .aura-fit__fig:not(#aura-none) { width: 56px !important; height: 84px !important; }
}
@media (max-width: 767px) {
  html body .aura-fit .aura-fit__choices--fig:not(#aura-none) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body .aura-fit .aura-fit__choice--shape .aura-fit__fig:not(#aura-none) { width: 44px !important; height: 66px !important; }
  html body .aura-fit .aura-fit__choice--shape .aura-fit__choice-label:not(#aura-none) { font-size: 10.5px !important; letter-spacing: .06em !important; }
}
/* sizes read on one line; the bottoms list fits phones; typed field spaced */
html body .aura-fit .aura-fit__choice:not(#aura-none) { padding-left: 8px !important; padding-right: 8px !important; }
html body .aura-fit .aura-fit__choice--size:not(#aura-none),
html body .aura-fit .aura-fit__choice--size *:not(.aura-fit__tip):not(.aura-fit__tip *) { white-space: nowrap !important; }
html body .aura-fit .aura-fit__choice--size:not(#aura-none) .aura-fit__sz { letter-spacing: .08em !important; }
html body .aura-fit [data-aura-fit-step="pairing"] .aura-fit__choices:not(#aura-none) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
html body .aura-fit [data-aura-fit-step="pairing"] .aura-fit__choice:not(#aura-none) { min-height: 64px !important; padding: 12px 10px !important; }
html body .aura-fit .aura-fit__pair-own:not(#aura-none) { margin: 14px 0 0 !important; }
@media (max-width: 767px) {
  html body .aura-fit [data-aura-fit-step="pairing"] .aura-fit__choices:not(#aura-none) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .aura-fit [data-aura-fit-step="pairing"] .aura-fit__choice .aura-fit__choice-label { font-size: 11px !important; letter-spacing: .08em !important; }
  html body .aura-fit [data-aura-fit-step="pairing"] .aura-fit__choice .aura-fit__choice-note { font-size: 10px !important; }
}

/* Personalize my aura: a slim scrollbar — a hairline track, a gold thumb
   that brightens under the pointer — on the steps, the size table and the
   free-text box. Hidden entirely when nothing overflows. */
.aura-fit .aura-fit__body,
.aura-fit .aura-fit__guide-table,
.aura-fit textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(203, 185, 148, .55) rgba(242, 239, 233, .05);
  scrollbar-gutter: stable;
}
.aura-fit .aura-fit__body::-webkit-scrollbar,
.aura-fit .aura-fit__guide-table::-webkit-scrollbar,
.aura-fit textarea::-webkit-scrollbar { width: 4px; height: 4px; }
.aura-fit .aura-fit__body::-webkit-scrollbar-track,
.aura-fit .aura-fit__guide-table::-webkit-scrollbar-track,
.aura-fit textarea::-webkit-scrollbar-track { background: rgba(242, 239, 233, .05); }
.aura-fit .aura-fit__body::-webkit-scrollbar-thumb,
.aura-fit .aura-fit__guide-table::-webkit-scrollbar-thumb,
.aura-fit textarea::-webkit-scrollbar-thumb { background: rgba(203, 185, 148, .55); border-radius: 0; }
.aura-fit .aura-fit__body::-webkit-scrollbar-thumb:hover,
.aura-fit .aura-fit__guide-table::-webkit-scrollbar-thumb:hover { background: #cbb994; }
.aura-fit .aura-fit__body { overscroll-behavior: contain; }

/* ── 48. Swipe guide: right of centre, a longer swipe, a slight tilt ──── */
html body.home .container_mouse:not(#aura-none) {
  position: absolute !important; left: auto !important; right: clamp(18px, 6vw, 84px) !important;
  top: 50% !important; bottom: auto !important; width: auto !important; margin: 0 !important;
  transform: translateY(-50%) !important; z-index: 6 !important;
}
html body.home .container_mouse:not(#aura-none) > a { top: 0 !important; width: 44px !important; height: 66px !important; transform: rotate(-14deg) !important; transform-origin: 50% 60% !important; }
html body.home .container_mouse:not(#aura-none) > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 66'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23cbb994'/%3E%3Cstop offset='1' stop-color='%23cbb994' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='18' y1='44' x2='18' y2='6' stroke='url%28%23g%29' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='38' stroke-dashoffset='38' opacity='0'%3E%3Canimate attributeName='stroke-dashoffset' values='38;38;0;0;38' keyTimes='0;.13;.4;.48;1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;1;0;0' keyTimes='0;.13;.35;.48;1' dur='4s' repeatCount='indefinite'/%3E%3C/line%3E%3Ccircle cx='18' cy='44' r='2' fill='none' stroke='%23cbb994' stroke-width='1' opacity='0'%3E%3Canimate attributeName='r' values='2;2;8;8' keyTimes='0;.1;.25;1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;.9;0;0' keyTimes='0;.09;.11;.25;1' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.92' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0'%3E%3CanimateTransform attributeName='transform' type='translate' values='10 43;10 43;10 42;10 7;10 4;10 43' keyTimes='0;.06;.12;.4;.47;1' dur='4s' repeatCount='indefinite' calcMode='spline' keySplines='0 0 1 1;.3 0 .7 1;.45 0 .2 1;.2 0 .6 1;0 0 1 1'/%3E%3Canimate attributeName='opacity' values='0;1;1;0;0' keyTimes='0;.06;.38;.47;1' dur='4s' repeatCount='indefinite'/%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/g%3E%3C/svg%3E") !important; }
@media (max-width: 767px) {
  html body.home .container_mouse:not(#aura-none) { right: 14px !important; }
  html body.home .container_mouse:not(#aura-none) > a { width: 38px !important; height: 57px !important; }
}

/* ── 49. Body-shape figures read at a glance (2026-10-16) ────────────── */
html body .aura-fit .aura-fit__choice--shape .aura-fit__fig:not(#aura-none) { fill: rgba(242, 239, 233, .34) !important; stroke: #fff !important; stroke-width: 1.7 !important; }
html body .aura-fit .aura-fit__choice--shape .aura-fit__fig-head:not(#aura-none) { fill: rgba(242, 239, 233, .55) !important; }
html body .aura-fit .aura-fit__choice--shape .aura-fit__fig-mark:not(#aura-none) { stroke: #e0cfa6 !important; stroke-width: 2.6 !important; }
html body .aura-fit .aura-fit__choice--shape:not(#aura-none) { background: rgba(242, 239, 233, .06) !important; border-color: rgba(242, 239, 233, .28) !important; }
html body .aura-fit .aura-fit__choice--shape:hover:not(#aura-none) { border-color: rgba(203, 185, 148, .8) !important; background: rgba(203, 185, 148, .1) !important; }
html body .aura-fit .aura-fit__choice--shape .aura-fit__choice-note:not(#aura-none) { color: rgba(242, 239, 233, .78) !important; }

/* ── 50. The collection page (2026-10-16) ───────────────────────────────
   One calm column of controls above one seamless wall of 3:4 photographs:
   the search row scrolls with the page (it was pinned twice over, leaving a
   white band), categories are square chips, title / count / sort share a
   line, the manual column switcher gives way to automatic columns (see
   aura-bar.js), and captions stay inside their tiles. */
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-67742c3e:not(#aura-none),
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-3a7b767:not(#aura-none) {
  position: relative !important; top: auto !important; width: auto !important; box-shadow: none !important;
}
html.aura-has-top body:not(.home) .elementor-location-header .elementor-sticky__spacer { display: none !important; }
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-aa3dd10:not(#aura-none),
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-5d593ea:not(#aura-none) { padding-top: 14px !important; padding-bottom: 10px !important; }

body.post-type-archive-product .page-sidebar:not(#aura-none),
body.tax-product_cat .page-sidebar:not(#aura-none) { margin-bottom: 0 !important; }
body.post-type-archive-product .page-sidebar .widget-title:not(#aura-none),
body.tax-product_cat .page-sidebar .widget-title:not(#aura-none) { font-size: 11px !important; letter-spacing: .22em !important; color: #6b6b73 !important; margin-bottom: 10px !important; }
body.post-type-archive-product .page-sidebar .widget-title::after,
body.post-type-archive-product .page-sidebar .widget-title::before,
body.tax-product_cat .page-sidebar .widget-title::after,
body.tax-product_cat .page-sidebar .widget-title::before { display: none !important; }
body.post-type-archive-product .page-sidebar .widget-content:not(#aura-none),
body.tax-product_cat .page-sidebar .widget-content:not(#aura-none) { padding-top: 0 !important; display: block !important; max-height: none !important; }
body.post-type-archive-product .page-sidebar .show-display-inline:not(#aura-none),
body.tax-product_cat .page-sidebar .show-display-inline:not(#aura-none) { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; }
body.post-type-archive-product .page-sidebar .show-display-inline > li:not(#aura-none),
body.tax-product_cat .page-sidebar .show-display-inline > li:not(#aura-none) { margin: 0 !important; padding: 0 !important; list-style: none; }
body.post-type-archive-product .page-sidebar .filter-link:not(#aura-none),
body.tax-product_cat .page-sidebar .filter-link:not(#aura-none) {
  display: inline-flex !important; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px !important;
  border: 1px solid rgba(12, 12, 14, .16); border-radius: 0; color: #0c0c0e !important;
  font-size: 11.5px !important; letter-spacing: .12em; text-transform: uppercase; transition: border-color .2s ease, background-color .2s ease;
}
body.post-type-archive-product .page-sidebar .filter-link:hover:not(#aura-none),
body.tax-product_cat .page-sidebar .filter-link:hover:not(#aura-none),
body.tax-product_cat .page-sidebar .chosen > .filter-link:not(#aura-none) { border-color: #0c0c0e; background: rgba(203, 185, 148, .16); }
body.post-type-archive-product .page-sidebar .count:not(#aura-none),
body.tax-product_cat .page-sidebar .count:not(#aura-none) { color: #8a8a92 !important; font-size: 10.5px; }

body.post-type-archive-product .shop-archive-block:not(#aura-none),
body.tax-product_cat .shop-archive-block:not(#aura-none) { border: 0 !important; padding: 18px 0 0 !important; margin-bottom: 0 !important; }
body.post-type-archive-product .page-title:not(#aura-none),
body.tax-product_cat .page-title:not(#aura-none) { font-size: clamp(22px, 2.6vw, 34px) !important; letter-spacing: .14em !important; margin: 0 !important; }
body.post-type-archive-product .archive-shop-actions:not(#aura-none),
body.tax-product_cat .archive-shop-actions:not(#aura-none) { margin: 6px 0 16px !important; padding: 0 !important; }
body.post-type-archive-product .archive-result-count p,
body.tax-product_cat .archive-result-count p { margin: 0 !important; font-size: 10.5px !important; letter-spacing: .24em !important; color: #6b6b73 !important; }
body.post-type-archive-product .archive-layout-switcher,
body.tax-product_cat .archive-layout-switcher { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.post-type-archive-product .js-product-ordering .nice-select:not(#aura-none),
body.tax-product_cat .js-product-ordering .nice-select:not(#aura-none) {
  min-height: 38px; line-height: 36px; padding: 0 32px 0 14px !important; border: 1px solid rgba(12, 12, 14, .18) !important; border-radius: 0 !important;
  font-size: 11.5px !important; letter-spacing: .12em; text-transform: uppercase;
}

/* the wall */
.minimog-grid-wrapper.minimog-product .grid-item .product-wrapper:not(#aura-none) { height: 100%; border: 0 !important; box-shadow: inset 0 0 0 .5px rgba(12, 12, 14, .14) !important; }
.minimog-grid-wrapper.minimog-product .product-main-image .minimog-lazy-image:not(#aura-none) {
  --lazy-image-height: 133.333% !important; padding-bottom: 133.333% !important; height: 0 !important; overflow: hidden; background: #f1f0ed;
}
.minimog-grid-wrapper.minimog-product .product-main-image .minimog-lazy-image img:not(#aura-none) {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1) !important;
}
@media (hover: hover) { .minimog-grid-wrapper.minimog-product .grid-item:hover .product-main-image img:not(#aura-none) { transform: scale(1.035); } }
.minimog-grid-wrapper.minimog-product .product-info:not(#aura-none) { padding: 12px 12px 16px !important; text-align: center; }
.minimog-grid-wrapper.minimog-product .loop-product-category a:not(#aura-none) { font-size: 10px !important; letter-spacing: .2em !important; color: #8a8a92 !important; }
.minimog-grid-wrapper.minimog-product .woocommerce-loop-product__title:not(#aura-none) {
  margin: 6px 0 6px !important; font-size: 12px !important; line-height: 1.45 !important; letter-spacing: .08em !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.minimog-grid-wrapper.minimog-product .price:not(#aura-none) { font-size: 12.5px !important; letter-spacing: .04em; }
@media (max-width: 767px) {
  .minimog-grid-wrapper.minimog-product .product-info:not(#aura-none) { padding: 10px 8px 14px !important; }
  .minimog-grid-wrapper.minimog-product .woocommerce-loop-product__title:not(#aura-none) { font-size: 11px !important; letter-spacing: .05em !important; }
}
body.post-type-archive-product .page-content:not(#aura-none),
body.tax-product_cat .page-content:not(#aura-none) { padding-bottom: 28px !important; }

/* ── 51. Personalize my aura: "Your inputs" (2026-10-16) ────────────────
   The panel's right-hand column was switched off by the site stylesheet
   (§13), leaving an empty box. It returns as the record of what the shopper
   has told us: a quiet heading, each answer on its own hairline row in the
   order given, the figure drawn from them beneath, and the name field last.
   On phones it is one slim, swipeable row of answer chips above the step. */
html body .aura-fit:not(.is-result) .aura-fit__aside:not(#aura-none):not([hidden]) { display: flex !important; flex-direction: column; }
html body .aura-fit .aura-fit__aside:not(#aura-none)::before {
  content: "Your inputs"; order: 0; display: block; margin: 0 0 10px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--af-lux, #cbb994);
}
html body .aura-fit .aura-fit__aside .aura-fit__read:not(#aura-none) { order: 1; display: flex !important; flex-direction: column-reverse; margin: 0 0 14px; max-height: none !important; overflow: visible !important; }
html body .aura-fit .aura-fit__aside .aura-fit__read:empty::after {
  content: "Your answers appear here as you go."; display: block; padding: 10px 0;
  font-size: 12px; letter-spacing: .02em; color: rgba(242, 239, 233, .5); text-transform: none;
}
html body .aura-fit .aura-fit__aside .aura-fit__read > div:not(#aura-none) {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0 !important; border-bottom: 1px solid rgba(242, 239, 233, .09) !important;
  animation: aura-in-row .35s cubic-bezier(.22, 1, .36, 1) both;
}
html body .aura-fit .aura-fit__aside .aura-fit__read dt:not(#aura-none) { margin: 0; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 239, 233, .55); white-space: nowrap; }
html body .aura-fit .aura-fit__aside .aura-fit__read dd:not(#aura-none) { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: #f2efe9; text-align: right; overflow-wrap: anywhere; }
@keyframes aura-in-row { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html body .aura-fit .aura-fit__aside .aura-fit__avatar:not(#aura-none) { order: 2; height: clamp(150px, 24vh, 210px) !important; margin: 4px auto 14px !important; opacity: .92; }
html body .aura-fit .aura-fit__aside .aura-fit__id:not(#aura-none) { order: 3; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(242, 239, 233, .09); }

@media (max-width: 699px) {
  html body .aura-fit:not(.is-result) .aura-fit__aside:not(#aura-none):not([hidden]) {
    display: block !important; padding: 0 16px 10px !important; border-bottom: 1px solid rgba(242, 239, 233, .09);
  }
  html body .aura-fit .aura-fit__aside:not(#aura-none)::before { margin: 0 0 6px; font-size: 9px; }
  html body .aura-fit .aura-fit__aside .aura-fit__avatar:not(#aura-none),
  html body .aura-fit .aura-fit__aside .aura-fit__id-pitch:not(#aura-none),
  html body .aura-fit .aura-fit__aside .aura-fit__id-more:not(#aura-none) { display: none !important; }
  html body .aura-fit .aura-fit__aside .aura-fit__read:not(#aura-none) {
    flex-direction: row; flex-wrap: nowrap; gap: 6px; margin: 0 0 8px; overflow-x: auto !important; overflow-y: hidden !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  html body .aura-fit .aura-fit__aside .aura-fit__read::-webkit-scrollbar { display: none; }
  html body .aura-fit .aura-fit__aside .aura-fit__read > div:not(#aura-none) {
    flex: 0 0 auto; gap: 6px; padding: 6px 10px !important; border: 1px solid rgba(242, 239, 233, .16) !important;
  }
  html body .aura-fit .aura-fit__aside .aura-fit__read dd:not(#aura-none) { font-size: 11.5px; white-space: nowrap; }
  html body .aura-fit .aura-fit__aside .aura-fit__read:empty::after { padding: 2px 0; font-size: 11px; }
  html body .aura-fit .aura-fit__aside .aura-fit__id:not(#aura-none) { padding-top: 8px; }
  html body .aura-fit .aura-fit__aside .aura-fit__id-input:not(#aura-none) { min-height: 38px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html body .aura-fit .aura-fit__aside .aura-fit__read > div { animation: none; } }
html body .aura-fit .aura-fit__aside:not(#aura-none) { align-items: stretch !important; text-align: left !important; }
html body .aura-fit .aura-fit__aside .aura-fit__read:not(#aura-none) {
  width: 100% !important; align-self: stretch !important; border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important;
}
html body .aura-fit .aura-fit__aside:not(#aura-none)::before { text-align: left; }
@media (max-width: 699px) {
  html body .aura-fit:not(.is-result) .aura-fit__aside:not(#aura-none):not([hidden]) { display: flex !important; flex-direction: column; }
}

/* swipe guide: straight up, only the hand tilts; press, ripple, trail */
html body.home .container_mouse:not(#aura-none) > a { transform: none !important; height: 70px !important; }
html body.home .container_mouse:not(#aura-none) > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 70'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23cbb994' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23cbb994'/%3E%3Cstop offset='1' stop-color='%23f2e3bd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='18' y1='48' x2='18' y2='9' stroke='url%28%23g%29' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='39' stroke-dashoffset='39' opacity='0'%3E%3Canimate attributeName='stroke-dashoffset' values='39;39;0;0' keyTimes='0;.14;.42;1' calcMode='spline' keySplines='0 0 1 1;.45 0 .2 1;0 0 1 1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;1;1;0;0' keyTimes='0;.14;.2;.42;.56;1' dur='4s' repeatCount='indefinite'/%3E%3C/line%3E%3Ccircle cx='18' cy='48' r='2' fill='none' stroke='%23cbb994' stroke-width='1.2' opacity='0'%3E%3Canimate attributeName='r' values='2;2;10;10' keyTimes='0;.1;.26;1' calcMode='spline' keySplines='0 0 1 1;.2 .6 .3 1;0 0 1 1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;.95;0;0' keyTimes='0;.09;.11;.26;1' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='18' cy='48' r='2' fill='none' stroke='%23f2efe9' stroke-width='.8' opacity='0'%3E%3Canimate attributeName='r' values='2;2;7;7' keyTimes='0;.13;.27;1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;.6;0;0' keyTimes='0;.12;.14;.27;1' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='18' cy='48' r='1.6' fill='%23cbb994' opacity='0'%3E%3Canimate attributeName='cy' values='48;48;48;9;9' keyTimes='0;.1;.14;.42;1' calcMode='spline' keySplines='0 0 1 1;0 0 1 1;.45 0 .2 1;0 0 1 1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;0;1;1;0;0' keyTimes='0;.1;.12;.4;.5;1' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg opacity='0'%3E%3CanimateTransform attributeName='transform' type='translate' values='10 47;10 47;10 46;10 7;10 3;10 47' keyTimes='0;.06;.14;.42;.5;1' calcMode='spline' keySplines='0 0 1 1;.3 0 .7 1;.45 0 .2 1;.2 0 .6 1;0 0 1 1' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;1;1;0;0' keyTimes='0;.06;.4;.5;1' dur='4s' repeatCount='indefinite'/%3E%3Cg transform='translate%288 2%29'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='scale' values='1;1;.88;1;1' keyTimes='0;.08;.11;.16;1' dur='4s' repeatCount='indefinite'/%3E%3Cg transform='translate%28-8 -2%29 rotate%28-14 8 2%29' fill='none' stroke='%23fff' stroke-opacity='.94' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; }
@media (max-width: 767px) { html body.home .container_mouse:not(#aura-none) > a { height: 60px !important; } }
/* the figure in Personalize my aura waits for its new design */
html body .aura-fit .aura-fit__aside .aura-fit__avatar:not(#aura-none) { display: none !important; }
/* size guide: units under each heading, a one-line note on how it is measured */
html body .aura-fit .aura-fit__guide-table thead th small { display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: .12em; color: rgba(242, 239, 233, .45); text-transform: lowercase; font-weight: 400; }
html body .aura-fit .aura-fit__guide-note { margin: 0; padding: 10px 12px 12px; font-size: 11px; line-height: 1.5; letter-spacing: .02em; color: rgba(242, 239, 233, .6); border-top: 1px solid rgba(242, 239, 233, .09); text-transform: none; }
@media (max-width: 699px) { html body .aura-fit .aura-fit__guide-table th, html body .aura-fit .aura-fit__guide-table td { padding-left: 8px !important; padding-right: 8px !important; } }
/* phones: the panel is opaque enough that nothing behind it reads through */
@media (max-width: 767px) { html body .aura-fit .aura-fit__panel:not(#aura-none) { background: rgba(12, 12, 14, .97) !important; } }

/* ── 52. Every product card is 3:4 (2026-10-17) ─────────────────────────
   The home row draws its photographs straight into .product-main-image,
   so each kept its own shape (3:4, 4:3, 9:16) and the row went ragged. The
   frame itself is now 3:4 on every product loop on the site, and whatever
   the photograph's shape, it fills the frame from the centre. */
html body .product .product-thumbnail .product-main-image:not(#aura-none) {
  position: relative !important; display: block !important; aspect-ratio: 3 / 4 !important;
  height: auto !important; overflow: hidden !important; background: #f1f0ed;
}
html body .product .product-thumbnail .product-main-image > .minimog-lazy-image:not(#aura-none) {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important;
}
html body .product .product-thumbnail .product-main-image img:not(#aura-none),
html body .product .product-thumbnail .product-hover-image img:not(#aura-none) {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover !important; object-position: 50% 40% !important;
}
html body .product .product-thumbnail .product-hover-image:not(#aura-none) { position: absolute !important; inset: 0 !important; }

/* ── 53. One sleek footer on phones (2026-10-17) ────────────────────────── */
#aura-foot { display: none; }
@media (max-width: 767px) {
  html.aura-foot-on body .aura-foot-hide { display: none !important; }
  html.aura-foot-on #aura-foot {
    display: block; background: #0b0b0c; color: #f2efe9;
    padding: 40px 22px calc(36px + env(safe-area-inset-bottom, 0px)); text-align: left;
    font-family: inherit; border-top: 1px solid rgba(203, 185, 148, .25);
  }
  .aura-foot__logo { display: block; width: max-content; margin: 0 auto; }
  .aura-foot__logo img { display: block; height: 22px; width: auto; }
  .aura-foot__tag { margin: 14px 0 22px; text-align: center; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(242, 239, 233, .62); line-height: 1.6; }
  .aura-foot__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid rgba(242, 239, 233, .1); }
  html body .aura-foot__mail:not(#aura-none) { color: #f2efe9 !important; font-size: 12.5px; letter-spacing: .08em; text-decoration: none; text-transform: lowercase; }
  .aura-foot__soc { display: inline-flex; gap: 8px; }
  html body .aura-foot__soc a:not(#aura-none) {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid rgba(242, 239, 233, .22); color: #f2efe9 !important; transition: border-color .2s ease, background-color .2s ease;
  }
  .aura-foot__soc a:active { background: rgba(203, 185, 148, .16); border-color: #cbb994; }
  .aura-foot__soc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .aura-foot__soc svg .f { fill: currentColor; stroke: none; }
  .aura-foot__nav { margin: 6px 0 0; }
  .aura-foot__g { border-bottom: 1px solid rgba(242, 239, 233, .1); }
  .aura-foot__g summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer;
    font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #f2efe9; -webkit-tap-highlight-color: transparent;
  }
  .aura-foot__g summary::-webkit-details-marker { display: none; }
  .aura-foot__g summary::after { content: "+"; font-size: 18px; font-weight: 300; color: #cbb994; transition: transform .25s ease; }
  .aura-foot__g[open] summary::after { transform: rotate(45deg); }
  .aura-foot__g ul { margin: 0; padding: 0 0 14px; list-style: none; }
  .aura-foot__g li { margin: 0; }
  html body .aura-foot__g a:not(#aura-none) { display: block; padding: 9px 0; font-size: 13px; letter-spacing: .06em; color: rgba(242, 239, 233, .78) !important; text-decoration: none; }
  .aura-foot__news { margin-top: 26px; }
  .aura-foot__h { margin: 0 0 12px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #f2efe9; }
  #aura-foot .wpforms-container { margin: 0 !important; }
  #aura-foot .wpforms-form .wpforms-field { padding: 0 0 10px !important; }
  #aura-foot .wpforms-form .wpforms-field-label { display: none !important; }
  html body #aura-foot .wpforms-form input[type=email]:not(#aura-none),
  html body #aura-foot .wpforms-form input[type=text]:not(#aura-none) {
    width: 100% !important; max-width: none !important; height: 46px !important; padding: 0 14px !important; font-size: 16px !important;
    background: rgba(242, 239, 233, .06) !important; color: #f2efe9 !important; border: 1px solid rgba(242, 239, 233, .24) !important; border-radius: 0 !important;
  }
  html body #aura-foot .wpforms-form button[type=submit]:not(#aura-none) {
    width: 100% !important; height: 46px !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
    background: #f2efe9 !important; color: #0b0b0c !important; border: 0 !important; font-size: 11.5px !important; letter-spacing: .26em !important; text-transform: uppercase;
  }
  #aura-foot .wpforms-submit-container { padding: 0 !important; margin: 0 !important; }
  .aura-foot__fine { margin: 10px 0 0; font-size: 10.5px; letter-spacing: .04em; color: rgba(242, 239, 233, .5); text-transform: none; }
  .aura-foot__copy { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(242, 239, 233, .1); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 233, .5); text-align: center; }
}

/* ── 54. Desktop footer: tighter around the copyright (2026-10-17) ────── */
@media (min-width: 768px) {
  html body .elementor-element-6cfe6ae5 > .elementor-container > .elementor-column > .elementor-widget-wrap:not(#aura-none) { padding-bottom: 0 !important; }
  html body .elementor-element-6cfe6ae5 .elementor-widget:last-child:not(#aura-none) { margin-bottom: 0 !important; }
  html body .elementor-element-6efaa5c5 > .elementor-container > .elementor-column > .elementor-widget-wrap:not(#aura-none) { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .elementor-element-6efaa5c5 p:not(#aura-none) { margin: 0 !important; }
  html body .elementor-element-6e2f614d:not(#aura-none) { margin-bottom: 0 !important; }
  html body .elementor-element-f6bf53f:not(#aura-none) { padding-top: 0 !important; }
}

/* ── 55. Others card: centred, Follow us below the line (2026-10-17) ──── */
html body .home-social-icons1.aura-card .aura-lang:not(#aura-none) { text-align: center !important; padding-bottom: 18px !important; margin-bottom: 0 !important; }
html body .home-social-icons1.aura-card .aura-lang__top:not(#aura-none) { justify-items: center !important; justify-content: center !important; }
html body .home-social-icons1.aura-card .aura-lang__h:not(#aura-none) { justify-content: center !important; }
html body .home-social-icons1.aura-card .aura-lang__panel:not(#aura-none) { text-align: left; }
html body .home-social-icons1.aura-card .elementor-widget-tm-social-networks > .elementor-widget-container:not(#aura-none),
html body .home-social-icons1.aura-card .elementor-widget-tm-social-networks:not(#aura-none) {
  position: static !important; top: auto !important; margin-top: 0 !important; transform: none !important; text-align: center !important;
}
html body .home-social-icons1.aura-card .aura-follow-h:not(#aura-none) { justify-content: center !important; padding-top: 18px !important; margin: 0 0 12px !important; }
html body .home-social-icons1.aura-card .tm-social-networks:not(#aura-none),
html body .home-social-icons1.aura-card .tm-social-networks .list:not(#aura-none) { justify-content: center !important; }
html body .home-social-icons1.aura-card .e-con:has(.elementor-widget-tm-social-networks):not(#aura-none),
html body .home-social-icons1.aura-card .e-con:has(.elementor-widget-tm-social-networks) > .e-con-inner:not(#aura-none) { align-items: center !important; justify-content: center !important; }

/* ── 56. Collection: browse as a flow (2026-10-17) ──────────────────────
   The flat category widget (with counts) and the breadcrumb give way to one
   block: the path you are on, the current step large as the title; the top
   level as chips; and, once a category is open, its sub-categories as a
   second row. Spacing above the products is pulled in, and the grid no
   longer overhangs the screen by 31px (which clipped the title and sort). */
body.post-type-archive-product #page-title-bar,
body.tax-product_cat #page-title-bar,
body.post-type-archive-product .page-sidebar,
body.tax-product_cat .page-sidebar { display: none !important; }
body.post-type-archive-product .shop-archive-block > .page-title:not(#aura-none),
body.tax-product_cat .shop-archive-block > .page-title:not(#aura-none) {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; margin: 0 !important;
}
body.post-type-archive-product .page-main-content:not(#aura-none),
body.tax-product_cat .page-main-content:not(#aura-none) { padding-left: 0 !important; padding-right: 0 !important; }
body.post-type-archive-product .minimog-grid-wrapper.minimog-product:not(#aura-none),
body.tax-product_cat .minimog-grid-wrapper.minimog-product:not(#aura-none) { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
body.post-type-archive-product .shop-archive-block:not(#aura-none),
body.tax-product_cat .shop-archive-block:not(#aura-none) { padding: 10px 0 0 !important; }
@media (min-width: 768px) {
  body.post-type-archive-product .aura-flow, body.tax-product_cat .aura-flow,
  body.post-type-archive-product .archive-shop-actions:not(#aura-none),
  body.tax-product_cat .archive-shop-actions:not(#aura-none) { padding-left: 32px !important; padding-right: 32px !important; }
  body.post-type-archive-product .archive-shop-actions .row-flex:not(#aura-none),
  body.tax-product_cat .archive-shop-actions .row-flex:not(#aura-none) { margin: 0 !important; }
  body.post-type-archive-product .archive-shop-actions .col:not(#aura-none),
  body.tax-product_cat .archive-shop-actions .col:not(#aura-none) { padding-left: 0 !important; padding-right: 0 !important; }
}

.aura-flow { margin: 0 0 6px; }
.aura-flow__path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 0 0 14px; padding: 0; list-style: none; }
.aura-flow__path li { display: inline-flex; align-items: baseline; margin: 0; }
.aura-flow__path li + li::before { content: "›"; margin: 0 10px; color: #a8a8b0; font-size: 14px; }
html body .aura-flow__path a:not(#aura-none) { color: #6b6b73 !important; text-decoration: none; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
html body .aura-flow__path a:hover:not(#aura-none) { color: #0c0c0e !important; }
html body .aura-flow__path li:last-child a:not(#aura-none) {
  color: #0c0c0e !important; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .14em; line-height: 1.15;
}
.aura-flow__path li:last-child:not(:first-child)::before { font-size: clamp(18px, 2vw, 26px); }

.aura-flow__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.aura-flow__row.is-sub { padding-left: 14px; border-left: 1px solid rgba(12, 12, 14, .18); animation: aura-flow-in .35s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes aura-flow-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html body .aura-flow__chip:not(#aura-none) {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; flex: 0 0 auto;
  border: 1px solid rgba(12, 12, 14, .16); border-radius: 0; background: #fff; color: #2a2a30 !important;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
html body .aura-flow__chip:hover:not(#aura-none) { border-color: #0c0c0e; color: #0c0c0e !important; }
html body .aura-flow__chip.is-on:not(#aura-none) { border-color: #0c0c0e; background: rgba(203, 185, 148, .18); color: #0c0c0e !important; font-weight: 600; }
html body .aura-flow__row.is-sub .aura-flow__chip:not(#aura-none) { min-height: 34px; padding: 0 14px; font-size: 11px; }
html body .aura-flow__chip.is-all:not(#aura-none) { color: #55555d !important; }

@media (max-width: 767px) {
  .aura-flow__path { margin-bottom: 10px; }
  .aura-flow__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin-right: -18px; padding-right: 18px; scroll-snap-type: x proximity; }
  .aura-flow__row::-webkit-scrollbar { display: none; }
  .aura-flow__chip { scroll-snap-align: start; }
  .aura-flow__row.is-sub { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .aura-flow__row.is-sub { animation: none; } }

/* the header search sits higher: less air above it */
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-67742c3e:not(#aura-none),
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-3a7b767:not(#aura-none) { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; }
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-aa3dd10:not(#aura-none),
html.aura-has-top body:not(.home) .elementor-location-header .elementor-element-5d593ea:not(#aura-none) { padding-top: 8px !important; padding-bottom: 6px !important; margin-top: 0 !important; }
/* archives: one full-width column (the hidden sidebar no longer reserves room) */
body.post-type-archive-product #page-content > .container-extended > .row:not(#aura-none),
body.tax-product_cat #page-content > .container-extended > .row:not(#aura-none),
body.post-type-archive-product .container-extended > .row:not(#aura-none),
body.tax-product_cat .container-extended > .row:not(#aura-none) { margin-left: 0 !important; margin-right: 0 !important; display: block !important; }
body.post-type-archive-product .page-main-content:not(#aura-none),
body.tax-product_cat .page-main-content:not(#aura-none) { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; margin: 0 !important; }
/* category pages match the collection: the same full-width wall */
@media (min-width: 768px) {
  body.tax-product_cat #page-content > .container-extended:not(#aura-none),
  body.tax-product_cat .container-extended:not(#aura-none) { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
}
/* count and sort keep to the page gutter on phones too */
body.post-type-archive-product .archive-shop-actions .row-flex:not(#aura-none),
body.tax-product_cat .archive-shop-actions .row-flex:not(#aura-none) { margin: 0 !important; }
body.post-type-archive-product .archive-shop-actions .col:not(#aura-none),
body.tax-product_cat .archive-shop-actions .col:not(#aura-none) { padding-left: 0 !important; padding-right: 0 !important; }

/* ── 57. Phones: the open fan sits a little higher (2026-10-17) ──────────
   Open from the mid-page mark, the logo's feet landed 20px from the bottom
   edge and the outer pair of options 39px from it — where a phone's
   toolbar and thumb already are. The whole open set (mark + arc) rises 28px
   with the opening and settles back as it folds. `translate` is its own
   property, so none of the discs' transforms or timings change. */
@media (max-width: 992px) {
  .header-icon-box { --aura-lift-open: 28px; }
  html body .header-icon-box:not(#aura-none) { transition: translate 520ms cubic-bezier(.22, 1, .36, 1); }
  html body .header-icon-box.clicked:not(.on-top):not(.on-bottom):not(#aura-none) { translate: 0 calc(-1 * var(--aura-lift-open)); }
}
@media (prefers-reduced-motion: reduce) { html body .header-icon-box:not(#aura-none) { transition: none; } }