/* ============================================
   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 {
    /* Rudratma Spiritual Master Palette */
    --rudra-bg-dark:     #140d07;
    --rudra-bg-darker:   #0d0804;
    --rudra-bg-card-dark:#1b120a;
    --rudra-gold:        #c5a059;
    --rudra-gold-bright: #d4af37;
    --rudra-gold-light:  #f6efe2;
    --rudra-gold-muted:  #9d8252;
    --rudra-saffron:     #c86a1a;
    --rudra-saffron-hover:#b45a0f;
    --rudra-cream:       #faf7f2;
    --rudra-cream-alt:   #f5efe6;
    --rudra-surface:     #ffffff;
    --rudra-text:        #20140b;
    --rudra-text-muted:  #756557;
    --rudra-border:      #ebd8c2;
    --rudra-border-gold: rgba(197, 160, 89, 0.35);

    /* Core framework variable mappings */
    --wk-purple:         var(--rudra-saffron);
    --wk-purple-ink:     var(--rudra-saffron-hover);
    --wk-purple-soft:    #fff7ed;
    --wk-pink:           var(--rudra-gold);
    --wk-pink-soft:      var(--rudra-gold-light);
    --wk-green:          #16a34a;
    --wk-green-soft:     #dcfce7;
    --wk-yellow:         #d4af37;
    --wk-red:            #dc2626;
    --wk-bg:             var(--rudra-cream);
    --wk-surface:        var(--rudra-surface);
    --wk-text:           var(--rudra-text);
    --wk-muted:          var(--rudra-text-muted);
    --wk-border:         var(--rudra-border);
    --font:              'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif:        'Cormorant Garamond', 'Cinzel', Georgia, serif;
    --font-mono:         'JetBrains Mono', monospace;
    --radius:            12px;
    --radius-sm:         6px;
    --max-w:             1240px;
}

/* 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 Theme (Harmonized with Rudratma Devotional Aesthetic) */
[data-theme="sunset"] {
    --wk-purple:     #c86a1a;
    --wk-purple-ink: #b45a0f;
    --wk-purple-soft:#fff7ed;
    --wk-pink:       #c5a059;
    --wk-pink-soft:  #f6efe2;
    --wk-green:      #16a34a;
    --wk-green-soft: #dcfce7;
    --wk-yellow:     #d4af37;
    --wk-red:        #dc2626;
    --wk-bg:         #faf7f2;
    --wk-surface:    #ffffff;
    --wk-text:       #20140b;
    --wk-muted:      #756557;
    --wk-border:     #ebd8c2;
}

/* 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: rgba(16, 11, 8, 0.94); border-bottom: 1px solid rgba(201, 154, 69, 0.2); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* 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,.5);
    backdrop-filter: blur(4px); z-index: 2000;
    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: 420px; max-width: 100vw;
    background: #ffffff;
    box-shadow: -10px 0 40px rgba(100, 60, 20, 0.16);
    z-index: 2001;
    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: 22px 24px;
    border-bottom: 1px solid #ebd9c4;
    background: linear-gradient(135deg, #fdfbf7 0%, #f7efe4 100%);
    display: flex; align-items: center; justify-content: space-between;
}
.wk-cart-drawer-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #1f140a;
    margin: 0;
}
.wk-cart-close {
    background: #ffffff;
    border: 1px solid #ebd9c4;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    color: #6e5d4f;
    transition: all .2s ease;
    box-shadow: 0 1px 4px rgba(100,60,20,0.06);
}
.wk-cart-close:hover {
    border-color: #c96510;
    color: #c96510;
    background: #fdfbf7;
}

.wk-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    background: #fcfaf6;
}

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

.wk-cart-item-img {
    width: 68px; height: 68px; border-radius: 8px;
    background: #ffffff;
    border: 1px solid #ebd9c4;
    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-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 16.5px;
    color: #1f140a;
    line-height: 1.25;
    margin-bottom: 2px;
}
.wk-cart-item-price {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #c96510;
}

.wk-qty-ctrl {
    display: inline-flex;
    border: 1px solid #ebd9c4;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    margin-top: 8px;
}
.wk-qty-btn {
    background: #fdfbf7;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #1f140a;
    transition: all .15s;
}
.wk-qty-btn:hover {
    background: #c96510;
    color: #ffffff;
}
.wk-qty-val {
    width: 34px;
    height: 28px;
    text-align: center;
    border: none;
    border-left: 1px solid #ebd9c4;
    border-right: 1px solid #ebd9c4;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #1f140a;
}

.wk-cart-empty {
    text-align: center;
    padding: 72px 20px;
    color: #6e5d4f;
}
.wk-cart-empty-icon {
    font-size: 46px;
    margin-bottom: 12px;
    opacity: .85;
}

.wk-cart-footer {
    padding: 22px 24px;
    border-top: 1px solid #ebd9c4;
    background: #ffffff;
    box-shadow: 0 -4px 16px rgba(100, 60, 20, 0.04);
}
.wk-cart-total {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
.wk-cart-total-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #6e5d4f;
}
.wk-cart-total-value {
    font-size: 24px;
    font-weight: 800;
    font-family: 'Cormorant Garamond', serif;
    color: #1f140a;
}

.wk-checkout-btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #c96510 0%, #b05508 100%);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(201, 101, 16, 0.28);
    transition: all .25s ease;
}
.wk-checkout-btn:hover {
    background: linear-gradient(135deg, #b05508 0%, #944405 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 101, 16, 0.38);
    color: #ffffff;
}

/* ── 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, 1.35fr) minmax(140px, 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;
}

/* ========================================================
   RUDRATMA SACRED STOREFRONT THEME (Devotional & Luxurious)
   Matches Design Reference Screenshot
   ======================================================== */
.font-cinzel { font-family: 'Cinzel', serif !important; }
.font-garamond { font-family: 'Cormorant Garamond', Georgia, serif !important; }
.font-sans { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; }

/* Global Buttons & CTA */
.rudra-btn-saffron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--rudra-saffron);
    color: #ffffff !important;
    border: none;
    border-radius: 9999px;
    padding: 13px 34px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(200, 106, 26, 0.32);
    transition: all 0.25s ease;
    cursor: pointer;
}

.rudra-btn-saffron:hover {
    background: var(--rudra-saffron-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(200, 106, 26, 0.45);
}

.rudra-btn-saffron-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--rudra-saffron) !important;
    border: 1.5px solid var(--rudra-saffron);
    border-radius: 9999px;
    padding: 11px 26px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}

.rudra-btn-saffron-outline:hover {
    background: var(--rudra-saffron);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(200, 106, 26, 0.3);
}

/* ═══ 1. SACRED HERO SECTION (Exact Reference Screenshot Layout) ═══ */
.rudra-hero {
    position: relative;
    background-color: #140d07;
    background-image: url('../img/hero_rudraksha.jpg');
    background-image: image-set(
        url('../img/hero_rudraksha.webp') type('image/webp'),
        url('../img/hero_rudraksha.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: right 30% center;
    background-repeat: no-repeat;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 100px 0 64px;
    overflow: hidden;
}

.rudra-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17, 11, 7, 0.95) 0%, rgba(17, 11, 7, 0.84) 44%, rgba(17, 11, 7, 0.28) 100%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .rudra-hero {
        min-height: 480px;
        padding: 90px 0 50px;
        background-position: center center;
    }
    .rudra-hero-gradient {
        background: linear-gradient(180deg, rgba(17, 11, 7, 0.90) 0%, rgba(17, 11, 7, 0.82) 40%, rgba(17, 11, 7, 0.95) 100%);
    }
}

.rudra-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.rudra-hero-left {
    max-width: 530px;
    text-align: left;
}

@media (max-width: 768px) {
    .rudra-hero-left {
        max-width: 100%;
        text-align: left;
    }
}

.rudra-hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--rudra-gold);
    margin-bottom: 12px;
    display: block;
}

.rudra-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(36px, 5.2vw, 58px);
    font-weight: 500;
    color: #faf6f0;
    line-height: 1.14;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.65);
}

.rudra-hero-desc {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(14px, 1.5vw, 15px);
    line-height: 1.68;
    color: #ded4c5;
    margin-bottom: 28px;
    font-weight: 400;
}

.rudra-hero-btn-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ═══ 2. FEATURE STRIP / TRUST BADGES (Dark Brown Espresso Band) ═══ */
.rudra-features-bar {
    background: #191009;
    border-top: 1px solid rgba(197, 160, 89, 0.25);
    border-bottom: 1px solid rgba(197, 160, 89, 0.25);
    padding: 15px 0;
}

.rudra-features-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rudra-feature-item {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.rudra-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rudra-gold);
    flex-shrink: 0;
}

.rudra-feature-text {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--rudra-gold);
}

