/* ============================================
   WHISKER Storefront — Vibrant & Playful
   Purple / Pink / Green on light airy white
   ============================================ */

/* The font is requested from the page head, not from here. An @import is only
   discovered once this file has downloaded and parsed, so it holds up the
   first paint twice over: once for this stylesheet, then again for that one. */

:root {
    --wk-purple:     #8b5cf6;
    /* The accent as text. The fill colour above is tuned to look right in a
       button or a gradient; as small text on a pale page it is too light to
       read, so links and labels use this darker tone of the same hue. */
    --wk-purple-ink: #7c3aed;
    --wk-purple-soft:#ede9fe;
    --wk-pink:       #ec4899;
    --wk-pink-soft:  #fce7f3;
    --wk-green:      #10b981;
    --wk-green-soft: #d1fae5;
    --wk-yellow:     #f59e0b;
    --wk-red:        #ef4444;
    --wk-bg:         #faf8f6;
    --wk-surface:    #ffffff;
    --wk-text:       #1e1b2e;
    --wk-muted:      #6b7280;
    --wk-border:     #e8e5df;
    /* The font arrives without blocking the first paint, so text is drawn in
       the fallback first. These are the faces closest to Nunito's proportions
       on each platform, which keeps the swap from moving the page. */
    --font:          'Nunito', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:     'JetBrains Mono', monospace;
    --radius:        14px;
    --radius-sm:     8px;
    --max-w:         1200px;
}

/* Ocean Blue */
[data-theme="ocean"] {
    --wk-purple:     #0ea5e9;
    --wk-purple-ink: #0369a1;
    --wk-purple-soft:#e0f2fe;
    --wk-pink:       #06b6d4;
    --wk-pink-soft:  #cffafe;
    --wk-green:      #10b981;
    --wk-green-soft: #d1fae5;
    --wk-yellow:     #f59e0b;
    --wk-red:        #ef4444;
    --wk-bg:         #f0f9ff;
    --wk-surface:    #ffffff;
    --wk-text:       #0c1e2e;
    --wk-muted:      #64748b;
    --wk-border:     #e0e7ef;
}

/* Forest Green */
[data-theme="forest"] {
    --wk-purple:     #16a34a;
    --wk-purple-ink: #15803d;
    --wk-purple-soft:#dcfce7;
    --wk-pink:       #ca8a04;
    --wk-pink-soft:  #fef9c3;
    --wk-green:      #16a34a;
    --wk-green-soft: #dcfce7;
    --wk-yellow:     #ca8a04;
    --wk-red:        #dc2626;
    --wk-bg:         #f7faf5;
    --wk-surface:    #ffffff;
    --wk-text:       #14261a;
    --wk-muted:      #6b7a6f;
    --wk-border:     #dde6da;
}

/* Sunset Orange */
[data-theme="sunset"] {
    --wk-purple:     #f97316;
    --wk-purple-ink: #c2410c;
    --wk-purple-soft:#fff7ed;
    --wk-pink:       #e11d48;
    --wk-pink-soft:  #ffe4e6;
    --wk-green:      #10b981;
    --wk-green-soft: #d1fae5;
    --wk-yellow:     #eab308;
    --wk-red:        #e11d48;
    --wk-bg:         #fffbf5;
    --wk-surface:    #ffffff;
    --wk-text:       #2e1a0e;
    --wk-muted:      #78716c;
    --wk-border:     #ede5db;
}

/* Midnight Dark */
[data-theme="midnight"] {
    --wk-purple:     #a78bfa;
    --wk-purple-ink: #7c3aed;
    --wk-purple-soft:#1e1b3a;
    --wk-pink:       #f472b6;
    --wk-pink-soft:  #2a1528;
    --wk-green:      #34d399;
    --wk-green-soft: #0d2e22;
    --wk-yellow:     #fbbf24;
    --wk-red:        #fb7185;
    --wk-bg:         #0f0e17;
    --wk-surface:    #1a1926;
    --wk-text:       #fffffe;
    --wk-muted:      #94a3b8;
    --wk-border:     #2d2b3d;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--wk-bg); color: var(--wk-text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* A <picture> is only a wrapper for choosing the file; it must not become a
   box of its own. Left as an inline element it shrink-wraps to the image's
   intrinsic width, and every rule written for the image inside a flex or grid
   parent then measures against the wrapper instead of the parent. */
picture { display: contents; }

/* ── Branded Page Loader ────────────────────── */
.wk-page-loader {
    position: fixed; inset: 0; background: var(--wk-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999; gap: 16px;
    transition: opacity .5s, visibility .5s;
}
.wk-page-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.wk-page-loader svg { animation: loaderBounce 1s ease-in-out infinite; }
@keyframes loaderBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.wk-loader-bar {
    width: 120px; height: 4px; background: var(--wk-border); border-radius: 2px; overflow: hidden;
}
.wk-loader-bar::after {
    content: ''; display: block; width: 40%; height: 100%;
    background: linear-gradient(90deg, var(--wk-purple), var(--wk-pink), var(--wk-green));
    border-radius: 2px; animation: loaderSlide 1s ease-in-out infinite;
}
@keyframes loaderSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

/* ── Header ─────────────────────────────────── */
.wk-header { background: var(--wk-surface); border-bottom: 1px solid var(--wk-border); position: sticky; top: 0; z-index: 100; }
/* The header must survive real stores: many categories with long names.
   min-height (not height) + flex-wrap lets the nav drop to its own row as a
   whole when it can't fit between the logo and the controls, instead of
   squeezing labels into ragged two-line fragments. */
.wk-header-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 10px 24px; min-height: 68px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 20px;
}
.wk-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; flex-shrink: 0; }
.wk-logo-text {
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    white-space: nowrap;
}
.wk-header-nav { display: flex; align-items: center; gap: 6px 20px; flex-wrap: wrap; flex: 1 1 0; justify-content: center; min-width: 0; overflow: hidden; }
/* The clip above holds the row to one line while the script measures it. Once
   the overflow has been moved into "More" nothing sticks out, so the clip comes
   off — an ancestor that clips would cut off the category menus as they open. */
.wk-header-nav.wk-nav-ready { overflow: visible; }
/* Each nav label stays on one line — long names wrap as whole items, never mid-label. */
.wk-header-nav > a, .wk-nav-dropdown-trigger { font-size: 14px; font-weight: 700; color: var(--wk-muted); transition: color .2s; text-decoration: none; white-space: nowrap; }
.wk-header-nav > a:hover, .wk-nav-dropdown-trigger:hover { color: var(--wk-purple-ink); }

/* Category Dropdown */
.wk-nav-dropdown { position: relative; }
.wk-nav-dropdown-trigger { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.wk-nav-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    background: var(--wk-surface); border: 2px solid var(--wk-border); border-radius: 12px;
    padding: 10px 0; min-width: 200px; box-shadow: 0 12px 32px rgba(0,0,0,.08);
    z-index: 200;
}
.wk-nav-dropdown-menu::before {
    content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--wk-border);
}
.wk-nav-dropdown-menu::after {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--wk-surface);
}
.wk-nav-dropdown-menu a {
    display: block; padding: 8px 20px; font-size: 13px; font-weight: 600; color: var(--wk-text);
    transition: all .15s; text-decoration: none;
}
.wk-nav-dropdown-menu a:hover { background: var(--wk-purple-soft); color: var(--wk-purple-ink); }
.wk-nav-dropdown:hover .wk-nav-dropdown-menu { display: block; }
/* Invisible bridge so mouse can travel from trigger to menu */
.wk-nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }

/* Cart button */
.wk-cart-btn {
    position: relative; background: none; border: 2px solid var(--wk-border);
    border-radius: var(--radius-sm); cursor: pointer; padding: 8px 12px;
    font-family: var(--font); font-weight: 800; font-size: 13px;
    color: var(--wk-text); display: flex; align-items: center; gap: 6px;
    transition: all .2s;
}
.wk-cart-btn:hover { border-color: var(--wk-purple-ink); color: var(--wk-purple-ink); }
.wk-cart-count {
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    color: #fff; font-size: 10px; font-weight: 900;
    min-width: 20px; height: 20px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s cubic-bezier(.68,-.55,.27,1.55);
}
.wk-cart-count.bump { transform: scale(1.4); }

/* ── Container ──────────────────────────────── */
.wk-container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ── Hero ───────────────────────────────────── */
.wk-hero {
    background: linear-gradient(135deg, #1e1b2e 0%, #312e81 50%, #581c87 100%);
    padding: 72px 0; text-align: center; color: #fff;
    position: relative; overflow: hidden;
}
.wk-hero::before, .wk-hero::after {
    content: ''; position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: .2; pointer-events: none;
}
.wk-hero::before { width: 300px; height: 300px; background: var(--wk-pink); top: -50px; right: 10%; }
.wk-hero::after { width: 250px; height: 250px; background: var(--wk-green); bottom: -80px; left: 15%; }
.wk-hero h1 {
    font-size: clamp(28px, 5vw, 48px); font-weight: 900;
    letter-spacing: -1px; margin-bottom: 12px; line-height: 1.1;
}
.wk-hero p { font-size: 17px; color: rgba(255,255,255,.7); max-width: 480px; margin: 0 auto 28px; }
.wk-hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    color: #fff; padding: 14px 32px; border-radius: var(--radius-sm);
    font-weight: 800; font-size: 15px;
    box-shadow: 0 4px 20px rgba(139,92,246,.4);
    transition: all .2s;
}
.wk-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(139,92,246,.5); }

/* ── Section ────────────────────────────────── */
.wk-section { padding: 48px 0; }
.wk-section-title { font-size: 26px; font-weight: 900; letter-spacing: -.5px; margin-bottom: 6px; }
.wk-section-sub { color: var(--wk-muted); font-size: 15px; margin-bottom: 32px; font-weight: 600; }

/* ── Product Grid ───────────────────────────── */
.wk-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.wk-product-card {
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: var(--radius); overflow: hidden;
    transition: all .3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    animation: cardReveal .5s ease backwards;
    /* Flex column so the Add-to-Cart button pins to the bottom. Without this,
       a card with a shorter body (e.g. a product with no sale/strikethrough
       line) leaves the empty grid-stretch space BELOW the button, so its
       button sits higher than its row-mates. */
    display: flex;
    flex-direction: column;
}
.wk-product-card:nth-child(1) { animation-delay: .05s; }
.wk-product-card:nth-child(2) { animation-delay: .1s; }
.wk-product-card:nth-child(3) { animation-delay: .15s; }
.wk-product-card:nth-child(4) { animation-delay: .2s; }
.wk-product-card:nth-child(5) { animation-delay: .25s; }
.wk-product-card:nth-child(6) { animation-delay: .3s; }

@keyframes cardReveal { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }

.wk-product-card:hover {
    transform: translateY(-6px);
    border-color: var(--wk-purple-ink);
    box-shadow: 0 12px 40px rgba(139,92,246,.12);
}

.wk-product-img {
    aspect-ratio: 4/3; background: var(--wk-bg);
    overflow: hidden; position: relative;
    flex-shrink: 0; /* keep the 4/3 image from squishing in the flex column */
}
.wk-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.wk-product-card:hover .wk-product-img img { transform: scale(1.08); }

.wk-product-badge {
    position: absolute; top: 10px; left: 10px;
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    color: #fff; font-size: 11px; font-weight: 800;
    padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px;
}
.wk-product-badge.featured { background: linear-gradient(135deg, var(--wk-green), #34d399); }

.wk-product-info { padding: 16px 18px; }
.wk-product-cat {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--wk-purple-ink); margin-bottom: 4px;
}
.wk-product-name { font-size: 15px; font-weight: 800; margin-bottom: 8px; line-height: 1.3; }
.wk-product-price { display: flex; align-items: center; gap: 8px; }
.wk-product-price .current { font-size: 18px; font-weight: 900; font-family: var(--font-mono); }
.wk-product-price .original { font-size: 13px; color: var(--wk-muted); text-decoration: line-through; }

.wk-add-btn {
    width: 100%; padding: 12px; border: none;
    background: var(--wk-text); color: #fff;
    font-family: var(--font); font-size: 13px; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    cursor: pointer; transition: all .2s;
}
/* Pin the button to the bottom of the card (flex column) so every card in a
   row lines its button up regardless of body height. */
.wk-product-card .wk-add-btn { margin-top: auto; }
.wk-add-btn:hover { background: var(--wk-purple); }
.wk-add-btn.added {
    background: var(--wk-green);
    animation: addPop .4s ease;
}
@keyframes addPop { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }

/* ── Cart Drawer ────────────────────────────── */
.wk-cart-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    backdrop-filter: blur(4px); z-index: 200;
    opacity: 0; visibility: hidden; transition: all .3s;
}
.wk-cart-overlay.open { opacity: 1; visibility: visible; }

.wk-cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 400px; max-width: 100vw;
    background: var(--wk-surface);
    box-shadow: -8px 0 40px rgba(0,0,0,.12);
    z-index: 201;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.25,.8,.25,1);
    display: flex; flex-direction: column;
}
.wk-cart-drawer.open { transform: translateX(0); }

.wk-cart-drawer-header {
    padding: 20px 24px; border-bottom: 1px solid var(--wk-border);
    display: flex; align-items: center; justify-content: space-between;
}
.wk-cart-drawer-header h2 { font-size: 18px; font-weight: 900; }
.wk-cart-close {
    background: var(--wk-bg); border: 1px solid var(--wk-border);
    border-radius: var(--radius-sm); padding: 6px 12px;
    cursor: pointer; font-size: 14px; font-weight: 800;
    color: var(--wk-text); transition: all .2s;
}
.wk-cart-close:hover { border-color: var(--wk-purple-ink); color: var(--wk-purple-ink); }

.wk-cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; }

.wk-cart-item {
    display: flex; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid var(--wk-border);
    animation: itemSlideIn .3s ease;
}
@keyframes itemSlideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

.wk-cart-item-img {
    width: 60px; height: 60px; border-radius: var(--radius-sm);
    background: var(--wk-bg); overflow: hidden; flex-shrink: 0;
}
.wk-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.wk-cart-item-info { flex: 1; }
.wk-cart-item-name { font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.wk-cart-item-price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }

.wk-qty-ctrl {
    display: inline-flex; border: 2px solid var(--wk-border); border-radius: var(--radius-sm);
    overflow: hidden; margin-top: 6px;
}
.wk-qty-btn {
    background: var(--wk-bg); border: none; width: 30px; height: 28px;
    cursor: pointer; font-size: 14px; font-weight: 800; color: var(--wk-text);
    transition: background .15s;
}
.wk-qty-btn:hover { background: var(--wk-purple-soft); color: var(--wk-purple-ink); }
.wk-qty-val {
    width: 32px; height: 28px; text-align: center; border: none;
    background: var(--wk-surface); font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}

.wk-cart-empty { text-align: center; padding: 60px 20px; color: var(--wk-muted); }
.wk-cart-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .4; }

