/* ===========================================================================
   AUSMart — motion system

   Three levels, as specified:
     1  micro interaction   150–300ms   buttons, cards, icons, inputs
     2  section reveal      400–700ms   homepage sections, images, text
     3  storytelling        scroll-driven, a handful of sections only

   Two rules govern everything here:

   - Only `transform` and `opacity` are animated. Both are composited by the
     GPU and neither triggers layout, so a scroll stays at 60fps even with
     several sections in flight.
   - Nothing hijacks the scroll. There is no virtual scroller, no wheel
     handler, no snap. The page scrolls exactly as fast as the user's finger
     or wheel says it should; motion only reacts to where the page already is.
   =========================================================================== */

:root{
  --dur-1: 220ms;   /* micro */
  --dur-2: 560ms;   /* section reveal */
  --ease:      cubic-bezier(.22,.61,.36,1);      /* gentle, no overshoot */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --reveal-y:  26px;
  --reveal-x:  40px;
}

/* ---------------------------------------------------------------------------
   LEVEL 2 — section reveal

   Elements start displaced and transparent, and are released when the
   observer adds .in. The `.no-js` guard means a browser without JavaScript
   shows everything immediately rather than a blank page — a reveal system
   that can hide content permanently is a bug, not an effect.
--------------------------------------------------------------------------- */
.no-js [data-reveal]{ opacity:1 !important; transform:none !important; }

[data-reveal]{
  opacity:0;
  transform:translate3d(0, var(--reveal-y), 0);
  transition:opacity var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out);
  will-change:opacity, transform;
}
[data-reveal="left"]  { transform:translate3d(calc(var(--reveal-x) * -1), 0, 0); }
[data-reveal="right"] { transform:translate3d(var(--reveal-x), 0, 0); }
[data-reveal="up"]    { transform:translate3d(0, var(--reveal-y), 0); }
[data-reveal="fade"]  { transform:none; }
[data-reveal="scale"] { transform:scale(.965); }

[data-reveal].in{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
/* Once it has played, stop promoting the layer — a page full of permanent
   will-change costs memory for no benefit. */
[data-reveal].done{ will-change:auto; }

/* Staggered children. The delay is set per element by the script rather than
   with nth-child, so a rail of 6 products and one of 30 both behave. */
[data-stagger] > *{
  opacity:0;
  transform:translate3d(0, calc(var(--reveal-y) * .8), 0);
  transition:opacity var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out);
}
.no-js [data-stagger] > *{ opacity:1; transform:none; }
[data-stagger].in > *{ opacity:1; transform:none; }

/* Text reveal — the line is masked and slides up from behind its own edge. */
.rv-line{ display:block; overflow:hidden; }
.rv-line > span{
  display:block;
  transform:translate3d(0,100%,0);
  transition:transform var(--dur-2) var(--ease-out);
}
.no-js .rv-line > span{ transform:none; }
.in .rv-line > span,
.rv-line.in > span{ transform:none; }

/* Image reveal — the picture scales back to 1 as its mask lifts. */
.rv-img{ overflow:hidden; }
.rv-img img{
  transform:scale(1.08);
  transition:transform 900ms var(--ease-out), opacity 500ms linear;
}
.rv-img.in img{ transform:scale(1); }

/* ---------------------------------------------------------------------------
   LEVEL 1 — micro interaction
--------------------------------------------------------------------------- */
.btn, .chip, .icon-btn, .pill, .btile, .bcard, .storecard, .catcard{
  transition:transform var(--dur-1) var(--ease),
             box-shadow var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             background-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease);
}
.btn:active, .chip:active{ transform:translateY(1px); }

/* Product card. Nothing in the text block moves — only the image scales and
   the action layer fades in — so prices and names never shift under the
   cursor while someone is reading them. */