.rudra-feature-divider {
    width: 1px;
    height: 18px;
    background: rgba(197, 160, 89, 0.25);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .rudra-features-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 24px;
    }
    .rudra-feature-divider {
        display: none;
    }
    .rudra-feature-item {
        flex: 0 0 auto;
    }
}

/* Backwards compatibility for rudra-trust-bar */
.rudra-trust-bar {
    background: #191009;
    border-top: 1px solid rgba(197, 160, 89, 0.25);
    border-bottom: 1px solid rgba(197, 160, 89, 0.25);
    padding: 15px 0;
}

.rudra-trust-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rudra-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rudra-gold);
}

.rudra-trust-icon {
    color: var(--rudra-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rudra-trust-text strong {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--rudra-gold);
}

.rudra-trust-text span {
    display: none;
}

/* ── Explore Sacred Collections (Warm Ivory/White Luxury) ── */
.rudra-collections-overview {
    background: #ffffff;
    padding: 68px 0 64px;
    border-bottom: 1px solid #ebd9c4;
}

.rudra-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 36px;
}

@media (max-width: 1100px) {
    .rudra-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .rudra-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.rudra-cat-card {
    background: #ffffff;
    border: 1px solid #ebd9c4;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(100, 60, 20, 0.05);
    transition: all 0.25s ease;
}

.rudra-cat-card:hover {
    border-color: #c96510;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(100, 60, 20, 0.12);
}

.rudra-cat-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fdfaf6;
}

.rudra-cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rudra-cat-card:hover .rudra-cat-card-img img {
    transform: scale(1.05);
}

.rudra-cat-card-body {
    padding: 14px 12px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    background: #ffffff;
}

.rudra-cat-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16.5px;
    font-weight: 700;
    color: #1f140a !important;
    margin: 0 0 6px;
    line-height: 1.25;
}

.rudra-cat-card-link {
    font-size: 11.5px;
    font-weight: 700;
    color: #c96510;
    letter-spacing: 0.3px;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.rudra-cat-card:hover .rudra-cat-card-link {
    color: #b05508;
    transform: translateX(2px);
}

/* ═══ 3. THE RUDRAKSHA COLLECTION SECTION (Warm Cream Background) ═══ */
.rudra-collection-section {
    background: var(--rudra-cream);
    padding: 68px 0 84px;
    border-bottom: 1px solid #ebd8c2;
}

@media (max-width: 768px) {
    .rudra-collection-section {
        padding: 44px 0 60px;
    }
}

.rudra-section-header,
.rudra-collection-header {
    text-align: center;
    max-width: 740px;
    margin: 0 auto 28px;
    padding: 0 16px;
}

.rudra-section-eyebrow,
.rudra-collection-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--rudra-gold);
    margin-bottom: 8px;
    display: block;
}

.rudra-section-title,
.rudra-collection-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    color: #20140b !important;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.rudra-section-desc,
.rudra-collection-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: #6e5e52 !important;
    line-height: 1.6;
    margin: 0 auto;
}

/* Category Filter Pills (Exact Match to Reference Screenshot) */
.rudra-pill-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 38px;
    padding: 0 12px;
}

@media (max-width: 768px) {
    .rudra-pill-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 16px 12px;
        margin: 16px 0 26px;
    }
    .rudra-pill-nav::-webkit-scrollbar {
        display: none;
    }
}

.rudra-pill {
    padding: 9px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 9999px;
    border: 1px solid #ebd8c2;
    background: #ffffff;
    color: #5c4b3f;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(32, 20, 11, 0.04);
    white-space: nowrap;
    flex-shrink: 0;
}

.rudra-pill:hover {
    border-color: var(--rudra-gold);
    color: #20140b;
    background: #fffcf8;
}

.rudra-pill.active {
    background: var(--rudra-saffron);
    color: #ffffff;
    border-color: var(--rudra-saffron);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(200, 106, 26, 0.28);
}

/* Product Cards Grid (4 Columns Desktop) */
.rudra-product-grid,
.rudra-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1100px) {
    .rudra-product-grid,
    .rudra-card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .rudra-product-grid,
    .rudra-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 360px) {
    .rudra-product-grid,
    .rudra-card-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.rudra-product-card {
    background: #ffffff;
    border: 1px solid #ebd8c2;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(32, 20, 11, 0.04);
    position: relative;
}

.rudra-product-card:hover {
    transform: translateY(-4px);
    border-color: var(--rudra-gold);
    box-shadow: 0 12px 28px rgba(32, 20, 11, 0.1);
}

.rudra-card-img-wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #fdfbf7;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.rudra-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.rudra-product-card:hover .rudra-card-img-wrap img {
    transform: scale(1.04);
}

.rudra-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(20, 13, 8, 0.88);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(197, 160, 89, 0.45);
    color: var(--rudra-gold);
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
}

@media (max-width: 600px) {
    .rudra-card-badge {
        font-size: 8px;
        padding: 2px 6px;
        top: 6px;
        left: 6px;
    }
}

.rudra-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #ffffff;
}

@media (max-width: 600px) {
    .rudra-card-body {
        padding: 10px 10px 12px;
    }
}

.rudra-card-category,
.rudra-card-origin {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rudra-gold);
    margin-bottom: 6px;
}

.rudra-card-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: #20140b !important;
    line-height: 1.3;
    margin: 0 0 8px;
    min-height: 2.6em;
}

@media (max-width: 600px) {
    .rudra-card-title {
        font-size: 15px;
        min-height: 2.5em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.rudra-card-title a {
    color: #20140b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rudra-card-title a:hover,
.rudra-card-title:hover {
    color: var(--rudra-saffron) !important;
}

.rudra-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f2e7db;
    gap: 6px;
}

.rudra-card-price {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #20140b !important;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .rudra-card-price {
        font-size: 13.5px;
    }
}

.rudra-card-price .orig,
.rudra-card-price .original-price {
    font-size: 12px;
    color: #9c8978;
    text-decoration: line-through;
    margin-left: 6px;
    font-weight: 400;
}

.rudra-card-btn,
.rudra-card-add-btn {
    background: var(--rudra-saffron);
    color: #ffffff !important;
    border: none;
    border-radius: 9999px;
    padding: 7px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.rudra-card-btn:hover,
.rudra-card-add-btn:hover {
    background: var(--rudra-saffron-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 106, 26, 0.3);
}

.rudra-sold-out-badge {
    font-size: 11px;
    font-weight: 700;
    color: #8c7e70;
    text-transform: uppercase;
}

/* Pagination */
.rudra-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 36px;
}

.rudra-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid #ebd8c2;
    background: #ffffff;
    color: #5c4b3f;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rudra-page-btn:hover:not(:disabled) {
    border-color: var(--rudra-gold);
    color: var(--rudra-saffron);
    background: #fffcf8;
}

.rudra-page-btn.active {
    background: var(--rudra-saffron);
    border-color: var(--rudra-saffron);
    color: #ffffff;
    font-weight: 700;
}

.rudra-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.rudra-page-dots {
    padding: 0 4px;
    color: #a89888;
    font-size: 14px;
    align-self: center;
}

.rudra-pagination-info {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: #8c7e70;
    font-family: 'Inter', sans-serif;
}

.rudra-explore-more-wrap {
    text-align: center;
    margin-top: 36px;
}

/* ═══ 4. SACRED & ENERGISED DEVOTIONAL SPLIT SECTION (Exact Reference Match) ═══ */
.rudra-story-split-section {
    background: var(--rudra-cream);
    padding: 56px 0 74px;
    border-top: 1px solid #ebd8c2;
    border-bottom: 1px solid #ebd8c2;
}

.rudra-story-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
}

@media (max-width: 860px) {
    .rudra-story-split-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.rudra-story-visual {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(32, 20, 11, 0.08);
    border: 1px solid #ebd8c2;
    background: #f7f1e9;
}

.rudra-story-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: transform 0.5s ease;
}

.rudra-story-visual:hover .rudra-story-img {
    transform: scale(1.03);
}

.rudra-story-info {
    text-align: left;
}

.rudra-story-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--rudra-gold);
    margin-bottom: 8px;
    display: block;
}

.rudra-story-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 500;
    color: #20140b;
    line-height: 1.25;
    margin-bottom: 16px;
}

.rudra-story-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.68;
    color: #5c4b3f;
    margin-bottom: 24px;
}

.rudra-stats-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebd8c2;
}

.rudra-stat-col {
    display: flex;
    flex-direction: column;
}

.rudra-stat-val {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--rudra-gold);
    line-height: 1.1;
    margin-bottom: 4px;
}

.rudra-stat-lbl {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #78695d;
    text-transform: uppercase;
}

.rudra-stat-sep {
    width: 1px;
    height: 36px;
    background: rgba(197, 160, 89, 0.35);
    flex-shrink: 0;
}