.wk-cart-footer {
    padding: 20px 24px; border-top: 1px solid var(--wk-border); background: var(--wk-bg);
}
.wk-cart-total {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.wk-cart-total-label { font-size: 14px; font-weight: 700; color: var(--wk-muted); }
.wk-cart-total-value { font-size: 22px; font-weight: 900; font-family: var(--font-mono); }

.wk-checkout-btn {
    width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    color: #fff; font-family: var(--font); font-size: 15px; font-weight: 800;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 15px rgba(139,92,246,.25); transition: all .2s;
}
.wk-checkout-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 25px rgba(139,92,246,.35); }

/* ── Hero Carousel ────────────────────────────── */
.wk-hero-carousel {
    position: relative;
    overflow: hidden;
    background: #0f0a1e;
}
.wk-carousel-track {
    display: flex;
    transition: transform .6s cubic-bezier(.25,.8,.25,1);
}
.wk-carousel-slide {
    /* Exactly one screen wide, never more: min-width alone lets a slide grow
       to fit its content, and a slide wider than the track is laid out off the
       side of the screen where it cannot be scrolled to. */
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
}
.wk-hero-slide {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
}
.wk-hero-slide-bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.wk-hero-slide-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(40px) saturate(1.5);
    opacity: .35;
    transform: scale(1.2);
}
.wk-hero-slide-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, #0f0a1e 0%, transparent 100%);
    opacity: .92;
}
.wk-hero-slide-overlay::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    opacity: .2;
}
.wk-hero-slide-content {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 64px;
}
.wk-hero-slide-text {
    color: #fff;
}
.wk-hero-badge {
    display: inline-block;
    /* A step darker than the brand pink: white at 12px needs 4.5:1, and the
       lighter shade only reaches 3.5. */
    background: var(--wk-pink-deep, #db2777);
    color: #fff;
    font-size: 12px; font-weight: 800;
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: 16px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.wk-hero-cat {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.wk-hero-name {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -.5px;
    color: #fff;
}
.wk-hero-desc {
    font-size: 16px;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 440px;
}
.wk-hero-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 28px;
}
.wk-hero-price-current {
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 900;
    color: #fff;
}
.wk-hero-price-original {
    font-size: 18px;
    color: rgba(255,255,255,.4);
    text-decoration: line-through;
}
.wk-hero-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.wk-hero-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px;
    background: #fff;
    color: var(--wk-purple-ink);
    border-radius: 12px;
    font-weight: 800; font-size: 15px;
    text-decoration: none;
    transition: all .2s;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.wk-hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.wk-hero-btn-cart {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 12px;
    font-family: var(--font);
    font-weight: 800; font-size: 15px;
    cursor: pointer;
    transition: all .2s;
    backdrop-filter: blur(8px);
}
.wk-hero-btn-cart:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.4);
    transform: translateY(-2px);
}
.wk-hero-btn-cart.added {
    background: var(--wk-green) !important;
    border-color: var(--wk-green) !important;
}
.wk-hero-slide-img {
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    /* Hold the space the image will take. Without it the hero is empty until
       the picture arrives and then grows by its full height, shoving the rest
       of the page down — the single largest layout shift on the front page. */
    min-height: 400px;
}
.wk-hero-slide-img img {
    max-height: 400px;
    max-width: 100%;
    /* Capped by height, with the width following from the picture's own
       proportions — otherwise the width attribute wins and a tall image is
       800px wide on a 375px screen. */
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 60px rgba(0,0,0,.5));
    transition: transform .5s cubic-bezier(.25,.8,.25,1);
}
.wk-hero-slide-img:hover img {
    transform: scale(1.05) translateY(-8px);
}

/* Hero arrows */
.wk-hero-carousel .wk-carousel-prev,
.wk-hero-carousel .wk-carousel-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,.2);
    font-size: 22px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: all .2s;
    z-index: 3;
}
.wk-hero-carousel .wk-carousel-prev { left: 20px; }
.wk-hero-carousel .wk-carousel-next { right: 20px; }
.wk-hero-carousel .wk-carousel-prev:hover,
.wk-hero-carousel .wk-carousel-next:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.4);
}

/* Hero dots */
.wk-hero-carousel .wk-carousel-dots {
    display: flex; justify-content: center; gap: 4px;
    position: absolute; bottom: 14px; left: 0; right: 0;
    z-index: 3;
    padding: 0;
}
/* The dot stays the size it looks; the button around it is big enough to hit
   with a thumb. A 10px target is a miss for most people on a phone. */
.wk-hero-carousel .wk-carousel-dot,
.wk-carousel-dot {
    width: 24px; height: 24px; border-radius: 50%;
    background: none; border: none;
    cursor: pointer; padding: 0;
    display: grid; place-items: center;
    /* Held at full size: the row they sit in is positioned, and a flex item
       that is allowed to shrink collapses back to the width of the dot. */
    flex: 0 0 24px;
}
.wk-hero-carousel .wk-carousel-dot::after,
.wk-carousel-dot::after {
    content: ''; display: block;
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.3);
    transition: background .3s, transform .3s, box-shadow .3s;
}
.wk-hero-carousel .wk-carousel-dot.active::after,
.wk-carousel-dot.active::after {
    background: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(255,255,255,.5);
}
.wk-carousel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Slide counter */
.wk-hero-counter {
    position: absolute; top: 20px; right: 24px;
    z-index: 3;
    color: rgba(255,255,255,.5);
    font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .wk-hero-slide { min-height: auto; }
    .wk-hero-slide-content {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 36px; padding-bottom: 52px;
    }
    .wk-hero-slide-img { order: -1; min-height: 240px; min-width: 0; }
    .wk-hero-slide-img img { max-height: 240px; }
    .wk-hero-name { font-size: 28px; }
    .wk-hero-price-current { font-size: 26px; }
    .wk-hero-carousel .wk-carousel-prev,
    .wk-hero-carousel .wk-carousel-next { width: 36px; height: 36px; font-size: 18px; }
    .wk-hero-carousel .wk-carousel-prev { left: 10px; }
    .wk-hero-carousel .wk-carousel-next { right: 10px; }
}

/* ── Skeleton Loader ────────────────────────── */
.wk-skel {
    background: linear-gradient(90deg, var(--wk-border) 25%, #f0ede8 50%, var(--wk-border) 75%);
    background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Footer ─────────────────────────────────── */
.wk-footer { background: var(--wk-text); color: rgba(255,255,255,.5); padding: 40px 0; margin-top: 60px; }
.wk-footer-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.wk-footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; }
.wk-footer a { color: var(--wk-purple); }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .wk-header-nav { display: none; }
    .wk-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .wk-cart-drawer { width: 100vw; }
    .wk-hero h1 { font-size: 28px; }
}
@media (max-width: 340px) { .wk-product-grid { grid-template-columns: 1fr; } }
/* ── Header search ─────────────────────────────── */
.wk-search { position: relative; flex: 0 1 240px; min-width: 140px; }
.wk-search-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--wk-muted); pointer-events: none;
    transition: color .2s;
}
.wk-search-input {
    width: 100%; padding: 9px 14px 9px 36px;
    font-family: var(--font); font-size: 13px; font-weight: 600;
    color: var(--wk-text); background: var(--wk-bg);
    border: 2px solid var(--wk-border); border-radius: 999px;
    outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none; appearance: none;
}
.wk-search-input::placeholder { color: var(--wk-muted); font-weight: 600; }
.wk-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.wk-search-input:focus {
    border-color: var(--wk-purple-ink); background: var(--wk-surface);
    box-shadow: 0 0 0 4px var(--wk-purple-soft);
}
.wk-search-input:focus + .wk-search-icon,
.wk-search:focus-within .wk-search-icon { color: var(--wk-purple-ink); }
/* The nav "Search" link is redundant once the box is present. */
.wk-search-link { display: none !important; }