.pcard{ transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.pcard .pcard-img{ overflow:hidden; position:relative; }
.pcard .pcard-img img{
  transition:transform 420ms var(--ease-out), opacity 300ms linear;
  will-change:transform;
}
.pcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.pcard:hover .pcard-img img{ transform:scale(1.045); }

/* Second image, revealed on hover when the product has one. */
.pcard-img .alt{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:inherit;
  opacity:0; transition:opacity 320ms var(--ease);
}
.pcard:hover .pcard-img .alt{ opacity:1; }

/* Quick actions sit over the image so the information block can't reflow. */
.pcard-actions{
  position:absolute; left:8px; right:8px; bottom:8px;
  display:flex; gap:6px; align-items:center;
  opacity:0; transform:translate3d(0,8px,0);
  transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pcard:hover .pcard-actions,
.pcard:focus-within .pcard-actions{ opacity:1; transform:none; }
@media (hover:none){ .pcard-actions{ opacity:1; transform:none; } }

.pcard-add{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  height:34px; border:0; border-radius:9px; cursor:pointer;
  background:var(--brand-deep); color:#fff;
  font:inherit; font-size:.8rem; font-weight:620;
  transition:background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pcard-add:hover{ background:var(--brand); }
.pcard-add.ok{ background:var(--ok); }
.pcard-wish{
  width:34px; height:34px; flex:none; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.pcard-wish:hover{ color:var(--danger); border-color:var(--danger); }
.pcard-wish.on{ color:var(--danger); }

/* Category tile */
.catcard{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r); background:var(--mist);
  aspect-ratio:4/3;
}
.catcard-img{ position:absolute; inset:0; }
.catcard-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 420ms var(--ease-out);
}
.catcard:hover .catcard-img img{ transform:scale(1.04); }
.catcard-veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(17,36,55,.78) 0%, rgba(17,36,55,.14) 55%, rgba(17,36,55,0) 100%);
  transition:opacity 300ms var(--ease);
}
.catcard:hover .catcard-veil{ opacity:.86; }
.catcard-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 16px 14px; color:#fff;
  display:flex; align-items:flex-end; gap:10px;
  transition:transform 300ms var(--ease);
}
.catcard:hover .catcard-body{ transform:translateY(-3px); }
.catcard-body .name{ font-weight:650; font-size:1.02rem; line-height:1.2; }
.catcard-body .count{ font-size:.76rem; opacity:.82; display:block; margin-top:2px; }
.catcard-arrow{
  margin-left:auto; flex:none;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--gold-dark);
  opacity:0; transform:translate3d(-6px,0,0);
  transition:opacity 260ms var(--ease), transform 260ms var(--ease);
}
.catcard:hover .catcard-arrow,
.catcard:focus-visible .catcard-arrow{ opacity:1; transform:none; }

/* ---------------------------------------------------------------------------
   HERO — sequenced entrance and gentle depth
--------------------------------------------------------------------------- */
[data-hero] .hero-step{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.no-js [data-hero] .hero-step{ opacity:1; transform:none; }
[data-hero].in .hero-step{ opacity:1; transform:none; }
/* Quick and overlapping. The CTA is interactive within half a second. */
[data-hero].in .hero-step:nth-child(1){ transition-delay:  0ms; }
[data-hero].in .hero-step:nth-child(2){ transition-delay: 70ms; }
[data-hero].in .hero-step:nth-child(3){ transition-delay:140ms; }
[data-hero].in .hero-step:nth-child(4){ transition-delay:210ms; }
[data-hero].in .hero-step:nth-child(5){ transition-delay:280ms; }

/* Floating product imagery at two depths. Very small amplitude — this should
   read as "alive", not as "moving". */
.float-slow{ animation:amFloat 9s ease-in-out infinite; }
.float-fast{ animation:amFloat 6.5s ease-in-out infinite; animation-delay:-2s; }
@keyframes amFloat{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(0,-9px,0); }
}

/* Parallax. The script writes --py; the element only ever translates. */
[data-parallax]{ will-change:transform; transform:translate3d(0, var(--py, 0px), 0); }

/* ---------------------------------------------------------------------------
   LEVEL 3 — sticky storytelling
--------------------------------------------------------------------------- */
.story{ position:relative; }
.story-grid{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:960px){
  .story-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
}

.story-steps{ display:flex; flex-direction:column; }
.story-step{ padding:8vh 0; }
@media (min-width:960px){ .story-step{ min-height:66vh; display:flex; flex-direction:column; justify-content:center; } }

/* Inactive steps recede rather than vanish, so the customer keeps their place
   in the list. */
.story-step-inner{
  opacity:.32; transform:translate3d(0,0,0);
  transition:opacity 420ms var(--ease), transform 420ms var(--ease);
}
.story-step.active .story-step-inner{ opacity:1; }
.no-js .story-step-inner{ opacity:1; }

.story-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; margin-bottom:14px;
  background:var(--mist); color:var(--ink);
  font-weight:750; font-size:.85rem; letter-spacing:.02em;
  transition:background 320ms var(--ease), color 320ms var(--ease), transform 320ms var(--ease);
}
.story-step.active .story-num{ background:var(--gold); color:var(--gold-dark); transform:scale(1.06); }

