/* Built by boost-specificity.js — each `html body X` selector is
   mirrored as `html body.stb-standard X` so this layer
   outranks the legacy `body.stb-standard X` rules that
   would otherwise win on specificity. Edit the source, not this. */
/* Built by boost-specificity.js — each `html body X` selector is
   mirrored as `html body.stb-standard X` so this layer
   outranks the legacy `body.stb-standard X` rules that
   would otherwise win on specificity. Edit the source, not this. */
/* Built by boost-specificity.js — each `html body X` selector is
   mirrored as `html body.stb-standard X` so this layer
   outranks the legacy `body.stb-standard X` rules that
   would otherwise win on specificity. Edit the source, not this. */
/* Built by boost-specificity.js — each `html body X` selector is
   mirrored as `html body.stb-standard X` so this layer
   outranks the legacy `body.stb-standard X` rules that
   would otherwise win on specificity. Edit the source, not this. */
/* eShobuy — one colour system, and a different structure.
   =========================================================================
   WHAT THE AUDIT FOUND
   -------------------------------------------------------------------------
   870 distinct hex colours in the consolidated stylesheet alone. Three
   different blues used as "the brand blue" (#0074C2, #1769C2, #0A6FB4),
   four greys used as "the border", two reds for price. That is why the same
   component looks slightly different on different pages — not because
   anyone designed it that way, but because each version added its own
   near-miss of a colour that already existed.

   So the first job is one palette, defined once, with every legacy name
   pointed at it. Nothing new is invented: the values below are the ones the
   store already uses most, and every duplicate collapses onto them.

   THE SECOND JOB — a genuinely different structure
   -------------------------------------------------------------------------
   You asked for the look to change, not just be tidied, and for it to read
   as a standard professional e-commerce platform rather than anything
   luxury. Those pull in a clear direction.

   Luxury signals with restraint and emptiness: huge margins, thin type, no
   edges, slow motion. A working shop signals the opposite — CONFIDENCE and
   DENSITY. Things are close together because there is a lot to sell, the
   structure is obvious because people are scanning, and the hierarchy is
   loud enough to read at arm's length on a phone in daylight.

   So the change is structural rather than decorative:

     1. SECTION BANDS. Shelves alternate between paper and surface, so the
        page has visible chapters instead of one endless flat field. This is
        the single biggest change and it is what every serious commerce site
        does — it is how a shopper knows where one thing ends.

     2. A TWO-PART CARD. The photo sits on white; the name, price and action
        sit on a tinted footer divided by a rule. One flat block reads as a
        tile; two parts read as a product with information attached.

     3. A SOLID BRAND BAR. The top strip becomes the brand blue rather than
        near-black, which anchors the page and tells you whose shop this is
        in the first 200ms.

     4. LOUDER HIERARCHY. Section titles up, price up, supporting text down.
        The old scale was polite; a shop should not be polite about price.

   No gradients, no gold, no serif, no glow, no oversized whitespace.
   ========================================================================= */

:root{
  /* ── THE PALETTE, ONCE ──────────────────────────────────────────────
     Every value below already appears in the store. The duplicates and
     near-misses collapse onto these. */

  /* Brand — #0A6FB4 measured 4.9:1 on white and is the one that passes AA.
     #0074C2 and #1769C2 are the other two in use; both now resolve here. */
  --e-brand:        #0A6FB4;
  --e-brand-deep:   #06507F;
  --e-brand-wash:   #EAF3FA;

  /* Ink */
  --e-ink:          #101D2E;
  --e-ink-2:        #22344A;
  --e-slate:        #5A6B80;
  --e-mute:         #8496A9;

  /* Ground */
  --e-paper:        #F4F6F9;
  --e-surface:      #FFFFFF;
  --e-well:         #F0F3F7;

  /* Structure */
  --e-rule:         #DCE3EB;
  --e-rule-firm:    #C6D2DE;

  /* Semantic — meaning only, never decoration */
  --e-price:        #C22B3C;
  --e-stock:        #0B6B4F;
  --e-warn:         #96650B;

  /* Geometry — unchanged from which settled this */
  --e-r-sm: 3px;
  --e-r:    5px;

  --e-ease: cubic-bezier(.2,.7,.3,1);
}

/* Every legacy token name now resolves to the palette above. This is what
   makes the colour consistent everywhere: the older stylesheets keep using
   their own names, and those names stop meaning three different blues. */