.wk-search-panel {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 300;
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.10);
    overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.wk-search-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    cursor: pointer; text-decoration: none; color: var(--wk-text);
    border-bottom: 1px solid var(--wk-border); transition: background .15s;
}
.wk-search-row:last-of-type { border-bottom: none; }
.wk-search-row:hover, .wk-search-row.active { background: var(--wk-purple-soft); }
.wk-search-thumb {
    width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover;
    background: var(--wk-bg); flex-shrink: 0;
}
.wk-search-info { flex: 1; min-width: 0; }
.wk-search-name {
    font-size: 13px; font-weight: 800; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-search-name mark { background: transparent; color: var(--wk-purple-ink); font-weight: 900; }
.wk-search-meta {
    font-size: 11px; color: var(--wk-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
}
.wk-search-price {
    font-size: 13px; font-weight: 800; font-family: var(--font-mono);
    white-space: nowrap; color: var(--wk-text);
}
.wk-search-oos { color: var(--wk-red); }
.wk-search-foot {
    display: block; padding: 11px 14px; text-align: center;
    font-size: 12px; font-weight: 800; color: var(--wk-purple-ink);
    text-decoration: none; background: var(--wk-bg);
    border-top: 1px solid var(--wk-border);
}
.wk-search-foot:hover { background: var(--wk-purple-soft); }
.wk-search-empty {
    padding: 20px 14px; text-align: center; font-size: 13px;
    color: var(--wk-muted); font-weight: 600;
}

@media (max-width: 900px) {
    .wk-search { order: 3; flex: 1 1 100%; min-width: 0; }
}

/* ── Order status icon ─────────────────────────── */
/* The ring sweeps in, then the mark draws itself. Colour comes from the
   state class so success, waiting and failure share one shape system. */
.wk-status { width: 84px; height: 84px; display: block; margin: 0 auto; }
.wk-status-ring,
.wk-status-mark {
    fill: none; stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round;
}
.wk-status-ring {
    stroke-dasharray: 151; stroke-dashoffset: 151;
    animation: wkRing .55s cubic-bezier(.65,0,.45,1) forwards;
}
.wk-status-mark {
    stroke-dasharray: 48; stroke-dashoffset: 48;
    animation: wkMark .3s cubic-bezier(.65,0,.45,1) .5s forwards;
}
.wk-status-mark-2 { animation-delay: .68s; }

.wk-status-ok   .wk-status-ring, .wk-status-ok   .wk-status-mark { stroke: var(--wk-green); }
.wk-status-wait .wk-status-ring, .wk-status-wait .wk-status-mark { stroke: var(--wk-yellow); }
.wk-status-bad  .wk-status-ring, .wk-status-bad  .wk-status-mark { stroke: var(--wk-red); }

@keyframes wkRing { to { stroke-dashoffset: 0; } }
@keyframes wkMark { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .wk-status-ring, .wk-status-mark { animation: none; stroke-dashoffset: 0; }
}

/* ── Cookie consent ────────────────────────────────────────────── */
.wk-cookie {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900;
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.14);
    max-height: min(52vh, 420px); overflow-y: auto;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .26s ease, transform .26s ease;
}
.wk-cookie.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* The inner wrapper stacks: the message row, then the preferences panel.
   .wk-cookie-main does the horizontal layout within the first row. */
.wk-cookie-inner { max-width: 1180px; margin: 0 auto; padding: 16px 20px; }
.wk-cookie-main { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.wk-cookie-copy { flex: 1 1 320px; min-width: 0; }
.wk-cookie-title { font-size: 14px; font-weight: 900; margin: 0 0 3px; }
.wk-cookie-text { font-size: 13px; line-height: 1.55; color: var(--wk-muted); margin: 0; }
.wk-cookie-link { color: var(--wk-purple-ink); font-weight: 700; text-decoration: underline; }
.wk-cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.wk-cookie-btn {
    font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
    padding: 10px 18px; border-radius: var(--radius-sm);
    border: 2px solid var(--wk-border); background: var(--wk-surface);
    color: var(--wk-text); transition: border-color .15s ease, background .15s ease;
}
.wk-cookie-btn:hover { border-color: var(--wk-text); }
.wk-cookie-btn-accept { background: var(--wk-purple); border-color: var(--wk-purple-ink); color: #fff; }
.wk-cookie-btn-accept:hover { filter: brightness(1.08); border-color: var(--wk-purple-ink); }
.wk-cookie-btn:focus-visible { outline: 3px solid var(--wk-purple); outline-offset: 2px; }
/* Category preferences, revealed by Customise */
.wk-cookie-prefs {
    margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--wk-border);
}
/* Categories sit side by side so opening Customise costs one short row,
   not half the viewport. */
.wk-cookie-cats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px 28px; align-items: start;
}
.wk-cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wk-cookie-cat-name { font-size: 13px; font-weight: 800; }
.wk-cookie-cat-desc { font-size: 11.5px; line-height: 1.45; color: var(--wk-muted); margin: 2px 0 0; }
.wk-cookie-always {
    /* The pale green behind it needs a darker green in front to be read. */
    font-size: 11px; font-weight: 800; color: #047857;
    background: var(--wk-green-soft); padding: 3px 9px; border-radius: 999px;
}
.wk-cookie-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.wk-cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wk-cookie-slider {
    position: absolute; inset: 0; background: var(--wk-border); border-radius: 999px;
    transition: background .18s ease; pointer-events: none;
}
.wk-cookie-slider::before {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    background: #fff; border-radius: 50%; transition: transform .18s ease;
}
.wk-cookie-switch input:checked + .wk-cookie-slider { background: var(--wk-purple); }
.wk-cookie-switch input:checked + .wk-cookie-slider::before { transform: translateX(18px); }
.wk-cookie-switch input:focus-visible + .wk-cookie-slider { outline: 3px solid var(--wk-purple); outline-offset: 2px; }
.wk-cookie-prefs-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 560px) {
    .wk-cookie-inner { padding: 14px 16px; gap: 14px; }
    .wk-cookie-prefs-foot .wk-cookie-btn { width: 100%; }
    .wk-cookie-actions { width: 100%; }
    .wk-cookie-btn { flex: 1 1 0; padding: 11px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .wk-cookie { transition: none; transform: none; }
    .wk-cookie-slider, .wk-cookie-slider::before { transition: none; }
}

/* ── Ratings & reviews ─────────────────────────────────────────────── */
/* Half stars are done by clipping a filled star over an empty one, so any
   average renders exactly without needing half-star glyphs. */
.wk-stars { display: inline-flex; gap: 1px; line-height: 1; white-space: nowrap; }
.wk-star { position: relative; display: inline-block; }
.wk-star-off { color: var(--wk-border); }
.wk-star-on {
    position: absolute; left: 0; top: 0; overflow: hidden;
    color: var(--wk-yellow); white-space: nowrap;
}

.wk-rating-line {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
    text-decoration: none; color: inherit;
}
.wk-rating-line:hover .wk-rating-line-text { text-decoration: underline; }
.wk-rating-line-text { font-size: 13px; font-weight: 700; color: var(--wk-muted); }

.wk-reviews { margin-top: 60px; padding-top: 36px; border-top: 2px solid var(--wk-border); scroll-margin-top: 90px; }
.wk-reviews-heading { font-size: 22px; font-weight: 900; margin: 0 0 22px; }
.wk-reviews-empty { color: var(--wk-muted); font-size: 14px; margin: 0 0 24px; }

.wk-reviews-summary {
    display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: var(--radius); padding: 22px 26px; margin-bottom: 28px;
}
.wk-reviews-score { text-align: center; }
.wk-reviews-avg { font-size: 40px; font-weight: 900; line-height: 1; font-family: var(--font-mono); }
.wk-reviews-count { font-size: 12px; color: var(--wk-muted); margin-top: 6px; font-weight: 700; }
.wk-reviews-bars { display: grid; gap: 6px; min-width: 0; }
.wk-reviews-bar { display: grid; grid-template-columns: 30px 1fr 28px; gap: 10px; align-items: center; font-size: 12px; }
.wk-reviews-bar-label { color: var(--wk-muted); font-weight: 700; }
.wk-reviews-bar-track { height: 7px; background: var(--wk-bg); border-radius: 99px; overflow: hidden; }
.wk-reviews-bar-fill { display: block; height: 100%; background: var(--wk-yellow); border-radius: 99px; }
.wk-reviews-bar-n { color: var(--wk-muted); font-family: var(--font-mono); text-align: right; }

.wk-review-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 22px; }
.wk-review { padding-bottom: 22px; border-bottom: 1px solid var(--wk-border); }
.wk-review:last-child { border-bottom: 0; padding-bottom: 0; }
.wk-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wk-review-title { font-size: 15px; font-weight: 800; }
.wk-review-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--wk-muted); margin-top: 6px; }
.wk-review-author { font-weight: 800; color: var(--wk-text); }
.wk-review-verified { color: var(--wk-green); font-weight: 800; background: var(--wk-green-soft); padding: 2px 8px; border-radius: 99px; }
.wk-review-body { font-size: 14px; line-height: 1.75; margin: 10px 0 0; white-space: pre-line; }
.wk-review-reply {
    margin: 12px 0 0; padding: 12px 14px; background: var(--wk-bg);
    border-left: 3px solid var(--wk-purple); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wk-review-reply-who { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--wk-purple-ink); }