/* The sticky half. Centred in the viewport while the left column scrolls. */
.story-visual{ display:none; }
@media (min-width:960px){
  .story-visual{
    display:block; position:sticky; top:0;
    height:100vh; display:flex; align-items:center; justify-content:center;
  }
}
.story-stage{
  position:relative; width:100%; aspect-ratio:4/3;
  border-radius:var(--r-xl); overflow:hidden;
  background:var(--mist);
}
.story-scene{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.03);
  transition:opacity 620ms var(--ease-out), transform 900ms var(--ease-out);
  pointer-events:none;
}
.story-scene.on{ opacity:1; transform:scale(1); pointer-events:auto; }
.story-scene svg{ width:100%; height:100%; display:block; }

/* Mobile keeps a small inline visual per step instead of the sticky stage. */
.story-inline{ margin-top:16px; border-radius:var(--r); overflow:hidden; background:var(--mist); }
@media (min-width:960px){ .story-inline{ display:none; } }

/* Progress rail */
.story-rail{
  position:sticky; top:50%; align-self:start;
  display:none; flex-direction:column; gap:14px;
}
@media (min-width:960px){ .story-rail{ display:flex; } }
.story-dot{
  display:flex; align-items:center; gap:9px;
  font-size:.7rem; font-weight:700; color:var(--muted); letter-spacing:.06em;
}
.story-dot i{
  width:7px; height:7px; border-radius:50%; background:var(--line);
  transition:background 300ms var(--ease), transform 300ms var(--ease);
}
.story-dot.on{ color:var(--ink); }
.story-dot.on i{ background:var(--gold); transform:scale(1.5); }
.story-dot.past i{ background:var(--ink-soft); }

/* ---------------------------------------------------------------------------
   HORIZONTAL RAILS

   CSS scroll-snap, not a carousel library. Native scrolling means the
   trackpad, touch, shift+wheel and keyboard all work for free, and vertical
   scrolling is never captured.
--------------------------------------------------------------------------- */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:14px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 14px;
  /* Bleed to the page edge on small screens so the next card peeks. */
  margin-inline:-4px;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; flex:0 0 auto; }
.rail.dragging{ scroll-behavior:auto; cursor:grabbing; user-select:none; }
.rail.dragging *{ pointer-events:none; }

.rail-item{ width:210px; }
@media (max-width:719px){ .rail-item{ width:63vw; max-width:250px; } }

.rail-nav{ display:none; gap:6px; }
@media (min-width:960px){ .rail-nav{ display:flex; } }
.rail-btn{
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
             opacity var(--dur-1) var(--ease);
}
.rail-btn:hover{ background:var(--mist); border-color:var(--ink-soft); }
.rail-btn[disabled]{ opacity:.32; cursor:default; }

/* Brand strip — same rail, tighter items */
.brandstrip .rail-item{ width:186px; }

/* ---------------------------------------------------------------------------
   IMAGE LOADING — reserve the box, then fade in
--------------------------------------------------------------------------- */
.imgbox{ position:relative; overflow:hidden; background:var(--mist); }
.imgbox > img{ opacity:0; transition:opacity 380ms var(--ease); }
.imgbox > img.loaded{ opacity:1; }
.imgbox::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--mist) 0%, var(--mist-2) 50%, var(--mist) 100%);
  background-size:200% 100%;
  animation:amSkeleton 1.4s ease-in-out infinite;
  transition:opacity 300ms var(--ease);
}
.imgbox.ready::after{ opacity:0; animation:none; }
@keyframes amSkeleton{
  0%  { background-position:150% 0; }
  100%{ background-position:-50% 0; }
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION

   Mandatory, and deliberately total: no reveal displacement, no parallax, no
   scroll-linked movement, no looping float. State changes still happen — a
   drawer still opens, a hover still highlights — they just don't travel.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],
  [data-stagger] > *,
  [data-hero] .hero-step{ opacity:1 !important; transform:none !important; }
  .rv-line > span{ transform:none !important; }
  .rv-img img{ transform:none !important; }
  [data-parallax]{ transform:none !important; }
  .story-step-inner{ opacity:1 !important; }
  .story-scene{ transition:opacity 1ms linear !important; }
  .float-slow, .float-fast{ animation:none !important; }
  .imgbox::after{ animation:none !important; }
}