.rudra-tags-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.rudra-tag-badge {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #6e5e52;
    background: #ffffff;
    border: 1px solid #ebd8c2;
    padding: 5px 12px;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.rudra-tag-badge:hover {
    border-color: var(--rudra-gold);
    color: var(--rudra-text);
}

.rudra-story-cta-wrap {
    margin-top: 10px;
}

/* ═══ 5. VEDIC CONSECRATION PROCESS SECTION ═══ */
.rudra-process-section {
    background: #ffffff;
    padding: 68px 0 76px;
    border-bottom: 1px solid #ebd8c2;
}

.rudra-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 36px;
}

@media (max-width: 900px) {
    .rudra-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 520px) {
    .rudra-process-grid {
        grid-template-columns: 1fr;
    }
}

.rudra-process-card {
    background: var(--rudra-cream);
    border: 1px solid #ebd8c2;
    border-radius: 12px;
    padding: 28px 22px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.rudra-process-card:hover {
    transform: translateY(-4px);
    border-color: var(--rudra-gold);
    box-shadow: 0 10px 24px rgba(32, 20, 11, 0.08);
}

.rudra-process-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--rudra-gold);
    line-height: 1;
    margin-bottom: 12px;
}

.rudra-process-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #20140b;
    margin: 0 0 10px;
}

.rudra-process-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #6e5e52;
    margin: 0;
}

/* ═══ 6. DEVOTIONAL TESTIMONIALS SECTION ═══ */
.rudra-testimonials-section {
    background: var(--rudra-cream);
    padding: 68px 0 80px;
    border-bottom: 1px solid #ebd8c2;
}

.rudra-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

@media (max-width: 860px) {
    .rudra-testimonials-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.rudra-testimonial-card {
    background: #ffffff;
    border: 1px solid #ebd8c2;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 4px 16px rgba(32, 20, 11, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rudra-testimonial-stars {
    color: var(--rudra-gold);
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.rudra-testimonial-quote {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px;
    font-style: italic;
    line-height: 1.6;
    color: #3b2a1c;
    margin: 0 0 20px;
}

.rudra-testimonial-author strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #20140b;
}

.rudra-testimonial-author span {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: #8c7e70;
}

/* ═══ 7. DEEP BROWN DEVOTIONAL FOOTER (Luxury Dark Altar Theme) ═══ */
.rudra-footer {
    background: #140d07;
    color: #c9bcaf;
    padding: 68px 0 28px;
    border-top: 1px solid rgba(197, 160, 89, 0.25);
    position: relative;
    overflow: hidden;
}

.rudra-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--rudra-gold), transparent);
}

.rudra-footer a {
    color: #c9bcaf;
    text-decoration: none;
    transition: all 0.2s ease;
}

.rudra-footer a:hover {
    color: var(--rudra-gold);
    transform: translateX(2px);
}

.rudra-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.rudra-footer-brand-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    color: #fbf7f0;
    text-transform: lowercase;
}

.rudra-footer-brand-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: #9c8e82;
    max-width: 440px;
}

.rudra-footer-col-title {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    color: var(--rudra-gold);
}

.rudra-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rudra-footer-links li a {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.rudra-footer-bottom {
    border-top: 1px solid rgba(197, 160, 89, 0.18);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: #8c7e70;
}

@media (max-width: 768px) {
    .rudra-footer {
        padding: 44px 0 24px;
    }
    .rudra-footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 32px;
    }
    .rudra-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

/* ── Compact Header & Mobile Layout ── */
/* ── Luxury Header & Sticky Scroll Behavior ── */
.wk-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-theme] .wk-header {
    background: rgba(16, 11, 8, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201, 154, 69, 0.2);
}

/* Transparent at top of homepage */
body[data-theme] .wk-header.rudra-header-transparent {
    background: rgba(16, 11, 8, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(201, 154, 69, 0.15);
    margin-bottom: -82px;
}

/* Scrolled state: Solid, dark & premium with gold accent border */
body[data-theme] .wk-header.scrolled,
body[data-theme] .wk-header.rudra-header-transparent.scrolled {
    background: rgba(13, 8, 5, 0.97) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(201, 154, 69, 0.38) !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.65);
}

.wk-header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 12px 28px;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Brand Logo & Wordmark (Left) */
.wk-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.rudra-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--rudra-gold);
    box-shadow: 0 2px 10px rgba(201, 154, 69, 0.3);
    transition: transform 0.3s ease;
}

.wk-logo:hover .rudra-logo-img {
    transform: scale(1.05);
}

body[data-theme] .wk-logo-text,
.wk-logo-text {
    font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #1f140a !important;
    background: linear-gradient(135deg, #1b120a 0%, #7a460b 55%, #b87d28 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.04);
    transition: all 0.25s ease;
}

.wk-logo:hover .wk-logo-text {
    color: #c86a1a !important;
    background: linear-gradient(135deg, #c86a1a 0%, #db5904 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transform: translateY(-0.5px);
}

/* Centered Navigation Links */
.wk-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex: 1 1 auto;
}

body[data-theme] .wk-header-nav > a,
body[data-theme] .wk-nav-dropdown-trigger {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: var(--rudra-ivory) !important;
    padding: 6px 0;
    position: relative;
    transition: color 0.2s ease;
    text-decoration: none;
}

body[data-theme] .wk-header-nav > a:hover,
body[data-theme] .wk-nav-dropdown-trigger:hover,
body[data-theme] .wk-header-nav > a.active {
    color: var(--rudra-gold) !important;
}

body[data-theme] .wk-header-nav > a::after,
body[data-theme] .wk-nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--rudra-gold);
    transition: width 0.25s ease;
}

body[data-theme] .wk-header-nav > a:hover::after,
body[data-theme] .wk-nav-dropdown-trigger:hover::after,
body[data-theme] .wk-header-nav > a.active::after {
    width: 100%;
}

.rudra-nav-arrow {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 2px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.wk-nav-dropdown:hover .rudra-nav-arrow {
    transform: translateY(2px);
    color: var(--rudra-gold);
}

.wk-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    min-width: 210px;
    background: rgba(20, 13, 8, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid var(--rudra-border) !important;
    border-radius: 6px;
    padding: 8px 0;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7) !important;
    z-index: 1050;
}

.wk-nav-dropdown-menu a {
    display: block;
    padding: 9px 18px;
    color: #c9bcaf !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.wk-nav-dropdown-menu a:hover {
    background: rgba(201, 154, 69, 0.12) !important;
    color: var(--rudra-gold) !important;
    padding-left: 22px;
}

/* Header Right Area */
.rudra-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.rudra-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Refined Desktop Search */
.wk-search.rudra-desktop-search {
    position: relative;
    width: 200px;
    transition: width 0.25s ease;
}

.wk-search.rudra-desktop-search:focus-within {
    width: 250px;
}

.wk-search.rudra-desktop-search .wk-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--rudra-muted);
    pointer-events: none;
}

.wk-search.rudra-desktop-search .wk-search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    background: rgba(33, 21, 15, 0.65);
    border: 1px solid rgba(201, 154, 69, 0.25);
    color: var(--rudra-ivory);
    border-radius: 20px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s ease;
}

.wk-search.rudra-desktop-search .wk-search-input:focus {
    border-color: var(--rudra-gold);
    background: rgba(33, 21, 15, 0.95);
    box-shadow: 0 0 0 3px rgba(201, 154, 69, 0.15);
}

.wk-search.rudra-desktop-search .wk-search-input::placeholder {
    color: #8c7e70;
}

/* Account Dropdown Button */
.rudra-account-btn {
    background: none;
    border: 1px solid rgba(201, 154, 69, 0.3);
    border-radius: 20px;
    padding: 7px 14px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rudra-ivory);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.rudra-account-btn:hover {
    border-color: var(--rudra-gold);
    color: var(--rudra-gold);
    background: rgba(201, 154, 69, 0.08);
}

.rudra-account-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: rgba(20, 13, 8, 0.98);
    backdrop-filter: blur(14px);
    border: 1px solid var(--rudra-border);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
    width: 200px;
    z-index: 1050;
    overflow: hidden;
}

/* Rounded Pill Cart Button (Matches Reference Screenshot) */
.wk-cart-btn.rudra-cart-pill {
    position: relative;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9999px;
    cursor: pointer;
    padding: 7px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.25s ease;
}

.wk-cart-btn.rudra-cart-pill:hover {
    border-color: var(--rudra-gold);
    color: var(--rudra-gold);
    background: rgba(197, 160, 89, 0.12);
    box-shadow: 0 2px 12px rgba(197, 160, 89, 0.25);
}

.wk-cart-btn.rudra-cart-pill .rudra-cart-icon {
    width: 17px;
    height: 17px;
    color: currentColor;
    flex-shrink: 0;
}