.wk-review-reply p { font-size: 13px; line-height: 1.7; margin: 4px 0 0; white-space: pre-line; }

.wk-review-form-wrap {
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: var(--radius); padding: 18px 22px;
}
.wk-review-form-toggle { font-size: 15px; font-weight: 800; cursor: pointer; }
.wk-review-note { font-size: 12.5px; color: var(--wk-muted); line-height: 1.6; margin: 12px 0 0; }
.wk-review-form { margin-top: 18px; display: grid; gap: 16px; }
.wk-review-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.wk-review-form label, .wk-review-field { display: grid; gap: 5px; font-size: 13px; font-weight: 700; }
.wk-review-form label em { font-weight: 500; color: var(--wk-muted); font-style: normal; }
.wk-review-form small { font-size: 11px; font-weight: 500; color: var(--wk-muted); }
.wk-review-form input[type=text], .wk-review-form input[type=email], .wk-review-form textarea {
    font: inherit; font-weight: 500; padding: 11px 13px;
    border: 2px solid var(--wk-border); border-radius: var(--radius-sm);
    background: var(--wk-bg); color: var(--wk-text); width: 100%;
}
.wk-review-form textarea { resize: vertical; min-height: 96px; }
.wk-review-form input:focus, .wk-review-form textarea:focus { outline: none; border-color: var(--wk-purple-ink); }
/* The storefront has no generic .wk-btn — that is an admin class — so the
   submit button carries its own styling in the store's button language. */
.wk-review-submit {
    justify-self: start; padding: 13px 30px; border: none; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    color: #fff; font-family: var(--font); font-size: 14px; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 15px rgba(139,92,246,.25); transition: transform .2s, box-shadow .2s;
}
.wk-review-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 25px rgba(139,92,246,.35); }
.wk-review-submit:focus-visible { outline: 3px solid var(--wk-purple); outline-offset: 3px; }
.wk-review-submit:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* Inline field feedback */
.wk-review-form input.is-bad { border-color: var(--wk-red); }
.wk-review-form input.is-ok  { border-color: var(--wk-green); }
.wk-review-form small.is-bad { color: var(--wk-red); font-weight: 700; }
.wk-review-form small.is-ok  { color: var(--wk-green); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .wk-review-submit { transition: none; }
    .wk-review-submit:hover { transform: none; }
}

/* Star picker. Rendered 5..1 so a CSS sibling selector can light up the
   hovered star and everything before it. */