/* ---------------------------------------------------------------------------
   SCENE INTERNALS

   Each illustration has a few named groups. They idle very slowly, and only
   while their scene is the active one — an off-screen animation still costs
   compositor work, so paused is the default.
--------------------------------------------------------------------------- */
.story-scene .sc-float,
.story-scene .sc-drift,
.story-scene .sc-plane,
.story-scene .sc-pulse,
.story-scene .sc-tick,
.story-scene .sc-handoff,
.story-scene .sc-route{ animation-play-state:paused; }
.story-scene.on .sc-float,
.story-scene.on .sc-drift,
.story-scene.on .sc-plane,
.story-scene.on .sc-pulse,
.story-scene.on .sc-tick,
.story-scene.on .sc-handoff,
.story-scene.on .sc-route{ animation-play-state:running; }

.sc-float{ animation:scFloat 7s ease-in-out infinite; transform-origin:center; }
@keyframes scFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

.sc-drift{ animation:scDrift 9s ease-in-out infinite; animation-delay:-3s; }
@keyframes scDrift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(6px,-5px); } }

.sc-pulse{ animation:scPulse 3.2s ease-in-out infinite; transform-origin:200px 190px; }
@keyframes scPulse{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }

/* The aircraft eases a short way along its route when the scene becomes
   active, then stops. It does not fly continuously across the screen. */
.sc-plane{ animation:scFly 2.4s var(--ease-out) both; }
@keyframes scFly{
  from{ transform:translate(-46px, 26px) scale(.9); opacity:0; }
  to  { transform:translate(0,0) scale(1); opacity:1; }
}
.sc-route{ stroke-dashoffset:0; animation:scDash 22s linear infinite; }
@keyframes scDash{ to{ stroke-dashoffset:-320; } }

.sc-tick{ animation:scPop 620ms var(--ease-out) both; animation-delay:340ms; transform-origin:center; }
@keyframes scPop{ from{ transform:scale(.72); opacity:0; } to{ transform:scale(1); opacity:1; } }