.wk-cart-btn.rudra-cart-pill .wk-cart-count {
    background: var(--rudra-saffron);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    min-width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.wk-cart-btn.rudra-cart-pill:hover .wk-cart-count {
    background: var(--rudra-bg-dark);
    color: var(--rudra-gold);
}

.rudra-currency-select {
    padding: 6px 10px;
    border: 1px solid var(--rudra-border);
    border-radius: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    background: rgba(33, 21, 15, 0.7);
    cursor: pointer;
    color: var(--rudra-ivory);
    outline: none;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .wk-header,
    .wk-cart-btn,
    .wk-search-input,
    .rudra-logo-img {
        transition: none !important;
    }
}

/* Slim Mobile Search Row - Deprecated in favor of inline search icon */
.rudra-mobile-search-row {
    display: none !important;
}

/* ── Mobile Search Toggle Button ── */
.rudra-mobile-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid rgba(201, 154, 69, 0.35);
    border-radius: 9999px;
    color: var(--rudra-gold);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.rudra-mobile-search-toggle:hover {
    border-color: var(--rudra-gold);
    background: rgba(201, 154, 69, 0.12);
    color: #ffffff;
}

.rudra-mobile-search-toggle svg {
    width: 17px;
    height: 17px;
}

/* Inline Mobile Header Search (slides into view on tap) */
.rudra-mobile-inline-search {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 105;
    background: rgba(13, 8, 5, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    align-items: center;
    padding: 0 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.rudra-mobile-inline-search.active {
    opacity: 1;
    pointer-events: auto;
}

.rudra-mobile-inline-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(28, 18, 12, 0.95);
    border: 1.5px solid var(--rudra-gold);
    border-radius: 9999px;
    padding: 0 14px;
    height: 42px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.rudra-mobile-search-dropdown,
.rudra-drawer-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 500;
    background: #19100a !important;
    border: 1px solid rgba(201, 154, 69, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8) !important;
    max-height: 60vh;
    overflow-y: auto;
}

.rudra-mobile-search-dropdown .wk-search-row,
.rudra-drawer-search-dropdown .wk-search-row {
    color: var(--rudra-ivory) !important;
    border-bottom: 1px solid rgba(201, 154, 69, 0.15) !important;
}

.rudra-mobile-search-dropdown .wk-search-row:hover,
.rudra-mobile-search-dropdown .wk-search-row.active,
.rudra-drawer-search-dropdown .wk-search-row:hover,
.rudra-drawer-search-dropdown .wk-search-row.active {
    background: rgba(201, 154, 69, 0.18) !important;
}

.rudra-mobile-search-dropdown .wk-search-foot,
.rudra-drawer-search-dropdown .wk-search-foot {
    background: #140d07 !important;
    color: var(--rudra-gold) !important;
    border-top: 1px solid rgba(201, 154, 69, 0.2) !important;
}

.rudra-mobile-inline-form svg {
    color: var(--rudra-gold);
    margin-right: 10px;
    flex-shrink: 0;
}

.rudra-mobile-inline-form input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--rudra-ivory);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    min-width: 0;
}

.rudra-mobile-inline-form input::placeholder {
    color: #a39385;
}

.rudra-mobile-search-close {
    background: none;
    border: none;
    color: var(--rudra-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 6px;
    transition: color 0.2s ease;
}

.rudra-mobile-search-close:hover {
    color: var(--rudra-gold);
}

/* ── Mobile Hamburger Toggle Button ── */
.rudra-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    width: 38px;
    height: 38px;
    padding: 0;
    background: rgba(201, 154, 69, 0.1);
    border: 1px solid rgba(201, 154, 69, 0.45);
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.rudra-mobile-toggle:hover,
.rudra-mobile-toggle:active {
    border-color: var(--rudra-gold);
    background: rgba(201, 154, 69, 0.22);
    box-shadow: 0 0 10px rgba(201, 154, 69, 0.25);
}

.rudra-mobile-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--rudra-gold);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 900px) {
    .rudra-mobile-toggle {
        display: flex;
    }
    .rudra-mobile-search-toggle {
        display: inline-flex;
    }
    .rudra-mobile-inline-search {
        display: flex;
    }
    .wk-header-nav {
        display: none !important;
    }
    .rudra-desktop-search {
        display: none !important;
    }
    .rudra-desktop-account,
    #accountMenu {
        display: none !important;
    }
    .rudra-mobile-search-row {
        display: none !important;
    }
    .wk-header {
        background: rgba(16, 11, 8, 0.96) !important;
        border-bottom: 1px solid rgba(201, 154, 69, 0.22) !important;
    }
    .wk-header.rudra-header-transparent {
        background: rgba(16, 11, 8, 0.75) !important;
        border-bottom: 1px solid rgba(201, 154, 69, 0.15) !important;
        margin-bottom: -64px;
    }
    .wk-header-inner {
        position: relative;
        min-height: 56px;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }
    .wk-logo {
        position: static;
        transform: none;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 auto 0 8px;
        text-decoration: none;
        flex-shrink: 1;
        min-width: 0;
    }
    .wk-logo-text {
        font-family: 'Cinzel', serif !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: #1f140a !important;
        background: linear-gradient(135deg, #1b120a 0%, #7a460b 55%, #b87d28 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        white-space: nowrap;
        display: inline-block !important;
    }
    .rudra-logo-img {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }
    .rudra-header-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .rudra-header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .rudra-mobile-search-toggle {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }
    .wk-cart-btn.rudra-cart-pill {
        padding: 6px 10px;
        gap: 5px;
        height: 34px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .wk-header-inner {
        padding: 6px 8px;
        gap: 6px;
    }
    .wk-logo {
        gap: 6px;
        margin: 0 auto 0 6px;
    }
    .rudra-logo-img {
        width: 32px;
        height: 32px;
    }
    .wk-logo-text {
        font-size: 14.5px !important;
        letter-spacing: 0.8px !important;
        display: inline-block !important;
    }
    .rudra-mobile-toggle {
        width: 34px;
        height: 34px;
    }
    .rudra-mobile-toggle span {
        width: 16px;
    }
    .wk-cart-btn.rudra-cart-pill {
        padding: 0;
        width: 34px;
        height: 34px;
        justify-content: center;
        border-radius: 50%;
    }
    .wk-cart-btn.rudra-cart-pill .wk-btn-label {
        display: none !important;
    }
}

/* ── Mobile Sidebar Drawer ── */
.rudra-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.rudra-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

.rudra-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 82vw;
    background: var(--rudra-bg-dark);
    border-right: 1px solid var(--rudra-border);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 8px 0 32px rgba(0,0,0,0.7);
}

.rudra-mobile-drawer.open {
    transform: translateX(0);
}

.rudra-drawer-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--rudra-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0d0704;
}

.rudra-drawer-close {
    background: none;
    border: none;
    color: var(--rudra-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s ease;
}

.rudra-drawer-close:hover {
    color: var(--rudra-gold);
}

.rudra-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 28px;
}

.rudra-drawer-search input {
    width: 100%;
    padding: 8px 12px;
    background: var(--rudra-bg-warm);
    border: 1px solid var(--rudra-border);
    border-radius: 4px;
    color: var(--rudra-ivory);
    font-size: 13px;
    outline: none;
    margin-bottom: 14px;
}

.rudra-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rudra-drawer-link {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    color: var(--rudra-muted);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.rudra-drawer-link:hover {
    background: rgba(201,154,69,0.1);
    color: var(--rudra-gold);
}

.rudra-drawer-divider {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--rudra-gold);
    padding: 14px 12px 4px;
    text-transform: uppercase;
}

.rudra-drawer-accordion summary {
    padding: 9px 12px;
    color: var(--rudra-muted);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
}

.rudra-drawer-accordion summary::-webkit-details-marker {
    display: none;
}

.rudra-drawer-accordion summary::after {
    content: '+';
    font-size: 14px;
    color: var(--rudra-gold);
}

.rudra-drawer-accordion[open] summary::after {
    content: '−';
}