.wk-rating-input { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.wk-rating-input legend { font-size: 13px; font-weight: 700; margin-bottom: 5px; float: left; width: 100%; }
.wk-rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wk-rating-input label { font-size: 30px; line-height: 1; cursor: pointer; color: var(--wk-border); transition: color .12s ease; }
.wk-rating-input label:hover,
.wk-rating-input label:hover ~ label,
.wk-rating-input input:checked ~ label { color: var(--wk-yellow); }
.wk-rating-input input:focus-visible + label { outline: 3px solid var(--wk-purple); outline-offset: 2px; border-radius: 4px; }
.wk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Stars on a product card */
.wk-card-rating { display: flex; align-items: center; gap: 5px; margin: 4px 0 2px; font-size: 11px; color: var(--wk-muted); font-weight: 700; }

@media (max-width: 560px) {
    .wk-reviews-summary { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .wk-rating-input label { transition: none; }
}

/* Rating an item straight from the customer's order */
.wk-order-rate summary {
    font-size: 12.5px; font-weight: 800; color: var(--wk-purple-ink); cursor: pointer;
    display: inline-block; padding: 4px 0;
}
.wk-order-rate-form { display: grid; gap: 10px; margin-top: 10px; max-width: 460px; }
.wk-order-rate-form input[type=text], .wk-order-rate-form textarea {
    font: inherit; font-size: 13px; padding: 9px 11px;
    border: 2px solid var(--wk-border); border-radius: var(--radius-sm);
    background: var(--wk-bg); color: var(--wk-text); width: 100%;
}
.wk-order-rate-form textarea { resize: vertical; }
.wk-order-rate-form input:focus, .wk-order-rate-form textarea:focus { outline: none; border-color: var(--wk-purple-ink); }
.wk-order-rate-form .wk-rating-input label { font-size: 24px; }
.wk-order-rate-form .wk-review-submit { padding: 10px 22px; font-size: 13px; }
.wk-order-rate-note { font-size: 12px; color: var(--wk-muted); margin: 0; line-height: 1.55; }

/* ── Questions & answers ───────────────────────────────────────────── */
.wk-qa { margin-top: 48px; padding-top: 36px; border-top: 2px solid var(--wk-border); scroll-margin-top: 90px; }
.wk-qa-heading { font-size: 22px; font-weight: 900; margin: 0 0 22px; display: flex; align-items: center; gap: 10px; }
.wk-qa-count {
    font-size: 12px; font-weight: 800; color: var(--wk-purple-ink);
    background: var(--wk-purple-soft); padding: 3px 10px; border-radius: 99px;
}
.wk-qa-empty { color: var(--wk-muted); font-size: 14px; margin: 0 0 24px; }

.wk-qa-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 20px; }
.wk-qa-item { padding-bottom: 20px; border-bottom: 1px solid var(--wk-border); }
.wk-qa-item:last-child { border-bottom: 0; padding-bottom: 0; }
.wk-qa-q, .wk-qa-a { display: flex; gap: 12px; align-items: flex-start; }
.wk-qa-a { margin-top: 12px; }
.wk-qa-marker {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; font-family: var(--font-mono);
    background: var(--wk-bg); color: var(--wk-muted);
}
.wk-qa-marker-a { background: var(--wk-purple); color: #fff; }
.wk-qa-text { font-size: 14px; line-height: 1.7; margin: 0; white-space: pre-line; }
.wk-qa-q .wk-qa-text { font-weight: 700; }
.wk-qa-meta { font-size: 11.5px; color: var(--wk-muted); margin: 4px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }

.wk-qa-form-wrap {
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: var(--radius); padding: 18px 22px;
}
.wk-qa-form-toggle { font-size: 15px; font-weight: 800; cursor: pointer; }
.wk-qa-note { font-size: 12.5px; color: var(--wk-muted); line-height: 1.6; margin: 12px 0 0; }
.wk-qa-form { margin-top: 18px; display: grid; gap: 16px; }
.wk-qa-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.wk-qa-form label, .wk-qa-field { display: grid; gap: 5px; font-size: 13px; font-weight: 700; }
.wk-qa-form small { font-size: 11px; font-weight: 500; color: var(--wk-muted); }
.wk-qa-form input[type=text], .wk-qa-form input[type=email], .wk-qa-form textarea {
    font: inherit; font-weight: 500; padding: 11px 13px;
    border: 2px solid var(--wk-border); border-radius: var(--radius-sm);
    background: var(--wk-bg); color: var(--wk-text); width: 100%;
}
.wk-qa-form textarea { resize: vertical; min-height: 80px; }
.wk-qa-form input:focus, .wk-qa-form textarea:focus { outline: none; border-color: var(--wk-purple-ink); }
.wk-qa-form input.is-bad { border-color: var(--wk-red); }
.wk-qa-form input.is-ok  { border-color: var(--wk-green); }
.wk-qa-form small.is-bad { color: var(--wk-red); font-weight: 700; }
.wk-qa-form small.is-ok  { color: var(--wk-green); font-weight: 700; }

/* ── Floating contact bar ──────────────────────────────────────────── */
/* The wrapper spans the viewport height but takes no pointer events, so the
   space between icons never intercepts a click meant for the page. Only the
   links themselves are clickable. */
.wk-social {
    position: fixed; top: 50%; transform: translateY(-50%);
    z-index: 850; pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.wk-social-left  { left: 14px; }
.wk-social-right { right: 14px; }
.wk-social.is-hidden { opacity: 0; visibility: hidden; }

/* An author display declaration beats the hidden attribute, so a closed
   panel would stay laid out — invisible, but still taking clicks. */
.wk-social-inner[hidden] { display: none; }
/* No overflow of any kind: setting one axis to auto makes the other auto
   too, which clipped each icon's shadow at a hard rectangular edge. Ten
   channels stack to about 500px and fit; a shop with more than that wants
   the collapsed mode. */
.wk-social-inner {
    display: flex; flex-direction: column; gap: 9px;
}

.wk-social-link {
    pointer-events: auto;
    position: relative; flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--wk-social-brand, var(--wk-purple));
    color: #fff; text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,0,0,.18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.wk-social-link svg { width: 20px; height: 20px; display: block; }
.wk-social-link:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.26); }
.wk-social-link:focus-visible { outline: 3px solid var(--wk-purple); outline-offset: 3px; }

/* Name appears on hover, growing away from the screen edge. */
.wk-social-label {
    position: absolute; top: 50%; transform: translateY(-50%);
    white-space: nowrap; font-size: 12px; font-weight: 800; line-height: 1;
    padding: 7px 11px; border-radius: 7px;
    background: var(--wk-text); color: var(--wk-surface);
    opacity: 0; pointer-events: none;
    transition: opacity .16s ease;
}
.wk-social-left  .wk-social-label { left: calc(100% + 9px); }
.wk-social-right .wk-social-label { right: calc(100% + 9px); }
.wk-social-link:hover .wk-social-label,
.wk-social-link:focus-visible .wk-social-label { opacity: 1; }

/* Below the point where the 1200px container still leaves a gutter, the bar
   would start sitting over the page, so it gets smaller and tucks in. */
@media (max-width: 1320px) {
    .wk-social-left  { left: 8px; }
    .wk-social-right { right: 8px; }
    .wk-social-link { width: 38px; height: 38px; }
    .wk-social-link svg { width: 18px; height: 18px; }
}
@media (max-width: 720px) {
    .wk-social-inner { gap: 7px; }
    .wk-social-link { width: 32px; height: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
    .wk-social-link svg { width: 15px; height: 15px; }
    /* Touch devices have no hover, and the label would cover the page. */
    .wk-social-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wk-social, .wk-social-link, .wk-social-label { transition: none; }
    .wk-social-link:hover { transform: none; }
}

/* Keep the page clear of the contact bar.
   Above 1340px the centred 1200px container already leaves a wide enough
   gutter; below it the bar would start sitting over the content, so the
   container gives up the space instead. */
@media (max-width: 1340px) {
    body.wk-has-social-left  .wk-container { padding-left: 72px; }
    body.wk-has-social-right .wk-container { padding-right: 72px; }
}
@media (max-width: 720px) {
    body.wk-has-social-left  .wk-container { padding-left: 50px; }
    body.wk-has-social-right .wk-container { padding-right: 50px; }
}

/* Collapsed mode: one button, opening into the column. */
.wk-social-toggle {
    pointer-events: auto;
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.wk-social-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.26); }
.wk-social-toggle:focus-visible { outline: 3px solid var(--wk-purple); outline-offset: 3px; }
.wk-social-toggle svg { width: 20px; height: 20px; display: block; }
.wk-social-toggle-close { display: none; }
.wk-social.is-open .wk-social-toggle-open { display: none; }
.wk-social.is-open .wk-social-toggle-close { display: block; }

/* The button sits at the bottom of the stack so the icons open upward,
   away from the page rather than across it. */
.wk-social-collapsible { display: flex; flex-direction: column-reverse; gap: 9px; align-items: center; }
.wk-social-collapsible .wk-social-inner { gap: 9px; }
.wk-social-collapsible .wk-social-link {
    opacity: 0; transform: translateY(10px) scale(.85);
    transition: opacity .18s ease, transform .18s ease;
    transition-delay: calc(var(--wk-social-i, 0) * 35ms);
}
.wk-social.is-open .wk-social-link { opacity: 1; transform: none; }

@media (max-width: 1320px) {
    .wk-social-toggle { width: 38px; height: 38px; }
    .wk-social-toggle svg { width: 18px; height: 18px; }
}
@media (max-width: 720px) {
    .wk-social-toggle { width: 34px; height: 34px; }
    .wk-social-toggle svg { width: 16px; height: 16px; }
    .wk-social-collapsible, .wk-social-collapsible .wk-social-inner { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .wk-social-toggle, .wk-social-collapsible .wk-social-link { transition: none; }
    .wk-social-toggle:hover { transform: none; }
    .wk-social-collapsible .wk-social-link { opacity: 1; transform: none; }
}

/* ── Exit-intent prompt ────────────────────────────────────────────── */
.wk-lead[hidden] { display: none; }
.wk-lead {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; transition: opacity .24s ease;
}
.wk-lead.is-open { opacity: 1; }
.wk-lead-backdrop { position: absolute; inset: 0; background: rgba(15,12,30,.55); }
.wk-lead-box {
    position: relative; width: 100%; max-width: 420px;
    background: var(--wk-surface); border-radius: var(--radius);
    padding: 30px 28px 26px; text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.3);
    transform: translateY(14px) scale(.98); transition: transform .24s ease;
}
.wk-lead.is-open .wk-lead-box { transform: none; }
.wk-lead-x {
    position: absolute; top: 10px; right: 12px; border: none; background: none;
    font-size: 26px; line-height: 1; color: var(--wk-muted); cursor: pointer; padding: 4px 8px;
}
.wk-lead-x:hover { color: var(--wk-text); }
.wk-lead-title { font-size: 22px; font-weight: 900; margin: 0 0 8px; }
.wk-lead-text { font-size: 14px; line-height: 1.65; color: var(--wk-muted); margin: 0 0 18px; }

.wk-lead-offer {
    background: var(--wk-purple-soft); border: 2px dashed var(--wk-purple);
    border-radius: var(--radius-sm); padding: 14px; margin-bottom: 18px;
}
.wk-lead-offer-value { display: block; font-size: 26px; font-weight: 900; color: var(--wk-purple-ink); line-height: 1.1; }
.wk-lead-offer-note { font-size: 12px; font-weight: 700; color: var(--wk-muted); }

.wk-lead-form { display: grid; gap: 12px; }
.wk-lead-field { display: grid; gap: 5px; text-align: left; font-size: 12px; font-weight: 800; }
.wk-lead-field input {
    font: inherit; font-weight: 500; font-size: 14px; padding: 12px 13px;
    border: 2px solid var(--wk-border); border-radius: var(--radius-sm);
    background: var(--wk-bg); color: var(--wk-text); width: 100%;
}
.wk-lead-field input:focus { outline: none; border-color: var(--wk-purple-ink); }
.wk-lead-hint { font-size: 11.5px; color: var(--wk-muted); margin: -4px 0 0; text-align: left; }
.wk-lead-submit {
    font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; padding: 13px;
    border: none; border-radius: var(--radius-sm); color: #fff;
    background: linear-gradient(135deg, var(--wk-purple), var(--wk-pink));
    box-shadow: 0 4px 15px rgba(139,92,246,.25);
}
.wk-lead-submit:disabled { opacity: .65; cursor: default; }
.wk-lead-no {
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--wk-muted);
    background: none; border: none; cursor: pointer; padding: 2px;
}
.wk-lead-no:hover { color: var(--wk-text); text-decoration: underline; }
.wk-lead-done { font-size: 14px; line-height: 1.6; margin: 6px 0 0; }
.wk-lead-done.is-ok { color: var(--wk-green); font-weight: 700; }
.wk-lead-done.is-bad { color: var(--wk-red); font-weight: 700; }
.wk-lead-code {
    display: inline-block; font-family: var(--font-mono); font-size: 18px;
    background: var(--wk-purple-soft); color: var(--wk-purple-ink);
    padding: 4px 12px; border-radius: 6px; margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .wk-lead, .wk-lead-box { transition: none; }
    .wk-lead-box { transform: none; }
}