html body,
html body.stb-standard,
html body.stb-standard,
html body.market-light,
html body.stb-standard.market-light,
html body.stb-admin-standard,
html body.stb-standard.stb-admin-standard{
  --shell-blue: var(--e-brand)!important;
  --shell-blue-deep: var(--e-brand-deep)!important;
  --shell-blue-wash: var(--e-brand-wash)!important;
  --shell-ink: var(--e-ink)!important;
  --shell-ink-soft: var(--e-ink-2)!important;
  --shell-slate: var(--e-slate)!important;
  --shell-mute: var(--e-mute)!important;
  --shell-paper: var(--e-paper)!important;
  --shell-surface: var(--e-surface)!important;
  --shell-well: var(--e-well)!important;
  --shell-rule: var(--e-rule)!important;
  --shell-rule-firm: var(--e-rule-firm)!important;
  --shell-price: var(--e-price)!important;
  --shell-stock: var(--e-stock)!important;

  --stb-blue: var(--e-brand)!important;
  --stb-deep: var(--e-brand-deep)!important;
  --stb-soft: var(--e-brand-wash)!important;
  --stb-red: var(--e-price)!important;
  --stb-green: var(--e-stock)!important;
  --stb-text: var(--e-ink)!important;
  --stb-muted: var(--e-slate)!important;
  --stb-card: var(--e-surface)!important;
  --stb-line: var(--e-rule)!important;
  --stb-bg: var(--e-paper)!important;

  --accent: var(--e-brand)!important;
  --accent-2: var(--e-brand-deep)!important;
  --primary: var(--e-brand)!important;
  --danger: var(--e-price)!important;
  --success: var(--e-stock)!important;
  --text-main: var(--e-ink)!important;
  --text-muted: var(--e-slate)!important;
  --glass-border: var(--e-rule)!important;
  --pp-shadow-1: none!important;
  --ink-primary: var(--e-brand)!important;
  --pane-blue: var(--e-brand)!important;
  --pane-ink: var(--e-ink)!important;
  --pane-rule: var(--e-rule)!important;
}

/* The three stray blues, wherever they were hard-coded rather than
   tokenised. Only these exact values — nothing else is touched. */
html body [style*="#0074C2"], html body.stb-standard [style*="#0074C2"], html body [style*="#1769C2"], html body.stb-standard [style*="#1769C2"]{ color: var(--e-brand)!important; }

/* ═══════════════════════════════════════════════════════════════════════
   1. NO HOVER SCALE — anywhere
   ═══════════════════════════════════════════════════════════════════════
   Three rules were growing things on hover: the price, the card photo, and
   the wishlist/cart buttons.

   It is the wrong effect for a shop. Scaling a product photo on hover
   crops it — the shopper loses the edges of the thing they are trying to
   look at, which is the opposite of helping. Scaling a price is worse: the
   number moves while they are reading it.

   Hover now changes ground and edge only. Nothing moves, nothing grows,
   nothing crops. This is also the behaviour a phone gets, so the two
   agree. */
html body .card:hover .card-img img,
html body.stb-standard .card:hover .card-img img,
html body .card.touch-active .card-img img,
html body.stb-standard .card.touch-active .card-img img,
html body .card:hover .price-now,
html body.stb-standard .card:hover .price-now,
html body .card.touch-active .price-now,
html body.stb-standard .card.touch-active .price-now,
html body .cbtn:hover,
html body.stb-standard .cbtn:hover,
html body .card-fav:hover,
html body.stb-standard .card-fav:hover,
html body .card:hover,
html body.stb-standard .card:hover,
html body .card.touch-active,
html body.stb-standard .card.touch-active,
html body .fbt-card:hover,
html body.stb-standard .fbt-card:hover,
html body .market-category:hover .cat-art,
html body.stb-standard .market-category:hover .cat-art,
html body .brand-card:hover,
html body.stb-standard .brand-card:hover,
html body .hero-side-card:hover,
html body.stb-standard .hero-side-card:hover,
html body .trust-it:hover,
html body.stb-standard .trust-it:hover{
  transform: none!important;
  filter: none!important;
  zoom: normal!important;
}
html body .card:hover .card-img img,html body.stb-standard .card:hover .card-img img{ transition: none!important; }