.rudra-drawer-sub {
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rudra-drawer-sub a {
    padding: 6px 12px;
    color: #9c8e80;
    font-size: 12px;
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.rudra-drawer-sub a:hover {
    color: var(--rudra-gold);
}

/* ── Pagination Styling ── */
.rudra-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.rudra-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #e7ded4;
    background: #ffffff;
    color: #4a3828;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.rudra-page-btn:hover:not(:disabled) {
    border-color: #f36a0a;
    color: #f36a0a;
    background: #fff8f2;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(243, 106, 10, 0.15);
}

.rudra-page-btn.active {
    background: linear-gradient(135deg, #f36a0a 0%, #e05400 100%);
    border-color: #f36a0a;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(243, 106, 10, 0.35);
    transform: translateY(-1px);
}

.rudra-page-btn:disabled {
    opacity: 0.45;
    background: #fbf9f6;
    border-color: #ece4db;
    color: #a89888;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.rudra-page-info {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #8c7866;
    margin-top: 10px;
    text-align: center;
    font-weight: 500;
}

/* Explore Full Catalogue Colorful CTA */
.rudra-btn-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 34px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    border-radius: 9999px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f36a0a 0%, #e11d48 50%, #8b5cf6 100%);
    background-size: 200% auto;
    border: none;
    box-shadow: 0 4px 18px rgba(243, 106, 10, 0.38), 0 2px 6px rgba(225, 29, 72, 0.25);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.rudra-btn-explore::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.rudra-btn-explore:hover {
    background-position: right center;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 26px rgba(243, 106, 10, 0.45), 0 4px 12px rgba(139, 92, 246, 0.35);
    color: #ffffff !important;
}

.rudra-btn-explore:active {
    transform: translateY(0) scale(0.99);
}

.rudra-btn-explore svg {
    transition: transform 0.25s ease;
}

.rudra-btn-explore:hover svg {
    transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════
   RUDRATMA SHOP PAGE (WARM LIGHT LUXURY AESTHETIC)
   ══════════════════════════════════════════════════════ */
.rudra-shop-header-section {
    background: #fbf8f3;
    padding: 38px 0 28px;
    border-bottom: 1px solid #ebd9c4;
}

.rudra-shop-header-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.rudra-shop-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #c96510;
    margin-bottom: 6px;
    display: block;
}

.rudra-shop-title {
    font-family: 'Cormorant Garamond', 'Cinzel', serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: #1f140a !important;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 6px;
}

.rudra-shop-count {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #7b695a;
    margin: 0;
}

/* Shop Controls Container (Search + Sort) */
.rudra-shop-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Shop Search Form */
.rudra-shop-search-form {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
}

.rudra-shop-search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: #9c8978;
    pointer-events: none;
    transition: color 0.2s ease;
}

.rudra-shop-search-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #ebd8c2;
    border-radius: 8px;
    padding: 10px 38px 10px 38px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #2a1c12;
    box-shadow: 0 2px 8px rgba(100, 60, 20, 0.04);
    outline: none;
    transition: all 0.2s ease;
}

.rudra-shop-search-input:focus {
    border-color: #c96510;
    box-shadow: 0 0 0 3px rgba(201, 101, 16, 0.15);
}

.rudra-shop-search-input:focus + .rudra-shop-search-icon,
.rudra-shop-search-form:focus-within .rudra-shop-search-icon {
    color: #c96510;
}

.rudra-shop-search-input::placeholder {
    color: #9c8978;
}

.rudra-shop-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    color: #9c8978;
    text-decoration: none;
    padding: 2px 4px;
    transition: color 0.2s ease;
}

.rudra-shop-search-clear:hover {
    color: #c96510;
}

@media (max-width: 768px) {
    .rudra-shop-controls {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .rudra-shop-search-form {
        width: 100%;
        min-width: 100%;
    }
    .rudra-sort-wrap {
        width: 100%;
        justify-content: space-between;
    }
    .rudra-select-box {
        flex: 1;
    }
    .rudra-sort-select {
        width: 100%;
    }
}

/* Sort Dropdown */
.rudra-sort-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rudra-sort-label {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #7b695a;
}

.rudra-select-box {
    position: relative;
    display: inline-block;
}

.rudra-sort-select {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1px solid #ebd8c2;
    border-radius: 8px;
    padding: 10px 38px 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2a1c12;
    cursor: pointer;
    min-width: 190px;
    box-shadow: 0 2px 8px rgba(100, 60, 20, 0.04);
    transition: all 0.2s ease;
}

.rudra-sort-select:hover,
.rudra-sort-select:focus {
    border-color: #c96510;
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 101, 16, 0.15);
}

.rudra-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 11px;
    color: #9c8978;
}

/* Category Filter Pills on Shop Page */
.rudra-shop-pills {
    margin: 0;
    padding-top: 10px;
    justify-content: flex-start;
}

.rudra-pill-count {
    font-size: 11px;
    opacity: 0.75;
    margin-left: 2px;
}

/* Shop Grid Section */
.rudra-shop-grid-section {
    background: #fcf9f4;
    padding: 44px 0 80px;
    min-height: 50vh;
}

/* Badges for Shop Cards */
.rudra-badge-soldout {
    background: rgba(185, 28, 28, 0.92) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #ffffff !important;
}

.rudra-badge-sale {
    background: rgba(201, 101, 16, 0.94) !important;
    border-color: rgba(243, 106, 10, 0.6) !important;
    color: #ffffff !important;
}

.rudra-badge-featured {
    background: rgba(16, 120, 70, 0.92) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #ffffff !important;
}

/* Sold out card styling */
.rudra-product-card.is-soldout .rudra-card-img-wrap img {
    filter: grayscale(15%);
}

.rudra-btn-soldout {
    background: #9c8978 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.85;
}

.rudra-btn-soldout:hover {
    background: #9c8978 !important;
    transform: none !important;
}

.rudra-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    opacity: 0.2;
}

/* Empty State */
.rudra-empty-state {
    text-align: center;
    padding: 80px 20px;
}

.rudra-empty-icon {
    font-size: 52px;
    margin-bottom: 14px;
    opacity: 0.45;
}

.rudra-empty-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 700;
    color: #1f140a;
    margin: 0 0 8px;
}

.rudra-empty-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #7b695a;
    margin: 0;
}

.rudra-empty-link {
    color: #c96510;
    font-weight: 700;
    text-decoration: underline;
}

/* Pagination */
.rudra-shop-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.rudra-shop-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #ebd8c2;
    text-decoration: none;
    color: #5c4a3b;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: 0 2px 6px rgba(100, 60, 20, 0.04);
    transition: all 0.2s ease;
}

.rudra-shop-page-link:hover {
    border-color: #c96510;
    color: #c96510;
    background: #fff8f0;
}

.rudra-shop-page-link.active {
    background: #c96510;
    border-color: #c96510;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(201, 101, 16, 0.28);
}

.rudra-shop-page-dots {
    color: #9c8978;
    padding: 0 6px;
    font-size: 14px;
}

.rudra-shop-page-info {
    text-align: center;
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #7b695a;
}

@media (max-width: 768px) {
    .rudra-shop-header-section {
        padding: 24px 0 16px;
    }
    .rudra-shop-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
    }
    .rudra-sort-wrap {
        width: 100%;
        justify-content: space-between;
    }
    .rudra-sort-select {
        flex: 1;
        min-width: unset;
        width: 100%;
    }
    .rudra-select-box {
        flex: 1;
    }
    .rudra-shop-grid-section {
        padding: 28px 0 56px;
    }
    .rudra-shop-pagination {
        margin-top: 36px;
        gap: 6px;
    }
    .rudra-shop-page-link {
        min-width: 36px;
        height: 36px;
        font-size: 12.5px;
        padding: 0 10px;
    }
}

/* ══════════════════════════════════════════════════════
   RUDRATMA CUSTOMER AUTH (SIGN IN, REGISTER, RECOVERY)
   ══════════════════════════════════════════════════════ */
.rudra-auth-section {
    background: #fbf8f3;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    padding: 60px 20px 80px;
}

.rudra-auth-card-wrap {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.rudra-auth-card {
    background: #ffffff;
    border: 1px solid #ebd9c4;
    border-radius: 12px;
    padding: 38px 34px 34px;
    box-shadow: 0 10px 36px rgba(100, 60, 20, 0.08);
    position: relative;
}

.rudra-auth-card-wide {
    max-width: 520px;
}

.rudra-auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.rudra-auth-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #c96510;
    margin-bottom: 8px;
    display: block;
}

.rudra-auth-title {
    font-family: 'Cormorant Garamond', 'Cinzel', serif;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    color: #1f140a !important;
    letter-spacing: 0.5px;
    margin: 0 0 6px;
    line-height: 1.2;
}

.rudra-auth-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #7b695a;
    margin: 0;
}

.rudra-auth-group {
    margin-bottom: 18px;
}

.rudra-auth-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #5c4a3b;
    margin-bottom: 6px;
}

.rudra-auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.rudra-auth-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ebd8c2;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1f140a;
    background: #ffffff;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.rudra-auth-input:focus {
    border-color: #c96510;
    box-shadow: 0 0 0 3px rgba(201, 101, 16, 0.15);
}

.rudra-auth-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: var(--rudra-saffron);
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(243, 106, 10, 0.25);
    transition: all 0.2s ease;
    margin-top: 24px;
    text-decoration: none;
}

.rudra-auth-btn:hover:not(:disabled) {
    background: #db5904;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(243, 106, 10, 0.35);
}

.rudra-auth-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.rudra-auth-footer-text {
    text-align: center;
    margin-top: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #7b695a;
}

.rudra-auth-link {
    color: #c96510;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rudra-auth-link:hover {
    color: #db5904;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .rudra-auth-section {
        padding: 40px 16px 60px;
    }
    .rudra-auth-card {
        padding: 28px 20px 24px;
    }
}