/* Link from the description to the questions further down the page */
.wk-ask-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--wk-purple-ink);
    text-decoration: none; margin-bottom: 18px;
    padding: 7px 12px; border-radius: 999px;
    background: var(--wk-purple-soft); transition: filter .15s ease;
}
.wk-ask-link:hover { filter: brightness(.96); text-decoration: underline; }

/* ── Product FAQ ───────────────────────────────────────────────────── */
.wk-faq { margin-top: 48px; padding-top: 36px; border-top: 2px solid var(--wk-border); scroll-margin-top: 90px; }
.wk-faq-heading { font-size: 22px; font-weight: 900; margin: 0 0 20px; }
.wk-faq-list { display: grid; gap: 10px; }
.wk-faq-item {
    border: 2px solid var(--wk-border); border-radius: var(--radius-sm);
    background: var(--wk-surface); overflow: hidden;
}
.wk-faq-item summary {
    cursor: pointer; padding: 14px 18px; font-size: 14.5px; font-weight: 800;
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wk-faq-item summary::-webkit-details-marker { display: none; }
.wk-faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--wk-muted); }
.wk-faq-item[open] summary::after { content: '\2212'; }
.wk-faq-item[open] summary { border-bottom: 1px solid var(--wk-border); }
.wk-faq-item p { margin: 0; padding: 14px 18px; font-size: 14px; line-height: 1.75; color: var(--wk-muted); }

/* ── Phone field ──────────────────────────────── */
/* The picker sits beside the number. Kept in the stylesheet rather than on the
   element so a narrower home for it can lay the two out differently. */
.wk-phone-field { display: grid; grid-template-columns: minmax(0, 148px) minmax(0, 1fr); gap: 8px; }
@media (max-width: 480px) {
    .wk-phone-field { grid-template-columns: minmax(0, 1fr); }
}