.sc-handoff{ animation:scHandoff 700ms var(--ease-out) both; animation-delay:180ms; }
@keyframes scHandoff{ from{ transform:translate(-14px,10px); opacity:0; } to{ transform:none; opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .sc-float,.sc-drift,.sc-pulse,.sc-plane,.sc-route,.sc-tick,.sc-handoff{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ===========================================================================
   CART DRAWER
   =========================================================================== */
.drw-scrim{
  position:fixed; inset:0; z-index:200;
  background:rgba(17,36,55,.42);
  opacity:0; pointer-events:none;
  transition:opacity 260ms var(--ease);
}
.drw-scrim.open{ opacity:1; pointer-events:auto; }

.drw{
  position:fixed; top:0; right:0; bottom:0; z-index:201;
  width:min(420px, 100vw);
  display:flex; flex-direction:column;
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  transform:translate3d(100%,0,0);
  transition:transform 300ms var(--ease-out);
  will-change:transform;
}
.drw.open{ transform:translate3d(0,0,0); }
/* Mobile: a full-height sheet from the bottom reads better than a side panel. */
@media (max-width:559px){
  .drw{
    top:auto; left:0; width:100%; height:88vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translate3d(0,100%,0);
  }
}

.drw-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.drw-title{ font-weight:680; font-size:1.02rem; color:var(--ink-deep); display:flex; align-items:center; gap:8px; }
.drw-count{
  min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--mist); color:var(--ink); font-size:.72rem; font-weight:700;
}
.drw-head .icon-btn{ margin-left:auto; }

.drw-body{ flex:1 1 auto; overflow-y:auto; padding:6px 18px; -webkit-overflow-scrolling:touch; }

.drw-line{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); position:relative; }
.drw-thumb{
  flex:none; width:64px; height:64px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.drw-thumb img{ width:100%; height:100%; object-fit:contain; padding:5px; }
.drw-info{ flex:1 1 auto; min-width:0; }
.drw-name{
  display:block; font-size:.88rem; font-weight:560; color:var(--ink-deep);
  line-height:1.3; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.drw-foot{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.drw-price{ margin-left:auto; font-weight:650; color:var(--ink-deep); font-size:.88rem; }
.drw-x{
  position:absolute; top:12px; right:0;
  width:24px; height:24px; border:0; background:none; cursor:pointer;
  color:var(--muted); border-radius:6px;
  transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.drw-x:hover{ color:var(--danger); background:var(--mist); }

.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.qty button{
  width:26px; height:26px; border:0; background:none; cursor:pointer;
  color:var(--ink); font-size:.95rem; line-height:1;
  transition:background var(--dur-1) var(--ease);
}
.qty button:hover{ background:var(--mist); }
.qty span{ min-width:26px; text-align:center; font-size:.82rem; font-weight:620; color:var(--ink-deep); }

.drw-foot-panel{ flex:none; padding:16px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.drw-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:40px 24px; text-align:center; }

.drw-ship{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; margin-bottom:12px;
  background:var(--mist); border-radius:9px;
  font-size:.78rem; color:var(--ink);
}
.drw-ship-dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;
  animation:amBeat 2.4s ease-in-out infinite;
}
@keyframes amBeat{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* The counter pops when it changes, so the eye is drawn to it without a toast. */
.cart-count.bump{ animation:amBump 420ms var(--ease-out); }
@keyframes amBump{
  0%{ transform:scale(1); } 40%{ transform:scale(1.42); } 100%{ transform:scale(1); }
}

body.drw-open{ overflow:hidden; }

/* ===========================================================================
   STICKY HEADER

   No animated height anywhere. The topbar strip is reclaimed by giving the
   sticky wrapper a negative top offset equal to its own height: the strip
   rolls away as you scroll and the main row pins at the top. That is pure
   CSS, costs nothing, and never animates a layout property.

   The brief allows "compact OR partially hide". Compact is the better choice
   here because it keeps the logo, search and cart reachable at every scroll
   position, which is what the same section asks for.
   =========================================================================== */
:root{ --topbar-h:38px; }

/* Positioning of .headwrap now lives in centre.css — the header is fixed and
   has one appearance on every page. Left here only so the cascade is obvious. */
.headwrap{ z-index:80; }
.headwrap .header{ position:static; box-shadow:none; transition:box-shadow 260ms var(--ease); }
.headwrap.compact .header{ box-shadow:var(--shadow-sm); }
.topbar{ height:var(--topbar-h); display:flex; align-items:center; }
@media (max-width:719px){
  :root{ --topbar-h:0px; }
  .topbar{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .headwrap .header, .drw, .drw-scrim{ transition-duration:1ms !important; }
  .cart-count.bump{ animation:none !important; }
  .drw-ship-dot{ animation:none !important; }
}

/* ===========================================================================
   NEXT SHIPMENT
   =========================================================================== */
.ship{
  background:var(--ink-deep); color:#fff;
  border-radius:var(--r-xl); padding:28px 28px 24px;
  position:relative; overflow:hidden;
}
@media (min-width:720px){ .ship{ padding:34px 40px 30px; } }
.ship::after{
  content:""; position:absolute; right:-70px; top:-70px;
  width:230px; height:230px; border-radius:50%;
  background:var(--ink); opacity:.5;
}
.ship > *{ position:relative; }
.ship-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.ship-top .eyebrow{ color:var(--gold); }
.ship-head{ color:#fff; font-size:clamp(1.2rem,2.6vw,1.7rem); margin:0 0 22px; }

.ship-route{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.ship-end{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:none; }
.ship-end .dot{ width:13px; height:13px; border-radius:50%; }
.ship-end .dot.au{ background:#fff; }
.ship-end .dot.mn{ background:var(--gold); }
.ship-end .lbl{ font-size:.7rem; font-weight:600; color:#B4BFCB; white-space:nowrap; }

.ship-line{ position:relative; flex:1 1 auto; height:22px; display:flex; align-items:center; }
.ship-track{
  position:absolute; left:0; right:0; top:50%;
  border-top:2px dashed rgba(255,255,255,.34);
}
.ship-plane{
  position:absolute; top:50%; color:var(--gold);
  transform:translate(-50%,-50%) rotate(90deg);
  left:6%;
}
/* Eases to its position once, when the section reveals. It never loops. */
[data-reveal].in .ship-plane{
  animation:shipFly 1600ms var(--ease-out) both;
}
@keyframes shipFly{
  from{ left:6%; opacity:0; }
  to  { left:var(--at, 42%); opacity:1; }
}

.ship-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
@media (min-width:720px){ .ship-facts{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ship-fact{ display:flex; flex-direction:column; gap:3px; }
.ship-fact .k{ font-size:.72rem; color:#93A1B0; font-weight:600; }
.ship-fact .v{ font-size:.98rem; font-weight:650; color:#fff; }

.ship-count{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16);
}
.ship-count .n{ font-size:2.1rem; font-weight:750; color:var(--gold); line-height:1; }
.ship-count .u{ font-size:.82rem; color:#B4BFCB; }

@media (prefers-reduced-motion:reduce){
  .ship-plane{ animation:none !important; left:var(--at,42%) !important; opacity:1 !important; }
}

/* ===========================================================================
   SEARCH SUGGESTIONS
   =========================================================================== */
[data-suggest-wrap]{ position:relative; }
.sg-panel{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:90;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:8px; max-height:min(70vh, 520px); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translate3d(0,-6px,0);
  transition:opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.sg-panel.open{ opacity:1; visibility:visible; transform:none; }
.sg-group + .sg-group{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line-soft); }
.sg-label{
  display:block; padding:6px 10px 4px;
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);
}
.sg-row{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius:9px;
  font-size:.86rem; color:var(--ink-deep);
}
.sg-row:hover, .sg-row:focus-visible{ background:var(--mist); color:var(--ink); }
.sg-logo{
  flex:none; width:28px; height:28px; border-radius:7px; overflow:hidden;
  background:var(--mist); display:flex; align-items:center; justify-content:center;
}
.sg-logo img{ width:100%; height:100%; object-fit:contain; padding:2px; }
.sg-ico{ flex:none; width:28px; text-align:center; color:var(--muted); }
.sg-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-price{ margin-left:auto; font-size:.8rem; font-weight:650; color:var(--ink); white-space:nowrap; }
.sg-au{ width:6px; height:6px; border-radius:50%; background:var(--gold); margin-left:auto; flex:none; }

/* ===========================================================================
   PAGE TRANSITIONS

   Native View Transitions. Where the browser doesn't support it, nothing
   happens at all — navigation is simply instant, which is the correct
   fallback for an ecommerce site.
   =========================================================================== */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:amFadeOut 130ms var(--ease) both; }
  ::view-transition-new(root){ animation:amFadeIn 190ms var(--ease-out) both; }
}
@keyframes amFadeOut{ to{ opacity:0; } }
@keyframes amFadeIn{ from{ opacity:0; transform:translate3d(0,6px,0); } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
}

/* Stretched link: the product name covers the whole card, so the card is
   clickable without wrapping the quick-add form in an anchor. */
.pcard{ position:relative; }
.pcard-link::after{ content:""; position:absolute; inset:0; z-index:1; }
.pcard-actions{ z-index:2; }
.pcard-actions form{ display:flex; }

/* ===========================================================================
   HOMEPAGE LAYOUT ADDITIONS
   =========================================================================== */
.hero{ position:relative; overflow:hidden; }
.hero-orbs{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.orb{ position:absolute; border-radius:50%; display:block; }
.orb-a{
  width:280px; height:280px; right:-70px; top:-90px;
  background:radial-gradient(circle at 30% 30%, rgba(245,185,66,.42), rgba(245,185,66,0) 70%);
}
.orb-b{
  width:220px; height:220px; left:-60px; bottom:-80px;
  background:radial-gradient(circle at 60% 40%, rgba(232,93,42,.34), rgba(232,93,42,0) 70%);
}
.hero-inner{ position:relative; z-index:1; }

.catgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:720px){ .catgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .catgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* A category with no photography still needs to look deliberate: tint the
   tile and let the veil and type carry it. */
.catcard .catcard-img{ background:linear-gradient(135deg, var(--ink) 0%, var(--ink-deep) 100%); }
.catgrid .catcard:nth-child(4n+2) .catcard-img{ background:linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 100%); }
.catgrid .catcard:nth-child(4n+3) .catcard-img{ background:linear-gradient(135deg, var(--ink-deep) 0%, #0B1B2B 100%); }
.catgrid .catcard:nth-child(4n+4) .catcard-img{ background:linear-gradient(135deg, #274563 0%, var(--ink-deep) 100%); }
.catcard .catcard-img.imgbox::after{ display:none; }   /* no skeleton on a tint */

.editorial .ed-grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
@media (min-width:900px){ .editorial .ed-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; } }
.ed-side{ margin:0; }

/* The rails bleed to the page edge on phones so the next card peeks in,
   which is what tells someone the row scrolls. */
@media (max-width:719px){
  .rail{ padding-inline:20px; margin-inline:-20px; }
}

/* One scene at the top of a story section on mobile, in place of the sticky
   stage — which is hidden below 960px anyway. */
.story-lead{ border-radius:var(--r-lg); overflow:hidden; margin-bottom:8px; background:var(--mist); }
.story-lead svg{ width:100%; height:auto; display:block; }
@media (min-width:960px){ .story-lead{ display:none; } }