.rudra-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 36px;
    align-items: start;
}
@media (max-width: 860px) {
    .rudra-contact-grid {
        grid-template-columns: 1fr;
    }
}

.rudra-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
@media (max-width: 600px) {
    .rudra-contact-row {
        grid-template-columns: 1fr;
    }
}

/* ── Rudratma Product Detail Page & Trust Box ─────── */
.rudra-pdp-title {
    font-family: 'Cormorant Garamond', 'Cinzel', serif;
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 700;
    color: #1f140a;
    line-height: 1.25;
    margin: 6px 0 14px;
}

.rudra-pdp-cat {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--rudra-gold);
    display: inline-block;
}

.rudra-trust-box {
    margin-top: 26px;
    margin-bottom: 26px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #ebd8c2;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(32, 20, 11, 0.04);
}

.rudra-trust-box-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 700;
    color: #1f140a;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f2e6d8;
    padding-bottom: 8px;
}

.rudra-trust-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rudra-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rudra-trust-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fdfaf5;
    border: 1px solid #ebd8c2;
    color: var(--rudra-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.rudra-trust-text strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #20140b;
}

.rudra-trust-text span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #7b695a;
    line-height: 1.4;
}

.rudra-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.rudra-spec-card {
    background: #ffffff;
    border: 1px solid #ebd8c2;
    border-radius: 8px;
    padding: 12px 16px;
}

.rudra-spec-card .lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--rudra-gold);
    display: block;
    margin-bottom: 3px;
}

.rudra-spec-card .val {
    font-size: 13.5px;
    font-weight: 600;
    color: #20140b;
}