/* What hover does instead: the edge firms up and the ground lifts a shade.
   Readable, instant, and it costs no layout. */
html body .card,html body.stb-standard .card{
  background: var(--e-surface)!important;
  border: 1px solid var(--e-rule)!important;
  box-shadow: none!important;
  transition: border-color .14s var(--e-ease), background .14s var(--e-ease)!important;
}
html body .card:hover,
html body.stb-standard .card:hover,
html body .card:focus-within,
html body.stb-standard .card:focus-within,
html body .card.touch-active,
html body.stb-standard .card.touch-active{
  border-color: var(--e-rule-firm)!important;
  background: var(--e-surface)!important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. SECTION BANDS — the structural change
   ═══════════════════════════════════════════════════════════════════════
   The page was one flat field of paper from header to footer, so every
   shelf ran into the next and a shopper had no sense of chapters. Shelves
   now alternate ground, with a full-bleed band behind each one.

   This is the single biggest visual change and it is what every serious
   commerce site does. It is structure, not decoration: it tells you where
   one thing ends. */
html body .sec,
html body.stb-standard .sec,
html body .market-category-section,
html body.stb-standard .market-category-section,
html body .flashDealSection,
html body.stb-standard .flashDealSection{
  position: relative;
  padding: 34px 0!important;
  margin: 0!important;
  border: 0!important;
  background: transparent!important;
}
html body .sec::before,
html body.stb-standard .sec::before,
html body .market-category-section::before,
html body.stb-standard .market-category-section::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background: transparent;
}
/* Odd shelves sit on white, even on paper. */
html body .sec:nth-of-type(odd)::before,html body.stb-standard .sec:nth-of-type(odd)::before{ background: var(--e-surface); }
html body .sec:nth-of-type(odd),html body.stb-standard .sec:nth-of-type(odd){ border-top: 1px solid var(--e-rule)!important; border-bottom: 1px solid var(--e-rule)!important; }

/* ═══════════════════════════════════════════════════════════════════════
   3. THE TWO-PART CARD
   ═══════════════════════════════════════════════════════════════════════
   The photo sits on white. The name, price and action sit on a tinted
   footer, divided by a rule. One flat block reads as a tile; two parts read
   as a product with information attached to it. */
html body .card-img,html body.stb-standard .card-img{
  background: var(--e-surface)!important;
  border-bottom: 1px solid var(--e-rule)!important;
  padding: 16px!important;
  aspect-ratio: 1/1!important;
  height: auto!important;
}
html body .card-body,html body.stb-standard .card-body{
  background: var(--e-well)!important;
  padding: 12px 13px 14px!important;
}
html body .card-brand,html body.stb-standard .card-brand{
  font-size: 9.5px!important;
  font-weight: 700!important;
  letter-spacing: .12em!important;
  text-transform: uppercase!important;
  color: var(--e-brand)!important;
}
html body .card-name,html body.stb-standard .card-name{
  font-size: 13px!important;
  font-weight: 550!important;
  line-height: 1.45!important;
  color: var(--e-ink-2)!important;
}

/* A shop should not be polite about price. */
html body .price-now,html body.stb-standard .price-now{
  font-size: 18.5px!important;
  font-weight: 800!important;
  letter-spacing: -.028em!important;
  color: var(--e-price)!important;
}
html body .price-now span,html body.stb-standard .price-now span{ font-size: 12px!important; font-weight: 650!important; vertical-align: 3px; opacity: .82; }
html body .price-old,html body.stb-standard .price-old{ font-size: 12px!important; color: var(--e-mute)!important; }

/* ═══════════════════════════════════════════════════════════════════════
   4. A SOLID BRAND BAR
   ═══════════════════════════════════════════════════════════════════════
   The top strip was near-black. In the brand blue it anchors the page and
   says whose shop this is inside the first 200ms — which near-black does
   not. */
