/* 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 — design polish.
=========================================================================
Loaded last. The palette is untouched — ink #101D2E, blue #0A6FB4,
paper #F4F6F9, rule #DCE3EB, price #C22B3C are all exactly as they were.
This pass is about the things that were still inconsistent underneath
them.
WHAT WAS ACTUALLY WRONG
-------------------------------------------------------------------------
The system set two radii: 3px for controls, 5px for panels. But 260
rules across the merged stylesheet still carry 8px, 9px, 10px, 12px, 14px
or 50% — leftovers from every version before it. So a price box is 12px,
the quantity stepper beside it is 9px, and the colour chip beside THAT is
8px. Nobody consciously chose those; they accumulated.
That is the single biggest reason the site still reads as assembled
rather than designed. Two shapes look deliberate. Eight look like nobody
was in charge.
Same story with elevation: 110 distinct box-shadow values. A shadow is a
statement about how far something floats above the page, and with 110 of
them the page has no consistent depth at all.
So: one radius scale, one elevation scale, one motion curve. Then the
refinements that only become visible once those are settled.
========================================================================= */
:root{
/* ── GEOMETRY ──────────────────────────────────────────────────────
Two radii and a pill. Nothing else exists. */
--willow-r-sm: 3px; /* controls: buttons, inputs, chips, badges */
--willow-r: 5px; /* panels: cards, modals, wells */
--willow-r-pill: 999px;/* only where a shape must read as round: avatars */
/* ── ELEVATION ─────────────────────────────────────────────────────
Four steps, each a real statement about distance from the page.
Two-layer shadows: a tight contact shadow that grounds the element,
and a wide ambient one that gives it height. A single-layer shadow
always reads as a sticker.
Tinted with the ink hue rather than pure black — a neutral-black
shadow over a cool page reads muddy. */
--willow-e0: none;
--willow-e1: 0 1px 2px rgba(16,29,46,.05);
--willow-e2: 0 1px 2px rgba(16,29,46,.05), 0 4px 12px -4px rgba(16,29,46,.14);
--willow-e3: 0 2px 4px rgba(16,29,46,.06), 0 12px 28px -10px rgba(16,29,46,.22);
--willow-e4: 0 4px 8px rgba(16,29,46,.07), 0 28px 56px -20px rgba(16,29,46,.30);
/* ── MOTION ────────────────────────────────────────────────────────
One curve. It decelerates hard, which reads as responsive: the element
appears to arrive rather than to travel. Two durations — anything
longer than 220ms on a control feels sluggish on a phone. */
--willow-ease: cubic-bezier(.2,.7,.3,1);
--willow-fast: 120ms;
--willow-slow: 220ms;
}
/* ═══════════════════════════════════════════════════════════════════════
1. ONE GEOMETRY
═══════════════════════════════════════════════════════════════════════
Controls take the small radius, panels the large one. Circles survive
only where roundness carries meaning — an avatar, a status dot, a
loading spinner. */
html body button,
html body.stb-standard button,
html body .btn,
html body.stb-standard .btn,
html body .d-btn,
html body.stb-standard .d-btn,
html body .fbtn,
html body.stb-standard .fbtn,
html body .cbtn,
html body.stb-standard .cbtn,
html body input,
html body.stb-standard input,
html body select,
html body.stb-standard select,
html body textarea,
html body.stb-standard textarea,
html body .search-box,
html body.stb-standard .search-box,
html body .search-btn,
html body.stb-standard .search-btn,
html body .qty,
html body.stb-standard .qty,
html body .color-chip,
html body.stb-standard .color-chip,
html body .emi-tag,
html body.stb-standard .emi-tag,
html body .tag,
html body.stb-standard .tag,
html body .badge,
html body.stb-standard .badge,
html body .chip,
html body.stb-standard .chip,
html body .pill,
html body.stb-standard .pill,
html body .status-pill,
html body.stb-standard .status-pill,
html body .eta-chip,
html body.stb-standard .eta-chip,
html body .mode-btn,
html body.stb-standard .mode-btn,
html body .theme-opt,
html body.stb-standard .theme-opt,
html body .pm-clear,
html body.stb-standard .pm-clear,
html body .countdown .clk,
html body.stb-standard .countdown .clk,
html body .card-fav,
html body.stb-standard .card-fav,
html body .flux-gallery-dot,
html body.stb-standard .flux-gallery-dot{
border-radius: var(--willow-r-sm)!important;
}
html body .card, html body.stb-standard .card, html body .panel, html body.stb-standard .panel, html body .glass, html body.stb-standard .glass, html body .modal, html body.stb-standard .modal, html body .sheet, html body.stb-standard .sheet, html body .drawer, html body.stb-standard .drawer, html body .d-price-box, html body.stb-standard .d-price-box, html body .deal-hero, html body.stb-standard .deal-hero, html body .theme-pop, html body.stb-standard .theme-pop, html body .filters, html body.stb-standard .filters, html body .summary, html body.stb-standard .summary, html body .newsletter, html body.stb-standard .newsletter, html body .profile-card, html body.stb-standard .profile-card, html body .profile-side, html body.stb-standard .profile-side, html body .order-card, html body.stb-standard .order-card, html body .policy-panel, html body.stb-standard .policy-panel, html body .hero, html body.stb-standard .hero, html body .hero-side-card, html body.stb-standard .hero-side-card, html body .brand-strip, html body.stb-standard .brand-strip, html body .market-category-section, html body.stb-standard .market-category-section, html body .onyx-spec-box, html body.stb-standard .onyx-spec-box, html body .review, html body.stb-standard .review, html body .chat-win, html body.stb-standard .chat-win, html body .ad-banner-visual, html body.stb-standard .ad-banner-visual, html body .suggest-row img, html body.stb-standard .suggest-row img, html body .imgprev, html body.stb-standard .imgprev, html body .slot, html body.stb-standard .slot, html body .thumb, html body.stb-standard .thumb{
border-radius: var(--willow-r)!important;
}
/* Roundness kept only where it means something. */
html body .avatar, html body.stb-standard .avatar, html body .rev-av, html body.stb-standard .rev-av, html body .user-pic, html body.stb-standard .user-pic, html body .dot, html body.stb-standard .dot, html body .spinner, html body.stb-standard .spinner, html body .loader, html body.stb-standard .loader{
border-radius: var(--willow-r-pill)!important;
}
/* ═══════════════════════════════════════════════════════════════════════
2. ONE ELEVATION
═══════════════════════════════════════════════════════════════════════
Depth now means something: the further from the page, the more temporary
the thing is. A card is part of the page. A dropdown is above it. A modal
is in front of everything. */
html body .card,
html body.stb-standard .card,
html body .panel,
html body.stb-standard .panel,
html body .glass,
html body.stb-standard .glass,
html body .review,
html body.stb-standard .review,
html body .order-card,
html body.stb-standard .order-card{
box-shadow: var(--willow-e0)!important;
border: 1px solid var(--shell-rule)!important;
transition: box-shadow var(--willow-slow) var(--willow-ease),
border-color var(--willow-fast) var(--willow-ease)!important;
}
html body .card:hover,
html body.stb-standard .card:hover,
html body .card:focus-within,
html body.stb-standard .card:focus-within{
box-shadow: var(--willow-e2)!important;
border-color: var(--shell-rule-firm)!important;
}
html body .suggest-box, html body.stb-standard .suggest-box, html body .theme-pop, html body.stb-standard .theme-pop, html body .dropdown, html body.stb-standard .dropdown, html body .search-suggest, html body.stb-standard .search-suggest, html body #reelSearchResults, html body.stb-standard #reelSearchResults{
box-shadow: var(--willow-e3)!important;
}
html body .modal, html body.stb-standard .modal, html body .sheet, html body.stb-standard .sheet, html body .drawer, html body.stb-standard .drawer, html body .dept-modal, html body.stb-standard .dept-modal, html body .chat-win, html body.stb-standard .chat-win{
box-shadow: var(--willow-e4)!important;
}
/* Anything fixed to an edge gets a directional shadow, so it reads as
floating over the content rather than being cut out of it. */
html body .header.is-stuck,
html body.stb-standard .header.is-stuck,
html body.e33-scrolled .header,
html body.stb-standard.e33-scrolled .header{ box-shadow: 0 1px 0 var(--shell-rule), var(--willow-e1)!important; }
html body #shell-buybar, html body.stb-standard #shell-buybar, html body .mobile-bar, html body.stb-standard .mobile-bar{ box-shadow: 0 -1px 0 var(--shell-rule), 0 -8px 24px -12px rgba(16,29,46,.20)!important; }
/* ═══════════════════════════════════════════════════════════════════════
3. PRESS, NOT LIFT
═══════════════════════════════════════════════════════════════════════
Hover-lift is a desktop idea and most of this traffic is on a phone,
where hover does not exist and the only feedback that matters is what
happens under a finger. A control now compresses very slightly on press —
tactile, instant, and it works identically on both.
The scale is deliberately tiny. Anything more than about 2% reads as a
toy; 1% reads as a physical button. */
html body button:active,
html body.stb-standard button:active,
html body .btn:active,
html body.stb-standard .btn:active,
html body .d-btn:active,
html body.stb-standard .d-btn:active,
html body .cbtn:active,
html body.stb-standard .cbtn:active,
html body .fbtn:active,
html body.stb-standard .fbtn:active,
html body .card-fav:active,
html body.stb-standard .card-fav:active,
html body .reel-sound:active,
html body.stb-standard .reel-sound:active,
html body .flux-gallery-nav:active,
html body.stb-standard .flux-gallery-nav:active{
transform: scale(.985)!important;
transition-duration: 60ms!important;
}
html body .card:active,html body.stb-standard .card:active{ transform: scale(.995)!important; }
/* Hover no longer moves anything. Movement on hover fights with scrolling
on a trackpad and does nothing at all on a phone; a colour and shadow
change says the same thing without the jitter. */
html body .card:hover,
html body.stb-standard .card:hover,
html body .hero-side-card:hover,
html body.stb-standard .hero-side-card:hover,
html body .market-category:hover .cat-art,
html body.stb-standard .market-category:hover .cat-art,
html body .trust-it:hover,
html body.stb-standard .trust-it:hover,
html body .brand-card:hover,
html body.stb-standard .brand-card:hover{ transform: none!important; }
/* ═══════════════════════════════════════════════════════════════════════
4. TYPOGRAPHY — the last inconsistencies
═══════════════════════════════════════════════════════════════════════ */
/* Numbers a customer compares must line up. Any proportional figure in a
column of prices makes the column impossible to scan. */
html body .price-now, html body.stb-standard .price-now, html body .price-old, html body.stb-standard .price-old, html body .d-price, html body.stb-standard .d-price, html body .d-old, html body.stb-standard .d-old, html body .cart-total, html body.stb-standard .cart-total, html body .sum-row, html body.stb-standard .sum-row, html body .order-id, html body.stb-standard .order-id, html body .clk, html body.stb-standard .clk, html body .stock-txt, html body.stb-standard .stock-txt, html body .result-count, html body.stb-standard .result-count, html body .onyx-spec-v, html body.stb-standard .onyx-spec-v, html body .qty input, html body.stb-standard .qty input, html body .wallet-chip, html body.stb-standard .wallet-chip{
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Optical alignment: a large heading's first letter sits visually inset
because of its own side bearing. A tiny negative indent puts the text
edge where the eye expects it, flush with everything below. */
html body .d-title, html body.stb-standard .d-title, html body .hero-title, html body.stb-standard .hero-title, html body .sec-title, html body.stb-standard .sec-title{
text-indent: -.02em;
}
/* Long product names were breaking mid-word. Balanced wrapping puts the
line break where the sentence wants it. */
html body .card-name, html body.stb-standard .card-name, html body .d-title, html body.stb-standard .d-title, html body .reel-name, html body.stb-standard .reel-name, html body .ember-hit-n, html body.stb-standard .ember-hit-n, html body .sec-title, html body.stb-standard .sec-title{
text-wrap: balance;
overflow-wrap: anywhere;
}
html body .desc-body, html body.stb-standard .desc-body, html body p, html body.stb-standard p{ text-wrap: pretty; }
/* ═══════════════════════════════════════════════════════════════════════
5. THE SMALL THINGS THAT SIGNAL CARE
═══════════════════════════════════════════════════════════════════════
None of these is noticed individually. Together they are most of the
difference between a site that feels built and one that feels finished. */
/* Selection in the brand colour rather than the browser default blue. */
html body ::selection,html body.stb-standard ::selection{ background: rgba(10,111,180,.18); color: var(--shell-ink); }
/* Scrollbars matched to the page. The default grey bar on a white column
is the one piece of chrome that always gives away an unfinished build. */
html body *::-webkit-scrollbar,html body.stb-standard *::-webkit-scrollbar{ width: 10px; height: 10px; }
html body *::-webkit-scrollbar-track,html body.stb-standard *::-webkit-scrollbar-track{ background: transparent; }
html body *::-webkit-scrollbar-thumb,html body.stb-standard *::-webkit-scrollbar-thumb{
background: var(--shell-rule-firm);
border-radius: var(--willow-r-pill);
border: 3px solid var(--shell-paper); /* inset, so it reads as a hairline */
}
html body *::-webkit-scrollbar-thumb:hover,html body.stb-standard *::-webkit-scrollbar-thumb:hover{ background: var(--shell-slate); }
html body,html body.stb-standard{ scrollbar-width: thin; scrollbar-color: var(--shell-rule-firm) transparent; }
/* One focus ring everywhere, and only for keyboard users. A mouse click
that leaves a ring behind looks like a bug. */
html body :focus,html body.stb-standard :focus{ outline: none; }
html body :focus-visible,html body.stb-standard :focus-visible{
outline: 2px solid var(--shell-blue)!important;
outline-offset: 2px!important;
border-radius: var(--willow-r-sm);
}
/* The image well: a hairline inset instead of a border, so the edge sits
inside the photo's box and cards stay flush against each other. */
html body .card-img,html body.stb-standard .card-img{
box-shadow: inset 0 -1px 0 var(--shell-rule)!important;
border-bottom: 0!important;
}
/* Disabled means unavailable, not decorative. */
html body [disabled], html body.stb-standard [disabled], html body .is-disabled, html body.stb-standard .is-disabled{
opacity: .48!important;
cursor: not-allowed!important;
filter: saturate(.5);
}
/* Loading skeletons: a slow sweep rather than a pulse. A pulse reads as an
error indicator; a sweep reads as work in progress. */
html body .skeleton, html body.stb-standard .skeleton, html body .shell-boot-media, html body.stb-standard .shell-boot-media, html body .shell-boot-lines i, html body.stb-standard .shell-boot-lines i{
background: linear-gradient(90deg,
var(--shell-rule) 25%, #EDF1F5 37%, var(--shell-rule) 63%)!important;
background-size: 400% 100%!important;
animation: willow-sweep 1.4s ease-in-out infinite!important;
}
@keyframes willow-sweep{ 0%{background-position:100% 0} 100%{background-position:0 0} }
/* Images fade in instead of appearing. It costs nothing and removes the
snap that makes a slow connection feel broken. */
html body .card-img img, html body.stb-standard .card-img img, html body .stage img, html body.stb-standard .stage img, html body .reel-photo, html body.stb-standard .reel-photo{
animation: willow-fade var(--willow-slow) var(--willow-ease);
}
@keyframes willow-fade{ from{ opacity: 0 } to{ opacity: 1 } }
/* Tap highlight off — the grey flash on Android is not our design, and the
press-scale above already gives the feedback it was providing. */
html body,html body.stb-standard{ -webkit-tap-highlight-color: transparent; }
/* Text stays selectable where it is content, and is not selectable where it
is a control. Selecting a button label by accident while scrolling on a
phone is a small, constant irritation. */
html body button, html body.stb-standard button, html body .btn, html body.stb-standard .btn, html body .pill, html body.stb-standard .pill, html body .tab-t, html body.stb-standard .tab-t, html body .flux-gallery-dot, html body.stb-standard .flux-gallery-dot, html body .reel-actions, html body.stb-standard .reel-actions{
-webkit-user-select: none; user-select: none;
}
/* ═══════════════════════════════════════════════════════════════════════
6. PRINT
═══════════════════════════════════════════════════════════════════════
Customers print invoices and order confirmations. Without this they get
the navigation, the chat bubble and a dark header across the page. */
@media print{
html body .header, html body.stb-standard .header, html body .ribbon, html body.stb-standard .ribbon, html body footer, html body.stb-standard footer, html body .chat-fab, html body.stb-standard .chat-fab, html body .chat-win, html body.stb-standard .chat-win, html body #shell-buybar, html body.stb-standard #shell-buybar, html body .market-top, html body.stb-standard .market-top, html body .reel-actions, html body.stb-standard .reel-actions, html body .willow-noprint, html body.stb-standard .willow-noprint{
display: none!important;
}
html body,html body.stb-standard{ background: #fff!important; color: #000!important; }
html body .panel, html body.stb-standard .panel, html body .card, html body.stb-standard .card, html body .order-card, html body.stb-standard .order-card{
box-shadow: none!important;
border: 1px solid #999!important;
break-inside: avoid;
}
html body a[href^="http"]::after,html body.stb-standard a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}
/* ═══════════════════════════════════════════════════════════════════════
7. HONOURING THE SYSTEM SETTINGS
═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
html body *, html body.stb-standard *, html body *::before, html body.stb-standard *::before, html body *::after, html body.stb-standard *::after{
animation-duration: .001ms!important;
animation-iteration-count: 1!important;
transition-duration: .001ms!important;
scroll-behavior: auto!important;
}
html body .skeleton,html body.stb-standard .skeleton{ animation: none!important; background: var(--shell-rule)!important; }
}
/* A high-contrast request means someone cannot see the hairlines. Give them
real borders rather than ignoring it. */
@media (prefers-contrast: more){
html body .card, html body.stb-standard .card, html body .panel, html body.stb-standard .panel, html body input, html body.stb-standard input, html body select, html body.stb-standard select, html body textarea, html body.stb-standard textarea{
border-color: var(--shell-ink-soft)!important;
}
html body :focus-visible,html body.stb-standard :focus-visible{ outline-width: 3px!important; }
}