/* Light storefront palette: warm ivory, soft brown text and restrained saffron accents. */
body[data-theme] {
    --wk-bg: #fbf8f2 !important; --wk-surface: #fffdf9 !important; --wk-text: #30251c !important;
    --wk-muted: #76685a !important; --wk-border: #e9dfd1 !important; --rudra-cream: #fbf8f2 !important;
    --rudra-ivory: #30251c !important; --rudra-gold: #a96f19 !important; --rudra-saffron: #c7781b !important;
    background: #fbf8f2 !important; color: #30251c !important;
}
body[data-theme] #wk-main, body[data-theme] .wk-section, body[data-theme] main { color: #30251c; }
body[data-theme] .wk-header, body[data-theme] .wk-header.rudra-header-transparent,
body[data-theme] .wk-header.scrolled, body[data-theme] .wk-header.rudra-header-transparent.scrolled {
    background: rgba(255,253,249,.97) !important; border-bottom: 1px solid #e9dfd1 !important;
    box-shadow: 0 4px 18px rgba(67,47,25,.07) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom: 0;
}
body[data-theme] .wk-logo-text { color: #3b2b1e !important; -webkit-text-fill-color: #3b2b1e !important; }
body[data-theme] .wk-header-nav > a, body[data-theme] .wk-nav-dropdown-trigger { color: #4c3a2a !important; }
body[data-theme] .wk-header-nav > a:hover, body[data-theme] .wk-nav-dropdown-trigger:hover,
body[data-theme] .wk-header-nav > a.active { color: #a96f19 !important; }
body[data-theme] .wk-nav-dropdown-menu { background: #fffdf9 !important; border-color: #e9dfd1 !important; box-shadow: 0 12px 30px rgba(67,47,25,.12) !important; }
body[data-theme] .wk-nav-dropdown-menu a { color: #4c3a2a !important; }
.rudra-hero { min-height: 500px; padding: 112px 0 74px; background-color: #f7f0e5; background-position: right center; background-size: auto 100%; background-repeat: no-repeat; }
.rudra-hero-gradient { background: linear-gradient(90deg,#fbf8f2 0%,rgba(251,248,242,.98) 34%,rgba(251,248,242,.84) 49%,rgba(251,248,242,.08) 74%,transparent 100%); }
.rudra-hero-left { max-width: 560px; }
.rudra-hero-eyebrow { color: #a96f19; }
.rudra-hero-title { color: #30251c; text-shadow: none; }
.rudra-hero-desc { color: #675748; }
.rudra-features-bar { background: #f3eadc; border-color: #e7d8c3; }
.rudra-feature-item { color: #4c3a2a; }
.rudra-collection-section, .rudra-story-split-section, .rudra-process-section { background: #fbf8f2; }
.rudra-collection-section, .rudra-story-split-section { border-color: #eee5d9; }
.rudra-footer { background: #f3eadc !important; color: #4c3a2a !important; border-top: 1px solid #e7d8c3; }
.rudra-footer::before { display: none; }
.rudra-footer-brand-title, .rudra-footer-col-title { color: #4a3523 !important; }
.rudra-footer-brand-sub, .rudra-footer-links li a, .rudra-footer-bottom, .rudra-footer a { color: #695747 !important; }
.rudra-footer a:hover { color: #a96f19 !important; }
.rudra-card, .rudra-product-card, .wk-card { background: #fffdf9 !important; border-color: #ebe1d4 !important; box-shadow: 0 7px 22px rgba(67,47,25,.06); }
.rudra-card-title { color: #35271c !important; }
.rudra-trust-box { background: #f7f1e8; }
@media (max-width: 768px) {
    .rudra-features-container { flex-wrap: wrap; justify-content: center; }
    .rudra-feature-item { flex: 1 1 145px; white-space: normal; }
    .rudra-footer { padding-top: 38px; }
    .wk-header.rudra-header-transparent { margin-bottom: 0 !important; }
}
@media (max-width: 480px) {
    .rudra-feature-item { flex-basis: 130px; font-size: 11px; }
}
body[data-theme] .rudra-header-actions .rudra-account-btn,
body[data-theme] .wk-cart-btn.rudra-cart-pill { color: #4c3a2a !important; border-color: #d9c9b4 !important; }
body[data-theme] .wk-search.rudra-desktop-search .wk-search-input,
body[data-theme] .rudra-currency-select { color: #3c2d20 !important; background: #fffdf9 !important; border-color: #e2d5c4 !important; }
body[data-theme] .wk-search.rudra-desktop-search .wk-search-input::placeholder { color: #897b6b; }
body[data-theme] .rudra-account-dropdown { background: #fffdf9 !important; border-color: #e9dfd1 !important; box-shadow: 0 12px 28px rgba(67,47,25,.14) !important; }
body[data-theme] .rudra-mobile-drawer { background: #fffdf9 !important; border-color: #e9dfd1 !important; box-shadow: 8px 0 32px rgba(67,47,25,.16) !important; }
body[data-theme] .rudra-drawer-header { background: #f3eadc !important; border-color: #e9dfd1 !important; }
body[data-theme] .rudra-drawer-link, body[data-theme] .rudra-drawer-accordion summary,
body[data-theme] .rudra-drawer-close { color: #4c3a2a !important; }
body[data-theme] .rudra-drawer-search input { color: #3c2d20 !important; background: #fff !important; border-color: #e2d5c4 !important; }
body[data-theme] .rudra-drawer-sub a { color: #76685a !important; }

/* ── Elevated Rudratma Product Detail Page ──────── */
.rudra-pdp-section {
    background: #faf7f2;
}
.rudra-pdp-crumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #7b695a;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.rudra-pdp-crumbs a {
    color: #7b695a;
    text-decoration: none;
    transition: color 0.2s;
}
.rudra-pdp-crumbs a:hover {
    color: #c86a1a;
}
.rudra-pdp-crumbs li + li::before {
    content: "›";
    margin-right: 8px;
    color: #c5a059;
    font-weight: 700;
}
.rudra-pdp-crumbs [aria-current="page"] {
    color: #20140b;
    font-weight: 600;
}

.rudra-pdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 860px) {
    .rudra-pdp-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

.rudra-pdp-gallery {
    position: sticky;
    top: 90px;
}
@media (max-width: 860px) {
    .rudra-pdp-gallery {
        position: static;
    }
}

.rudra-pdp-main-frame {
    position: relative;
    background: #ffffff;
    border: 1px solid #ebd8c2;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(32, 20, 11, 0.06);
    margin-bottom: 14px;
}
.rudra-pdp-badge-genuine {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg, #1b120a 0%, #2f1d11 100%);
    color: #e5b96a;
    border: 1px solid #785a2b;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.rudra-pdp-no-img {
    font-size: 72px;
    opacity: 0.25;
}

.rudra-pdp-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.rudra-pdp-thumb {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #ebd8c2;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}
.rudra-pdp-thumb:hover,
.rudra-pdp-thumb.active {
    border-color: #c86a1a;
    box-shadow: 0 0 0 2px rgba(200, 106, 26, 0.25);
    transform: translateY(-2px);
}
.rudra-pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rudra-pdp-side-guarantee {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #ebd8c2;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 14px;
}
.rudra-pdp-guarantee-col {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3b2b1e;
}
.rudra-pdp-guarantee-col .ico {
    font-size: 15px;
}

.rudra-pdp-cat-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #a36f1b;
    margin-bottom: 8px;
    display: inline-block;
}

.rudra-pdp-heading {
    font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif;
    font-size: clamp(28px, 3.8vw, 38px);
    font-weight: 700;
    color: #1f140a;
    line-height: 1.2;
    margin: 0 0 12px;
}

.rudra-pdp-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.rudra-rating-count-text {
    font-size: 13.5px;
    color: #6b5a4b;
    font-weight: 600;
}

.rudra-pdp-price-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ebd8c2;
}
.rudra-pdp-current-price {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #1f140a;
}
.rudra-pdp-original-price {
    font-size: 17px;
    color: #8c7e70;
    text-decoration: line-through;
    font-weight: 500;
}
.rudra-pdp-discount-pill {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
}
.rudra-pdp-tax-note {
    width: 100%;
    font-size: 12px;
    color: #7b695a;
    margin-top: 2px;
}

.rudra-pdp-hallmarks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.rudra-hallmark-badge {
    background: #ffffff;
    border: 1px solid #ebd8c2;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #4a3523;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rudra-pdp-short-desc {
    color: #4a3b2f;
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 20px;
}

.rudra-ask-link {
    color: #c86a1a;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.rudra-ask-link:hover {
    text-decoration: underline;
}

.rudra-variant-selector {
    margin-bottom: 22px;
}
.rudra-variant-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b5a4b;
    margin-bottom: 8px;
}
.rudra-variant-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.rudra-variant-opt {
    padding: 8px 18px;
    border: 1px solid #ebd8c2;
    border-radius: 8px;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    color: #20140b;
}
.rudra-variant-opt:hover {
    border-color: #c86a1a;
}
.rudra-variant-msg {
    font-size: 13px;
    font-weight: 700;
    margin-top: 8px;
    min-height: 20px;
}

.rudra-pdp-stock-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 13.5px;
    font-weight: 700;
}
.rudra-stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rudra-stock-dot.green { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.rudra-stock-dot.amber { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2); }
.rudra-stock-dot.red { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); }
.rudra-stock-text.green { color: #059669; }
.rudra-stock-text.amber { color: #b45309; }
.rudra-stock-text.red { color: #ef4444; }

.rudra-pdp-buy-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.rudra-pdp-qty-ctrl {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ebd8c2;
    border-radius: 9999px;
    background: #ffffff;
    overflow: hidden;
}
.rudra-qty-btn {
    width: 42px;
    height: 44px;
    font-size: 18px;
    border: none;
    background: none;
    color: #5c4a3b;
    cursor: pointer;
    transition: background 0.2s;
}
.rudra-qty-btn:hover {
    background: #fdf8f2;
}
.rudra-qty-val {
    width: 48px;
    height: 44px;
    font-size: 15px;
    border: none;
    background: none;
    text-align: center;
    font-weight: 700;
    color: #1f140a;
}
.rudra-pdp-add-btn {
    flex: 1;
    min-width: 220px;
    border-radius: 9999px;
    background: #c86a1a;
    color: #ffffff !important;
    border: none;
    padding: 15px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    letter-spacing: 0.8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(200, 106, 26, 0.35);
    transition: all 0.25s ease;
}
.rudra-pdp-add-btn:hover:not(:disabled) {
    background: #b55c11;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 106, 26, 0.45);
}

.rudra-pdp-sku-row {
    font-size: 12px;
    color: #7b695a;
    margin-bottom: 24px;
}
.rudra-sku-val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: #20140b;
}

.rudra-pdp-accordion {
    margin-top: 26px;
    border: 1px solid #ebd8c2;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}
.rudra-accordion-item {
    border-bottom: 1px solid #ebd8c2;
}
.rudra-accordion-item:last-child {
    border-bottom: none;
}
.rudra-accordion-header {
    padding: 16px 20px;
    font-family: 'Cinzel', 'Cormorant Garamond', serif;
    font-size: 14px;
    font-weight: 700;
    color: #1f140a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    transition: background 0.2s;
    user-select: none;
    list-style: none;
}
.rudra-accordion-header::-webkit-details-marker {
    display: none;
}
.rudra-accordion-header:hover {
    background: #fdfaf5;
}
.rudra-accordion-arrow {
    color: #c5a059;
    font-size: 12px;
    transition: transform 0.2s;
}
.rudra-accordion-item[open] .rudra-accordion-arrow {
    transform: rotate(180deg);
}
.rudra-accordion-body {
    padding: 16px 20px 20px;
    color: #4a3b2f;
    font-size: 14px;
    line-height: 1.8;
    border-top: 1px solid #f6ecdf;
    background: #fdfbf8;
}

.rudra-pdp-related-section {
    margin-top: 70px;
    padding-top: 40px;
    border-top: 1px solid #ebd8c2;
}
.rudra-pdp-related-header {
    text-align: center;
    margin-bottom: 36px;
}
.rudra-pdp-related-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 700;
    color: #1f140a;
    margin: 4px 0 8px;
}
.rudra-pdp-related-sub {
    color: #7b695a;
    font-size: 14px;
    margin: 0;
}

/* Homepage heritage copy and category cards. */
.rudra-story-section {
    padding: 68px 0 76px;
    background: #fbf8f2;
    border-top: 1px solid #eadfce;
    border-bottom: 1px solid #eadfce;
}
.rudra-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: clamp(32px, 5vw, 68px);
    align-items: center;
}
.rudra-story-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #ae741e;
    font: 700 11px/1.4 'Inter', sans-serif;
    letter-spacing: 2.5px;
}
.rudra-story-title {
    margin: 0 0 18px;
    color: #30251c;
    font: 500 clamp(30px, 3.3vw, 42px)/1.2 'Cormorant Garamond', Georgia, serif;
}
.rudra-story-text {
    margin: 0 0 12px;
    color: #5f5144;
    font: 400 15px/1.75 'Inter', sans-serif;
}
.rudra-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.rudra-stat-card {
    min-height: 126px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #fffdf9;
    border: 1px solid #eadcc8;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(67, 47, 25, .05);
}
.rudra-stat-number {
    margin-bottom: 7px;
    color: #b7771c;
    font: 600 clamp(24px, 2.6vw, 34px)/1.1 'Cormorant Garamond', Georgia, serif;
}
.rudra-stat-label {
    color: #76685a;
    font: 600 10px/1.5 'Inter', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
@media (max-width: 860px) {
    .rudra-story-grid { grid-template-columns: 1fr; gap: 28px; }
    .rudra-stats-grid { max-width: 620px; }
}
@media (max-width: 520px) {
    .rudra-story-section { padding: 46px 0 52px; }
    .rudra-stats-grid { gap: 10px; }
    .rudra-stat-card { min-height: 104px; padding: 16px 10px; }
    .rudra-stat-label { font-size: 9px; }
}

/* ═══ SACRED HERO SECTION (Flawless Responsive Layout) ═══ */
.rudra-hero {
    position: relative;
    background-color: #fbf8f2;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 70px 0 65px;
}
.rudra-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
}
.rudra-hero-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.rudra-hero-slider-track::-webkit-scrollbar { display: none; }
.rudra-hero-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; }
.rudra-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.rudra-hero-slide-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: rgba(37,25,14,.48);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.rudra-hero-slide-arrow:hover { background: rgba(37,25,14,.75); transform: translateY(-50%) scale(1.06); }
.rudra-hero-slide-arrow.prev { left: 18px; }
.rudra-hero-slide-arrow.next { right: 18px; }
.rudra-hero-slide-dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 18px;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
}
.rudra-hero-slide-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    box-shadow: 0 1px 5px rgba(0,0,0,.28);
    cursor: pointer;
}
.rudra-hero-slide-dots button.active { background: #fff; transform: scale(1.18); }

.rudra-hero-overlay,
.rudra-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        #fbf8f2 0%, 
        #fbf8f2 28%, 
        rgba(251, 248, 242, 0.90) 35%, 
        rgba(251, 248, 242, 0.38) 43%, 
        rgba(251, 248, 242, 0.06) 49%, 
        transparent 53%
    );
    pointer-events: none;
    z-index: 1;
}

.rudra-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.rudra-hero-content {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 450px !important;
    margin: 0;
    text-align: left;
}

/* A second product photograph adds a clear focal point on phones and a
   supporting detail beside the main hero on wider screens. */
.rudra-hero-extra-image {
    position: absolute;
    right: 2%;
    bottom: 28px;
    width: clamp(150px, 18vw, 245px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 5px solid rgba(255,255,255,.88);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(48,37,28,.22);
    transform: rotate(2deg);
}
.rudra-hero-extra-image img { width: 100%; height: 100%; display: block; object-fit: cover; }

.rudra-hero-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b87d28;
    margin-bottom: 14px;
}

.rudra-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(34px, 3.8vw, 54px);
    font-weight: 600;
    line-height: 1.12;
    color: #1f140a;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
    word-break: normal;
    overflow-wrap: break-word;
}

.rudra-hero-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #5c4a3b;
    margin: 0 0 28px;
    max-width: 480px;
}

.rudra-hero-btn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
}

.rudra-hero-btn.primary {
    background: #c86a1a;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 13px 28px;
    border-radius: 9999px;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(200, 106, 26, 0.28);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rudra-hero-btn.primary:hover {
    background: #b3590e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200, 106, 26, 0.4);
}

/* ═══ TRUST & PURITY BAR (Matches media_1793256621857_564288a2.png) ═══ */
.rudra-trust-bar {
    background: #fdfbf7 !important;
    border-top: 1px solid #ebd9c4 !important;
    border-bottom: 1px solid #ebd9c4 !important;
    padding: 22px 0 !important;
}

.rudra-trust-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.rudra-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rudra-trust-icon {
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    background: #f7ede0 !important;
    color: #c86a1a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 1px solid #f0dfcb !important;
    box-shadow: 0 2px 6px rgba(184, 125, 40, 0.08) !important;
}

.rudra-trust-icon svg {
    stroke: #c86a1a !important;
}

.rudra-trust-text {
    display: flex;
    flex-direction: column;
}

.rudra-trust-text strong {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #1f140a !important;
    line-height: 1.3;
}

.rudra-trust-text span {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: #6e5d4f !important;
    line-height: 1.4;
    margin-top: 2px;
}

@media (max-width: 992px) {
    .rudra-hero {
        position: relative;
        display: block;
        height: auto;
        min-height: 0;
        padding: 0 !important;
        background-image: none !important;
        background-color: #fbf8f2;
        overflow: hidden;
    }
    .rudra-hero-slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }
    .rudra-hero-slider::after {
        content: '';
        position: absolute;
        z-index: 2;
        inset: 0;
        background: linear-gradient(180deg, 
            rgba(251, 248, 242, 0) 0px, 
            rgba(251, 248, 242, 0) 160px, 
            rgba(251, 248, 242, 0.40) 220px, 
            rgba(251, 248, 242, 0.82) 295px, 
            rgba(251, 248, 242, 0.96) 380px, 
            #fbf8f2 440px, 
            #fbf8f2 100%
        );
        pointer-events: none;
    }
    .rudra-hero-slide {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
    }
    .rudra-hero-slide img { 
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover; 
        object-position: center 32%; 
        filter: none; 
    }
    .rudra-hero-slide-arrow {
        position: absolute;
        top: 105px;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(31, 20, 10, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.85);
        color: #ffffff;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .rudra-hero-slide-arrow:active {
        background: rgba(31, 20, 10, 0.85);
        transform: translateY(-50%) scale(0.94);
    }
    .rudra-hero-slide-arrow.prev { left: 12px; }
    .rudra-hero-slide-arrow.next { right: 12px; }
    .rudra-hero-slide-dots {
        position: absolute;
        top: 175px;
        bottom: auto;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        z-index: 10;
        pointer-events: auto;
        touch-action: manipulation;
        width: auto;
    }
    .rudra-hero-slide-dots button {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.65);
        border: 1px solid rgba(0, 0, 0, 0.35);
        cursor: pointer;
        padding: 0;
        transition: transform .2s, background .2s;
        touch-action: manipulation;
    }
    .rudra-hero-slide-dots button.active {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.55);
        transform: scale(1.3);
    }
    .rudra-hero-overlay,
    .rudra-hero-gradient { display: none !important; }
    .rudra-hero-container {
        position: relative;
        z-index: 5;
        box-sizing: border-box;
        width: 100%;
        padding: 205px 22px 38px;
        background: transparent;
        border-bottom: 1px solid #ebd9c4;
        pointer-events: none;
    }
    .rudra-hero-extra-image {
        display: none;
    }
    .rudra-hero-content {
        max-width: 100% !important;
        pointer-events: auto;
    }
    .rudra-hero-content * {
        pointer-events: auto;
    }
    .rudra-hero-eyebrow {
        font-size: 11px;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
        color: #b87d28;
    }
    .rudra-hero-title {
        font-size: clamp(26px, 7vw, 34px);
        line-height: 1.16;
        margin-bottom: 12px;
        color: #1f140a;
    }
    .rudra-hero-desc {
        display: block;
        font-size: 14px;
        line-height: 1.62;
        margin-bottom: 22px;
        color: #554435;
    }
    .rudra-hero-btn.primary {
        padding: 13px 28px;
        font-size: 12px;
        letter-spacing: 1px;
    }
    .rudra-trust-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px 24px !important;
    }
}

@media (max-width: 540px) {
    .wk-header-inner {
        min-height: 56px;
        padding: 6px 10px;
        gap: 5px;
    }
    .wk-logo {
        min-width: 0;
        gap: 5px;
        margin: 0 auto 0 4px;
    }
    .rudra-logo-img {
        width: 30px;
        height: 30px;
        border-width: 1px;
        flex-shrink: 0;
    }
    .wk-logo-text {
        max-width: 126px;
        font-size: clamp(13px, 3.8vw, 15px) !important;
        letter-spacing: .6px !important;
        white-space: nowrap;
    }
    .rudra-header-right { margin-left: auto; }
    .rudra-header-actions { gap: 5px; }
    .wk-cart-btn.rudra-cart-pill {
        width: 38px;
        height: 38px;
        min-width: 38px;
        justify-content: center;
        padding: 0;
    }
    .rudra-hero-container {
        padding: 200px 16px 36px;
    }
    .rudra-hero-title {
        font-size: clamp(24px, 7.5vw, 30px);
    }
    .rudra-trust-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ═══ MINIMALIST CONTACT PAGE ═══ */
.rudra-contact-page {
    background: #fbf8f2;
    padding: 60px 0 90px;
    min-height: calc(100vh - 200px);
}

.rudra-contact-container {
    max-width: 1040px;
    margin: 0 auto;
}

.rudra-contact-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 46px;
}

.rudra-contact-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b87d28;
    margin-bottom: 10px;
}

.rudra-contact-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(32px, 3.8vw, 44px);
    font-weight: 600;
    color: #1f140a;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}

.rudra-contact-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #6e5d4f;
    margin: 0;
}

.rudra-contact-wrapper {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 860px) {
    .rudra-contact-wrapper {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Left Info Card */
.rudra-contact-info-card {
    background: #ffffff;
    border: 1px solid #ebd9c4;
    border-radius: 16px;
    padding: 34px 28px;
    box-shadow: 0 4px 18px rgba(32, 20, 11, 0.04);
}

.rudra-info-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: #1f140a;
    margin: 0 0 6px;
}

.rudra-info-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #7a695b;
    line-height: 1.5;
    margin: 0 0 28px;
}

.rudra-info-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.rudra-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rudra-info-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #faefe1;
    color: #c86a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #ebd9c4;
}

.rudra-info-content {
    display: flex;
    flex-direction: column;
}

.rudra-info-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #8c7a6b;
    margin-bottom: 3px;
}

.rudra-info-val {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #c86a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rudra-info-val:hover {
    color: #a34e0c;
    text-decoration: underline;
}

.rudra-info-hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #8c7a6b;
    margin-top: 2px;
}

.rudra-info-assurance {
    display: flex;
    gap: 12px;
    background: #fdfaf5;
    border: 1px solid #ebd9c4;
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
}

.rudra-assurance-icon {
    font-size: 20px;
    line-height: 1;
}

.rudra-assurance-text strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1f140a;
    margin-bottom: 2px;
}

.rudra-assurance-text p {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6e5d4f;
    line-height: 1.5;
    margin: 0;
}

/* Right Form Card */
.rudra-contact-form-card {
    background: #ffffff;
    border: 1px solid #ebd9c4;
    border-radius: 16px;
    padding: 38px 34px;
    box-shadow: 0 4px 18px rgba(32, 20, 11, 0.04);
}

.rudra-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

@media (max-width: 580px) {
    .rudra-form-row {
        grid-template-columns: 1fr;
    }
}

.rudra-form-group {
    margin-bottom: 18px;
}

.rudra-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #3b2c20;
    margin-bottom: 6px;
}

.rudra-label .req {
    color: #c86a1a;
}

.rudra-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d9c8b4;
    border-radius: 8px;
    background: #fffdfa;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1f140a;
    outline: none;
    transition: all 0.2s ease;
}

.rudra-input:focus {
    border-color: #c86a1a;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(200, 106, 26, 0.12);
}

.rudra-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e5d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.rudra-textarea {
    resize: vertical;
    min-height: 120px;
}

.rudra-form-submit {
    margin-top: 24px;
}

.rudra-btn-submit {
    width: 100%;
    background: #c86a1a;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 14px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(200, 106, 26, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rudra-btn-submit:hover {
    background: #b3590e;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(200, 106, 26, 0.35);
}