html body .market-top,html body.stb-standard .market-top{
  background: var(--e-brand-deep)!important;
  color: rgba(255,255,255,.86)!important;
  border: 0!important;
  font-size: 11.5px!important;
  letter-spacing: .015em!important;
}
html body .market-top b,html body.stb-standard .market-top b{ color: #fff!important; }
html body .market-top .mt-btn,html body.stb-standard .market-top .mt-btn{
  background: rgba(255,255,255,.14)!important;
  color: #fff!important;
  border-radius: var(--e-r-sm)!important;
}
html body .header,html body.stb-standard .header{
  background: var(--e-surface)!important;
  border-bottom: 1px solid var(--e-rule)!important;
  box-shadow: none!important;
}

/* Louder section headings. */
html body .sec-title,html body.stb-standard .sec-title{
  font-size: 20px!important;
  font-weight: 800!important;
  letter-spacing: -.018em!important;
  text-transform: none!important;
  color: var(--e-ink)!important;
}
html body .sec-head,html body.stb-standard .sec-head{
  border-bottom: 0!important;
  padding-bottom: 0!important;
  margin-bottom: 18px!important;
  align-items: center!important;
}
html body .sec-head::after,html body.stb-standard .sec-head::after{ display: none!important; }
html body .sec-head a, html body.stb-standard .sec-head a, html body .sec-head .see-all, html body.stb-standard .sec-head .see-all{
  font-size: 13px!important;
  font-weight: 700!important;
  color: var(--e-brand-deep)!important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. THE SHOWCASE MEDIA FILTER — the readability bug
   ═══════════════════════════════════════════════════════════════════════
   The screenshot shows it exactly: "Video" and "Image" are set in
   rgba(255,255,255,.72) on a TRANSPARENT background. Behind them is the
   blurred product photo, which for a pink neck fan on white is almost
   white — so white-on-white, and the two inactive labels vanish.

   The active pill was readable only because it carries its own solid
   background. The other two had nothing.

   Fixed by giving the CONTROL a ground rather than the labels a colour. A
   glass track means the labels sit on a known dark surface no matter what
   the video or photo behind it is doing — which is the only way this can be
   guaranteed, because the backdrop is a customer's product photo and could
   be any colour at all.

   Glass is used HERE and nowhere else in the store. It belongs on top of
   media, where there is a real image to show through; on a page it would be
   decoration. */
html body #view-reels .wave-media-mode,
html body.stb-standard #view-reels .wave-media-mode,
html body #view-reels .kiln-media-mode,
html body.stb-standard #view-reels .kiln-media-mode,
html body #view-reels .reel-mode-row,
html body.stb-standard #view-reels .reel-mode-row{
  display: inline-flex!important;
  align-items: center!important;
  gap: 2px!important;
  padding: 3px!important;
  border-radius: 999px!important;
  background: rgba(11,15,20,.55)!important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,.16)!important;
  box-shadow: 0 2px 14px rgba(0,0,0,.28)!important;
}

html body #view-reels .wave-mode-btn,
html body.stb-standard #view-reels .wave-mode-btn,
html body #view-reels .kiln-mode-btn,
html body.stb-standard #view-reels .kiln-mode-btn{
  min-height: 30px!important;
  padding: 0 14px!important;
  border: 0!important;
  border-radius: 999px!important;
  background: transparent!important;
  /* .88 not .72 — on a glass track this is legible, and the inactive
     labels have to be READ, not merely present. */
  color: rgba(255,255,255,.88)!important;
  font: 700 11.5px/1 var(--shell-sans, system-ui)!important;
  letter-spacing: .04em!important;
  white-space: nowrap!important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35)!important;
  transition: background .14s var(--e-ease), color .14s var(--e-ease)!important;
}
html body #view-reels .wave-mode-btn:hover,
html body.stb-standard #view-reels .wave-mode-btn:hover,
html body #view-reels .kiln-mode-btn:hover,
html body.stb-standard #view-reels .kiln-mode-btn:hover{
  background: rgba(255,255,255,.14)!important;
  color: #fff!important;
}
/* Active: solid white pill, ink text. The contrast between active and
   inactive is now carried by GROUND, not by opacity — opacity alone is what
   failed against a light backdrop. */
html body #view-reels .wave-mode-btn.is-active,
html body.stb-standard #view-reels .wave-mode-btn.is-active,
html body #view-reels .kiln-mode-btn.is-active,
html body.stb-standard #view-reels .kiln-mode-btn.is-active{
  background: #fff!important;
  color: var(--e-ink)!important;
  font-weight: 800!important;
  text-shadow: none!important;
  box-shadow: 0 1px 3px rgba(0,0,0,.22)!important;
}

/* The other showcase chrome gets the same glass, so the overlay reads as
   one system rather than several. */