/* ── Field validation ─────────────────────────── */
/* The line under a field that says why it was rejected, or offers a spelling. */
.wk-field-note { font-size: 11px; font-weight: 700; margin: 5px 0 0; line-height: 1.4; }
.wk-field-note.wk-field-bad  { color: #ef4444; }
.wk-field-note.wk-field-warn { color: #f59e0b; }
input.wk-field-invalid { border-color: #ef4444 !important; }

/* The exit prompt is narrow, so the picker sits above the number rather than
   beside it, where the country name would have nowhere to go. */
.wk-lead-field .wk-phone-field { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.wk-lead-field .wk-phone-field select {
    width: 100%; padding: 11px 12px; border: 2px solid var(--wk-border); border-radius: 10px;
    font-family: var(--font); font-size: 13px; font-weight: 700;
    background: var(--wk-surface); color: var(--wk-text);
}
.wk-lead-field .wk-phone-field select:focus { outline: none; border-color: var(--wk-purple-ink); }

/* Footer links sit close together on a phone, and a 19px line of text is not
   something a thumb can hit reliably. The padding is the target, not the ink. */
.wk-footer-inner a { display: inline-block; padding: 4px 2px; min-height: 24px; }


/* ── Phones ───────────────────────────────────
   Written last so it settles anything above it. The screen is 375px wide and
   about 70 of those were going to margins and a strip of icons. */
@media (max-width: 768px) {
    /* The bar folds into its button here whatever the shopkeeper chose for
       desktop, and the page stops reserving a column for it. */
    .wk-social-inner { display: none; }
    .wk-social.is-open .wk-social-inner { display: flex; }
    body.wk-has-social-left  .wk-container,
    body.wk-has-social-right .wk-container { padding-left: 16px; padding-right: 16px; }
    .wk-container { padding-left: 16px; padding-right: 16px; }

    /* Logo, account and cart on one line instead of three. */
    .wk-header-inner { gap: 10px 12px; padding-top: 10px; padding-bottom: 10px; }
    .wk-logo { font-size: 17px; gap: 7px; }
    .wk-logo svg { width: 24px; height: 24px; }
    .wk-cart-btn { padding: 7px 11px; font-size: 13px; }
    .wk-header-inner { padding-left: 16px; padding-right: 16px; }

    /* Icons alone in the header. The words are what pushed the logo, the
       account menu and the cart onto three separate rows. */
    .wk-btn-label { display: none; }

    /* Sections were spaced for a desktop page and read as gaps on a phone. */
    .wk-section { padding: 32px 0; }
    .wk-section-title { font-size: 22px; }
    .wk-section-sub { font-size: 13px; }

    /* The smallest labels were 11px, which is below comfortable reading. */
    .wk-product-cat { font-size: 12px; }
    .wk-product-badge { font-size: 12px; }
    .wk-product-name { font-size: 14px; }

    /* Anything laid out in two columns for a desktop form gets one here. */
    .wk-phone-field { grid-template-columns: minmax(0, 1fr); }
    .wk-footer-inner { gap: 18px; }
}

@media (max-width: 380px) {
    .wk-hero-name { font-size: 24px; }
    .wk-hero-price-current { font-size: 22px; }
    .wk-hero-actions { flex-direction: column; align-items: stretch; }
}

/* A slide is dragged, so nothing inside it should look selectable. */
.wk-carousel-track { user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.wk-carousel-track a, .wk-carousel-track img { -webkit-user-drag: none; }


/* ── Product page ─────────────────────────────
   The gallery beside the details, until there is no room for two of anything. */
.wk-product-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.wk-buy-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
/* Sizing lives here rather than on the element, so a narrow screen can put the
   button on its own line instead of squeezing it beside the stepper. */
.wk-buy-cta { flex: 1; border-radius: var(--radius-sm); font-size: 15px; padding: 16px; }

@media (max-width: 768px) {
    /* Side by side, these were an 80px picture next to a column of text and a
       buy button 75px wide with its label broken over three lines. */
    .wk-product-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    /* The quantity stepper keeps its size; the button takes the row below it
       and the full width, which is where a thumb expects it. */
    .wk-buy-row { flex-wrap: wrap; gap: 12px; }
    .wk-buy-row .wk-buy-cta { flex: 1 0 100%; width: 100%; }

    /* Folded away, the contact button sat over the middle of the page. Down in
       the corner it is still to hand and over nothing. */
    .wk-social:not(.is-open) { top: auto; bottom: 84px; transform: none; }
    .wk-social-left:not(.is-open)  { left: 12px; }
    .wk-social-right:not(.is-open) { right: 12px; }
}


/* ── Column layouts ───────────────────────────
   Forms and panels were laid out in two and three columns written straight
   onto the element, so a phone got two 140px columns of a shipping address
   rather than one readable one. */
.wk-cols-2 { display: grid; grid-template-columns: 1fr 1fr; }
.wk-cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.wk-checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; }

@media (max-width: 768px) {
    .wk-cols-2,
    .wk-cols-3,
    .wk-checkout-layout { grid-template-columns: minmax(0, 1fr); }
}


/* The chat panel is a fixed 380px, which is wider than the phone it opens on.
   Inline width wins over a plain rule, so this one has to insist. */
@media (max-width: 430px) {
    .wk-chat-window {
        width: auto !important;
        left: 12px !important;
        right: 12px !important;
        max-height: 70vh !important;
    }
}

/* ── Cart page ────────────────────────────────
   The drawer is for a glance; this is the page a recovery email links to and
   the one somebody returns to with the back button. */
.wk-cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }

.wk-cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wk-cart-line {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: start;
    grid-template-areas: "img info total";
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: var(--radius); padding: 16px;
}
.wk-cart-line-img {
    grid-area: img;
    width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--wk-bg);
    display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
}
.wk-cart-line-img img { width: 100%; height: 100%; object-fit: cover; }
.wk-cart-line-info { grid-area: info; min-width: 0; }
.wk-cart-line-name { font-weight: 800; font-size: 15px; color: var(--wk-text); text-decoration: none; display: block; }
.wk-cart-line-name:hover { color: var(--wk-purple-ink); }
.wk-cart-line-variant { font-size: 12px; font-weight: 700; color: var(--wk-muted); margin-top: 3px; }
.wk-cart-line-unit { font-size: 13px; color: var(--wk-muted); margin-top: 4px; }
.wk-cart-line-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.wk-cart-line-remove {
    background: none; border: none; padding: 6px 2px; cursor: pointer;
    font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--wk-muted);
    text-decoration: underline; text-underline-offset: 2px;
}
.wk-cart-line-remove:hover { color: #dc2626; }
.wk-cart-line-total { grid-area: total; font-weight: 900; font-size: 16px; font-family: var(--font-mono); white-space: nowrap; }

.wk-cart-summary {
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: var(--radius); padding: 24px; position: sticky; top: 90px;
}
.wk-cart-summary h2 { font-size: 17px; font-weight: 900; margin: 0 0 16px; }
.wk-cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.wk-cart-summary-row strong { font-family: var(--font-mono); font-size: 20px; font-weight: 900; }
.wk-cart-summary-note { font-size: 12px; color: var(--wk-muted); margin: 10px 0 18px; line-height: 1.5; }
.wk-cart-keep-shopping {
    display: block; text-align: center; margin-top: 12px; padding: 6px 0; min-height: 24px;
    font-size: 13px; font-weight: 700; color: var(--wk-purple-ink); text-decoration: none;
}

/* How close the basket is to free delivery. */
.wk-ship-progress {
    background: var(--wk-purple-soft); border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 18px;
}
.wk-ship-progress p { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--wk-text); }
.wk-ship-bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.wk-ship-bar span { display: block; height: 100%; border-radius: 99px; background: var(--wk-purple); transition: width .4s ease; }

@media (max-width: 768px) {
    .wk-cart-page { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .wk-cart-summary { position: static; }
    /* Two columns and the total on its own row: squeezed into three, the
       middle column was 129px for a name, a variant and a quantity stepper. */
    .wk-cart-line {
        grid-template-columns: 76px minmax(0, 1fr);
        grid-template-areas: "img info" "total total";
        gap: 10px 12px; padding: 12px;
    }
    .wk-cart-line-img { width: 76px; height: 76px; }
    .wk-cart-line-total { text-align: right; font-size: 17px; }
}

/* Said once the order is on its way, so the wait has an explanation. */
.wk-pay-note { font-size: 12px; font-weight: 700; color: var(--wk-muted); margin: 10px 0 0; min-height: 16px; line-height: 1.5; }

/* Asked for once, right where the order is placed. */
.wk-terms { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.wk-terms input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--wk-purple-ink); cursor: pointer; }
.wk-terms a { color: var(--wk-purple-ink); font-weight: 700; }

/* ── Announcements and the skip link ──────────
   Present for anyone navigating by keyboard or screen reader, out of the way
   for everyone else. */
.wk-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wk-skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 500;
    padding: 12px 20px; border-radius: 0 0 10px 10px;
    background: var(--wk-purple-ink); color: #fff;
    font-size: 14px; font-weight: 800; text-decoration: none;
    transition: top .15s ease;
}
.wk-skip-link:focus { top: 0; outline: 3px solid var(--wk-yellow); outline-offset: 2px; }
#wk-main:focus { outline: none; }

/* ── Breadcrumbs ──────────────────────────────
   The same trail already published as structured data, shown to the person
   who is actually on the page. */
.wk-crumbs { margin-bottom: 20px; }
.wk-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-crumbs li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; min-width: 0; }
.wk-crumbs li + li::before { content: '/'; color: var(--wk-border); font-weight: 700; }
.wk-crumbs a { color: var(--wk-purple-ink); text-decoration: none; padding: 4px 0; }
.wk-crumbs a:hover { text-decoration: underline; }
.wk-crumbs span { color: var(--wk-muted); font-weight: 600; }
/* The product's own name can be long; it is the one that gets trimmed. */
.wk-crumbs li:last-child span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw;
}

/* ── The bigger picture ───────────────────────
   Tapping a product photo should show it properly, not open it as a file. */
.wk-lightbox {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(15, 10, 30, .92);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.wk-lightbox[hidden] { display: none !important; }
.wk-lightbox img { max-width: 100%; max-height: 90vh; width: auto; height: auto; border-radius: 12px; }
.wk-lightbox-close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1;
}
.wk-lightbox-close:hover { background: rgba(255,255,255,.28); }
.wk-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── Recently viewed ──────────────────────────
   A row that scrolls sideways rather than a grid that pushes the page down. */
.wk-recent-strip {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.wk-recent-card {
    flex: 0 0 140px; scroll-snap-align: start; text-decoration: none;
    background: var(--wk-surface); border: 2px solid var(--wk-border);
    border-radius: 12px; overflow: hidden; transition: border-color .2s;
}
.wk-recent-card:hover { border-color: var(--wk-purple); }
.wk-recent-img {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; background: var(--wk-bg); overflow: hidden;
}
.wk-recent-img img { width: 100%; height: 100%; object-fit: cover; }
.wk-recent-name {
    display: block; padding: 10px 12px; font-size: 13px; font-weight: 700;
    color: var(--wk-text); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}