html body #view-reels .reel-back,
html body.stb-standard #view-reels .reel-back,
html body #view-reels .ember-search-toggle,
html body.stb-standard #view-reels .ember-search-toggle,
html body #view-reels .reel-search-toggle,
html body.stb-standard #view-reels .reel-search-toggle,
html body #view-reels .lens-audio-btn,
html body.stb-standard #view-reels .lens-audio-btn,
html body #view-reels .flux-gallery-nav,
html body.stb-standard #view-reels .flux-gallery-nav,
html body #view-reels .flux-gallery-dots,
html body.stb-standard #view-reels .flux-gallery-dots{
  background: rgba(11,15,20,.52)!important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,.16)!important;
  color: #fff!important;
  box-shadow: 0 2px 14px rgba(0,0,0,.26)!important;
}

/* And the product panel, so the price is readable over a white product. */
html body #view-reels .reel-info,html body.stb-standard #view-reels .reel-info{
  background: linear-gradient(to top,
    rgba(11,15,20,.90) 0%, rgba(11,15,20,.72) 55%, rgba(11,15,20,0) 100%)!important;
}
html body #view-reels .reel-name,
html body.stb-standard #view-reels .reel-name,
html body #view-reels .reel-price,
html body.stb-standard #view-reels .reel-price{ color: #fff!important; text-shadow: 0 1px 3px rgba(0,0,0,.4)!important; }

/* ═══════════════════════════════════════════════════════════════════════
   6. BUTTONS — one shape, one weight
   ═══════════════════════════════════════════════════════════════════════ */
html body .d-btn.buy, html body.stb-standard .d-btn.buy, html body .go, html body.stb-standard .go, html body .checkout-btn, html body.stb-standard .checkout-btn, html body .hero-btn, html body.stb-standard .hero-btn, html body .ad-btn, html body.stb-standard .ad-btn, html body .reel-order, html body.stb-standard .reel-order{
  background: var(--e-brand-deep)!important;
  color: #fff!important;
  border: 1px solid var(--e-brand-deep)!important;
  border-radius: var(--e-r-sm)!important;
  font-weight: 750!important;
  letter-spacing: .01em!important;
  box-shadow: none!important;
}
html body .d-btn.buy:hover, html body.stb-standard .d-btn.buy:hover, html body .go:hover, html body.stb-standard .go:hover, html body .checkout-btn:hover, html body.stb-standard .checkout-btn:hover{
  background: var(--e-brand)!important;
  border-color: var(--e-brand)!important;
  transform: none!important;
}
html body .d-btn.cart,html body.stb-standard .d-btn.cart{
  background: var(--e-surface)!important;
  border: 1px solid var(--e-rule-firm)!important;
  color: var(--e-ink)!important;
  border-radius: var(--e-r-sm)!important;
  font-weight: 750!important;
}
html body .d-btn.cart:hover,html body.stb-standard .d-btn.cart:hover{ border-color: var(--e-brand)!important; color: var(--e-brand-deep)!important; background: var(--e-brand-wash)!important; }

/* Category rail: chips with a ground, so the active one is obvious. */
html body .pill,html body.stb-standard .pill{
  border-radius: 999px!important;
  padding: 8px 15px!important;
  font-size: 12.5px!important;
  font-weight: 650!important;
  color: var(--e-slate)!important;
  background: transparent!important;
  border: 1px solid transparent!important;
}
html body .pill:hover,html body.stb-standard .pill:hover{ background: var(--e-well)!important; color: var(--e-ink)!important; }
html body .pill.active,html body.stb-standard .pill.active{
  background: var(--e-brand-wash)!important;
  border-color: var(--e-brand)!important;
  color: var(--e-brand-deep)!important;
  font-weight: 750!important;
}
html body .pill.active::after,html body.stb-standard .pill.active::after{ display: none!important; }

@media (max-width: 760px){
  html body .sec,html body.stb-standard .sec{ padding: 24px 0!important; }
  html body .sec-title,html body.stb-standard .sec-title{ font-size: 16.5px!important; }
  html body .price-now,html body.stb-standard .price-now{ font-size: 16.5px!important; }
  html body #view-reels .wave-mode-btn,html body.stb-standard #view-reels .wave-mode-btn{ padding: 0 11px!important; font-size: 11px!important; }
}
@media (prefers-reduced-motion: reduce){
  html body *,html body.stb-standard *{ transition-duration: .001ms!important; animation-duration: .001ms!important; }
}