/* ============================================
   SHIKO GAME STORE THEME - MAIN STYLESHEET
   Dark/Light mode via prefers-color-scheme
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    color-scheme: light;
    --shiko-primary: #B7080A;
    --shiko-accent: #E40303;
    --shiko-accent-hover: #ff1a1a;
    --shiko-radius: 8px;
    --shiko-radius-lg: 12px;
    --shiko-radius-xl: 16px;
    --shiko-transition: 0.2s ease;
    --shiko-max-width: 1280px;
    --shiko-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Light mode (default) */
:root {
    --shiko-bg: #FAFAF8;
    --shiko-bg-primary: #FAFAF8;
    --shiko-bg-secondary: #FFFFFF;
    --shiko-bg-tertiary: #F3F3F0;
    --shiko-text: #111111;
    --shiko-text-primary: #111111;
    --shiko-text-secondary: #555555;
    --shiko-text-muted: #6b6b6b; /* v3.2.82: was #999999 (2.73:1 fail), now 4.73:1 pass */
    --shiko-border: #E5E5E2;
    --shiko-border-hover: #D0D0CC;
    --shiko-card-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --shiko-overlay: rgba(0,0,0,0.5);
    --shiko-badge-bg: #FEE2E2;
    --shiko-badge-text: #991B1B;
    --shiko-sale-bg: #E40303;
    --shiko-sale-text: #fff;
    --shiko-input-bg: #FFFFFF;
    --shiko-success: #8A6500;
    --shiko-header-bg: rgba(255,255,255,0.92);
    --shiko-footer-bg: #111111;
    --shiko-footer-text: #cccccc;
    --shiko-footer-muted: #858585;
    --shiko-surface-elevated: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,243,238,0.96));
    --shiko-surface-elevated-strong: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(252,248,245,0.98));
    --shiko-surface-elevated-border: rgba(16,17,20,0.08);
    --shiko-surface-soft: rgba(16,17,20,0.03);
    --shiko-surface-soft-border: rgba(16,17,20,0.06);
    --shiko-surface-shadow: 0 18px 36px rgba(17,18,22,0.08);
    --shiko-surface-shadow-strong: 0 24px 50px rgba(17,18,22,0.1);
    --shiko-inverse-text: #FFFFFF;
    --shiko-inverse-text-muted: rgba(255,255,255,0.82);
    --shiko-inverse-text-soft: rgba(255,255,255,0.72);

    /* AI Chat component (v3.2.28). Kept as separate vars because the
       chat container has its own visual language distinct from cards.
       Defaults below are the LIGHT-mode values. Dark overrides are
       applied in [data-theme="dark"] further down. */
    --shiko-chat-bg: #FFFFFF;
    --shiko-chat-bubble-bg: #F3F3F0;
    --shiko-chat-bubble-text: #111111;
    --shiko-chat-input-bg: #FAFAF8;
    --shiko-chat-textarea-bg: #FFFFFF;
    --shiko-chat-textarea-text: #111111;
    --shiko-chat-textarea-border: #E5E5E2;
    --shiko-chat-time: #888888;
    --shiko-chat-divider: #EEEEEE;

    /* Hero carousel button variables — LIGHT-mode defaults.
       Dark mode uses the fallback values defined inline with var() calls.
       Previously these were in a separate [data-theme="light"] block which
       was removed in v3.2.29 as part of CSS consolidation. */
    --shiko-hero-btn-color: #111111;
    --shiko-hero-btn-border: #333333;
    --shiko-hero-btn-bg: rgba(255,255,255,0.7);
    --shiko-hero-btn-hover-border: #E40303;
    --shiko-hero-btn-hover-bg: rgba(255,255,255,0.9);
}

/* Auto dark mode — handled by data-theme attribute set via JS/PHP cookie.
   @media prefers-color-scheme removed to prevent flash on dark-mode systems. */

/* Manual toggle overrides — these ALWAYS win */
[data-theme="dark"] {
    color-scheme: dark;
    --shiko-bg: #0B0C10;
    --shiko-bg-primary: #0B0C10;
    --shiko-bg-secondary: #13151C;
    --shiko-bg-tertiary: #1A1D28;
    --shiko-text: #F0F0F0;
    --shiko-text-primary: #F0F0F0;
    --shiko-text-secondary: #BBBBBB;
    --shiko-text-muted: #b0b0b0;
    --shiko-border: #1E2130;
    --shiko-border-hover: #2A2D3A;
    --shiko-card-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shiko-overlay: rgba(0,0,0,0.7);
    --shiko-badge-bg: #3B1111;
    --shiko-badge-text: #FCA5A5;
    --shiko-input-bg: #1A1D28;
    --shiko-success: #f6c453;
    --shiko-header-bg: rgba(11,12,16,0.92);
    --shiko-footer-bg: #070810;
    --shiko-footer-text: #cccccc;
    --shiko-footer-muted: #858585;
    --shiko-surface-elevated: linear-gradient(180deg, rgba(19,21,28,0.98), rgba(13,15,21,0.98));
    --shiko-surface-elevated-strong: linear-gradient(180deg, rgba(24,27,37,0.98), rgba(13,15,21,0.99));
    --shiko-surface-elevated-border: rgba(255,255,255,0.08);
    --shiko-surface-soft: rgba(255,255,255,0.04);
    --shiko-surface-soft-border: rgba(255,255,255,0.08);
    --shiko-surface-shadow: 0 20px 40px rgba(0,0,0,0.28);
    --shiko-surface-shadow-strong: 0 24px 50px rgba(0,0,0,0.34);
    --shiko-inverse-text: #FFFFFF;
    --shiko-inverse-text-muted: rgba(255,255,255,0.82);
    --shiko-inverse-text-soft: rgba(255,255,255,0.72);

    /* AI Chat — dark mode overrides (v3.2.28). */
    --shiko-chat-bg: #1A1A2E;
    --shiko-chat-bubble-bg: #2D2D44;
    --shiko-chat-bubble-text: #E2E8F0;
    --shiko-chat-input-bg: #12121F;
    --shiko-chat-textarea-bg: #1E1E32;
    --shiko-chat-textarea-text: #E2E8F0;
    --shiko-chat-textarea-border: rgba(255,255,255,0.10);
    --shiko-chat-time: #64748B;
    --shiko-chat-divider: rgba(255,255,255,0.06);

    /* Hero button dark-mode overrides (v3.2.29). */
    --shiko-hero-btn-color: #FFFFFF;
    --shiko-hero-btn-border: rgba(255,255,255,0.4);
    --shiko-hero-btn-bg: transparent;
    --shiko-hero-btn-hover-border: #FFFFFF;
    --shiko-hero-btn-hover-bg: rgba(255,255,255,0.1);
}

/* v3.2.82: Dark-mode primary button contrast fix.
   Brand #B7080A on #0B0C10 = 2.84:1 (fail). Use lighter tint #FF5555
   for buttons/links in dark mode to hit 4.5:1 while staying on-brand. */
[data-theme="dark"] .shiko-btn-primary,
[data-theme="dark"] a.shiko-btn-primary,
[data-theme="dark"] .shiko-hero-carousel .shiko-btn-primary {
    background: #FF5555;
    border-color: #FF5555;
    color: #0B0C10;
}
[data-theme="dark"] .shiko-btn-primary:hover,
[data-theme="dark"] a.shiko-btn-primary:hover {
    background: #FF7777;
    border-color: #FF7777;
}

/* v3.2.29: Removed redundant [data-theme="light"] block. Its 14 variable
   declarations were byte-identical to the :root block above (which is the
   default = light mode). Two places to edit for the same values is a
   maintenance hazard with no functional benefit. Light mode now falls
   through to :root naturally when data-theme is absent OR when data-theme
   is explicitly "light" (both conditions are handled because
   [data-theme="dark"] is the only explicit override that changes any
   values). */


/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--shiko-font);
    background: var(--shiko-bg);
    color: var(--shiko-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--shiko-accent); text-decoration: none; transition: color var(--shiko-transition); }
a:hover { color: var(--shiko-accent-hover); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--shiko-text);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.875rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin-bottom: 1rem; }

::selection { background: var(--shiko-accent); color: #fff; }

/* --- Container --- */
.shiko-container {
    max-width: var(--shiko-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Buttons --- */
.shiko-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--shiko-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--shiko-transition);
    border: 2px solid transparent;
    text-decoration: none;
    line-height: 1.4;
}

.shiko-btn-primary {
    background: var(--shiko-accent);
    color: #fff;
    border-color: var(--shiko-accent);
}
.shiko-btn-primary:hover {
    background: var(--shiko-accent-hover);
    border-color: var(--shiko-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.shiko-btn-outline,
.shiko-btn--outline {
    background: transparent;
    color: var(--shiko-text);
    border-color: var(--shiko-border);
}
.shiko-btn-outline:hover,
.shiko-btn--outline:hover {
    border-color: var(--shiko-accent);
    color: var(--shiko-accent);
}

.shiko-btn-sm { padding: 6px 16px; font-size: 13px; }
.shiko-btn-lg { padding: 14px 32px; font-size: 16px; }

/* --- Header --- */
.shiko-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--shiko-header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--shiko-border);
    transition: background var(--shiko-transition), box-shadow 0.18s ease;
}
/* 3.3.74: scroll-shadow toggled via class instead of inline-style writes
   from JS — keeps the scroll handler off the layout/style hot path. */
.shiko-header.is-scrolled {
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}

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

.shiko-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
    overflow: hidden;
}
.shiko-logo picture,
.shiko-logo .shiko-logo-img {
    display: block;
}
.shiko-header .shiko-logo {
    width: 188px;
}
.shiko-logo img {
    height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
}
.shiko-mobile-menu .shiko-logo img {
    height: 44px;
}
.shiko-mobile-menu .shiko-logo {
    width: 146px;
}

/* v3.3.23: Logo rendering guardrails against cached/inline dimension conflicts */
.shiko-header .shiko-logo {
    max-width: min(188px, 42vw);
    overflow: visible;
}
.shiko-header .shiko-logo .shiko-logo-img,
.shiko-header .shiko-logo img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 56px !important;
    object-fit: contain;
    object-position: left center;
}

.shiko-nav { display: flex; align-items: center; gap: 4px; }
.shiko-nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.shiko-nav-list li {
    list-style: none !important;
    display: inline;
    margin: 0;
    padding: 0;
    position: relative;
}
.shiko-nav-list li::before,
.shiko-nav-list li::after,
.shiko-nav-list li::marker,
.shiko-nav-list a::before,
.shiko-nav-list a::after {
    display: none !important;
    content: none !important;
}

.shiko-nav-list > li > a {
    color: var(--shiko-text);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--shiko-radius);
    transition: all var(--shiko-transition);
    display: inline-block;
    line-height: 1.2;
}
.shiko-nav-list > li > a:hover,
.shiko-nav-list > li > a:focus-visible,
.shiko-nav-list > li.current-menu-item > a,
.shiko-nav-list > li.current-menu-parent > a {
    color: var(--shiko-accent);
    background: var(--shiko-bg-tertiary);
}

/* Submenu dropdown */
.shiko-nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    padding: 6px 0;
    margin: 4px 0 0;
    list-style: none;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.shiko-nav-list > li:hover > .sub-menu,
.shiko-nav-list > li:focus-within > .sub-menu { display: block; }
.shiko-nav-list .sub-menu li { display: block; }
.shiko-nav-list .sub-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--shiko-text-secondary);
    transition: all var(--shiko-transition);
    white-space: nowrap;
}
.shiko-nav-list .sub-menu a:hover {
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-accent);
}
.shiko-nav-list .sub-menu a:focus-visible {
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-accent);
}

/* Mobile menu submenu */
.shiko-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.shiko-mobile-nav-list li { display: block; }
.shiko-mobile-nav-list > li > a {
    display: block;
    padding: 14px 20px;
    font-size: 16px;
    color: var(--shiko-text);
    border-bottom: 1px solid var(--shiko-border);
}
.shiko-mobile-nav-list > li > a:hover,
.shiko-mobile-nav-list > li > a:focus-visible {
    color: var(--shiko-accent);
    background: var(--shiko-bg-tertiary);
}
.shiko-mobile-nav-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--shiko-bg-tertiary);
}
.shiko-mobile-nav-list .sub-menu a {
    display: block;
    padding: 12px 20px 12px 36px;
    font-size: 14px;
    color: var(--shiko-text-secondary);
    border-bottom: 1px solid var(--shiko-border);
}
.shiko-mobile-nav-list .sub-menu a:hover,
.shiko-mobile-nav-list .sub-menu a:focus-visible {
    color: var(--shiko-accent);
    background: var(--shiko-bg-secondary);
}

.shiko-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Language toggle */
.shiko-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--shiko-radius);
    color: var(--shiko-text);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all var(--shiko-transition);
}
.shiko-lang-toggle:hover { background: var(--shiko-bg-tertiary); color: var(--shiko-text); }
.shiko-lang-toggle:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 2px;
}

.shiko-header-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--shiko-radius);
    color: var(--shiko-text);
    transition: all var(--shiko-transition);
    background: none;
    border: none;
    cursor: pointer;
}
.shiko-header-icon:hover { background: var(--shiko-bg-tertiary); color: var(--shiko-text); }
.shiko-header-icon:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 2px;
}

.shiko-header-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

.shiko-cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--shiko-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Mobile menu toggle */
.shiko-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--shiko-text);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--shiko-radius);
    transition: background var(--shiko-transition), color var(--shiko-transition);
}
.shiko-menu-toggle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }
.shiko-menu-toggle:hover,
.shiko-menu-toggle:focus-visible {
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-accent);
}

/* Theme toggle */
.shiko-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--shiko-text);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--shiko-radius);
    transition: all var(--shiko-transition);
}
.shiko-theme-toggle:hover { background: var(--shiko-bg-tertiary); color: var(--shiko-text); }
.shiko-theme-toggle:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 2px;
}
.shiko-theme-toggle svg { width: 18px; height: 18px; }
.shiko-theme-toggle .icon-moon { display: block; fill: currentColor; stroke: none; }
.shiko-theme-toggle .icon-sun { display: none; fill: none; stroke: currentColor; stroke-width: 2; }

[data-theme="dark"] .shiko-theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .shiko-theme-toggle .icon-moon { display: none; }
[data-theme="light"] .shiko-theme-toggle .icon-sun { display: none; }
[data-theme="light"] .shiko-theme-toggle .icon-moon { display: block; }

/* Mobile-only utility */
.shiko-mobile-only { display: none; }
@media (max-width: 768px) {
    .shiko-mobile-only { display: flex; }
}

/* Mobile search bar (slides below header) */
.shiko-header-search {
    display: none;
    background: var(--shiko-bg);
    border-bottom: 1px solid var(--shiko-border);
    padding: 8px 20px 12px;
}
.shiko-header-search.open {
    display: block;
}
.shiko-header-search form {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: var(--shiko-max-width);
    margin: 0 auto;
    background: var(--shiko-bg-tertiary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    /* 3.3.50: was `overflow: hidden` — that clipped the live-search
       dropdown (absolute child, top:100%) on mobile, so typing produced
       no popup. Drop it; round the input/button corners explicitly so
       the rounded look is preserved. */
    position: relative;
}
.shiko-header-search input[type="search"] {
    border-top-left-radius: var(--shiko-radius);
    border-bottom-left-radius: var(--shiko-radius);
}
.shiko-header-search button[type="submit"] {
    border-top-right-radius: var(--shiko-radius);
    border-bottom-right-radius: var(--shiko-radius);
}
[dir="rtl"] .shiko-header-search input[type="search"] {
    border-radius: 0 var(--shiko-radius) var(--shiko-radius) 0;
}
[dir="rtl"] .shiko-header-search button[type="submit"] {
    border-radius: var(--shiko-radius) 0 0 var(--shiko-radius);
}
.shiko-header-search input[type="search"] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 14px;
    color: var(--shiko-text);
    -webkit-text-fill-color: var(--shiko-text);
    caret-color: var(--shiko-accent);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}
.shiko-header-search input[type="search"]:-webkit-autofill,
.shiko-mobile-search input:-webkit-autofill {
    -webkit-text-fill-color: var(--shiko-text);
    caret-color: var(--shiko-accent);
}
.shiko-header-search input::placeholder { color: var(--shiko-text-muted); }
.shiko-header-search button[type="submit"] {
    background: var(--shiko-accent);
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--shiko-transition);
}
.shiko-header-search button[type="submit"]:hover,
.shiko-header-search button[type="submit"]:focus-visible {
    background: var(--shiko-accent-hover);
}
.shiko-header-search button svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

/* Nav emoji normalization — prevent emojis from disrupting text flow */
.shiko-nav-list a,
.shiko-mobile-nav-list a {
    white-space: nowrap;
}

/* Pre-order / Coming Soon badge (on product cards + PDP) */
.shiko-badge-preorder,
.shiko-badge-coming-soon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.shiko-badge-preorder {
    background: #6236FF;
    color: #fff;
}
.shiko-badge-coming-soon {
    background: #F59E0B;
    color: #1a1a1a;
}

/* --- Hero Section --- */
.shiko-hero {
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--shiko-bg);
}
.shiko-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}
.shiko-hero:not([style*="background-image"]) .shiko-hero-overlay {
    background: radial-gradient(circle at 50% 0%, rgba(228,3,3,0.08) 0%, transparent 60%);
}
.shiko-hero-content {
    position: relative;
    z-index: 2;
}

.shiko-hero-badge {
    display: inline-block;
    background: var(--shiko-badge-bg);
    color: var(--shiko-badge-text);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.shiko-hero h1 { margin-bottom: 12px; }

.shiko-hero p {
    color: var(--shiko-text-secondary);
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto 24px;
}
.shiko-hero[style*="background-image"] h1 {
    color: var(--shiko-inverse-text);
}
.shiko-hero[style*="background-image"] p {
    color: var(--shiko-inverse-text-muted);
}

.shiko-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.shiko-hero-actions .shiko-btn-outline {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
.shiko-hero-actions .shiko-btn-outline:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* --- Hero Carousel --- */
.shiko-hero-carousel {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
    background: #000;
}
.shiko-carousel-slides { position: relative; width: 100%; height: 100%; }
.shiko-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.shiko-carousel-slide.shiko-slide-active {
    opacity: 1;
    pointer-events: auto;
}
.shiko-carousel-bg {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(8px);
    transform: scale(1.05);
    transition: transform 6s ease-out;
}
.shiko-carousel-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.shiko-carousel-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(0px);
}

/* v3.2.82: Respect prefers-reduced-motion (WCAG accessibility) */
@media (prefers-reduced-motion: reduce) {
    .shiko-carousel-slide {
        transition: none;
    }
    .shiko-carousel-bg {
        transition: none;
        transform: scale(1);
    }
}

.shiko-carousel-artwork {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}
/* 3.3.50: WP Rocket / lazy-load wraps the <img> in a <picture> element.
   Without this rule, <picture> becomes a 100%-wide block flex child and
   the inner img drifts to its left edge — visible as the hero artwork
   pinned to the left of the carousel. Make <picture> a flex container
   itself so the actual <img> stays centered. */
.shiko-carousel-artwork picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.shiko-carousel-artwork img {
    max-height: 85%;
    max-width: 50%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
}
.shiko-slide-active .shiko-carousel-bg {
    transform: scale(1);
}
.shiko-carousel-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.85) 100%);
    z-index: 2;
}
.shiko-carousel-content {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 4;
    padding: 0 20px;
}
.shiko-carousel-badge {
    display: none;
}
.shiko-carousel-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.shiko-carousel-price {
    font-size: 1.1rem;
    color: #FFD700;
    font-weight: 600;
    margin-bottom: 16px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.shiko-carousel-price del { color: #aaa; font-weight: 400; font-size: 0.9rem; }
.shiko-carousel-price ins { text-decoration: none; color: #FFD700; }
.shiko-carousel-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.shiko-carousel-actions .shiko-btn {
    padding: 12px 28px;
    font-size: 15px;
}
.shiko-carousel-actions .shiko-btn-primary {
    background: var(--shiko-accent) !important;
    color: #fff !important;
    border: none !important;
}
.shiko-carousel-actions .shiko-btn-outline {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
.shiko-carousel-actions .shiko-btn-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}
[data-theme="light"] .shiko-hero-carousel .shiko-btn-primary {
    background: var(--shiko-accent) !important;
    color: #fff !important;
}
[data-theme="light"] .shiko-hero-carousel .shiko-btn-outline {
    color: #fff !important;
    border-color: rgba(255,255,255,0.4) !important;
}
.shiko-carousel-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.shiko-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
}
.shiko-carousel-dot.shiko-dot-active {
    background: var(--shiko-accent);
    width: 28px;
    border-radius: 5px;
}
.shiko-carousel-trust {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 5;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}
.shiko-carousel-trust span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.shiko-carousel-trust svg { stroke: #28a745; }

@media (max-width: 768px) {
    .shiko-hero-carousel { height: 520px; }
    .shiko-carousel-title { font-size: 1.6rem; }
    .shiko-carousel-content { bottom: 80px; display: flex; flex-direction: column; align-items: center; }
    .shiko-carousel-price { order: 2; margin-top: 10px; margin-bottom: 0; font-size: 0.95rem; }
    .shiko-carousel-actions { order: 1; flex-direction: row; gap: 8px; align-items: center; }
    .shiko-carousel-actions .shiko-btn { width: auto; text-align: center; padding: 10px 20px; font-size: 13px; }
    .shiko-carousel-trust { font-size: 10px; gap: 12px; bottom: 50px; }
    .shiko-carousel-dots { bottom: 20px; }
    .shiko-carousel-artwork img { max-width: 65%; max-height: 75%; }
    .shiko-carousel-bg { filter: blur(6px); }
}
@media (min-width: 1200px) {
    .shiko-carousel-artwork img { max-width: 40%; max-height: 90%; }
}

/* --- Section Headings --- */
.shiko-section {
    padding: 48px 0;
}

.shiko-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.shiko-section-header h2 { font-size: 1.25rem; }

.shiko-section-header a {
    font-size: 13px;
    font-weight: 600;
    color: var(--shiko-accent);
}

.shiko-section-divider {
    width: 40px;
    height: 3px;
    background: var(--shiko-accent);
    border-radius: 2px;
    margin-top: 6px;
}

/* --- Product Grid --- */
.shiko-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    max-width: var(--shiko-max-width);
    margin: 0 auto;
}
@media (min-width: 1100px) {
    .shiko-product-grid { grid-template-columns: repeat(4, 1fr); }
}

.shiko-product-card {
    background: var(--shiko-bg-secondary);
    border-radius: var(--shiko-radius-lg);
    border: 1px solid var(--shiko-border);
    transition: all var(--shiko-transition);
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--shiko-text);
    /* v3.2.30: remove 300ms tap delay on mobile so taps navigate immediately.
       Without this, some mobile browsers hold the click for gesture detection
       and Clarity logs the hesitation as a dead click. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(228, 3, 3, 0.1);
}
/* v3.2.30: gate hover effects behind hover-capable devices only.
   On touch screens (no hover), the first tap was previously activating
   the hover state (transform, border, shadow) instead of navigating.
   Clarity logged 7,500+ weekly dead clicks from this double-tap trap. */
@media (hover: hover) {
    .shiko-product-card:hover {
        border-color: var(--shiko-border-hover);
        box-shadow: var(--shiko-card-shadow);
        transform: translateY(-2px);
    }
}

.shiko-product-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--shiko-bg-tertiary);
    flex-shrink: 0;
    border-radius: var(--shiko-radius-lg) var(--shiko-radius-lg) 0 0;
}
.shiko-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
@media (hover: hover) {
    .shiko-product-card:hover .shiko-product-thumb img { transform: scale(1.05); }
}

.shiko-product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    /* v3.2.30: pointer-events:none so taps on the "Sale!" badge pass through
       to the parent <a class="shiko-product-card"> instead of being consumed
       by the badge <span>. Previously: 6,000+ weekly dead clicks on sale
       badges because users tapped them expecting action but the span had no
       click handler and somehow shielded the underlying link. */
    pointer-events: none;
}
.shiko-product-badge.shiko-badge-sale {
    background: var(--shiko-accent);
    color: #fff;
}
.shiko-product-badge.shiko-badge-preorder {
    background: #6236FF;
    color: #fff;
}

/* Flash sale section */
.shiko-section-flash {
    background: var(--shiko-bg-tertiary);
}
.shiko-flash-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.shiko-flash-live {
    font-size: 12px;
    font-weight: 700;
    color: var(--shiko-accent);
}

/* Plan card CTA */
.shiko-plan-cta {
    width: 100%;
    margin-top: 16px;
    text-align: center;
}

.shiko-product-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.3s ease;
    z-index: 2;
}
@media (hover: hover) {
    .shiko-product-card:hover .shiko-product-actions { opacity: 1; transform: translateX(0); }
}

.shiko-product-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--shiko-text-secondary);
    transition: all var(--shiko-transition);
}
.shiko-product-action-btn:hover {
    background: var(--shiko-accent);
    color: #fff;
    border-color: var(--shiko-accent);
}
.shiko-product-action-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.shiko-product-info {
    padding: 10px;
    display: block;
    flex-grow: 1;
    color: var(--shiko-text);
}

.shiko-product-category {
    font-size: 11px;
    color: var(--shiko-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.shiko-product-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--shiko-text);
    margin-bottom: 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shiko-product-title a { color: var(--shiko-text); text-decoration: none; }
.shiko-product-title a:hover { color: var(--shiko-accent); }
body.shiko-theme .woocommerce .shiko-product-title a,
.woocommerce .shiko-product-title a { color: var(--shiko-text) !important; text-decoration: none; }
.woocommerce .shiko-product-title a:hover { color: var(--shiko-accent) !important; }

.shiko-product-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--shiko-accent);
}
.shiko-product-price del {
    color: var(--shiko-text-muted);
    font-weight: 400;
    font-size: 13px;
    margin-right: 6px;
}
.shiko-product-price ins {
    text-decoration: none;
    color: var(--shiko-accent);
}

/* Product card — no button, entire card is clickable link */

/* --- Flash Sale Banner --- */
.shiko-flash-sale-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.shiko-flash-sale-bar .live-dot {
    width: 8px;
    height: 8px;
    background: var(--shiko-accent);
    border-radius: 50%;
    animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.shiko-countdown {
    font-size: 13px;
    color: var(--shiko-text-muted);
    font-weight: 500;
}

/* --- Category Cards --- */
.shiko-cat-grid {
    display: grid;
    /* auto-fit (not auto-fill) so empty tracks collapse. When only 4 of
       configured categories exist, we were rendering 6 grid tracks with
       2 visible empty slots; auto-fit lets filled items expand to cover
       the row. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.shiko-cat-card {
    position: relative;
    overflow: hidden;
    background: var(--shiko-bg-tertiary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    min-height: 140px;
    display: flex;
    align-items: flex-end;
    transition: all var(--shiko-transition);
    text-decoration: none;
    color: var(--shiko-text);
    /* v3.2.30: same fix as product card — eliminate mobile tap delay. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(228, 3, 3, 0.1);
}
@media (hover: hover) {
    .shiko-cat-card:hover {
        border-color: var(--shiko-accent);
        transform: translateY(-2px);
        color: var(--shiko-text);
    }
}
.shiko-cat-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    transition: opacity 0.3s, transform 0.3s;
}
@media (hover: hover) {
    .shiko-cat-card:hover .shiko-cat-card-bg {
        opacity: 0.55;
        transform: scale(1.05);
    }
}
/* When image exists, force white text + gradient */
.shiko-cat-card:has(.shiko-cat-card-bg) {
    color: #fff;
}
.shiko-cat-card:has(.shiko-cat-card-bg) .shiko-cat-card-count {
    color: rgba(255,255,255,0.6);
}
@media (hover: hover) {
    .shiko-cat-card:has(.shiko-cat-card-bg):hover {
        color: #fff;
    }
}
.shiko-cat-card-inner {
    position: relative;
    z-index: 2;
    padding: 20px 16px;
    width: 100%;
}
.shiko-cat-card:has(.shiko-cat-card-bg) .shiko-cat-card-inner {
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.shiko-cat-card-icon {
    margin-bottom: 6px;
}
.shiko-cat-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--shiko-accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.shiko-cat-card-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; color: inherit; }
.shiko-cat-card-count { font-size: 12px; color: var(--shiko-text-muted); }

/* --- PS Plus Plans --- */
.shiko-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.shiko-plan-card {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 28px 20px;
    text-align: center;
    transition: all var(--shiko-transition);
    position: relative;
}
@media (hover: hover) {
    .shiko-plan-card:hover { border-color: var(--shiko-border-hover); transform: translateY(-2px); }
}

.shiko-plan-card.featured {
    border-color: var(--shiko-accent);
    border-width: 2px;
}

.shiko-plan-featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--shiko-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 10px;
    white-space: nowrap;
}

.shiko-plan-name { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--shiko-text); }
.shiko-plan-desc { font-size: 13px; color: var(--shiko-text-secondary); margin-bottom: 16px; line-height: 1.5; }
.shiko-plan-price { font-size: 22px; font-weight: 700; color: var(--shiko-accent); margin-bottom: 4px; }
.shiko-plan-period { font-size: 12px; color: var(--shiko-text-muted); margin-bottom: 20px; }

.shiko-plan-features {
    list-style: none;
    text-align: left;
    margin-bottom: 20px;
}
.shiko-plan-features li {
    font-size: 13px;
    color: var(--shiko-text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid var(--shiko-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.shiko-plan-features li::before {
    content: '✓';
    color: var(--shiko-accent);
    font-weight: 700;
    font-size: 12px;
}

/* --- Trust Badges --- */
.shiko-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.shiko-trust-item {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 24px 16px;
    text-align: center;
}
.shiko-trust-icon {
    margin-bottom: 10px;
}
.shiko-trust-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--shiko-accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.shiko-trust-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.shiko-trust-desc { font-size: 12px; color: var(--shiko-text-muted); line-height: 1.4; }

/* --- Footer --- */
.shiko-footer {
    background: var(--shiko-footer-bg);
    color: var(--shiko-footer-text);
    margin-top: 60px;
}

/* v3.3.39: removed legacy .shiko-footer-proof* / .shiko-proof-* /
   .shiko-trustpilot-star / .shiko-tp-label / .shiko-proof-wa-icon and
   the base .shiko-footer-grid block. They were the old social-proof
   strip + 4-column grid replaced by the .shiko-footer-v2 banner and
   accordion. No rendered markup matches these selectors anymore. */

/* Brand column */
.shiko-footer-store-name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
}
.shiko-footer-brand p {
    color: var(--shiko-footer-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 16px;
}

/* Social icons */
.shiko-footer-social {
    display: flex;
    gap: 8px;
}
.shiko-social-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--shiko-footer-muted);
}
.shiko-social-icon:hover {
    border-color: var(--shiko-accent);
    color: var(--shiko-accent);
    background: rgba(255,255,255,0.04);
}
.shiko-social-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* WhatsApp icon uses fill, not stroke */
.shiko-social-icon[aria-label="WhatsApp"] svg {
    fill: currentColor;
    stroke: none;
}

/* v3.3.39: removed `.shiko-footer h4` rule. Footer v2 uses <summary>
   inside <details class="shiko-footer-col"> instead of <h4>. Dead. */

/* Link lists */
.shiko-footer-links { list-style: none; padding: 0; margin: 0; }
.shiko-footer-links li { margin-bottom: 10px; }
.shiko-footer-links a {
    color: var(--shiko-footer-muted);
    font-size: 13px;
    transition: color 0.2s, text-decoration-color 0.2s;
    text-decoration: none;
}
.shiko-footer-links a:hover,
.shiko-footer-links a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* v3.3.39: removed legacy .shiko-footer-payments-bar and
   .shiko-footer-payments-inner wrappers. Footer v2 uses the flat
   .shiko-footer-pay-rail instead. */
.shiko-payment-logo {
    height: 20px;
    width: auto;
    display: block;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.shiko-payment-logo:hover {
    opacity: 1;
}

/* Copyright bar */
.shiko-footer-bottom {
    border-top: 1px solid #1a1a1a;
    padding: 14px 20px;
    text-align: center;
}
.shiko-footer-bottom p {
    color: var(--shiko-footer-muted);
    font-size: 12px;
    max-width: var(--shiko-max-width);
    margin: 0 auto;
}

/* v3.3.4: Footer a11y — focus-visible rings */
.shiko-footer a:focus-visible,
.shiko-social-icon:focus-visible,
.shiko-payment-logo:focus-visible,
.shiko-proof-trustpilot:focus-visible,
.shiko-back-to-top:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
.shiko-social-icon:focus-visible {
    border-radius: 50%;
}

/* Back to top button */
.shiko-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--shiko-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.shiko-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.shiko-back-to-top:hover {
    background: var(--shiko-accent);
}
.shiko-back-to-top svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Breadcrumbs --- */
.shiko-breadcrumbs {
    padding: 16px 0;
    font-size: 13px;
    color: var(--shiko-text-muted);
}
.shiko-breadcrumbs a { color: var(--shiko-text-secondary); }
.shiko-breadcrumbs a:hover { color: var(--shiko-accent); }
.shiko-breadcrumbs .separator { margin: 0 8px; }

/* --- WooCommerce Shop/Archive --- */
.shiko-shop-header {
    padding: 32px 0 16px;
}
.shiko-shop-header h1 {
    font-size: 1.75rem;
    margin-bottom: 8px;
}
.shiko-shop-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.shiko-result-count { font-size: 13px; color: var(--shiko-text-secondary); }

.shiko-ordering select {
    background: var(--shiko-input-bg);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--shiko-text);
    cursor: pointer;
}

/* --- Single Product --- */
/* Single product — layout handled in woocommerce.css via .shiko-pdp */
.shiko-single-product {
    padding-top: 20px;
    padding-bottom: 40px;
}
.shiko-single-product .entry-header,
.shiko-single-product .page-header {
    display: none;
}
/* 3.3.69: wrapped in :where() so any class-styled anchor inside the
   product summary (.shiko-product-save-wa-btn, .shiko-add-to-cart, etc.)
   wins over this default. Was hijacking the save-WA button color. */
:where(.shiko-single-product .summary a:not(.button)) { color: var(--shiko-text); }
:where(.shiko-single-product .summary a:not(.button):hover) { color: var(--shiko-accent); }

.shiko-product-gallery {
    position: sticky;
    top: 90px;
}

.shiko-product-gallery-main {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    margin-bottom: 12px;
}
.shiko-product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.shiko-product-gallery-thumbs {
    display: flex;
    gap: 8px;
}
.shiko-product-gallery-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--shiko-radius);
    border: 2px solid var(--shiko-border);
    cursor: pointer;
    transition: border-color var(--shiko-transition);
}
.shiko-product-gallery-thumbs img:hover,
.shiko-product-gallery-thumbs img.active { border-color: var(--shiko-accent); }

.shiko-product-summary h1 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.shiko-product-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--shiko-text-secondary);
}

.shiko-single-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--shiko-accent);
    margin-bottom: 20px;
}
.shiko-single-price del {
    font-size: 1.1rem;
    color: var(--shiko-text-muted);
    font-weight: 400;
    margin-right: 8px;
}

.shiko-product-short-desc {
    color: var(--shiko-text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--shiko-border);
}

/* Variations */
.shiko-variations {
    margin-bottom: 24px;
}
.shiko-variation-row {
    margin-bottom: 16px;
}
.shiko-variation-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.shiko-variation-options { display: flex; flex-wrap: wrap; gap: 8px; }

.shiko-variation-option {
    padding: 8px 16px;
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--shiko-transition);
    background: var(--shiko-bg-secondary);
    color: var(--shiko-text);
}
.shiko-variation-option:hover { border-color: var(--shiko-accent); }
.shiko-variation-option.selected {
    border-color: var(--shiko-accent);
    background: var(--shiko-badge-bg);
    color: var(--shiko-accent);
    font-weight: 600;
}

.shiko-add-to-cart-wrap {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.shiko-quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    overflow: hidden;
}
.shiko-quantity button {
    width: 40px;
    height: 44px;
    background: var(--shiko-bg-tertiary);
    border: none;
    color: var(--shiko-text);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--shiko-transition);
}
.shiko-quantity button:hover { background: var(--shiko-border); }
.shiko-quantity input {
    width: 50px;
    height: 44px;
    text-align: center;
    border: none;
    background: var(--shiko-input-bg);
    color: var(--shiko-text);
    font-size: 14px;
    font-weight: 600;
}

.shiko-product-tabs {
    margin-top: 48px;
    border-top: 1px solid var(--shiko-border);
}

.shiko-tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--shiko-border);
}
.shiko-tabs-nav button {
    padding: 14px 24px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--shiko-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--shiko-transition);
}
.shiko-tabs-nav button:hover { color: var(--shiko-text); }
.shiko-tabs-nav button.active {
    color: var(--shiko-accent);
    border-bottom-color: var(--shiko-accent);
}

.shiko-tab-content { padding: 24px 0; color: var(--shiko-text-secondary); font-size: 14px; line-height: 1.8; }

/* --- Cart Page --- */
.shiko-cart-page { padding: 32px 0 60px; }

.shiko-cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.shiko-cart-items {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
}

.shiko-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--shiko-border);
}
.shiko-cart-item:last-child { border-bottom: none; }

.shiko-cart-item-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--shiko-radius);
    overflow: hidden;
    background: var(--shiko-bg-tertiary);
}
.shiko-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.shiko-cart-item-name { font-size: 14px; font-weight: 600; }
.shiko-cart-item-meta { font-size: 12px; color: var(--shiko-text-muted); margin-top: 4px; }
.shiko-cart-item-price { font-size: 15px; font-weight: 700; color: var(--shiko-accent); white-space: nowrap; }

.shiko-cart-item-remove {
    background: none;
    border: none;
    color: var(--shiko-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all var(--shiko-transition);
}
.shiko-cart-item-remove:hover { color: var(--shiko-accent); background: var(--shiko-badge-bg); }

.shiko-cart-summary {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 24px;
    position: sticky;
    top: 90px;
}

.shiko-cart-summary h3 { font-size: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--shiko-border); }

.shiko-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}
.shiko-cart-row.total {
    font-size: 18px;
    font-weight: 700;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--shiko-border);
}
.shiko-cart-row.total .amount { color: var(--shiko-accent); }

.shiko-coupon-form {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}
.shiko-coupon-form input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    background: var(--shiko-input-bg);
    color: var(--shiko-text);
    font-size: 13px;
}

/* --- Checkout Page --- */
.shiko-checkout-page { padding: 32px 0 60px; }

.shiko-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
}

.shiko-form-section {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}
.shiko-form-section h3 {
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--shiko-border);
}

.shiko-form-row {
    margin-bottom: 16px;
}
.shiko-form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--shiko-text);
}
.shiko-form-row input,
.shiko-form-row select,
.shiko-form-row textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    background: var(--shiko-input-bg);
    color: var(--shiko-text);
    font-size: 14px;
    transition: border-color var(--shiko-transition);
}
.shiko-form-row input:focus,
.shiko-form-row select:focus,
.shiko-form-row textarea:focus {
    outline: none;
    border-color: var(--shiko-accent);
}

.shiko-form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.shiko-order-summary-checkout {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 24px;
    position: sticky;
    top: 90px;
}

/* --- My Account --- */
.shiko-account-page { padding: 32px 0 60px; }

.shiko-account-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
}

.shiko-account-nav {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.shiko-account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    color: var(--shiko-text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid var(--shiko-border);
    transition: all var(--shiko-transition);
}
.shiko-account-nav a:last-child { border-bottom: none; }
.shiko-account-nav a:hover,
.shiko-account-nav a.active {
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-accent);
}

.shiko-account-content {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 32px;
    min-height: 400px;
}

/* Login form */
.shiko-login-form {
    max-width: 420px;
    margin: 0 auto;
    padding: 60px 0;
}
.shiko-login-form h2 { text-align: center; margin-bottom: 8px; }
.shiko-login-form .subtitle {
    text-align: center;
    color: var(--shiko-text-secondary);
    font-size: 14px;
    margin-bottom: 32px;
}

/* Order table */
.shiko-orders-table {
    width: 100%;
    border-collapse: collapse;
}
.shiko-orders-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--shiko-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--shiko-border);
}
.shiko-orders-table td {
    padding: 14px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--shiko-border);
}
.shiko-orders-table tr:last-child td { border-bottom: none; }

.shiko-order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}
.shiko-order-status.completed { background: #D1FAE5; color: #065F46; }
.shiko-order-status.processing { background: #DBEAFE; color: #1E40AF; }
.shiko-order-status.pending { background: #FEF3C7; color: #92400E; }
.shiko-order-status.cancelled { background: #FEE2E2; color: #991B1B; }

/* --- Blog --- */
.shiko-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.shiko-post-card {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
    transition: all var(--shiko-transition);
}
.shiko-post-card:hover { transform: translateY(-2px); box-shadow: var(--shiko-card-shadow); }

.shiko-post-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--shiko-bg-tertiary); }
.shiko-post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.shiko-post-content { padding: 20px; }
.shiko-post-meta { font-size: 12px; color: var(--shiko-text-muted); margin-bottom: 8px; }
.shiko-post-content h3 { font-size: 16px; margin-bottom: 8px; }
.shiko-post-content h3 a { color: var(--shiko-text); }
.shiko-post-content h3 a:hover { color: var(--shiko-accent); }
.shiko-post-excerpt { font-size: 13px; color: var(--shiko-text-secondary); line-height: 1.6; }

/* Single Post */
.shiko-single-post {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}
.shiko-single-post h1 { margin-bottom: 16px; }
.shiko-single-post .entry-content { font-size: 16px; line-height: 1.8; color: var(--shiko-text-secondary); }
.shiko-single-post .entry-content {
    color: var(--shiko-text-primary);
}
.shiko-single-post .entry-content h2,
.shiko-single-post .entry-content h3 { color: var(--shiko-text); margin: 2rem 0 1rem; }
.shiko-single-post .entry-content p { margin-bottom: 1.25rem; }
.shiko-single-post .entry-content img { border-radius: var(--shiko-radius-lg); margin: 1.5rem 0; }

/* --- 404 --- */
.shiko-404 {
    text-align: center;
    padding: 100px 20px;
}
.shiko-404 h1 { font-size: 6rem; color: var(--shiko-accent); line-height: 1; margin-bottom: 16px; }
.shiko-404 h2 { margin-bottom: 12px; }
.shiko-404 p { color: var(--shiko-text-secondary); margin-bottom: 24px; }
.shiko-404-search {
    margin: 24px auto;
    max-width: 400px;
}
.shiko-404-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Search Page --- */
.shiko-search-page { padding: 32px 0 60px; }
.shiko-search-form {
    display: flex;
    gap: 12px;
    max-width: 600px;
    margin-bottom: 32px;
}
.shiko-search-form input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    background: var(--shiko-input-bg);
    color: var(--shiko-text);
    font-size: 15px;
}

/* --- Pagination --- */
.shiko-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 40px 0 20px;
}
.shiko-pagination .page-numbers {
    display: none;
}
.shiko-pagination a.prev,
.shiko-pagination a.next,
.shiko-pagination span.current {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--shiko-radius);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--shiko-border);
    color: var(--shiko-text-secondary);
    transition: all var(--shiko-transition);
}
.shiko-pagination a.prev:hover,
.shiko-pagination a.next:hover {
    border-color: var(--shiko-accent);
    color: var(--shiko-accent);
}
.shiko-pagination span.current {
    background: var(--shiko-accent);
    border-color: var(--shiko-accent);
    color: #fff;
    display: flex;
}
/* Show dots */
.shiko-pagination .dots { display: flex; color: var(--shiko-text-muted); padding: 0 4px; align-items: center; }
/* Show page numbers on desktop */
@media (min-width: 768px) {
    .shiko-pagination .page-numbers { display: flex; }
}
/* WC default pagination override */
body.shiko-theme .woocommerce nav.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 4px;
    list-style: none;
    padding: 40px 0 20px;
    margin: 0;
    border: none;
}
body.shiko-theme .woocommerce nav.woocommerce-pagination ul li {
    border: none;
    margin: 0;
    padding: 0;
}
body.shiko-theme .woocommerce nav.woocommerce-pagination ul li a,
body.shiko-theme .woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--shiko-radius);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--shiko-border);
    color: var(--shiko-text-secondary);
    background: transparent;
    transition: all var(--shiko-transition);
}
body.shiko-theme .woocommerce nav.woocommerce-pagination ul li a:hover {
    border-color: var(--shiko-accent);
    color: var(--shiko-accent);
    background: transparent;
}
body.shiko-theme .woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--shiko-accent);
    border-color: var(--shiko-accent);
    color: #fff;
}

/* --- WooCommerce Overrides --- */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--shiko-text);
}
.woocommerce-notices-wrapper .woocommerce-message { border-left: 3px solid #10B981; }
.woocommerce-notices-wrapper .woocommerce-error { border-left: 3px solid var(--shiko-accent); }
.woocommerce-notices-wrapper .woocommerce-info { border-left: 3px solid #3B82F6; }

/* --- Widgets / Sidebar --- */
.shiko-sidebar .widget {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}
.shiko-sidebar .widget h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--shiko-border);
}

/* --- Mobile Menu Overlay --- */
/* Skip to content */
.shiko-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--shiko-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--shiko-radius);
    text-decoration: none;
    transition: top 0.2s;
}
.shiko-skip-link:focus,
.shiko-skip-link:focus-visible {
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.shiko-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--shiko-bg);
    z-index: 9999;
    padding: 20px;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.shiko-mobile-menu.active { display: flex; }

.shiko-mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.shiko-mobile-menu-close {
    background: none;
    border: none;
    color: var(--shiko-text);
    cursor: pointer;
    padding: 8px;
}

/* Mobile search bar */
.shiko-mobile-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--shiko-bg-tertiary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    margin-bottom: 20px;
    flex-shrink: 0;
}
.shiko-mobile-search svg {
    width: 18px;
    height: 18px;
    stroke: var(--shiko-text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.shiko-mobile-search input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--shiko-text);
    -webkit-text-fill-color: var(--shiko-text);
    caret-color: var(--shiko-accent);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}
.shiko-mobile-search input::placeholder {
    color: var(--shiko-text-muted);
}
.shiko-mobile-search-submit {
    background: none;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    color: var(--shiko-text-muted);
    flex-shrink: 0;
}
.shiko-mobile-search-submit svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Mobile navigation */
.shiko-mobile-nav-section {
    flex: 1;
    overflow-y: auto;
}

.shiko-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.shiko-mobile-nav-list > li {
    list-style: none !important;
}
.shiko-mobile-nav-list > li::before,
.shiko-mobile-nav-list > li::after,
.shiko-mobile-nav-list > li::marker {
    display: none !important;
    content: none !important;
}
.shiko-mobile-nav-list > li > a {
    display: block;
    padding: 14px 0;
    color: var(--shiko-text);
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid var(--shiko-border);
    text-decoration: none;
}
.shiko-mobile-nav-list > li > a:hover { color: var(--shiko-accent); }

/* Mobile submenu */
.shiko-mobile-nav-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.shiko-mobile-nav-list .sub-menu li {
    list-style: none !important;
}
.shiko-mobile-nav-list .sub-menu li::before,
.shiko-mobile-nav-list .sub-menu li::after,
.shiko-mobile-nav-list .sub-menu li::marker {
    display: none !important;
    content: none !important;
}
.shiko-mobile-nav-list .sub-menu a {
    display: block;
    padding: 10px 0 10px 20px;
    font-size: 14px;
    color: var(--shiko-text-secondary);
    border-bottom: 1px solid var(--shiko-border);
    text-decoration: none;
}
.shiko-mobile-nav-list .sub-menu a:hover { color: var(--shiko-accent); }

/* Mobile utility links (account, theme toggle) */
.shiko-mobile-utils {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--shiko-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.shiko-mobile-util-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: var(--shiko-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
    border-radius: var(--shiko-radius);
    transition: color var(--shiko-transition), background var(--shiko-transition);
}
.shiko-mobile-util-link:hover,
.shiko-mobile-util-link:focus-visible {
    color: var(--shiko-accent);
    background: var(--shiko-bg-tertiary);
}
.shiko-mobile-util-link svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.shiko-mobile-util-link .icon-moon { fill: currentColor; stroke: none; }
.shiko-mobile-util-link .icon-sun { display: none; }
[data-theme="dark"] .shiko-mobile-util-link .icon-sun { display: block; }
[data-theme="dark"] .shiko-mobile-util-link .icon-moon { display: none; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .shiko-cart-layout { grid-template-columns: 1fr; }
    .shiko-checkout-layout { grid-template-columns: 1fr; }
    .shiko-account-layout { grid-template-columns: 1fr; }
    .shiko-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    .shiko-nav { display: none; }
    .shiko-menu-toggle { display: block; }
    .shiko-desktop-only { display: none !important; }
    .shiko-header-inner { height: 66px; }
    .shiko-header .shiko-logo { width: 112px; max-width: 42vw; }
    .shiko-logo img { height: auto !important; max-height: 34px !important; }
    .shiko-header-actions { gap: 6px; }
    .shiko-header-icon,
    .shiko-theme-toggle,
    .shiko-lang-toggle,
    .shiko-menu-toggle { width: 36px; height: 36px; }
    .shiko-header-icon svg,
    .shiko-menu-toggle svg { width: 18px; height: 18px; }

    .shiko-hero { padding: 40px 0; }
    .shiko-section { padding: 32px 0; }

    .shiko-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .shiko-product-info { padding: 10px; }
    .shiko-product-title { font-size: 13px; }
    .shiko-product-price { font-size: 13px; }

    .shiko-plans-grid { grid-template-columns: 1fr; }
    .shiko-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .shiko-trust-grid { grid-template-columns: 1fr 1fr; }

    .shiko-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .shiko-footer-payments-inner { gap: 8px; }
    .shiko-payment-logo { height: 16px; }
    .shiko-footer-proof-inner { gap: 16px; }
    .shiko-proof-divider { display: none; }
    .shiko-proof-stat { flex-direction: row; gap: 6px; }
    .shiko-proof-number { font-size: 15px; }
    .shiko-proof-label { font-size: 11px; }

    .shiko-cart-item { grid-template-columns: 60px 1fr auto; gap: 12px; }
    .shiko-cart-item-remove { grid-column: 3; grid-row: 1; }

    .shiko-form-cols { grid-template-columns: 1fr; }
    .shiko-blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .shiko-product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .shiko-hero h1 { font-size: 1.5rem; }
}

/* --- Elementor Compatibility --- */
.elementor-page .shiko-header + .site-content { padding-top: 0; }
.elementor-page .shiko-hero { display: none; }
body.elementor-default .entry-content,
body.elementor-template-full-width .entry-content { max-width: none; }

/* --- Utility --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-accent { color: var(--shiko-accent); }
.text-muted { color: var(--shiko-text-muted); }
.mt-1 { margin-top: 8px; }
.shiko-page-shell {
    padding: 32px 0 60px;
}
.shiko-page-title {
    margin-bottom: 16px;
}
.shiko-page-content {
    margin-top: 20px;
    color: var(--shiko-text-primary);
    line-height: 1.8;
}
.shiko-page-content > *:first-child {
    margin-top: 0;
}
.shiko-page-content p,
.shiko-page-content li {
    color: var(--shiko-text-secondary);
}
.shiko-page-content h2,
.shiko-page-content h3,
.shiko-page-content h4,
.shiko-page-content strong {
    color: var(--shiko-text-primary);
}
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* ============================================
   OVERRIDE: Beat WooCommerce/Elementor specificity
   ============================================ */
body.shiko-theme,
body.shiko-theme .site-content,
body.shiko-theme .shiko-container {
    color: var(--shiko-text);
    background-color: var(--shiko-bg);
}

/* 3.3.69: wrap the body selector in :where() so this rule's specificity
   drops to (0,0,1). Plain inline anchors still inherit the accent
   colour, but every component class — .shiko-btn-primary,
   .shiko-footer-btn-primary, .shiko-live-viewall, .shiko-product-save-wa-btn,
   .shiko-feedback-submit, .shiko-account-submit, etc. (all 0,1,0+) —
   now wins automatically. Was the root cause of multiple "white text
   rendering as red on red" reports (3.3.66 / 3.3.68). */
:where(body.shiko-theme) a {
    color: var(--shiko-accent);
}

body.shiko-theme .woocommerce-page,
body.shiko-theme .woocommerce {
    color: var(--shiko-text);
}

/* Shared commerce shell polish (shop/product/cart/checkout/account/search). */
body.shiko-theme.woocommerce-page .site-content,
body.shiko-theme.woocommerce-account .site-content,
body.shiko-theme.search-results .site-content {
    padding-top: 12px;
}
body.shiko-theme.woocommerce-page .woocommerce-notices-wrapper,
body.shiko-theme.search-results .shiko-search-hero {
    margin-bottom: 18px;
}
body.shiko-theme.woocommerce-page .woocommerce-notices-wrapper .woocommerce-message,
body.shiko-theme.woocommerce-page .woocommerce-notices-wrapper .woocommerce-info,
body.shiko-theme.woocommerce-page .woocommerce-notices-wrapper .woocommerce-error {
    border-radius: 10px;
    padding: 14px 16px;
}
body.shiko-theme.woocommerce-page .select2-container--default .select2-selection--single,
body.shiko-theme.woocommerce-page input[type="text"],
body.shiko-theme.woocommerce-page input[type="email"],
body.shiko-theme.woocommerce-page input[type="tel"],
body.shiko-theme.woocommerce-page input[type="number"],
body.shiko-theme.woocommerce-page input[type="password"],
body.shiko-theme.woocommerce-page textarea,
body.shiko-theme.woocommerce-page select {
    min-height: 46px;
}
body.shiko-theme.woocommerce-page .woocommerce form .form-row input.input-text:focus,
body.shiko-theme.woocommerce-page .woocommerce form .form-row textarea:focus,
body.shiko-theme.woocommerce-page .woocommerce form .form-row select:focus,
body.shiko-theme.woocommerce-page .select2-container--default .select2-selection--single:focus,
body.shiko-theme.woocommerce-page a:focus-visible,
body.shiko-theme.woocommerce-page button:focus-visible,
body.shiko-theme.woocommerce-page input:focus-visible,
body.shiko-theme.search-results a:focus-visible,
body.shiko-theme.search-results button:focus-visible,
body.shiko-theme.search-results input:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 2px;
}

/* Keep cart/checkout content visually centered on wide desktop screens. */
body.shiko-theme.woocommerce-cart .woocommerce,
body.shiko-theme.woocommerce-checkout .woocommerce {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}
body.shiko-theme.woocommerce-checkout .woocommerce-checkout,
body.shiko-theme.woocommerce-checkout form.checkout {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}
body.shiko-theme.woocommerce-checkout #order_review_heading,
body.shiko-theme.woocommerce-checkout #order_review {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ===== AI SMART SEARCH DROPDOWN ===== */

.shiko-ai-search-wrap { position: relative; }

.shiko-ai-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    box-shadow: var(--shiko-shadow-lg, 0 8px 24px rgba(0,0,0,0.15));
    max-height: 480px;
    overflow-y: auto;
    margin-top: 4px;
}

.shiko-ai-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--shiko-border);
    background: var(--shiko-bg-tertiary);
    border-radius: var(--shiko-radius-lg) var(--shiko-radius-lg) 0 0;
    position: sticky;
    top: 0;
    z-index: 1;
}
.shiko-ai-search-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--shiko-text-muted);
}
.shiko-ai-search-count {
    background: var(--shiko-text);
    color: var(--shiko-bg);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.shiko-ai-search-loading,
.shiko-ai-search-empty {
    padding: 16px;
    text-align: center;
    color: var(--shiko-text-muted);
    font-size: 13px;
}

.shiko-ai-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--shiko-border);
    text-decoration: none;
    color: var(--shiko-text);
    transition: background 0.15s;
}
.shiko-ai-search-item:last-of-type { border-bottom: none; }
.shiko-ai-search-item:hover { background: var(--shiko-bg-tertiary); }

.shiko-ai-search-thumb {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}
.shiko-ai-search-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--shiko-radius);
}
.shiko-ai-sale-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--shiko-accent, #B7080A);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

.shiko-ai-search-info {
    flex: 1;
    min-width: 0;
}
.shiko-ai-search-cat {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--shiko-text-muted);
    margin-bottom: 2px;
}
.shiko-ai-search-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--shiko-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shiko-ai-search-price {
    font-size: 13px;
    color: var(--shiko-accent);
    font-weight: 600;
    margin-top: 2px;
}
.shiko-ai-search-price del {
    color: var(--shiko-text-muted);
    font-weight: 400;
    font-size: 11px;
}
.shiko-ai-search-price ins {
    text-decoration: none;
}

.shiko-ai-search-footer {
    padding: 8px;
    text-align: center;
    font-size: 10px;
    color: var(--shiko-text-muted);
    border-top: 1px solid var(--shiko-border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* AI review summary CSS removed in v3.2.22 — now in shiko-ai-engine */


/* =================================================================
 * v1.7.9 — COMPREHENSIVE UX FIX PASS
 * Covers: focus states, forms, content links, cards, blog, search,
 * shop controls, WC account, comments, contact, mobile responsiveness
 * ================================================================= */

/* ── 1. FOCUS STATES — keyboard navigation ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 2px;
}
.shiko-btn:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 3px;
}

/* ── 2. GLOBAL FORM ELEMENTS — dark mode safe ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
    background: var(--shiko-input-bg);
    color: var(--shiko-text);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}
input:hover,
textarea:hover,
select:hover {
    border-color: var(--shiko-border-hover);
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--shiko-accent);
    outline: none;
}
input::placeholder,
textarea::placeholder {
    color: var(--shiko-text-muted);
}
textarea {
    min-height: 120px;
    resize: vertical;
}
select {
    cursor: pointer;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--shiko-text);
}

/* ── 3. CONTENT AREA LINKS — underlined for readability ── */
.entry-content a:not(.shiko-btn):not(.wp-element-button),
.shiko-post-excerpt a,
.woocommerce-product-details__short-description a,
.shiko-pdp-section a:not(.shiko-btn) {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.entry-content a:hover {
    color: var(--shiko-accent-hover);
}

/* ── 4. CARD LINKS — override global red on card text ── */
a.shiko-product-card,
a.shiko-cat-card,
a.shiko-post-card-link {
    color: var(--shiko-text);
    text-decoration: none;
}
a.shiko-product-card:hover,
a.shiko-cat-card:hover {
    color: var(--shiko-text);
}
a.shiko-product-card .shiko-product-category {
    color: var(--shiko-text-muted);
}
a.shiko-product-card .shiko-product-price {
    color: var(--shiko-accent);
}

/* ── 5. BLOG GRID POLISH ── */
.shiko-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.shiko-post-card {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}
.shiko-post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shiko-card-shadow);
    border-color: var(--shiko-border-hover);
}
.shiko-post-thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--shiko-bg-tertiary);
}
.shiko-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.shiko-post-card:hover .shiko-post-thumb img {
    transform: scale(1.03);
}
.shiko-post-content {
    padding: 20px;
}
.shiko-post-content h3 a {
    color: var(--shiko-text);
    text-decoration: none;
}
.shiko-post-content h3 a:hover {
    color: var(--shiko-accent);
}

/* ── 6. SHOP CONTROLS — dark mode ── */
.shiko-shop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.shiko-ordering select {
    background: var(--shiko-input-bg);
    color: var(--shiko-text);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    padding: 8px 32px 8px 12px;
    font-size: 13px;
    font-family: inherit;
}
.shiko-shop-header {
    padding: 24px 0;
}
.shiko-shop-header h1 {
    margin-bottom: 0;
}

/* ── 7. WC ACCOUNT PAGE ── */
/* Account navigation & login/register forms — see woocommerce.css */

/* WC buttons global */
body.shiko-theme .woocommerce .button,
body.shiko-theme .woocommerce button.button,
body.shiko-theme .woocommerce input.button,
body.shiko-theme .woocommerce a.button {
    background: var(--shiko-accent);
    color: #fff;
    border: none;
    border-radius: var(--shiko-radius);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
    display: inline-block;
}
body.shiko-theme .woocommerce .button:hover,
body.shiko-theme .woocommerce button.button:hover {
    opacity: 0.9;
    color: #fff;
}
body.shiko-theme .woocommerce .button.alt,
body.shiko-theme .woocommerce button.button.alt {
    background: var(--shiko-accent);
    color: #fff;
}

/* ── 8. WC NOTICES — dark mode ── */
body.shiko-theme .woocommerce-info,
body.shiko-theme .woocommerce-message,
body.shiko-theme .woocommerce-error {
    background: var(--shiko-bg-secondary);
    border-color: var(--shiko-border);
    color: var(--shiko-text);
    border-radius: var(--shiko-radius);
    padding: 14px 20px;
    margin-bottom: 16px;
}
body.shiko-theme .woocommerce-message {
    border-left: 4px solid #28a745;
}
body.shiko-theme .woocommerce-error {
    border-left: 4px solid var(--shiko-accent);
}
body.shiko-theme .woocommerce-info {
    border-left: 4px solid #3b82f6;
}
body.shiko-theme .woocommerce-error li,
body.shiko-theme .woocommerce-message a,
body.shiko-theme .woocommerce-info a {
    color: var(--shiko-text);
}

/* ── 9. COMMENT FORM — dark mode ── */
.shiko-comments .comment-body {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}
.shiko-comments .comment-author {
    font-weight: 600;
    margin-bottom: 4px;
}
.shiko-comments .comment-metadata {
    font-size: 12px;
    color: var(--shiko-text-muted);
    margin-bottom: 12px;
}
.shiko-form-section {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 24px;
}
.shiko-form-section h3 {
    margin-bottom: 16px;
}

/* ── 10. SINGLE POST ── */
.shiko-single-post .entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--shiko-text-secondary);
}
.shiko-single-post .entry-content p {
    margin-bottom: 1.25rem;
}
.shiko-single-post .entry-content h2,
.shiko-single-post .entry-content h3 {
    color: var(--shiko-text);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.shiko-single-post .entry-content img {
    border-radius: var(--shiko-radius-lg);
}
.shiko-single-post .entry-content blockquote {
    border-left: 3px solid var(--shiko-accent);
    padding: 16px 20px;
    margin: 1.5rem 0;
    background: var(--shiko-bg-secondary);
    border-radius: 0 var(--shiko-radius) var(--shiko-radius) 0;
    color: var(--shiko-text-secondary);
    font-style: italic;
}

/* ── 11. WC PRICE COLORS INSIDE CARDS ── */
.shiko-product-price {
    color: var(--shiko-accent);
    font-size: 14px;
    font-weight: 700;
}
.shiko-product-price del {
    color: var(--shiko-text-muted);
    font-weight: 400;
    font-size: 12px;
}
.shiko-product-price ins {
    color: var(--shiko-accent);
    text-decoration: none;
    font-weight: 700;
}
.shiko-product-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--shiko-text-muted);
    margin-bottom: 4px;
}
.shiko-product-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
    color: var(--shiko-text);
}
.shiko-product-info {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── 12. CATEGORY CARD — fallback without image ── */
.shiko-cat-card:not(:has(.shiko-cat-card-bg)) .shiko-cat-card-inner {
    background: none;
    padding: 24px 16px;
}
.shiko-cat-card:not(:has(.shiko-cat-card-bg)) {
    background: var(--shiko-bg-secondary);
    color: var(--shiko-text);
    align-items: center;
    justify-content: center;
}
.shiko-cat-card:not(:has(.shiko-cat-card-bg)) .shiko-cat-card-count {
    color: var(--shiko-text-muted);
}

/* ── 13. CONTACT PAGE — mobile responsive ── */
@media (max-width: 768px) {
    .shiko-contact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 14. PLAN CARD — text colors ── */
.shiko-plan-card {
    color: var(--shiko-text);
}
.shiko-plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--shiko-text);
    margin-bottom: 6px;
}
.shiko-plan-desc {
    font-size: 13px;
    color: var(--shiko-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}
.shiko-plan-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--shiko-accent);
}
.shiko-plan-card.featured {
    border-color: var(--shiko-accent);
}

/* ── 15. WC TABLE — dark mode safe ── */
body.shiko-theme table.shop_table {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
body.shiko-theme table.shop_table th {
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-text);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--shiko-border);
}
body.shiko-theme table.shop_table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--shiko-border);
    color: var(--shiko-text);
    font-size: 14px;
}
body.shiko-theme table.shop_table tr:last-child td {
    border-bottom: none;
}

/* ── 16. MOBILE RESPONSIVE CATCH-ALL ── */
@media (max-width: 480px) {
    .shiko-hero h1 { font-size: 1.5rem; }
    .shiko-hero p { font-size: 14px; }
    .shiko-hero-actions { flex-direction: column; gap: 8px; }
    .shiko-hero-actions .shiko-btn { width: 100%; }
    .shiko-section { padding: 32px 0; }
    .shiko-plans-grid { grid-template-columns: 1fr; }
    .shiko-cat-grid { grid-template-columns: 1fr 1fr; }
    .shiko-trust-grid { grid-template-columns: 1fr 1fr; }
    .shiko-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .shiko-product-info { padding: 10px; }
    .shiko-product-title { font-size: 13px; }
    .shiko-product-price { font-size: 13px; }
    .shiko-blog-grid { grid-template-columns: 1fr; }
    .shiko-footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Live product search dropdown ── */
/* ============================================================
 * v3.2.47 — Live search dropdown, Proposal B
 *
 * Single unified dropdown with optional AI-results section.
 * Grid layout: [thumb] [info] [price] — price column is auto-sized
 * so numbers never wrap regardless of container width.
 * ============================================================ */

.shiko-live-search-wrap {
    position: relative;
}
.shiko-live-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    /* Anchor below the input pill, then expand rightward to a usable
       width (the input itself is 155-300 px depending on viewport, so
       inheriting its width gives an unreadably narrow dropdown). */
    left: 0;
    min-width: 480px;
    max-width: min(680px, calc(100vw - 48px));
    z-index: 9999;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    /* Max-height is viewport-aware; buffer of 120px keeps the dropdown
       inside the fold on most screens and prevents it from pushing past
       the footer on short mobile viewports. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
/* 3.3.50: on phones the desktop min-width:480 forced the dropdown to
   overflow the viewport (often invisibly clipped by the parent form's
   former overflow:hidden). Reset to the wrap's width on narrow screens
   so the popup is always visible after typing 3+ chars. */
@media (max-width: 640px) {
    .shiko-live-dropdown {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
    }
}

/* Section headings (SQL "Matching products" + AI "AI suggestions") */
.shiko-live-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--shiko-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--shiko-text-secondary);
}
.shiko-live-ai-heading {
    background: var(--shiko-bg-tertiary);
    border-top: 1px solid var(--shiko-border);
}
.shiko-live-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.shiko-live-count {
    background: var(--shiko-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0;
    text-transform: none;
}
.shiko-live-ai-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--shiko-border);
    border-top-color: var(--shiko-accent);
    border-radius: 50%;
    animation: shiko-spin 0.6s linear infinite;
}

/* Product row: 56px thumb + flexible info + auto-sized price column */
.shiko-live-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--shiko-text);
    border-bottom: 1px solid var(--shiko-border);
    transition: background 0.15s;
}
.shiko-live-item:hover,
.shiko-live-item.active {
    background: var(--shiko-bg-tertiary);
}
.shiko-live-section-heading + .shiko-live-item {
    /* separator already drawn by heading */
}

/* Thumbnail + optional overlay SALE ribbon */
.shiko-live-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.shiko-live-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--shiko-bg-tertiary);
    display: block;
}
.shiko-live-img-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--shiko-bg-tertiary);
}
.shiko-live-sale-ribbon {
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--shiko-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    z-index: 1;
}

/* Product info column: category chip + name (clamped to 2 lines) */
.shiko-live-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.shiko-live-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--shiko-text-secondary);
    background: var(--shiko-bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shiko-live-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--shiko-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price column: right-aligned, auto-sized, never wraps */
.shiko-live-price-col {
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
.shiko-live-price-new {
    font-size: 14px;
    font-weight: 600;
    color: var(--shiko-accent);
    white-space: nowrap;
}
.shiko-live-price-old {
    font-size: 11px;
    color: var(--shiko-text-muted);
    text-decoration: line-through;
    white-space: nowrap;
}
.shiko-live-price-range {
    font-size: 11px;
    color: var(--shiko-text-secondary);
    white-space: nowrap;
}

/* View-all footer — accent-colored CTA (3.3.49: explicit label + arrow,
   3.3.66: scope under body.shiko-theme so color: #fff beats the
   global `body.shiko-theme a { color: var(--shiko-accent) }` rule
   that was rendering the label red-on-red and invisible). */
body.shiko-theme .shiko-live-viewall,
.shiko-live-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--shiko-accent);
    text-decoration: none;
    border-top: 1px solid var(--shiko-border);
    letter-spacing: 0.02em;
}
body.shiko-theme .shiko-live-viewall .shiko-live-viewall-label,
body.shiko-theme .shiko-live-viewall .shiko-live-viewall-arrow,
.shiko-live-viewall .shiko-live-viewall-label,
.shiko-live-viewall .shiko-live-viewall-arrow {
    color: #fff;
}
body.shiko-theme .shiko-live-viewall:hover,
body.shiko-theme .shiko-live-viewall:focus,
.shiko-live-viewall:hover,
.shiko-live-viewall:focus {
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
}
.shiko-live-viewall-label {
    text-transform: none;
}
.shiko-live-viewall-arrow {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.15s;
}
.shiko-live-viewall:hover .shiko-live-viewall-arrow {
    transform: translateX(3px);
}
[dir="rtl"] .shiko-live-viewall-arrow {
    transform: scaleX(-1);
}
[dir="rtl"] .shiko-live-viewall:hover .shiko-live-viewall-arrow {
    transform: scaleX(-1) translateX(3px);
}

/* "Did you mean" section heading — distinguishes fuzzy fallback results */
.shiko-live-dym-heading {
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-text);
}
.shiko-live-dym-heading .shiko-live-section-label::before {
    content: "✦ ";
    color: var(--shiko-accent);
}

/* Empty / loading states */
.shiko-live-empty,
.shiko-live-loading {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--shiko-text-muted);
}
.shiko-live-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--shiko-border);
    border-top-color: var(--shiko-accent);
    border-radius: 50%;
    animation: shiko-spin 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes shiko-spin {
    to { transform: rotate(360deg); }
}

/* Suppress AI Engine's stray dropdown in case the dequeue fails
   (belt-and-suspenders — the JS shouldn't load at all, but this makes
   sure the user never sees a second floating component). */
.shiko-ai-search-dropdown {
    display: none !important;
}

/* =================================================================
 * v1.8.0 — FINAL UX FIXES
 * ================================================================= */

/* ── Plan card CTA — ensure white text on red ── */
.shiko-plan-card .shiko-btn-primary,
.shiko-plan-card .shiko-plan-cta {
    color: #fff !important;
    background: var(--shiko-accent) !important;
    border-color: var(--shiko-accent) !important;
}

/* ── Homepage trust grid — removed, hide any remnants ── */
.shiko-section > .shiko-container > .shiko-trust-grid {
    display: none;
}

/* =================================================================
 * v1.8.0 — OVERRIDE FIXES (high specificity for Ecomus/Elementor)
 * ================================================================= */

/* ── Hero buttons — FORCE white text ── */
body.shiko-theme .shiko-hero .shiko-btn-primary {
    color: #fff !important;
    background: var(--shiko-accent) !important;
}
body.shiko-theme .shiko-hero .shiko-btn-outline {
    color: var(--shiko-hero-btn-color, #fff) !important;
    border-color: var(--shiko-hero-btn-border, rgba(255,255,255,0.4)) !important;
    background: var(--shiko-hero-btn-bg, transparent) !important;
}
body.shiko-theme .shiko-hero .shiko-btn-outline:hover {
    border-color: var(--shiko-hero-btn-hover-border, #fff) !important;
    background: var(--shiko-hero-btn-hover-bg, rgba(255,255,255,0.1)) !important;
}
/* ── Fix: Submenu hover gap — bridge between parent and dropdown ── */
.shiko-nav li.menu-item-has-children { position: relative; }
.shiko-nav li.menu-item-has-children > .sub-menu {
    padding-top: 0 !important;
    margin-top: 0 !important;
    top: 100% !important;
}
.shiko-nav li.menu-item-has-children::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    display: none;
}
.shiko-nav li.menu-item-has-children:hover::after {
    display: block;
}

/* v3.3.33: Old footer rules removed — replaced by the .shiko-footer-v2
   block near the EOF. The footer template always renders
   .shiko-footer-v2 now; there is no path where the old
   .shiko-footer-proof / .shiko-footer-payments-bar / compact-grid
   overrides would match. */

/* ── Social icon — proper WhatsApp fill ── */
.shiko-social-icon[aria-label="WhatsApp"] svg {
    fill: currentColor !important;
    stroke: none !important;
}

/* ── Cart page — mobile card layout ── */
@media (max-width: 768px) {
    body.shiko-theme .woocommerce-cart table.shop_table thead {
        display: none !important;
    }
    body.shiko-theme .woocommerce-cart table.shop_table,
    body.shiko-theme .woocommerce-cart table.shop_table tbody,
    body.shiko-theme .woocommerce-cart table.shop_table tr,
    body.shiko-theme .woocommerce-cart table.shop_table td {
        display: block !important;
        width: 100% !important;
    }
    body.shiko-theme .woocommerce-cart table.shop_table tr {
        position: relative !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        border: 1px solid var(--shiko-border) !important;
        border-radius: var(--shiko-radius-lg) !important;
        background: var(--shiko-bg-secondary) !important;
    }
    body.shiko-theme .woocommerce-cart table.shop_table td {
        padding: 4px 0 !important;
        border-bottom: none !important;
        text-align: left !important;
    }
    body.shiko-theme .woocommerce-cart table.shop_table td.product-thumbnail {
        float: left !important;
        width: 72px !important;
        margin-right: 12px !important;
    }
    body.shiko-theme .woocommerce-cart table.shop_table td.product-remove {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        width: auto !important;
    }
    body.shiko-theme .woocommerce-cart table.shop_table td::before {
        display: none !important;
    }
    body.shiko-theme .woocommerce-cart .cart-collaterals {
        margin-top: 20px !important;
    }
}

/* ── Checkout — better mobile spacing ── */
body.shiko-theme .woocommerce-checkout .form-row {
    margin-bottom: 14px !important;
}
body.shiko-theme .woocommerce-checkout .form-row label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--shiko-text) !important;
    margin-bottom: 6px !important;
}
body.shiko-theme .woocommerce-checkout .form-row input.input-text,
body.shiko-theme .woocommerce-checkout .form-row select,
body.shiko-theme .woocommerce-checkout .form-row textarea {
    background: var(--shiko-input-bg) !important;
    color: var(--shiko-text) !important;
    border: 1px solid var(--shiko-border) !important;
    border-radius: var(--shiko-radius) !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    width: 100% !important;
}
body.shiko-theme .woocommerce-checkout .form-row input.input-text:focus,
body.shiko-theme .woocommerce-checkout .form-row select:focus {
    border-color: var(--shiko-accent) !important;
    outline: none !important;
}
body.shiko-theme .woocommerce-checkout #place_order {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: var(--shiko-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--shiko-radius) !important;
    cursor: pointer !important;
    margin-top: 16px !important;
}
body.shiko-theme .woocommerce-checkout #place_order:hover {
    opacity: 0.9 !important;
}

/* ── Checkout trust strip (below order button) ── */
.shiko-checkout-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 0;
    font-size: 11px;
    color: var(--shiko-text-muted);
}
.shiko-checkout-trust svg {
    width: 14px;
    height: 14px;
    stroke: #28a745;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

/* ── WC select2 (country dropdown) — dark mode ── */
body.shiko-theme .select2-container--default .select2-selection--single {
    background: var(--shiko-input-bg) !important;
    border-color: var(--shiko-border) !important;
    border-radius: var(--shiko-radius) !important;
    height: 44px !important;
    padding: 8px 14px !important;
}
body.shiko-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--shiko-text) !important;
    line-height: 26px !important;
}
body.shiko-theme .select2-dropdown {
    background: var(--shiko-bg-secondary) !important;
    border-color: var(--shiko-border) !important;
}
body.shiko-theme .select2-results__option {
    color: var(--shiko-text) !important;
    padding: 8px 14px !important;
}
body.shiko-theme .select2-results__option--highlighted {
    background: var(--shiko-bg-tertiary) !important;
    color: var(--shiko-text) !important;
}
body.shiko-theme .select2-search__field {
    background: var(--shiko-input-bg) !important;
    color: var(--shiko-text) !important;
    border-color: var(--shiko-border) !important;
}


/* ===== Search experience refinement ===== */
.shiko-search-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 20px;
    align-items: end;
    margin-bottom: 28px;
    padding: 24px;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-xl);
    box-shadow: var(--shiko-card-shadow);
}
.shiko-search-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shiko-accent);
    margin-bottom: 10px;
}
.shiko-search-summary {
    margin-top: 8px;
    color: var(--shiko-text-secondary);
    max-width: 62ch;
}
.shiko-search-results-grid {
    display: grid;
    /* Auto-fit so the grid expands to use whatever viewport the customer
       has — 2 cards on a tablet, 3 on a normal laptop, 4–5 on a wide
       monitor. Replaced the rigid `repeat(3, ...)` that left blank slots
       on narrow / wide screens alike. (Proposal A, 2026-04-25.) */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.shiko-search-card {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-xl);
    overflow: hidden;
    box-shadow: var(--shiko-card-shadow);
    display: flex;
    flex-direction: column;
}
.shiko-search-card-thumb {
    aspect-ratio: 1 / 1;
    display: block;
    background: var(--shiko-bg-tertiary);
}
.shiko-search-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shiko-search-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--shiko-text-muted);
}
.shiko-search-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.shiko-search-card-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.shiko-search-card-category,
.shiko-search-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.shiko-search-card-category {
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-text-secondary);
}
.shiko-search-card-badge {
    background: rgba(212, 160, 23, 0.14);
    color: var(--shiko-success);
}
.shiko-search-card-title {
    font-size: 18px;
    line-height: 1.35;
}
.shiko-search-card-title a { color: var(--shiko-text); text-decoration: none; }
.shiko-search-card-title a:hover { color: var(--shiko-accent); }
.shiko-search-card-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--shiko-accent);
}
.shiko-search-card-price del {
    color: var(--shiko-text-muted);
    font-size: 14px;
    margin-inline-end: 6px;
}
.shiko-search-card-excerpt {
    color: var(--shiko-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.shiko-search-card-actions { margin-top: auto; }
.shiko-search-card-link { width: 100%; justify-content: center; }
.shiko-search-empty-state {
    padding: 40px 24px;
    text-align: center;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-xl);
}
/* v3.2.47: old .shiko-live-heading / .shiko-live-price / .shiko-live-sale
   overrides removed — replaced by the Proposal B block earlier in the file. */
@media (max-width: 900px) {
    .shiko-search-hero {
        grid-template-columns: 1fr;
    }
    /* The auto-fill grid handles its own column collapse — no override needed. */
}
@media (max-width: 768px) {
    .shiko-mobile-theme-toggle { display: inline-flex !important; }
    .shiko-search-hero {
        padding: 18px;
        border-radius: var(--shiko-radius-lg);
    }
    .shiko-search-results-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .shiko-search-card {
        flex-direction: row;
    }
    .shiko-search-card-thumb {
        width: 112px;
        min-width: 112px;
        aspect-ratio: auto;
    }
}
@media (min-width: 769px) {
    .shiko-mobile-theme-toggle { display: none !important; }
}

/* ===== ACCESSIBILITY ADDITIONS — v1.9.17 ===== */

/* Screen reader text (used by skip link and WC) */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Reduced motion: disable animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print styles */
@media print {
    .shiko-header,
    .shiko-footer,
    .shiko-sticky-checkout,
    .shiko-mobile-menu,
    .shiko-skip-link,
    .shiko-theme-toggle,
    .shiko-search-toggle,
    .cht-widget-container,
    .chaty-widget { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline !important; }
}

/* Focus styles for cart quantity controls */
.woocommerce-cart .quantity-controls .qty-minus:focus-visible,
.woocommerce-cart .quantity-controls .qty-plus:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: -2px;
    z-index: 1;
}
.woocommerce-cart .coupon input:focus-visible,
.woocommerce-cart .coupon button:focus-visible,
.woocommerce-cart button[name="update_cart"]:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 2px;
}
.shiko-sticky-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* AI Features CSS removed in v3.2.22 — now in shiko-ai-engine */

/* ===== Force Chaty + WPLoyalty fixed positioning ===== */
/* Chaty ABOVE loyalty icon */
#chaty-widget-0,
.chaty-widget,
.chaty {
    position: fixed !important;
    bottom: 88px !important;
    right: 20px !important;
    z-index: 99999 !important;
    width: auto !important;
    height: auto !important;
}
#chaty-widget-0 > div {
    position: relative !important;
}
/* Loyalty at the bottom */
.wlr-launcher,
.wlr-myaccount-widget,
[class*="wlr-launcher"] {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 99998 !important;
}
/* Prevent transforms from breaking fixed positioning */
body > .chaty,
body > [id*="chaty"],
body > [class*="wlr-launcher"] {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
    contain: none !important;
}

/* AI Chatbot CSS removed in v3.2.22 — now in shiko-ai-engine */

/* ===== Store Features CSS ===== */

/* Bundle banner */
.shiko-bundle-banner{background:var(--shiko-bg-secondary);border:1px dashed var(--shiko-accent);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:13px;text-align:center;color:var(--shiko-text)}
.shiko-bundle-active{border-color:#15803d;background:rgba(21,128,61,0.05)}
.shiko-bundle-max{border-color:#15803d;background:rgba(21,128,61,0.1);color:#15803d}

/* Wishlist heart */
.shiko-wishlist-btn{position:absolute;top:8px;left:8px;z-index:3;background:rgba(255,255,255,0.8);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#999;transition:all 0.2s}
.shiko-wishlist-btn:hover,.shiko-wishlisted{color:#E24B4A}
.shiko-wishlisted svg{fill:#E24B4A}

/* Compare */
.shiko-compare-check{display:block;font-size:11px;color:var(--shiko-text-muted);margin-top:4px;cursor:pointer}
.shiko-compare-check input{margin-right:4px}
.shiko-compare-bar{position:fixed;bottom:0;left:0;right:0;background:var(--shiko-bg);border-top:1px solid var(--shiko-border);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;z-index:9999;font-size:13px}
.shiko-compare-bar button{background:var(--shiko-accent);color:#fff;border:none;padding:8px 20px;border-radius:6px;cursor:pointer;font-weight:600}
.shiko-compare-modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.shiko-compare-content{background:var(--shiko-bg);border-radius:12px;padding:20px;max-width:700px;width:100%;max-height:80vh;overflow-y:auto;position:relative}
.shiko-compare-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--shiko-text)}
.shiko-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.shiko-compare-card{text-align:center;padding:12px;border:1px solid var(--shiko-border);border-radius:8px}
.shiko-compare-card img{width:100%;height:120px;object-fit:cover;border-radius:6px;margin-bottom:8px}
.shiko-compare-card h4{font-size:14px;margin:0 0 4px}
.shiko-compare-price{font-size:13px;color:var(--shiko-accent);font-weight:600}
.shiko-compare-cat{font-size:11px;color:var(--shiko-text-muted)}
.shiko-compare-sale{background:var(--shiko-accent);color:#fff;font-size:10px;padding:2px 6px;border-radius:3px}

/* Quick preview modal */
.shiko-qv-modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.shiko-qv-content{background:var(--shiko-bg);border-radius:12px;max-width:400px;width:100%;overflow:hidden;position:relative}
.shiko-qv-close{position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.5);color:#fff;border:none;width:28px;height:28px;border-radius:50%;font-size:16px;cursor:pointer;z-index:2}
.shiko-qv-img{width:100%;height:220px;object-fit:cover}
.shiko-qv-sale{position:absolute;top:10px;left:10px;background:var(--shiko-accent);color:#fff;font-size:11px;padding:3px 10px;border-radius:4px;z-index:2}
.shiko-qv-info{padding:14px 16px}
.shiko-qv-price{font-size:16px;font-weight:600;color:var(--shiko-accent)}

/* Recently viewed bar */
.shiko-recently-bar{padding:16px 20px;border-top:1px solid var(--shiko-border);background:var(--shiko-bg-secondary)}
.shiko-recently-title{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--shiko-text)}
.shiko-recently-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.shiko-recently-item{display:flex;align-items:center;gap:6px;background:var(--shiko-bg);border:1px solid var(--shiko-border);border-radius:6px;padding:6px 10px;white-space:nowrap;font-size:12px;color:var(--shiko-text);text-decoration:none;flex-shrink:0}
.shiko-recently-item img{width:28px;height:28px;border-radius:4px;object-fit:cover}

/* Order tracker */
.shiko-order-tracker{display:flex;justify-content:space-between;margin-bottom:20px;padding:16px;background:var(--shiko-bg-secondary);border-radius:10px}
.shiko-tracker-step{text-align:center;flex:1;opacity:0.4}
.shiko-step-active{opacity:1}
.shiko-step-current .shiko-tracker-dot{background:var(--shiko-accent);color:#fff}
.shiko-tracker-dot{width:32px;height:32px;border-radius:50%;background:var(--shiko-border);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:13px;font-weight:600;color:var(--shiko-text)}
.shiko-step-active .shiko-tracker-dot{background:#15803d;color:#fff}
.shiko-tracker-label{font-size:11px;color:var(--shiko-text-muted)}

/* Referral box */
.shiko-referral-box{background:var(--shiko-bg-secondary);border:1px solid var(--shiko-border);border-radius:10px;padding:16px;margin-bottom:16px}
.shiko-referral-box h3{font-size:15px;margin:0 0 4px}
.shiko-referral-box p{font-size:13px;color:var(--shiko-text-muted);margin:0 0 10px}
.shiko-referral-link{display:flex;gap:6px}
.shiko-referral-link input{flex:1;padding:8px 10px;border:1px solid var(--shiko-border);border-radius:6px;font-size:12px;background:var(--shiko-bg);color:var(--shiko-text)}
.shiko-referral-link button{padding:8px 14px;background:var(--shiko-accent);color:#fff;border:none;border-radius:6px;font-size:12px;cursor:pointer;font-weight:600}

@media(max-width:768px){
    .shiko-compare-bar{font-size:12px;padding:8px 14px}
}

/* ===== Feedback Button + Modal ===== */
.shiko-feedback-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    color: var(--shiko-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99990;
    /* 3.3.75: opacity added so .shiko-bubbles-quiet / [data-shiko-bubble-hide]
       animations from main.js end-of-file IIFE transition smoothly; the
       hover background transition stays intact. */
    transition: background 0.2s, opacity 0.25s ease;
}
.shiko-feedback-btn:hover {
    background: var(--shiko-accent);
    color: #fff;
    border-color: var(--shiko-accent);
}
.shiko-feedback-btn svg { stroke: currentColor; }
.shiko-feedback-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.shiko-feedback-box {
    background: var(--shiko-bg);
    border: 1px solid var(--shiko-border);
    border-radius: 12px;
    padding: 16px;
    width: 100%;
    max-width: 400px;
}
.shiko-feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    color: var(--shiko-text);
}
.shiko-feedback-submit {
    padding: 8px 16px;
    background: var(--shiko-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

/* ===== Quick Preview Modal ===== */
.shiko-qv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.shiko-qv-modal {
    background: var(--shiko-bg, #fff);
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
.shiko-qv-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--shiko-text-muted);
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}
.shiko-qv-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
@media (max-width: 600px) {
    .shiko-qv-body { grid-template-columns: 1fr; }
}
.shiko-qv-image {
    position: relative;
    background: #111;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
}
@media (max-width: 600px) {
    .shiko-qv-image { border-radius: 12px 12px 0 0; max-height: 220px; }
}
.shiko-qv-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shiko-qv-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--shiko-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
}
.shiko-qv-info {
    padding: 20px;
}
.shiko-qv-cat {
    font-size: 11px;
    color: var(--shiko-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.shiko-qv-info h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 8px;
    color: var(--shiko-text);
}
.shiko-qv-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--shiko-accent);
    margin-bottom: 12px;
}
.shiko-qv-price del { color: var(--shiko-text-muted); font-size: 14px; font-weight: 400; }
.shiko-qv-desc {
    font-size: 13px;
    color: var(--shiko-text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shiko-qv-attrs { margin-bottom: 12px; }
.shiko-qv-attrs select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--shiko-border);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--shiko-bg);
    color: var(--shiko-text);
    font-size: 13px;
}
.shiko-qv-actions { display: flex; gap: 8px; }
.shiko-qv-add {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: var(--shiko-accent);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.shiko-qv-add:hover { opacity: 0.9; }
.shiko-qv-full {
    padding: 10px 14px;
    border: 1px solid var(--shiko-border);
    border-radius: 8px;
    color: var(--shiko-text) !important;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}
.shiko-qv-loading {
    position: absolute;
    inset: 0;
    background: var(--shiko-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.shiko-qv-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--shiko-border);
    border-top-color: var(--shiko-accent);
    border-radius: 50%;
    animation: shiko-spin 0.7s linear infinite;
}
@keyframes shiko-spin { to { transform: rotate(360deg); } }
.shiko-quick-view-btn {
    display: block;
    width: 100%;
    padding: 6px;
    background: rgba(0,0,0,0.05);
    border: none;
    font-size: 12px;
    color: var(--shiko-text-muted);
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 4px;
    border-radius: 0 0 8px 8px;
}
.shiko-quick-view-btn:hover {
    background: var(--shiko-accent);
    color: #fff;
}

/* ===== Wishlist heart ===== */
.shiko-wishlist-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.shiko-wishlist-btn:hover { transform: scale(1.15); }
.shiko-wishlist-btn.active svg { fill: var(--shiko-accent); stroke: var(--shiko-accent); }

/* ===== Thank-you recommendations ===== */
.shiko-thankyou-recs {
    margin: 24px 0;
    padding: 20px;
    background: var(--shiko-bg-secondary);
    border-radius: 12px;
}
.shiko-thankyou-recs h3 {
    font-size: 16px;
    margin: 0 0 12px;
    color: var(--shiko-text);
}
.shiko-thankyou-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 600px) {
    .shiko-thankyou-grid { grid-template-columns: repeat(2, 1fr); }
}
.shiko-thankyou-card {
    background: var(--shiko-bg);
    border: 1px solid var(--shiko-border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s;
}
.shiko-thankyou-card:hover { transform: translateY(-2px); }
.shiko-thankyou-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.shiko-thankyou-card-info { padding: 8px 10px; }
.shiko-thankyou-card-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--shiko-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shiko-thankyou-card-price {
    font-size: 12px;
    color: var(--shiko-accent);
    font-weight: 700;
}

/* =====================================================================
 * REVAMPED THANK YOU / ORDER RECEIVED PAGE
 * ===================================================================== */

.shiko-thankyou-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

/* Hide default WooCommerce order-received elements we replaced */
.woocommerce-order-received .woocommerce-order-overview,
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-thankyou-order-received {
    display: none !important;
}

/* ── SUCCESS HEADER ── */
.shiko-ty-header {
    text-align: center;
    margin-bottom: 28px;
}
.shiko-ty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.shiko-ty-icon-paid {
    background: rgba(21, 128, 61, 0.15);
    color: #22c55e;
}
.shiko-ty-icon-pending {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}
.shiko-ty-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--shiko-text);
    margin: 0 0 6px;
}
.shiko-ty-subtitle {
    font-size: 14px;
    color: var(--shiko-text-muted);
    margin: 0;
}
.shiko-ty-shop-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 24px;
    background: var(--shiko-accent);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.shiko-ty-shop-btn:hover { opacity: 0.9; }

/* ── ORDER META ROW ── */
.shiko-ty-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}
.shiko-ty-meta-item {
    text-align: center;
}
.shiko-ty-meta-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--shiko-text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}
.shiko-ty-meta-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--shiko-text);
    word-break: break-all;
}
.shiko-ty-total {
    color: var(--shiko-accent) !important;
    font-size: 15px !important;
}
@media (max-width: 520px) {
    .shiko-ty-meta { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ── PROGRESS STEPPER ── */
.shiko-ty-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: 12px;
    padding: 20px 16px;
    margin-bottom: 20px;
    gap: 0;
}
.shiko-ty-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    opacity: 0.35;
    transition: opacity 0.3s;
}
.shiko-ty-step-done,
.shiko-ty-step-current {
    opacity: 1;
}
.shiko-ty-step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-text-muted);
    border: 2px solid var(--shiko-border);
    transition: all 0.3s;
}
.shiko-ty-step-done .shiko-ty-step-dot {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}
.shiko-ty-step-current .shiko-ty-step-dot {
    background: var(--shiko-accent);
    border-color: var(--shiko-accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(228, 3, 3, 0.2);
    animation: shiko-pulse 2s infinite;
}
@keyframes shiko-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(228, 3, 3, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(228, 3, 3, 0.08); }
}
.shiko-ty-step-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--shiko-text);
    max-width: 100px;
}
.shiko-ty-step-sub {
    display: block;
    font-size: 10px;
    color: var(--shiko-text-muted);
    margin-top: 2px;
}
.shiko-ty-step-line {
    flex: 1;
    height: 2px;
    background: var(--shiko-border);
    margin: 18px 8px 0;
    min-width: 30px;
    border-radius: 2px;
    transition: background 0.3s;
}
.shiko-ty-line-done {
    background: #15803d;
}
@media (max-width: 420px) {
    .shiko-ty-step-label { font-size: 10px; max-width: 70px; }
    .shiko-ty-step-dot { width: 30px; height: 30px; font-size: 12px; }
    .shiko-ty-step-line { min-width: 16px; }
}

/* ── PAYMENT CARD ── */
.shiko-ty-payment-card {
    background: var(--shiko-bg-secondary);
    border: 2px solid var(--shiko-accent);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
}
.shiko-ty-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--shiko-text);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--shiko-border);
}
.shiko-ty-payment-content {
    text-align: center;
}
/* Force gateway images to larger uniform size inside card */
.shiko-ty-payment-content img {
    max-width: 200px !important;
    height: auto !important;
    margin: 6px auto;
    display: block;
}
/* Prevent duplicate gateway logo — hide 2nd+ occurrence */
.shiko-ty-payment-content > img + img,
.shiko-ty-payment-content > br + img {
    display: none !important;
}
/* 3.2.57: inline payment QR image on thank-you page. */
.shiko-ty-qr-inline {
    text-align: center;
    margin-top: 14px;
}
.shiko-ty-qr-caption {
    color: var(--shiko-text-secondary);
    font-size: 14px;
    margin: 0 0 10px;
}
.shiko-ty-qr-inline img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
@media (max-width: 480px) {
    .shiko-ty-qr-inline img {
        max-width: 260px;
        padding: 8px;
    }
}
.shiko-ty-payment-content a {
    color: var(--shiko-accent);
    word-break: break-all;
}
.shiko-ty-payment-content p {
    color: var(--shiko-text-secondary);
    font-size: 14px;
    margin: 6px 0;
}

/* ── ORDER DETAILS CARD ── */
.shiko-ty-details-card {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 20px;
}
.shiko-ty-items-table {
    width: 100%;
    border-collapse: collapse;
}
.shiko-ty-items-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--shiko-text-muted);
    font-weight: 600;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--shiko-border);
    text-align: left;
}
.shiko-ty-th-total { text-align: right !important; }
.shiko-ty-items-table tbody td {
    padding: 12px 0;
    border-bottom: 1px solid var(--shiko-border);
    vertical-align: middle;
}
.shiko-ty-td-total {
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    color: var(--shiko-accent);
    white-space: nowrap;
}
.shiko-ty-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.shiko-ty-item-thumb {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.shiko-ty-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.shiko-ty-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--shiko-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shiko-ty-item-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(228, 3, 3, 0.12);
    color: var(--shiko-accent);
    font-weight: 600;
    margin-top: 3px;
    width: fit-content;
}
.shiko-ty-item-qty {
    font-size: 12px;
    color: var(--shiko-text-muted);
}
.shiko-ty-items-table tfoot td {
    padding: 10px 0;
    font-size: 13px;
    color: var(--shiko-text-secondary);
}
.shiko-ty-items-table tfoot td:last-child {
    text-align: right;
}
.shiko-ty-discount-row td {
    color: #22c55e !important;
}
.shiko-ty-total-row td {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--shiko-text) !important;
    border-bottom: none !important;
    padding-top: 14px !important;
    border-top: 2px solid var(--shiko-border);
}
.shiko-ty-total-row td:last-child {
    color: var(--shiko-accent) !important;
    font-size: 18px !important;
}


/* ─── Thankyou: Contact Support Card ─── */
.shiko-ty-support-card{background:var(--shiko-bg-secondary);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:24px;margin-top:16px}
.shiko-ty-support-buttons{display:flex;gap:12px;flex-wrap:wrap}
.shiko-ty-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;font-weight:600;text-decoration:none;font-size:14px;transition:transform .15s,box-shadow .15s}
.shiko-ty-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.shiko-ty-btn-whatsapp{background:#25d366;color:#fff}
.shiko-ty-btn-retry{background:var(--shiko-accent);color:#fff}

/* ─── AI DevTools: Chat Interface ─── */
.shiko-ai-chat-wrap{max-width:760px;margin:20px auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.shiko-ai-chat-container{background:var(--shiko-chat-bg);border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.shiko-ai-chat-header{background:linear-gradient(135deg,#6c3fa0,#1a1f71);padding:16px 20px;display:flex;align-items:center;gap:12px;color:#fff}
.shiko-ai-chat-header-dot{width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.5);animation:shiko-chat-pulse 2s infinite}
@keyframes shiko-chat-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.shiko-ai-chat-header-title{font-size:15px;font-weight:600}
.shiko-ai-chat-header-sub{font-size:12px;opacity:.7}
.shiko-ai-chat-body{padding:20px;max-height:500px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.shiko-ai-msg{display:flex;gap:10px;max-width:85%;animation:shiko-fadein .3s ease}
@keyframes shiko-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.shiko-ai-msg-assistant{align-self:flex-start}
.shiko-ai-msg-user{align-self:flex-end;flex-direction:row-reverse}
.shiko-ai-msg-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.shiko-ai-msg-assistant .shiko-ai-msg-avatar{background:linear-gradient(135deg,#6c3fa0,#1a1f71);color:#fff}
.shiko-ai-msg-user .shiko-ai-msg-avatar{background:var(--shiko-chat-bubble-bg);color:var(--shiko-chat-bubble-text)}
.shiko-ai-msg-bubble{padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.6;word-break:break-word}
.shiko-ai-msg-assistant .shiko-ai-msg-bubble{background:var(--shiko-chat-bubble-bg);color:var(--shiko-chat-bubble-text);border-bottom-left-radius:4px}
.shiko-ai-msg-user .shiko-ai-msg-bubble{background:linear-gradient(135deg,#6c3fa0,#4f46e5);color:#fff;border-bottom-right-radius:4px}
.shiko-ai-msg-time{font-size:11px;color:var(--shiko-chat-time);margin-top:4px;padding:0 42px}
.shiko-ai-msg-user .shiko-ai-msg-time{text-align:right}
.shiko-ai-chat-input{display:flex;gap:10px;padding:16px 20px;background:var(--shiko-chat-input-bg);border-top:1px solid var(--shiko-chat-divider)}
.shiko-ai-chat-input textarea{flex:1;background:var(--shiko-chat-textarea-bg);border:1px solid var(--shiko-chat-textarea-border);border-radius:10px;padding:10px 14px;color:var(--shiko-chat-textarea-text);font-size:14px;resize:none;min-height:42px;font-family:inherit}
.shiko-ai-chat-input textarea:focus{outline:none;border-color:#6c3fa0}
.shiko-ai-chat-send{background:linear-gradient(135deg,#6c3fa0,#4f46e5);color:#fff;border:none;border-radius:10px;padding:0 18px;cursor:pointer;font-size:18px;transition:transform .1s}
.shiko-ai-chat-send:hover{transform:scale(1.05)}
.shiko-ai-chat-send:active{transform:scale(.95)}


/* ======================================================================
 * v3.2.50 — My Account page (REWRITE of 3.2.49 block)
 *
 * Fixes from 3.2.49 based on live render:
 *  - Nuke WC's stock float/width overrides that were collapsing the
 *    sidebar to ~30% of a narrow parent (producing an 80px sidebar)
 *  - Force parent-wrapper max-width release so .shiko-myaccount can
 *    hit its own 1280px target
 *  - Better responsive breakpoints (2col at 1024+, tight at 720-1023,
 *    stacked below 720)
 *  - Referral input+button stacks under 600px so COPY doesn't wrap
 *  - Loyalty card min-width prevents word-per-line text break
 *  - Orders grid collapses earlier (600px instead of 480px)
 * ====================================================================== */

/* ── Break out of legacy WC float layout ─────────────────────────────── */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ── Release parent max-width constraints so our grid can breathe ───── */
body.woocommerce-account .site-main,
body.woocommerce-account main#main,
body.woocommerce-account main#primary,
body.woocommerce-account .content-area,
body.woocommerce-account article.page,
body.woocommerce-account article.type-page,
body.woocommerce-account .entry-content {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}

/* Hide default WC page title on account screen */
.woocommerce-account .entry-title,
.woocommerce-account .page-title,
.woocommerce-account h1.page-title { display: none; }

/* Our own breadcrumb (rendered by WC) should stay visible and aligned */
body.woocommerce-account .woocommerce-breadcrumb,
body.woocommerce-account .shiko-breadcrumb {
	max-width: var(--shiko-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: 16px 20px 0;
	box-sizing: border-box;
}

/* ── Layout grid ────────────────────────────────────────────────────── */
.shiko-myaccount {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	max-width: var(--shiko-max-width);
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.shiko-myaccount-nav {
	background: var(--shiko-bg-secondary);
	border: 1px solid var(--shiko-border);
	border-radius: var(--shiko-radius-lg);
	padding: 18px 12px;
	position: sticky;
	top: 20px;
	box-shadow: var(--shiko-card-shadow);
	min-width: 0;
}

.shiko-myac-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 8px 16px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--shiko-border);
}
.shiko-myac-avatar {
	width: 42px; height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--shiko-primary), var(--shiko-accent));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .5px;
}
.shiko-myac-user-info { min-width: 0; flex: 1 1 auto; }
.shiko-myac-user-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--shiko-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shiko-myac-user-tier {
	font-size: 11px;
	color: var(--shiko-success);
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* Nav list */
.shiko-myac-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.shiko-myac-nav-item { margin: 1px 0; list-style: none; }
.shiko-myac-nav-item > a,
.woocommerce-account .woocommerce-MyAccount-navigation-link > a,
.shiko-myaccount-nav .shiko-myac-nav-item > a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	color: var(--shiko-text-secondary) !important;
	text-decoration: none !important;
	border-radius: var(--shiko-radius);
	font-size: 14px;
	transition: background .15s, color .15s;
}
.shiko-myac-nav-item > a:hover {
	background: var(--shiko-bg-tertiary);
	color: var(--shiko-text) !important;
}
.shiko-myac-nav-item.is-active > a {
	background: rgba(228, 3, 3, 0.1);
	color: var(--shiko-accent) !important;
	font-weight: 500;
	position: relative;
}
.shiko-myac-nav-item.is-active > a::before {
	content: '';
	position: absolute;
	left: 0; top: 8px; bottom: 8px;
	width: 2px;
	background: var(--shiko-accent);
	border-radius: 0 2px 2px 0;
}
.shiko-myac-nav-icon {
	display: inline-flex;
	width: 18px; height: 18px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.shiko-myac-nav-icon svg { width: 18px; height: 18px; }
.shiko-myac-nav-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shiko-myac-nav-badge {
	background: var(--shiko-accent);
	color: #fff;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 600;
	line-height: 1.3;
	flex-shrink: 0;
}
.shiko-myac-nav-divider {
	height: 1px;
	background: var(--shiko-border);
	margin: 10px 0;
	list-style: none;
}
.shiko-myac-nav-item.is-logout > a { color: var(--shiko-text-muted) !important; }
.shiko-myac-nav-item.is-logout > a:hover {
	background: rgba(228, 3, 3, 0.08);
	color: var(--shiko-accent) !important;
}

/* ── Main content ───────────────────────────────────────────────────── */
.shiko-myaccount-content { min-width: 0; }

/* Welcome */
.shiko-myac-welcome { margin: 0 0 24px; }
.shiko-myac-welcome-title {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--shiko-text);
}
.shiko-myac-greet { color: var(--shiko-accent); }
.shiko-myac-welcome-sub {
	color: var(--shiko-text-secondary);
	margin: 0;
	font-size: 14px;
}

/* Metrics */
.shiko-myac-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}
.shiko-myac-metric {
	background: var(--shiko-bg-secondary);
	border: 1px solid var(--shiko-border);
	border-radius: var(--shiko-radius-lg);
	padding: 18px 20px;
	position: relative;
	overflow: hidden;
	min-width: 0;
}
.shiko-myac-metric::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 3px; height: 100%;
	background: var(--shiko-accent);
}
.shiko-myac-metric-label {
	font-size: 11px;
	color: var(--shiko-text-secondary);
	text-transform: uppercase;
	letter-spacing: .6px;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	font-weight: 600;
}
.shiko-myac-metric-label svg { color: var(--shiko-accent); flex-shrink: 0; }
.shiko-myac-metric-value {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--shiko-text);
}
.shiko-myac-metric-value--dim { color: var(--shiko-text-muted); }
.shiko-myac-metric-sub {
	font-size: 12px;
	color: var(--shiko-text-muted);
	margin-top: 6px;
}
.shiko-myac-metric-sub--soon { color: var(--shiko-success); }
.shiko-myac-up { color: var(--shiko-success); font-weight: 600; }

/* Section */
.shiko-myac-section { margin-bottom: 28px; }
.shiko-myac-section-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 8px;
}
.shiko-myac-section-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--shiko-text);
}
.shiko-myac-section-link {
	color: var(--shiko-accent);
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}
.shiko-myac-section-link:hover { opacity: .85; }

/* Orders grid */
.shiko-myac-orders {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
}
.shiko-myac-order {
	background: var(--shiko-bg-secondary);
	border: 1px solid var(--shiko-border);
	border-radius: var(--shiko-radius-lg);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color .15s;
	min-width: 0;
}
.shiko-myac-order:hover { border-color: var(--shiko-border-hover); }

.shiko-myac-order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.shiko-myac-order-id {
	font-weight: 600;
	font-size: 14px;
	color: var(--shiko-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shiko-myac-order-num {
	color: var(--shiko-text-secondary);
	font-weight: 500;
	margin-inline-start: 4px;
}
.shiko-myac-status-pill {
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 999px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	white-space: nowrap;
}
.shiko-myac-status-pill::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.shiko-myac-status-processing { background: rgba(255, 179, 71, 0.13); color: #d4a017; }
.shiko-myac-status-completed  { background: rgba(0, 200, 150, 0.13); color: #0a9971; }
.shiko-myac-status-pending    { background: rgba(59, 130, 246, 0.13); color: #2563eb; }
.shiko-myac-status-on-hold    { background: rgba(100, 116, 139, 0.13); color: #64748b; }
.shiko-myac-status-cancelled  { background: rgba(228, 3, 3, 0.10); color: var(--shiko-accent); }
.shiko-myac-status-refunded   { background: rgba(100, 116, 139, 0.13); color: #64748b; }
.shiko-myac-status-failed     { background: rgba(228, 3, 3, 0.10); color: var(--shiko-accent); }

.shiko-myac-order-body {
	display: flex;
	gap: 12px;
	align-items: center;
	min-width: 0;
}
.shiko-myac-order-thumb {
	width: 56px; height: 56px;
	border-radius: var(--shiko-radius);
	background: var(--shiko-bg-tertiary);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--shiko-text-muted);
	font-size: 11px;
	font-weight: 600;
	border: 1px solid var(--shiko-border);
	overflow: hidden;
}
.shiko-myac-order-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.shiko-myac-order-items { flex: 1 1 auto; min-width: 0; }
.shiko-myac-order-title {
	font-size: 14px;
	margin: 0 0 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	color: var(--shiko-text);
}
.shiko-myac-order-meta {
	font-size: 12px;
	color: var(--shiko-text-muted);
}
.shiko-myac-meta-sep { margin: 0 6px; opacity: .5; }

.shiko-myac-order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
	border-top: 1px solid var(--shiko-border);
	gap: 8px;
	flex-wrap: wrap;
}
.shiko-myac-order-total {
	font-weight: 700;
	font-size: 16px;
	color: var(--shiko-accent);
}
.shiko-myac-order-total .amount { font-weight: 700; }
.shiko-myac-order-cta {
	font-size: 12px;
	color: var(--shiko-text-secondary);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border-radius: var(--shiko-radius);
	border: 1px solid var(--shiko-border);
	text-decoration: none;
	transition: all .15s;
	white-space: nowrap;
}
.shiko-myac-order-cta:hover {
	color: var(--shiko-accent);
	border-color: var(--shiko-accent);
}

/* Empty state */
.shiko-myac-empty {
	background: var(--shiko-bg-secondary);
	border: 1px dashed var(--shiko-border);
	border-radius: var(--shiko-radius-lg);
	padding: 32px 20px;
	text-align: center;
}
.shiko-myac-empty p { color: var(--shiko-text-secondary); margin: 0 0 16px; }
.shiko-myac-btn {
	display: inline-block;
	padding: 10px 20px;
	background: var(--shiko-accent);
	color: #fff !important;
	border-radius: var(--shiko-radius);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border: none;
}
.shiko-myac-btn:hover { background: var(--shiko-accent-hover); }

/* Referral + Loyalty split */
.shiko-myac-two-col {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
	gap: 12px;
}
.shiko-myac-referral {
	background: linear-gradient(135deg, rgba(183, 8, 10, 0.10), rgba(228, 3, 3, 0.02));
	border: 1px solid rgba(228, 3, 3, 0.25);
	border-radius: var(--shiko-radius-lg);
	padding: 22px;
	position: relative;
	overflow: hidden;
	min-width: 0;
}
.shiko-myac-referral::after {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(228, 3, 3, 0.15), transparent 70%);
	pointer-events: none;
}
.shiko-myac-referral-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	position: relative;
}
.shiko-myac-referral-header svg { color: var(--shiko-accent); flex-shrink: 0; }
.shiko-myac-referral-header h3 {
	font-size: 18px;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 700;
	color: var(--shiko-text);
}
.shiko-myac-referral-sub {
	color: var(--shiko-text-secondary);
	font-size: 13px;
	margin: 0 0 16px;
	position: relative;
}
.shiko-myac-referral-input {
	display: flex;
	gap: 8px;
	position: relative;
	flex-wrap: wrap;
}
.shiko-myac-referral-input input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 10px 12px;
	background: var(--shiko-input-bg);
	border: 1px solid var(--shiko-border);
	border-radius: var(--shiko-radius);
	color: var(--shiko-text);
	font-size: 12px;
	font-family: ui-monospace, Menlo, Monaco, 'Cascadia Code', monospace;
}
.shiko-myac-referral-input input:focus {
	outline: none;
	border-color: var(--shiko-accent);
}
.shiko-myac-copy-btn {
	padding: 10px 18px;
	background: var(--shiko-accent);
	color: #fff;
	border: none;
	border-radius: var(--shiko-radius);
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .5px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background .15s;
}
.shiko-myac-copy-btn:hover { background: var(--shiko-primary); }

/* Loyalty card */
.shiko-myac-loyalty {
	background: var(--shiko-bg-secondary);
	border: 1px solid var(--shiko-border);
	border-radius: var(--shiko-radius-lg);
	padding: 18px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	min-width: 240px;
}
.shiko-myac-loyalty-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	gap: 8px;
}
.shiko-myac-loyalty-label {
	font-size: 11px;
	color: var(--shiko-text-secondary);
	text-transform: uppercase;
	letter-spacing: .6px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shiko-myac-loyalty-header svg { color: var(--shiko-success); flex-shrink: 0; }
.shiko-myac-loyalty-num {
	font-size: 40px;
	font-weight: 700;
	color: var(--shiko-success);
	line-height: 1;
	letter-spacing: -0.02em;
}
.shiko-myac-loyalty-num-small {
	font-size: 14px;
	color: var(--shiko-text-muted);
	font-weight: 500;
	margin-inline-start: 4px;
}
.shiko-myac-loyalty-pts-label {
	font-size: 11px;
	color: var(--shiko-text-muted);
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.shiko-myac-loyalty-bar {
	width: 100%;
	height: 6px;
	background: var(--shiko-bg-tertiary);
	border-radius: 3px;
	margin-top: 14px;
	overflow: hidden;
}
.shiko-myac-loyalty-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--shiko-success), var(--shiko-accent));
	border-radius: 3px;
}
.shiko-myac-loyalty-tier-info {
	font-size: 11px;
	color: var(--shiko-text-muted);
	margin-top: 8px;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.shiko-myac-loyalty-coming {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px 8px;
	min-height: 120px;
}
.shiko-myac-loyalty-coming p {
	color: var(--shiko-text-muted);
	font-size: 13px;
	margin: 0;
	line-height: 1.5;
}

/* Quick actions */
.shiko-myac-qa-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.shiko-myac-qa {
	background: var(--shiko-bg-secondary);
	border: 1px solid var(--shiko-border);
	border-radius: var(--shiko-radius-lg);
	padding: 14px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--shiko-text-secondary);
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	transition: all .15s;
	min-width: 0;
}
.shiko-myac-qa svg { color: var(--shiko-accent); flex-shrink: 0; }
.shiko-myac-qa:hover {
	background: var(--shiko-bg-tertiary);
	color: var(--shiko-accent);
	border-color: var(--shiko-border-hover);
	transform: translateY(-1px);
}

/* ── Responsive breakpoints ────────────────────────────────────────── */

/* Tablet: narrower sidebar, same 2-col */
@media (max-width: 1199px) {
	.shiko-myaccount {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 20px;
	}
	.shiko-myac-welcome-title { font-size: 28px; }
}

/* Large-mobile / small-tablet: two-col referral/loyalty collapses */
@media (max-width: 959px) {
	.shiko-myac-two-col {
		grid-template-columns: 1fr;
	}
	.shiko-myac-loyalty { min-width: 0; }
}

/* Mobile: sidebar → horizontal icon strip across top */
@media (max-width: 767px) {
	.shiko-myaccount {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 14px;
	}
	.shiko-myaccount-nav {
		position: static;
		padding: 12px;
	}
	.shiko-myac-user {
		padding: 4px 4px 12px;
		margin-bottom: 10px;
	}
	/* Turn nav list into horizontal scrolling chip strip */
	.shiko-myac-nav-list {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.shiko-myac-nav-list::-webkit-scrollbar { display: none; }
	.shiko-myac-nav-item { margin: 0; flex-shrink: 0; }
	.shiko-myac-nav-item > a {
		padding: 8px 14px;
		white-space: nowrap;
	}
	.shiko-myac-nav-divider { display: none; }
	.shiko-myac-nav-item.is-active > a::before { display: none; }

	.shiko-myac-metrics { grid-template-columns: 1fr; gap: 10px; }
	.shiko-myac-qa-grid { grid-template-columns: repeat(2, 1fr); }
	.shiko-myac-welcome-title { font-size: 24px; }
}

/* Small mobile: referral button stacks below input */
@media (max-width: 599px) {
	.shiko-myac-referral-input input { flex-basis: 100%; }
	.shiko-myac-copy-btn {
		flex-basis: 100%;
		justify-content: center;
	}
	.shiko-myac-orders { grid-template-columns: 1fr; }
	.shiko-myac-referral { padding: 18px; }
	.shiko-myac-metric { padding: 16px; }
	.shiko-myac-metric-value { font-size: 26px; }
}

/* ── WC's own pages (Orders, Downloads, Address, etc.) card wrapper ─── */
.shiko-myaccount-content > .woocommerce-notices-wrapper + *,
.shiko-myaccount-content > *:not(.shiko-myac-dashboard):not(.woocommerce-notices-wrapper):not(script) {
	background: var(--shiko-bg-secondary);
	border: 1px solid var(--shiko-border);
	border-radius: var(--shiko-radius-lg);
	padding: 24px;
	margin-bottom: 16px;
}
.shiko-myaccount-content .woocommerce-orders-table,
.shiko-myaccount-content .woocommerce-MyAccount-downloads,
.shiko-myaccount-content table.shop_table {
	border-color: var(--shiko-border);
	background: transparent;
}
.shiko-myaccount-content .woocommerce-orders-table th,
.shiko-myaccount-content table.shop_table th {
	background: var(--shiko-bg-tertiary);
	color: var(--shiko-text-secondary);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.shiko-myaccount-content .woocommerce-button.button,
.shiko-myaccount-content a.button,
.shiko-myaccount-content button.button {
	background: var(--shiko-accent);
	color: #fff;
	border: none;
	border-radius: var(--shiko-radius);
	padding: 8px 16px;
	font-weight: 600;
}
.shiko-myaccount-content .woocommerce-button.button:hover {
	background: var(--shiko-accent-hover);
}

/* Small mobile: WC tables become stacked cards automatically (WC's
 * default responsive behavior) — just make sure our overrides don't
 * break them. */
@media (max-width: 599px) {
	.shiko-myaccount-content table.shop_table_responsive tbody td {
		display: block;
		text-align: right;
	}
}
/* 3.2.58: Cart contact capture prompt */
.shiko-ccr-prompt {
    background: var(--shiko-surface, #1a1a2e);
    border: 1px solid var(--shiko-primary, #B7080A);
    border-radius: var(--shiko-radius-lg, 12px);
    padding: 20px;
    margin: 20px 0;
    max-width: 600px;
}
.shiko-ccr-prompt[dir="rtl"] {
    direction: rtl;
    text-align: right;
}
.shiko-ccr-prompt-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--shiko-text-primary, #e0e0e0);
    margin: 0 0 12px;
}
.shiko-ccr-prompt-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}
.shiko-ccr-field {
    flex: 1 1 100%;
}
.shiko-ccr-field--phone {
    flex: 1 1 60%;
}
.shiko-ccr-field--email {
    flex: 1 1 40%;
}
@media (max-width: 600px) {
    .shiko-ccr-field--phone,
    .shiko-ccr-field--email {
        flex: 1 1 100%;
    }
}
.shiko-ccr-field label {
    display: block;
    font-size: 13px;
    color: var(--shiko-text-secondary, #999);
    margin-bottom: 4px;
}
.shiko-ccr-field input[type="tel"],
.shiko-ccr-field input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--shiko-border, #333);
    border-radius: var(--shiko-radius, 8px);
    background: var(--shiko-bg, #0d0d1a);
    color: var(--shiko-text-primary, #e0e0e0);
    font-size: 15px;
    box-sizing: border-box;
}
.shiko-ccr-field input[type="tel"]:focus,
.shiko-ccr-field input[type="email"]:focus {
    outline: 2px solid var(--shiko-primary, #B7080A);
    outline-offset: 1px;
    border-color: var(--shiko-primary, #B7080A);
}
.shiko-ccr-field input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--shiko-surface, #1a1a2e);
}
.shiko-ccr-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}
.shiko-ccr-submit {
    background: var(--shiko-primary, #B7080A);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: var(--shiko-radius, 8px);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.shiko-ccr-submit:hover {
    background: var(--shiko-accent, #E40303);
}
.shiko-ccr-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.shiko-ccr-skip {
    font-size: 13px;
    color: var(--shiko-text-secondary, #999);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.shiko-ccr-skip:hover {
    color: var(--shiko-text-primary, #e0e0e0);
}
.shiko-ccr-notice {
    font-size: 12px;
    color: var(--shiko-text-secondary, #999);
    margin-top: 10px;
}
.shiko-ccr-error {
    color: var(--shiko-accent, #E40303);
    font-size: 13px;
    margin-top: 6px;
    display: none;
}
.shiko-ccr-error.is-visible {
    display: block;
}
.shiko-ccr-toast {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--shiko-primary, #B7080A);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--shiko-radius, 8px);
    font-size: 14px;
    font-weight: 600;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.shiko-ccr-toast.is-visible {
    display: block;
}

/* ========================================================================
 * Feature 007 — Save cart via WhatsApp button (3.2.60)
 * Sits above the Tier 2 form (shiko-ccr) via woocommerce_after_cart_table
 * priority 9. Mobile-first, RTL-safe via logical properties.
 * ======================================================================== */
.shiko-cart-save-wa {
    max-width: 640px;
    margin-block: 20px;
}
.shiko-cart-save-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding-block: 12px;
    padding-inline: 18px;
    background: #B7080A;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.05s ease;
}
.shiko-cart-save-wa-btn:hover,
.shiko-cart-save-wa-btn:focus {
    background: #E40303;
    color: #fff;
    text-decoration: none;
}
.shiko-cart-save-wa-btn:active {
    transform: translateY(1px);
}
.shiko-cart-save-wa-icon {
    font-size: 18px;
    line-height: 1;
}
.shiko-cart-save-wa-hint {
    margin-block: 8px 0;
    font-size: 13px;
    color: var(--shiko-text-secondary, #555);
    text-align: center;
}
@media (min-width: 640px) {
    .shiko-cart-save-wa-btn {
        font-size: 16px;
    }
}

/* Product-page variant renders in the single-product summary; keep the same
 * visual shape but allow it to sit inline with other action buttons. */
.shiko-product-save-wa {
    margin-block: 14px;
}
/* 3.3.70: keep the inline WhatsApp SVG aligned with the label and
   render in white via currentColor inheritance from the button. */
.shiko-product-save-wa-btn .shiko-wa-icon {
    display: inline-flex;
    align-items: center;
    color: #fff;
    line-height: 0;
}
/* 3.3.71: Buy now CTA uses charcoal so it visually differentiates from
   the brand-red Add to cart button. Two equal-prominence reds compete
   for attention; charcoal-vs-red gives a clear "express checkout"
   secondary action. */
body.shiko-theme .shiko-buy-now-btn,
.shiko-buy-now-btn {
    background: #1a1a1a !important;
    color: #fff !important;
    border: 2px solid #1a1a1a !important;
    margin-inline-start: 8px;
}
body.shiko-theme .shiko-buy-now-btn:hover,
body.shiko-theme .shiko-buy-now-btn:focus,
.shiko-buy-now-btn:hover,
.shiko-buy-now-btn:focus {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

/* WhatsApp save-product button — official WA green (#25D366) so the
   action is instantly recognizable. Brand red stays for Shiko-internal
   CTAs; green specifically signals "this opens WhatsApp" (3.3.71).
   Scoped under body.shiko-theme so the white label wins over the
   global `body.shiko-theme a { color: var(--shiko-accent) }` rule
   (3.3.68 — same fix pattern as the search-popup CTA in 3.3.66). */
body.shiko-theme .shiko-product-save-wa-btn,
.shiko-product-save-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block: 10px;
    padding-inline: 16px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s ease;
}
body.shiko-theme .shiko-product-save-wa-btn span,
.shiko-product-save-wa-btn span {
    color: #fff;
}
body.shiko-theme .shiko-product-save-wa-btn:hover,
body.shiko-theme .shiko-product-save-wa-btn:focus,
.shiko-product-save-wa-btn:hover,
.shiko-product-save-wa-btn:focus {
    background: #1ebe5a;
    color: #fff;
    text-decoration: none;
}

/* ============================================
   COOKIE CONSENT BANNER — PDPL Compliant
   v3.3.1
   ============================================ */

.shiko-consent-banner {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 9999;
    background: var(--shiko-bg-secondary);
    border-block-start: 1px solid var(--shiko-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.shiko-consent-inner {
    max-width: var(--shiko-max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.shiko-consent-text {
    margin: 0;
    flex: 1 1 300px;
    color: var(--shiko-text-secondary);
}

.shiko-consent-text a {
    color: var(--shiko-primary);
    text-decoration: underline;
}

.shiko-consent-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.shiko-consent-btn {
    padding: 8px 16px;
    border-radius: var(--shiko-radius);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.shiko-consent-accept {
    background: var(--shiko-primary);
    color: #fff;
}
.shiko-consent-accept:hover,
.shiko-consent-accept:focus {
    background: var(--shiko-accent-hover);
}

.shiko-consent-essential {
    background: transparent;
    color: var(--shiko-text);
    border-color: var(--shiko-border);
}
.shiko-consent-essential:hover,
.shiko-consent-essential:focus {
    border-color: var(--shiko-text-muted);
}

.shiko-consent-manage {
    background: transparent;
    color: var(--shiko-text-muted);
    text-decoration: underline;
    border: none;
    padding: 8px;
}

.shiko-consent-manage-panel {
    width: 100%;
    margin-block-start: 12px;
    padding: 12px;
    background: var(--shiko-bg-tertiary);
    border-radius: var(--shiko-radius);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shiko-consent-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--shiko-text);
}

.shiko-consent-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--shiko-primary);
}

.shiko-consent-toggle input[disabled] + span {
    opacity: 0.7;
}

.shiko-consent-save {
    align-self: flex-start;
    background: var(--shiko-primary);
    color: #fff;
    margin-block-start: 4px;
}

/* Mobile: stack layout */
@media (max-width: 640px) {
    .shiko-consent-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .shiko-consent-actions {
        justify-content: center;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .shiko-consent-banner,
    .shiko-consent-btn {
        transition: none;
    }
}

/* ============================================
   MY SUBSCRIPTIONS — v3.3.3
   ============================================ */

.shiko-myac-subscriptions h2 {
    margin-bottom: 8px;
}
.shiko-myac-sub-desc {
    color: var(--shiko-text-muted);
    margin-bottom: 24px;
}

.shiko-sub-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shiko-sub-card {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 20px;
    transition: border-color 0.2s ease;
}
.shiko-sub-card:hover {
    border-color: var(--shiko-border-hover);
}

.shiko-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.shiko-sub-header h3 {
    margin: 0;
    font-size: 16px;
}

.shiko-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.shiko-sub-badge--active {
    background: #d4edda;
    color: #155724;
}
.shiko-sub-badge--paused {
    background: #fff3cd;
    color: #856404;
}
.shiko-sub-badge--cancelled {
    background: #f8d7da;
    color: #721c24;
}

.shiko-sub-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.shiko-sub-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.shiko-sub-label {
    font-size: 12px;
    color: var(--shiko-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.shiko-sub-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--shiko-text);
}

.shiko-sub-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--shiko-bg-tertiary);
    border-radius: var(--shiko-radius);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--shiko-primary);
}
.shiko-sub-alert svg {
    flex-shrink: 0;
}

.shiko-sub-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.shiko-sub-form-inline {
    display: inline;
}

.shiko-myac-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--shiko-text-muted);
}
.shiko-myac-empty .button {
    margin-top: 12px;
}

[data-theme="dark"] .shiko-sub-badge--active {
    background: #1e3a2f;
    color: #75c798;
}
[data-theme="dark"] .shiko-sub-badge--paused {
    background: #3d3418;
    color: #e0c060;
}
[data-theme="dark"] .shiko-sub-badge--cancelled {
    background: #3a1e22;
    color: #e07070;
}

/* ===================================================================
 * BLOG REVAMP v3.3.6 — Archive + Single
 * =================================================================== */

/* Reading Progress */
.shiko-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}
.shiko-reading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--shiko-primary), var(--shiko-accent));
    transition: width 0.1s linear;
}

/* Blog Hero */
.shiko-blog-hero {
    position: relative;
    padding: 80px 0 48px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--shiko-bg-secondary) 0%, var(--shiko-bg-primary) 100%);
}
.shiko-blog-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 30%, rgba(183,8,10,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 70%, rgba(228,3,3,0.06) 0%, transparent 55%);
    pointer-events: none;
}
.shiko-blog-hero-particles {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: radial-gradient(circle, var(--shiko-text-muted) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.shiko-blog-hero-inner {
    position: relative;
    text-align: center;
}
.shiko-blog-hero-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--shiko-accent);
    margin-bottom: 12px;
    padding: 4px 12px;
    border: 1px solid var(--shiko-accent);
    border-radius: 100px;
}
.shiko-blog-hero-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--shiko-text-primary);
    margin: 0 0 16px;
    line-height: 1.15;
}
.shiko-blog-hero-desc {
    font-size: 1.1rem;
    color: var(--shiko-text-secondary);
    max-width: 560px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

/* Category Pills */
.shiko-blog-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.shiko-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--shiko-text-secondary);
    background: var(--shiko-bg-tertiary);
    border: 1px solid var(--shiko-border);
    transition: all 0.25s ease;
    text-decoration: none;
}
.shiko-cat-pill:hover,
.shiko-cat-pill.is-active {
    background: var(--shiko-primary);
    color: #fff;
    border-color: var(--shiko-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(183,8,10,0.25);
}

/* Blog Grid */
.shiko-blog-main {
    padding: 48px 0 80px;
}
.shiko-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

/* Post Card */
.shiko-post-card {
    background: var(--shiko-bg-primary);
    border-radius: var(--shiko-radius-lg, 16px);
    overflow: hidden;
    border: 1px solid var(--shiko-border);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
}
.shiko-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
.shiko-post-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.shiko-post-card-media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.shiko-post-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.shiko-post-card:hover .shiko-post-card-img {
    transform: scale(1.06);
}
.shiko-post-card-img--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Watermark the icon so the fallback reads as a decorative brand
       card, not a broken/empty thumbnail. */
    color: rgba(255,255,255,0.24);
}
.shiko-post-card-img--fallback svg {
    width: 36%;
    height: auto;
    max-width: 140px;
    stroke-width: 1;
}
.shiko-post-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
    pointer-events: none;
}
.shiko-post-card-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 100px;
}
.shiko-post-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, var(--shiko-primary), var(--shiko-accent));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(183,8,10,0.3);
}
.shiko-post-card-body {
    padding: 22px;
}
.shiko-post-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--shiko-text-muted);
    margin-bottom: 10px;
}
.shiko-dot-separator {
    opacity: 0.5;
}
.shiko-post-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--shiko-text-primary);
    margin: 0 0 10px;
}
.shiko-post-card-excerpt {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--shiko-text-secondary);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shiko-post-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--shiko-primary);
    transition: gap 0.25s ease;
}
.shiko-post-card:hover .shiko-post-card-cta {
    gap: 10px;
}

/* Featured Card */
.shiko-post-card.is-featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
}
.shiko-post-card.is-featured .shiko-post-card-media {
    aspect-ratio: auto;
    min-height: 320px;
}
.shiko-post-card.is-featured .shiko-post-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
}
.shiko-post-card.is-featured .shiko-post-card-title {
    font-size: 1.6rem;
}
@media (max-width: 768px) {
    .shiko-post-card.is-featured {
        grid-template-columns: 1fr;
    }
    .shiko-post-card.is-featured .shiko-post-card-media {
        min-height: 220px;
    }
}

/* Empty State */
.shiko-blog-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--shiko-text-muted);
}
.shiko-blog-empty h2 {
    color: var(--shiko-text-primary);
    margin: 16px 0 8px;
}

/* Single Hero v2 — Gaming Aesthetic */
.shiko-single-hero-v2 {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.shiko-single-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.shiko-single-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shiko-single-hero-bg-fallback {
    width: 100%;
    height: 100%;
}
.shiko-single-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,10,15,0.3) 0%, rgba(10,10,15,0.6) 40%, rgba(10,10,15,0.95) 100%);
}
.shiko-single-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    padding: 72px 0 34px;
}
.shiko-single-hero-card {
    width: min(960px, 100%);
    padding: 30px 32px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.18);
    background: linear-gradient(180deg, rgba(11,12,16,0.54), rgba(11,12,16,0.78));
    box-shadow: 0 24px 60px rgba(0,0,0,0.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
}
.shiko-single-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.shiko-single-breadcrumb a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.2s;
}
.shiko-single-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}
.shiko-single-cats {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.shiko-single-cat {
    background: linear-gradient(135deg, rgba(183,8,10,0.8), rgba(228,3,3,0.7));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    border-radius: 100px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(255,255,255,0.15);
}
.shiko-single-cat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(183,8,10,0.4);
}
.shiko-single-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 24px;
    max-width: 900px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.shiko-single-title.is-rtl {
    text-align: right;
    direction: rtl;
    margin-left: auto;
}
.shiko-single-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.shiko-single-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.shiko-single-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    object-fit: cover;
    background: #fff;
}
.shiko-single-author-name {
    display: block;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
}
.shiko-single-author-role {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.shiko-single-meta-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.25);
}
.shiko-single-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}
html[data-theme="light"] .shiko-single-hero-card {
    border-color: rgba(17,18,22,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,247,243,0.94));
    box-shadow: 0 24px 60px rgba(17,18,22,0.14);
    color: var(--shiko-text-primary);
}
html[data-theme="light"] .shiko-single-breadcrumb a,
html[data-theme="light"] .shiko-single-author-role,
html[data-theme="light"] .shiko-single-meta-item {
    color: var(--shiko-text-secondary);
}
html[data-theme="light"] .shiko-single-breadcrumb a:hover,
html[data-theme="light"] .shiko-single-author-name,
html[data-theme="light"] .shiko-single-title {
    color: var(--shiko-text-primary);
}
html[data-theme="light"] .shiko-single-avatar {
    border-color: rgba(183,8,10,0.16);
    box-shadow: 0 10px 24px rgba(183,8,10,0.14);
}
html[data-theme="light"] .shiko-single-meta-divider {
    background: rgba(17,18,22,0.1);
}
@media (max-width: 600px) {
    .shiko-single-hero-v2 { min-height: 420px; }
    .shiko-single-hero-inner { min-height: 420px; padding: 56px 0 24px; }
    .shiko-single-hero-card { padding: 22px 20px; border-radius: 24px; }
    .shiko-single-meta-divider { display: none; }
    .shiko-single-meta { gap: 12px; }
}

/* Proposal 1 — Blog archive PowerUP */
.shiko-blog-hero--powerup {
    padding: 84px 0 52px;
    background:
        radial-gradient(circle at top left, rgba(243,179,61,0.18), transparent 20%),
        radial-gradient(circle at right center, rgba(228,3,3,0.16), transparent 22%),
        linear-gradient(135deg, #090b0f 0%, #1b0a0c 46%, #301012 100%);
}
.shiko-blog-hero--powerup .shiko-blog-hero-bg {
    background:
        radial-gradient(ellipse at 14% 18%, rgba(243,179,61,0.14) 0%, transparent 46%),
        radial-gradient(ellipse at 82% 20%, rgba(183,8,10,0.22) 0%, transparent 45%);
}
.shiko-blog-hero--powerup .shiko-blog-hero-particles {
    opacity: 0.18;
    background-image: radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px);
}
.shiko-blog-hero-inner--powerup {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 28px;
    align-items: stretch;
}
.shiko-blog-hero--powerup .shiko-blog-hero-copy {
    max-width: 760px;
}
html[data-theme="light"] .shiko-blog-hero--powerup {
    background:
        radial-gradient(circle at top left, rgba(243,179,61,0.18), transparent 20%),
        radial-gradient(circle at right center, rgba(228,3,3,0.14), transparent 24%),
        linear-gradient(135deg, #fff6ef 0%, #fffaf7 36%, #fff0f1 100%);
}
html[data-theme="light"] .shiko-blog-hero--powerup .shiko-blog-hero-bg {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(243,179,61,0.1) 0%, transparent 44%),
        radial-gradient(ellipse at 82% 20%, rgba(183,8,10,0.08) 0%, transparent 45%);
}
html[data-theme="light"] .shiko-blog-hero--powerup .shiko-blog-hero-copy {
    padding: 28px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,247,243,0.9));
    border: 1px solid rgba(17,18,22,0.08);
    box-shadow: 0 24px 60px rgba(17,18,22,0.1);
}
html[data-theme="light"] .shiko-blog-hero--powerup .shiko-blog-hero-label {
    color: #8e300f;
    border-color: rgba(142,48,15,0.18);
    background: rgba(183,8,10,0.06);
}
html[data-theme="light"] .shiko-blog-hero--powerup .shiko-blog-hero-title,
html[data-theme="light"] .shiko-powerup-hero-panel-head strong,
html[data-theme="light"] .shiko-powerup-promise strong,
html[data-theme="light"] .shiko-powerup-metric strong {
    color: var(--shiko-text-primary);
}
html[data-theme="light"] .shiko-blog-hero--powerup .shiko-blog-hero-title span {
    color: #b7080a;
}
html[data-theme="light"] .shiko-blog-hero--powerup .shiko-blog-hero-desc,
html[data-theme="light"] .shiko-powerup-hero-panel-head span,
html[data-theme="light"] .shiko-powerup-promise p,
html[data-theme="light"] .shiko-powerup-metric span {
    color: var(--shiko-text-secondary);
}
html[data-theme="light"] .shiko-blog-categories--powerup .shiko-cat-pill {
    color: var(--shiko-text-primary);
    background: rgba(183,8,10,0.06);
    border-color: rgba(183,8,10,0.1);
}
html[data-theme="light"] .shiko-powerup-hero-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,247,243,0.92));
    border-color: rgba(17,18,22,0.08);
    box-shadow: 0 24px 60px rgba(17,18,22,0.1);
}
html[data-theme="light"] .shiko-powerup-metric {
    background: rgba(183,8,10,0.05);
    border-color: rgba(183,8,10,0.08);
}
html[data-theme="light"] .shiko-contact-powerup-locationcard {
    box-shadow: 0 24px 52px rgba(17,18,22,0.16);
}
.shiko-blog-hero--powerup .shiko-blog-hero-label {
    color: #ffd69a;
    border-color: rgba(255,214,154,0.4);
    background: rgba(255,255,255,0.06);
}
.shiko-blog-hero--powerup .shiko-blog-hero-title {
    color: var(--shiko-inverse-text);
    margin-bottom: 18px;
    max-width: 11ch;
}
.shiko-blog-hero--powerup .shiko-blog-hero-title span {
    color: #ffd69a;
}
.shiko-blog-hero--powerup .shiko-blog-hero-desc {
    color: var(--shiko-inverse-text-muted);
    max-width: 58ch;
    margin: 0 0 28px;
}
.shiko-blog-categories--powerup {
    justify-content: flex-start;
}
.shiko-blog-categories--powerup .shiko-cat-pill {
    color: var(--shiko-inverse-text);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}
.shiko-blog-categories--powerup .shiko-cat-pill:hover,
.shiko-blog-categories--powerup .shiko-cat-pill:focus-visible {
    background: linear-gradient(135deg, var(--shiko-primary), var(--shiko-accent));
    border-color: transparent;
}
.shiko-powerup-hero-panel {
    padding: 28px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 60px rgba(0,0,0,0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-self: stretch;
}
.shiko-powerup-hero-panel-head strong,
.shiko-powerup-promise strong {
    display: block;
    color: var(--shiko-inverse-text);
    font-size: 1.05rem;
    font-weight: 800;
}
.shiko-powerup-hero-panel-head span,
.shiko-powerup-promise p {
    display: block;
    color: var(--shiko-inverse-text-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}
.shiko-powerup-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.shiko-powerup-metric {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}
.shiko-powerup-metric strong {
    display: block;
    color: var(--shiko-inverse-text);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}
.shiko-powerup-metric span {
    display: block;
    margin-top: 7px;
    color: var(--shiko-inverse-text-soft);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.shiko-blog-main--powerup {
    padding-top: 34px;
}
.shiko-powerup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}
.shiko-powerup-feature-wrap {
    margin-bottom: 22px;
}
.shiko-post-card.is-featured-powerup {
    background: var(--shiko-surface-elevated-strong);
    border: 1px solid var(--shiko-surface-elevated-border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shiko-surface-shadow-strong);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.shiko-post-card.is-featured-powerup .shiko-post-card-media {
    min-height: 340px;
    aspect-ratio: auto;
}
.shiko-post-card.is-featured-powerup .shiko-post-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.08) 54%, transparent 100%);
}
.shiko-post-card.is-featured-powerup .shiko-post-card-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.shiko-post-card.is-featured-powerup .shiko-post-card-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.04;
    margin-bottom: 14px;
}
.shiko-post-card.is-featured-powerup .shiko-post-card-excerpt {
    -webkit-line-clamp: 4;
    font-size: 1rem;
}
.shiko-blog-grid--powerup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.shiko-blog-grid--powerup .shiko-post-card {
    border-radius: 24px;
    box-shadow: var(--shiko-surface-shadow);
}
.shiko-blog-grid--powerup .shiko-post-card:hover {
    box-shadow: var(--shiko-surface-shadow-strong);
}
.shiko-blog-grid--powerup .shiko-post-card-body {
    padding: 20px;
}
.shiko-post-card-img--fallback {
    /* Brand gradient + subtle radial highlights so the card has depth
       even when no featured image is uploaded. */
    background:
        radial-gradient(circle at 78% 22%, rgba(255,255,255,0.10), transparent 42%),
        radial-gradient(circle at 18% 85%, rgba(0,0,0,0.22), transparent 44%),
        linear-gradient(135deg, var(--shiko-primary), var(--shiko-accent));
}
.shiko-powerup-sidebar {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 18px;
}
.shiko-powerup-rail-card {
    padding: 22px;
    border-radius: 24px;
    background: var(--shiko-surface-elevated);
    border: 1px solid var(--shiko-surface-elevated-border);
    box-shadow: var(--shiko-surface-shadow);
}
.shiko-powerup-rail-card--dark {
    color: var(--shiko-inverse-text);
    background:
        radial-gradient(circle at top right, rgba(243,179,61,0.2), transparent 22%),
        linear-gradient(145deg, #111318 0%, #2b0f11 48%, #710809 100%);
}
.shiko-powerup-rail-card--dark p {
    color: var(--shiko-inverse-text-muted);
}
.shiko-powerup-rail-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.shiko-powerup-rail-card h2,
.shiko-powerup-rail-card h3 {
    margin: 14px 0 8px;
    font-size: 1.3rem;
    line-height: 1.16;
}
.shiko-powerup-rail-card p {
    margin: 0;
    color: var(--shiko-text-secondary);
    line-height: 1.65;
}
.shiko-powerup-rail-head {
    margin-bottom: 12px;
}
.shiko-powerup-rail-head span {
    color: var(--shiko-text-muted);
    font-size: 13px;
}
.shiko-powerup-rail-list {
    display: grid;
    gap: 12px;
}
.shiko-powerup-rail-item {
    display: block;
    padding: 15px 16px;
    border-radius: 18px;
    background: var(--shiko-surface-soft);
    border: 1px solid var(--shiko-surface-soft-border);
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.shiko-powerup-rail-item strong {
    display: block;
    color: var(--shiko-text-primary);
    font-size: 14px;
    line-height: 1.35;
}
.shiko-powerup-rail-item span {
    display: block;
    margin-top: 6px;
    color: var(--shiko-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.shiko-powerup-rail-item:hover,
.shiko-powerup-rail-item:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(183,8,10,0.22);
    box-shadow: 0 14px 28px rgba(183,8,10,0.12);
    background: rgba(183,8,10,0.06);
}

/* Proposal 1 — Contact support-first layout */
.shiko-contact-powerup {
    padding: 34px 0 80px;
    background:
        radial-gradient(circle at top left, rgba(243,179,61,0.12), transparent 18%),
        radial-gradient(circle at top right, rgba(228,3,3,0.08), transparent 20%),
        linear-gradient(180deg, var(--shiko-bg-primary) 0%, var(--shiko-bg-secondary) 100%);
}
.shiko-contact-powerup-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
    gap: 22px;
    margin-bottom: 18px;
}
.shiko-contact-powerup-copy,
.shiko-contact-powerup-proof {
    padding: 30px;
    border-radius: 28px;
    border: 1px solid var(--shiko-surface-elevated-border);
    box-shadow: var(--shiko-surface-shadow-strong);
}
.shiko-contact-powerup-copy {
    color: var(--shiko-inverse-text);
    background:
        radial-gradient(circle at top right, rgba(243,179,61,0.18), transparent 18%),
        linear-gradient(140deg, #0d1014 0%, #2a0d10 52%, #710809 100%);
}
.shiko-contact-powerup-copy h1 {
    margin: 14px 0 14px;
    color: var(--shiko-inverse-text);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 0.98;
    max-width: 11ch;
}
.shiko-contact-powerup-copy p {
    margin: 0;
    max-width: 54ch;
    color: var(--shiko-inverse-text-muted);
    line-height: 1.7;
}
.shiko-contact-powerup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.shiko-contact-powerup-whatsapp {
    background: linear-gradient(135deg, #20c15a, #25D366);
    border-color: #25D366;
}
.shiko-contact-powerup-actions .shiko-btn-outline {
    color: var(--shiko-inverse-text);
    border-color: rgba(255,255,255,0.34);
    background: rgba(7,9,13,0.24);
}
.shiko-contact-powerup-actions .shiko-btn-outline:hover,
.shiko-contact-powerup-actions .shiko-btn-outline:focus-visible {
    color: var(--shiko-inverse-text);
    border-color: rgba(255,255,255,0.58);
    background: rgba(7,9,13,0.48);
}
.shiko-contact-powerup-proof {
    display: grid;
    gap: 12px;
    align-content: start;
    background: var(--shiko-surface-elevated);
}
.shiko-contact-powerup-proof-card {
    padding: 18px;
    border-radius: 18px;
    background: var(--shiko-surface-soft);
    border: 1px solid var(--shiko-surface-soft-border);
}
.shiko-contact-powerup-proof-card strong {
    display: block;
    color: var(--shiko-text-primary);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}
.shiko-contact-powerup-proof-card span {
    display: block;
    margin-top: 8px;
    color: var(--shiko-text-secondary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.shiko-contact-powerup-proof-link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    margin-top: 4px;
    color: var(--shiko-primary);
    font-weight: 800;
    text-decoration: none;
}
.shiko-contact-powerup-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.shiko-contact-powerup-step {
    padding: 20px;
    border-radius: 22px;
    background: var(--shiko-surface-elevated);
    border: 1px solid var(--shiko-surface-elevated-border);
    box-shadow: var(--shiko-surface-shadow);
}
.shiko-contact-powerup-step b {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--shiko-primary), var(--shiko-accent));
    margin-bottom: 12px;
}
.shiko-contact-powerup-step strong {
    display: block;
    color: var(--shiko-text-primary);
    font-size: 15px;
    line-height: 1.35;
}
.shiko-contact-powerup-step span {
    display: block;
    margin-top: 7px;
    color: var(--shiko-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.shiko-contact-powerup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
.shiko-contact-powerup-sectionhead h2 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 2vw, 2rem);
    line-height: 1.05;
}
.shiko-contact-powerup-sectionhead p {
    margin: 0;
    color: var(--shiko-text-secondary);
    line-height: 1.7;
}
.shiko-contact-powerup-form-card {
    margin-top: 16px;
    padding: 28px;
    border-radius: 28px;
    background: var(--shiko-surface-elevated);
    border: 1px solid var(--shiko-surface-elevated-border);
    box-shadow: var(--shiko-surface-shadow-strong);
}
.shiko-contact-powerup-form-card > :first-child {
    margin-top: 0;
}
.shiko-contact-powerup-form-card form,
.shiko-contact-powerup-form-card .wpforms-container,
.shiko-contact-powerup-form-card .wpcf7 {
    color: var(--shiko-text-primary);
}
.shiko-contact-powerup-form-card input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.shiko-contact-powerup-form-card select,
.shiko-contact-powerup-form-card textarea {
    width: 100%;
    background: var(--shiko-input-bg);
    color: var(--shiko-text-primary);
    border: 1px solid var(--shiko-border);
}
.shiko-contact-powerup-form-card input::placeholder,
.shiko-contact-powerup-form-card textarea::placeholder {
    color: var(--shiko-text-muted);
}
.shiko-contact-powerup-form-card input[type="submit"],
.shiko-contact-powerup-form-card button[type="submit"],
.shiko-contact-powerup-form-card .wpforms-submit,
.shiko-contact-powerup-form-card .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: var(--shiko-radius);
    border: 1px solid var(--shiko-accent);
    background: var(--shiko-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background var(--shiko-transition), border-color var(--shiko-transition), transform var(--shiko-transition);
}
.shiko-contact-powerup-form-card input[type="submit"]:hover,
.shiko-contact-powerup-form-card button[type="submit"]:hover,
.shiko-contact-powerup-form-card .wpforms-submit:hover,
.shiko-contact-powerup-form-card .wpcf7-submit:hover {
    background: var(--shiko-accent-hover);
    border-color: var(--shiko-accent-hover);
    transform: translateY(-1px);
}
.shiko-contact-powerup-form-card .wpcf7-not-valid-tip,
.shiko-contact-powerup-form-card .wpforms-error,
.shiko-contact-powerup-form-card .wpforms-field label,
.shiko-contact-powerup-form-card label {
    color: var(--shiko-text-primary);
}
.shiko-contact-powerup-form-card .wpcf7-response-output,
.shiko-contact-powerup-form-card .wpforms-confirmation-container-full {
    margin: 18px 0 0;
    border-radius: 14px;
    border: 1px solid var(--shiko-border);
    background: var(--shiko-surface-soft);
    color: var(--shiko-text-primary);
}
.shiko-contact-powerup-directgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 20px;
    align-items: start;
}
.shiko-contact-powerup-locationcard {
    padding: 24px;
    min-height: 320px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(243,179,61,0.18), transparent 24%),
        linear-gradient(145deg, #1a0f12 0%, #3b1114 54%, #7e090a 100%);
    color: var(--shiko-inverse-text);
    box-shadow: var(--shiko-surface-shadow-strong);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.shiko-contact-powerup-locationeyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: var(--shiko-inverse-text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.shiko-contact-powerup-locationcard h3 {
    margin: 14px 0 10px;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.1;
    color: var(--shiko-inverse-text);
}
.shiko-contact-powerup-locationcard p,
.shiko-contact-powerup-locationcard li {
    color: var(--shiko-inverse-text-muted);
    line-height: 1.7;
}
.shiko-contact-powerup-locationcard ul {
    margin: 18px 0 22px;
    padding-left: 18px;
}
.shiko-contact-powerup-locationcard li + li {
    margin-top: 8px;
}
.shiko-contact-powerup-locationcard .shiko-btn {
    align-self: flex-start;
    color: var(--shiko-inverse-text);
    border-color: rgba(255,255,255,0.28);
}
.shiko-contact-powerup-locationcard .shiko-btn:hover,
.shiko-contact-powerup-locationcard .shiko-btn:focus-visible {
    border-color: rgba(255,255,255,0.5);
    color: var(--shiko-inverse-text);
    background: rgba(255,255,255,0.08);
}
.shiko-contact-powerup-detailstack {
    display: grid;
    gap: 14px;
}
.shiko-contact-powerup-detailcard {
    padding: 18px;
    border-radius: 18px;
    background: var(--shiko-surface-soft);
    border: 1px solid var(--shiko-surface-soft-border);
}
.shiko-contact-powerup-detailcard strong {
    display: block;
    margin-bottom: 8px;
    color: var(--shiko-text-primary);
    font-size: 0.95rem;
}
.shiko-contact-powerup-detailcard span,
.shiko-contact-powerup-detailcard a {
    color: var(--shiko-text-secondary);
    line-height: 1.65;
    text-decoration: none;
}
.shiko-contact-powerup-detailcard a:hover,
.shiko-contact-powerup-detailcard a:focus-visible {
    color: var(--shiko-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.shiko-contact-powerup-partners {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.shiko-contact-powerup-partners a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(183,8,10,0.06);
    border: 1px solid rgba(183,8,10,0.12);
    color: var(--shiko-text-primary);
}
.shiko-contact-powerup-sidebar {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
}
.shiko-contact-powerup-supportcard {
    padding: 20px;
    border-radius: 22px;
    background: var(--shiko-surface-elevated);
    border: 1px solid var(--shiko-surface-elevated-border);
    box-shadow: var(--shiko-surface-shadow);
}
.shiko-contact-powerup-supportcard.is-highlight {
    color: var(--shiko-inverse-text);
    background:
        radial-gradient(circle at top right, rgba(243,179,61,0.18), transparent 18%),
        linear-gradient(140deg, #0f1115 0%, #2b0d10 54%, #770809 100%);
}
.shiko-contact-powerup-supportcard.is-highlight p,
.shiko-contact-powerup-supportcard.is-highlight li {
    color: var(--shiko-inverse-text-muted);
}
.shiko-contact-powerup-supportcard h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    line-height: 1.2;
}
.shiko-contact-powerup-supportcard.is-highlight h3 {
    color: var(--shiko-inverse-text);
}
.shiko-contact-powerup-supportcard p {
    margin: 0;
    color: var(--shiko-text-secondary);
    line-height: 1.65;
}
.shiko-contact-powerup-supportcard a {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    color: var(--shiko-primary);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.shiko-contact-powerup-supportcard.is-highlight a {
    color: var(--shiko-inverse-text);
}
.shiko-contact-powerup-supportcard ul {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--shiko-text-secondary);
}
.shiko-contact-powerup-supportcard li::marker {
    color: var(--shiko-primary);
}
.shiko-contact-powerup-supportcard.is-highlight li::marker {
    color: var(--shiko-inverse-text);
}
.shiko-contact-powerup-supportcard li + li {
    margin-top: 8px;
}
.shiko-contact-powerup-faq {
    margin-top: 28px;
}
.shiko-contact-powerup-faqgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.shiko-contact-powerup-faqcard {
    padding: 22px;
    border-radius: 22px;
    background: var(--shiko-surface-elevated);
    border: 1px solid var(--shiko-surface-elevated-border);
    box-shadow: var(--shiko-surface-shadow);
}
.shiko-contact-powerup-faqcard h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    line-height: 1.3;
}
.shiko-contact-powerup-faqcard p {
    margin: 0;
    color: var(--shiko-text-secondary);
    line-height: 1.65;
}

[data-theme="dark"] .shiko-powerup-rail-card--dark,
[data-theme="dark"] .shiko-contact-powerup-copy,
[data-theme="dark"] .shiko-contact-powerup-supportcard.is-highlight {
    box-shadow: 0 24px 50px rgba(0,0,0,0.32);
}

[data-theme="dark"] .shiko-contact-powerup {
    background:
        radial-gradient(circle at top left, rgba(243,179,61,0.08), transparent 18%),
        radial-gradient(circle at top right, rgba(228,3,3,0.1), transparent 20%),
        linear-gradient(180deg, var(--shiko-bg-primary) 0%, var(--shiko-bg-secondary) 100%);
}

[data-theme="dark"] .shiko-powerup-rail-item:hover,
[data-theme="dark"] .shiko-powerup-rail-item:focus-visible {
    background: rgba(255,85,85,0.08);
    border-color: rgba(255,85,85,0.34);
    box-shadow: 0 14px 28px rgba(0,0,0,0.24);
}

@media (max-width: 1080px) {
    .shiko-blog-hero-inner--powerup,
    .shiko-powerup-layout,
    .shiko-contact-powerup-hero,
    .shiko-contact-powerup-grid,
    .shiko-contact-powerup-directgrid {
        grid-template-columns: 1fr;
    }
    .shiko-powerup-sidebar,
    .shiko-contact-powerup-sidebar {
        position: static;
    }
}

@media (max-width: 860px) {
    .shiko-post-card.is-featured-powerup,
    .shiko-blog-grid--powerup,
    .shiko-contact-powerup-steps,
    .shiko-contact-powerup-faqgrid {
        grid-template-columns: 1fr;
    }
    .shiko-post-card.is-featured-powerup .shiko-post-card-media {
        min-height: 240px;
    }
    .shiko-powerup-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .shiko-blog-hero--powerup,
    .shiko-contact-powerup {
        padding-top: 26px;
    }
    .shiko-powerup-hero-panel,
    .shiko-contact-powerup-copy,
    .shiko-contact-powerup-proof,
    .shiko-contact-powerup-form-card,
    .shiko-contact-powerup-supportcard,
    .shiko-contact-powerup-faqcard {
        padding: 20px;
        border-radius: 22px;
    }
    .shiko-blog-hero--powerup .shiko-blog-hero-title,
    .shiko-contact-powerup-copy h1 {
        max-width: none;
    }
    .shiko-contact-powerup-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .shiko-contact-powerup-locationcard {
        min-height: auto;
        padding: 20px;
    }
}

/* Single Layout */
.shiko-single-wrap {
    padding: 48px 0 80px;
    background: var(--shiko-bg-primary);
}
.shiko-single-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 960px) {
    .shiko-single-layout {
        grid-template-columns: 1fr;
    }
}

/* TOC Sidebar */
.shiko-single-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
@media (max-width: 960px) {
    .shiko-single-sidebar {
        position: static;
        order: -1;
        margin-bottom: 20px;
    }
}
.shiko-toc {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg, 16px);
    padding: 22px;
}
.shiko-toc-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
    color: var(--shiko-text-primary);
}
.shiko-toc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.shiko-toc-list a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--shiko-text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}
.shiko-toc-list a:hover,
.shiko-toc-list a.is-active {
    background: rgba(183,8,10,0.08);
    color: var(--shiko-primary);
    border-left-color: var(--shiko-primary);
}
.shiko-toc-list a.shiko-toc-h3 {
    padding-left: 22px;
    font-size: 12px;
}

/* Social Share */
.shiko-share {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg, 16px);
    padding: 22px;
}
.shiko-share-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
    color: var(--shiko-text-primary);
}
.shiko-share-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.shiko-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--shiko-bg-tertiary);
    border: 1px solid var(--shiko-border);
    color: var(--shiko-text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
}
.shiko-share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}
.shiko-share-btn--fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.shiko-share-btn--tw:hover { background: #0f1419; color: #fff; border-color: #0f1419; }
.shiko-share-btn--wa:hover { background: #25d366; color: #fff; border-color: #25d366; }
.shiko-share-btn--cp:hover { background: var(--shiko-primary); color: #fff; border-color: var(--shiko-primary); }
.shiko-share-btn.is-copied::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
    font-size: 10px;
    background: var(--shiko-primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
}
.shiko-share-btn.is-copy-error::after {
    content: '!';
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
    font-size: 10px;
    background: var(--shiko-accent);
    color: #fff;
    padding: 2px 7px;
    border-radius: 4px;
}

/* Single Content */
.shiko-single-content {
    min-width: 0;
}
.shiko-single-entry {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--shiko-text-primary);
}
.shiko-single-entry h2,
.shiko-single-entry h3 {
    margin-top: 40px;
    margin-bottom: 16px;
    color: var(--shiko-text-primary);
    scroll-margin-top: 100px;
}
.shiko-single-entry h2 {
    font-size: 1.6rem;
    font-weight: 800;
}
.shiko-single-entry h3 {
    font-size: 1.25rem;
    font-weight: 700;
}
.shiko-single-entry p {
    margin-bottom: 20px;
}
.shiko-single-entry img {
    border-radius: var(--shiko-radius, 12px);
    margin: 24px 0;
    max-width: 100%;
    height: auto;
}
.shiko-single-entry blockquote {
    border-left: 4px solid var(--shiko-primary);
    background: var(--shiko-bg-secondary);
    padding: 20px 24px;
    margin: 24px 0;
    border-radius: 0 var(--shiko-radius, 12px) var(--shiko-radius, 12px) 0;
    font-style: italic;
    color: var(--shiko-text-secondary);
}
.shiko-single-entry ul,
.shiko-single-entry ol {
    margin: 0 0 20px 20px;
    padding-left: 10px;
}
.shiko-single-entry li {
    margin-bottom: 8px;
}

/* Tags */
.shiko-single-tags {
    margin: 36px 0;
    padding-top: 24px;
    border-top: 1px solid var(--shiko-border);
}
.shiko-single-tags h3 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
}
.shiko-single-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.shiko-single-tag {
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--shiko-bg-tertiary);
    border: 1px solid var(--shiko-border);
    font-size: 13px;
    color: var(--shiko-text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}
.shiko-single-tag:hover {
    background: var(--shiko-primary);
    color: #fff;
    border-color: var(--shiko-primary);
}

/* Author Box v2 */
.shiko-author-box {
    display: flex;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, var(--shiko-bg-secondary), rgba(183,8,10,0.04));
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg, 16px);
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}
.shiko-author-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(183,8,10,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.shiko-author-box-avatar-wrap {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.shiko-author-box-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(183,8,10,0.2);
    box-shadow: 0 4px 16px rgba(183,8,10,0.15);
    display: block;
    background: #fff;
}
.shiko-author-box-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.shiko-author-box-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--shiko-text-muted);
    margin-bottom: 4px;
}
.shiko-author-box-name {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--shiko-text-primary);
}
.shiko-author-box-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--shiko-text-secondary);
    margin: 0 0 16px;
}
.shiko-author-box-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--shiko-primary), var(--shiko-accent));
    color: #ffffff !important;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    align-self: flex-start;
    border: none;
    cursor: pointer;
}
.shiko-author-box-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(183,8,10,0.35);
    color: #ffffff !important;
}
@media (max-width: 480px) {
    .shiko-author-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .shiko-author-box-link {
        align-self: center;
    }
}

/* Post Navigation */
.shiko-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 36px 0;
}
.shiko-post-nav-item {
    padding: 22px;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg, 16px);
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}
.shiko-post-nav-item:hover {
    border-color: var(--shiko-primary);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.shiko-post-nav-item--next {
    text-align: right;
}
.shiko-post-nav-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--shiko-text-muted);
    margin-bottom: 6px;
}
.shiko-post-nav-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--shiko-text-primary);
    line-height: 1.3;
}
@media (max-width: 600px) {
    .shiko-post-nav {
        grid-template-columns: 1fr;
    }
    .shiko-post-nav-item--next {
        text-align: left;
    }
}

/* Related Posts */
.shiko-related-posts {
    margin: 48px 0 0;
}
.shiko-related-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 24px;
    color: var(--shiko-text-primary);
}
.shiko-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.shiko-related-card a {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg, 16px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.shiko-related-card a:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.1);
}
.shiko-related-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.shiko-related-card-img--fallback {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--shiko-primary), var(--shiko-accent));
}
.shiko-related-card-body {
    padding: 16px 18px;
}
.shiko-related-card-body time {
    font-size: 12px;
    color: var(--shiko-text-muted);
    display: block;
    margin-bottom: 6px;
}
.shiko-related-card-body h3 {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--shiko-text-primary);
}
@media (max-width: 768px) {
    .shiko-related-grid {
        grid-template-columns: 1fr;
    }
}

/* Back to Blog */
.shiko-back-to-blog {
    margin: 40px 0;
    text-align: center;
}

/* Comments */
.shiko-single-comments {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--shiko-border);
}

/* Animation Utility */
/* v3.3.9: Removed opacity:0 start state — posts were invisible if JS failed to fire.
   Fade-up animation replaced with instant visibility for reliability. */
[data-animate="fade-up"] {
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--delay, 0s);
}
[data-animate="fade-up"].is-visible {
    /* no-op — cards are visible by default */
}

/* v3.3.31: Contrast + layout fixes found in theme-wide audit
   ─────────────────────────────────────────────────────── */

/* Blog "Trending now" card always has a dark gradient background, so its
   heading/body text must stay light-on-dark in BOTH modes. The global
   `h1,h2,h3,h4,h5,h6 { color: var(--shiko-text) }` rule wins over the
   container's inherited color for headings, and `.shiko-page-content
   h2/h3` further overrides in page contexts. Pin explicit colors. */
.shiko-powerup-rail-card--dark h2,
.shiko-powerup-rail-card--dark h3 {
    color: var(--shiko-inverse-text);
}
.shiko-powerup-rail-card--dark p {
    color: var(--shiko-inverse-text-muted);
}

/* Blog lead story: the featured media container is `min-height: 340px`
   with `aspect-ratio: auto`, but the <picture> wrapper that WebP plugins
   (ShortPixel / WebP Express) substitute for the raw <img> is
   `display:inline` by default — its `height: 100%` doesn't resolve, and
   the inner img uses its intrinsic 16:9 aspect, topping at ~282px. The
   remaining 58px rendered as an empty grey strip below the image.
   Force the picture box AND inner img to fill the media container. */
.shiko-post-card.is-featured-powerup .shiko-post-card-media {
    height: 100%;
}
.shiko-post-card.is-featured-powerup .shiko-post-card-img {
    width: 100%;
    height: 100%;
    display: block;
}
.shiko-post-card.is-featured-powerup .shiko-post-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Account login/register split-brand panel sits on a dark red gradient
   regardless of mode, so title/tagline must stay white. The panel is
   wrapped by `.entry-content.shiko-page-content` (page.php shell) so
   `.shiko-page-content h2/h3` at main.css:2538 was winning on specificity
   over `.shiko-account-split-title { color:#fff }`. Panel is
   `display:none` below 960px, so scope these overrides to match. */
@media (min-width: 960px) {
    .shiko-account-split-brand .shiko-account-split-title,
    .shiko-page-content .shiko-account-split-title {
        color: #fff;
    }
    .shiko-account-split-brand .shiko-account-split-tagline,
    .shiko-page-content .shiko-account-split-tagline {
        color: rgba(255,255,255,0.7);
    }
}

/* ═══════════════════════════════════════════════════════════
   v3.3.33 — Footer v2 (banner + accordion grid)
   Replaces the old .shiko-footer-proof / .shiko-footer-grid
   layout. Old rules become dead code; left in place for now to
   avoid churn on an already-stable stylesheet, will clean up
   in a later housekeeping pass.
   ═══════════════════════════════════════════════════════════ */
.shiko-footer-v2 {
    background: var(--shiko-bg-secondary);
    border-top: 1px solid var(--shiko-border);
    color: var(--shiko-text);
    padding-top: 0; /* reset any prior padding */
}

/* ── CTA banner ── */
.shiko-footer-banner {
    background:
        radial-gradient(circle at 20% 50%, rgba(228,3,3,0.22), transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(243,179,61,0.10), transparent 35%),
        linear-gradient(135deg, #0B0C10 0%, #1a0408 55%, #420a0c 100%);
    color: #fff;
    padding: 24px 32px;
    position: relative;
    overflow: hidden;
}
[dir="rtl"] .shiko-footer-banner {
    background:
        radial-gradient(circle at 80% 50%, rgba(228,3,3,0.22), transparent 40%),
        radial-gradient(circle at 15% 20%, rgba(243,179,61,0.10), transparent 35%),
        linear-gradient(225deg, #0B0C10 0%, #1a0408 55%, #420a0c 100%);
}
.shiko-footer-banner::after {
    content: '';
    position: absolute;
    inset-inline-end: -80px; top: 50%;
    transform: translateY(-50%) rotate(12deg);
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(228,3,3,0.22), transparent 60%);
    filter: blur(30px);
    pointer-events: none;
}
.shiko-footer-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.shiko-footer-banner-copy { max-width: 640px; }
.shiko-footer-banner-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    margin-bottom: 8px;
    color: #fff;
}
.shiko-footer-banner-kicker::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 0 0 rgba(37,211,102,0.65);
    animation: shiko-footer-pulse 2s infinite;
}
@keyframes shiko-footer-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
    .shiko-footer-banner-kicker::before { animation: none; }
}
.shiko-footer-banner-title {
    font-size: clamp(22px, 3.2vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 6px;
    color: #fff;
    font-weight: 700;
}
[dir="rtl"] .shiko-footer-banner-title { line-height: 1.25; letter-spacing: 0; }
.shiko-footer-banner-title em {
    font-style: normal;
    background: linear-gradient(90deg, #FF6B6B, #FFB347);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[dir="rtl"] .shiko-footer-banner-title em {
    background: linear-gradient(270deg, #FF6B6B, #FFB347);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.shiko-footer-banner-long,
.shiko-footer-banner-short {
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    max-width: 520px;
    margin: 0;
    line-height: 1.55;
}
[dir="rtl"] .shiko-footer-banner-long,
[dir="rtl"] .shiko-footer-banner-short { font-size: 14px; line-height: 1.7; }
.shiko-footer-banner-short { display: none; }

.shiko-footer-banner-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.shiko-footer-v2 .shiko-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}
/* Specificity must beat base `body.shiko-theme a` (0,1,2). */
/* 3.3.71: footer Chat-on-WhatsApp uses official WA green so the action
   is instantly recognizable (matches the save-WA button on PDPs). */
.shiko-footer-v2 a.shiko-footer-btn-primary,
body.shiko-theme .shiko-footer-v2 .shiko-footer-btn-primary {
    background: #25D366;
    color: #fff;
    box-shadow: 0 10px 24px rgba(37,211,102,0.32);
}
.shiko-footer-v2 a.shiko-footer-btn-primary:hover,
body.shiko-theme .shiko-footer-v2 .shiko-footer-btn-primary:hover,
.shiko-footer-v2 a.shiko-footer-btn-primary:focus-visible,
body.shiko-theme .shiko-footer-v2 .shiko-footer-btn-primary:focus-visible {
    background: #1ebe5a;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37,211,102,0.42);
    color: #fff;
}
.shiko-footer-v2 a.shiko-footer-btn-ghost,
body.shiko-theme .shiko-footer-v2 .shiko-footer-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.26);
}
.shiko-footer-v2 a.shiko-footer-btn-ghost:hover,
body.shiko-theme .shiko-footer-v2 .shiko-footer-btn-ghost:hover,
.shiko-footer-v2 a.shiko-footer-btn-ghost:focus-visible,
body.shiko-theme .shiko-footer-v2 .shiko-footer-btn-ghost:focus-visible {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.shiko-footer-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; }

/* ── Body + grid ── */
.shiko-footer-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 32px 14px;
}
.shiko-footer-v2 .shiko-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--shiko-border);
    margin-top: 0;
    padding-top: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    /* Grid containers default children to `min-width: auto` which lets
       them grow past the track size; force shrinkable tracks. */
    min-width: 0;
}
.shiko-footer-v2 .shiko-footer-col,
.shiko-footer-v2 .shiko-footer-grid > * {
    min-width: 0;
    max-width: 100%;
}
/* Tablet: legacy base rule + older MQ would collapse to 1fr 1fr in this
   range; align v2 to that visual expectation while keeping accordion
   machinery consistent (brand spans + 3 details columns). */
@media (max-width: 1024px) and (min-width: 861px) {
    .shiko-footer-v2 .shiko-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .shiko-footer-v2 .shiko-footer-brand { grid-column: 1 / -1; }
}
.shiko-footer-v2 .shiko-footer-brand {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    /* Allow the grid column to shrink below its content's intrinsic
       width so the horizontally-scrollable pills don't push the whole
       page wider than the viewport on mobile. Without this,
       `min-width: auto` on grid items bleeds out and forces
       `html`/`body` to expand. */
    min-width: 0;
}
.shiko-footer-v2 .shiko-footer-store-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 4px;
    color: var(--shiko-text);
}
.shiko-footer-v2 .shiko-footer-desc {
    color: var(--shiko-text-secondary);
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 380px;
}
[dir="rtl"] .shiko-footer-v2 .shiko-footer-desc { font-size: 14px; line-height: 1.7; }

/* Trust pills — single row, horizontal scroll on narrow.
   `min-width: 0` + `max-width: 100%` keep the container from
   pushing its parent (and ultimately body) wider than the viewport
   on mobile; `overflow-x: auto` then scrolls internally. */
.shiko-footer-pills {
    display: flex;
    flex-wrap: wrap;          /* was: nowrap — caused right-edge clipping at every viewport */
    row-gap: 6px;
    column-gap: 5px;
    margin-bottom: 12px;
    min-width: 0;
    max-width: 100%;
}
.shiko-footer-v2 .shiko-footer-pill,
body.shiko-theme .shiko-footer-v2 .shiko-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--shiko-border);
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-text);
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}
[dir="rtl"] .shiko-footer-pill { font-size: 12px; }
.shiko-footer-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
.shiko-footer-pill--star svg { color: #00b67a; fill: #00b67a; }
.shiko-footer-pill--wa svg { color: #25D366; fill: #25D366; }
.shiko-footer-pill--bolt svg { color: var(--shiko-accent); fill: var(--shiko-accent); }
.shiko-footer-pill--heart svg { color: var(--shiko-accent); fill: var(--shiko-accent); }
a.shiko-footer-pill:hover { border-color: var(--shiko-accent); color: var(--shiko-accent); }

/* Social icons override */
.shiko-footer-v2 .shiko-footer-social { display: flex; gap: 8px; margin: 0; }
.shiko-footer-v2 .shiko-social-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--shiko-bg-tertiary);
    border: 1px solid var(--shiko-border);
    color: var(--shiko-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.shiko-footer-v2 .shiko-social-icon:hover {
    background: var(--shiko-primary);
    color: #fff;
    border-color: var(--shiko-primary);
}
.shiko-footer-v2 .shiko-social-icon svg { width: 14px; height: 14px; }

/* Columns — <details> acts as accordion on mobile */
.shiko-footer-col { padding: 0; background: none; border: none; }
.shiko-footer-col > summary {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--shiko-text-muted);
    margin-bottom: 10px;
    font-weight: 700;
    list-style: none;
    cursor: default;
}
[dir="rtl"] .shiko-footer-col > summary { font-size: 12px; letter-spacing: 0; }
.shiko-footer-col > summary::-webkit-details-marker { display: none; }
.shiko-footer-col > summary::marker { content: ''; }
.shiko-footer-v2 .shiko-footer-links { margin: 0; padding: 0; list-style: none; }
.shiko-footer-v2 .shiko-footer-links li { margin: 0; }
.shiko-footer-v2 .shiko-footer-links li + li { margin-top: 7px; }
.shiko-footer-v2 .shiko-footer-links a,
body.shiko-theme .shiko-footer-v2 .shiko-footer-links a {
    font-size: 13px;
    color: var(--shiko-text-secondary);
    transition: color 0.15s ease;
    text-decoration: none;
}
[dir="rtl"] .shiko-footer-v2 .shiko-footer-links a { font-size: 14px; }
.shiko-footer-v2 .shiko-footer-links a:hover,
body.shiko-theme .shiko-footer-v2 .shiko-footer-links a:hover { color: var(--shiko-accent); }
@media (min-width: 861px) {
    .shiko-footer-col > summary { pointer-events: none; }
    /* No-JS fallback: force link lists visible on desktop even if the
       <details> never gets the `open` attribute (JS disabled, CSP
       blocking inline script, or slow hydration). */
    .shiko-footer-v2 .shiko-footer-col > .shiko-footer-links {
        display: block;
    }
}

/* Payment rail — official logos. Dark-mode chip prevents dark logos
   from disappearing on the dark footer background. */
.shiko-footer-pay-rail {
    padding: 14px 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.shiko-footer-pay-rail .shiko-payment-logo {
    height: 20px;
    width: auto;
    display: block;
    opacity: 0.9;
    transition: opacity 0.15s ease;
    /* 3.3.87: payment logos are decorative trust badges, not buttons. The
       earlier hover-lift made them feel tappable on mobile (where :hover
       fires on tap), and Clarity reported recurring rage-click clusters
       on payment logos like "Fawry" on PDPs (footer renders globally).
       Disable pointer events so taps fall through to the rail container,
       and drop the translateY lift so there's no button affordance. */
    pointer-events: none;
}
.shiko-footer-pay-rail .shiko-payment-logo:hover { opacity: 1; }
[data-theme="dark"] .shiko-footer-pay-rail .shiko-payment-logo {
    background: rgba(255,255,255,0.92);
    padding: 3px 6px;
    border-radius: 4px;
    height: 22px;
    box-sizing: content-box;
    opacity: 1;
}

/* Bottom bar */
.shiko-footer-v2 .shiko-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0;
    font-size: 12px;
    color: var(--shiko-text-muted);
    border-top: 1px solid var(--shiko-border);
    margin-top: 4px;
    background: none;
    text-align: initial;
}
.shiko-footer-v2 .shiko-footer-bottom-left { display: flex; align-items: center; gap: 14px; }
.shiko-footer-v2 .shiko-footer-bottom .shiko-theme-version { opacity: 0.4; font-size: 10px; margin: 0; }
.shiko-footer-v2 .shiko-footer-back-top,
body.shiko-theme .shiko-footer-v2 .shiko-footer-back-top {
    display: inline-flex;
    align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--shiko-border);
    border-radius: 999px;
    font-size: 11px;
    color: var(--shiko-text-secondary);
    transition: all 0.15s ease;
    text-decoration: none;
}
[dir="rtl"] .shiko-footer-back-top { font-size: 12px; }
.shiko-footer-back-top:hover { background: var(--shiko-primary); color: #fff; border-color: var(--shiko-primary); }

/* Mobile */
@media (max-width: 860px) {
    .shiko-footer-banner { padding: 18px 20px; }
    .shiko-footer-banner-inner { flex-direction: column; align-items: stretch; gap: 12px; }
    .shiko-footer-banner-copy { max-width: none; }
    .shiko-footer-banner-title { font-size: 20px; line-height: 1.15; margin-bottom: 4px; }
    [dir="rtl"] .shiko-footer-banner-title { line-height: 1.3; }
    .shiko-footer-banner-long { display: none; }
    .shiko-footer-banner-short { display: block; font-size: 13px; line-height: 1.5; }
    [dir="rtl"] .shiko-footer-banner-short { font-size: 14px; line-height: 1.6; }
    .shiko-footer-banner-kicker { font-size: 9px; padding: 3px 9px 3px 7px; }
    [dir="rtl"] .shiko-footer-banner-kicker { font-size: 11px; }
    .shiko-footer-banner-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; }
    .shiko-footer-banner-actions .shiko-footer-btn { padding: 11px 14px; font-size: 13px; justify-content: center; }
    [dir="rtl"] .shiko-footer-banner-actions .shiko-footer-btn { font-size: 14px; }

    .shiko-footer-body { padding: 22px 20px 14px; }
    .shiko-footer-v2 .shiko-footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 10px; }
    .shiko-footer-v2 .shiko-footer-brand { padding-bottom: 18px; border-bottom: 1px solid var(--shiko-border); margin-bottom: 10px; }

    details.shiko-footer-col { border-bottom: 1px solid var(--shiko-border); padding: 0; }
    details.shiko-footer-col > summary {
        padding: 14px 0;
        margin: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
    }
    [dir="rtl"] details.shiko-footer-col > summary { font-size: 13px; }
    details.shiko-footer-col > summary::after {
        content: '+';
        font-size: 18px;
        font-weight: 400;
        color: var(--shiko-text-muted);
    }
    details.shiko-footer-col[open] > summary::after { content: '−'; }
    details.shiko-footer-col .shiko-footer-links { padding: 4px 0 14px; }

    .shiko-footer-pay-rail { padding: 14px 0; gap: 8px 12px; }
    .shiko-footer-pay-rail .shiko-payment-logo { height: 18px; }
    [data-theme="dark"] .shiko-footer-pay-rail .shiko-payment-logo { height: 20px; padding: 2px 5px; }

    .shiko-footer-v2 .shiko-footer-bottom { flex-direction: column; gap: 8px; padding: 12px 0 0; text-align: center; }
    .shiko-footer-v2 .shiko-footer-bottom-left { flex-direction: column; gap: 2px; }
    /* Mobile already has a fixed FAB back-to-top, so hide the inline pill. */
    .shiko-footer-v2 .shiko-footer-back-top { display: none; }
}

/* Override old footer container rules that would otherwise conflict */
.shiko-footer-v2 .shiko-footer-proof,
.shiko-footer-v2 .shiko-footer-payments-bar { display: none; }

/* ═══════════════════════════════════════════════════════════
   v3.3.35 — Header v2 (announcement + inline search + pill cart)
   Scoped to `.shiko-header-v2`. Base `.shiko-header` rules at
   line ~251 still apply; v2 rules extend and override.
   ═══════════════════════════════════════════════════════════ */

/* Announcement strip — above the header */
.shiko-annc {
    background: linear-gradient(90deg, #0B0C10 0%, #1a0408 100%);
    color: rgba(255,255,255,0.86);
    font-size: 11px;
    letter-spacing: 0.03em;
    line-height: 1.4;
}
[dir="rtl"] .shiko-annc {
    background: linear-gradient(270deg, #0B0C10 0%, #1a0408 100%);
    font-size: 12px;
}
.shiko-annc-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    text-align: center;
}
.shiko-annc-dot {
    display: inline-block;
    width: 7px; height: 7px;
    background: #25D366;
    border-radius: 50%;
    margin-inline-end: 2px;
    animation: shiko-annc-pulse 2s infinite;
}
@keyframes shiko-annc-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
    50%     { box-shadow: 0 0 0 5px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
    .shiko-annc-dot { animation: none; }
}
/* 3.3.65: dot colour reflects the live Cairo-time open state. JS swaps
   the .shiko-status-state-* class on the host element. */
.shiko-status-state-opening .shiko-annc-dot {
    background: #FFB347;
    animation: shiko-annc-pulse-opening 2s infinite;
}
.shiko-status-state-closed .shiko-annc-dot {
    background: #aaa;
    animation: none;
}
@keyframes shiko-annc-pulse-opening {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,179,71,0.5); }
    50%     { box-shadow: 0 0 0 5px rgba(255,179,71,0); }
}
.shiko-annc strong { color: #FFB347; font-weight: 800; }
.shiko-annc-sep { opacity: 0.4; }
.shiko-annc a,
body.shiko-theme .shiko-annc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.3);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.shiko-annc a:hover,
body.shiko-theme .shiko-annc a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* Main header v2 — keeps existing `.shiko-header` chrome and tweaks */
.shiko-header-v2 .shiko-header-inner {
    height: 70px;
    max-width: 1280px;
    gap: 24px;
    padding: 0 24px;
}

/* Inline search bar (desktop ≥961px) */
.shiko-header-search-inline {
    /* 3.3.66: was flex: 0 1 280px → squashed to ~155px under flex
       pressure on tighter desktop widths, clipping the placeholder.
       Give it a real minimum so the placeholder always fits. */
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 360px;
    position: relative;
    display: block;
}
.shiko-header-search-inline input[type="search"] {
    width: 100%;
    height: 40px;
    padding-inline-start: 38px;
    padding-inline-end: 14px;
    border: 1px solid var(--shiko-border);
    border-radius: 999px;
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-text);
    /* Force the typed text colour through the autofill / WebKit form-field
       paint pipeline; without -webkit-text-fill-color a Chrome autofill
       leaves the text invisible on dark mode. caret-color guarantees the
       blinking cursor is always seen on top of any background. */
    -webkit-text-fill-color: var(--shiko-text);
    caret-color: var(--shiko-accent);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
}
.shiko-header-search-inline input[type="search"]:-webkit-autofill,
.shiko-header-search-inline input[type="search"]:-webkit-autofill:hover,
.shiko-header-search-inline input[type="search"]:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--shiko-text);
    -webkit-box-shadow: 0 0 0 1000px var(--shiko-bg-tertiary) inset;
    caret-color: var(--shiko-accent);
}
[dir="rtl"] .shiko-header-search-inline input[type="search"] { font-size: 14px; }
.shiko-header-search-inline input[type="search"]:focus {
    border-color: var(--shiko-accent);
    background: var(--shiko-bg-secondary);
    box-shadow: 0 0 0 3px rgba(228,3,3,0.08);
}
.shiko-header-search-inline input[type="search"]::placeholder { color: var(--shiko-text-muted); }
.shiko-header-search-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--shiko-text-muted);
    pointer-events: none;
}
@media (max-width: 1120px) {
    .shiko-header-search-inline { display: none; }
}

/* Bold uppercase nav with red underline hover */
.shiko-header-v2 .shiko-nav { flex: 1; justify-content: center; }
.shiko-header-v2 .shiko-nav-list { gap: 2px; }
.shiko-header-v2 .shiko-nav-list > li > a {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--shiko-text);
    position: relative;
    border-radius: 0;
    background: transparent;
    transition: color 0.15s ease;
}
[dir="rtl"] .shiko-header-v2 .shiko-nav-list > li > a {
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}
.shiko-header-v2 .shiko-nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    inset-inline-start: 14px;
    inset-inline-end: 14px;
    height: 2px;
    background: var(--shiko-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.shiko-header-v2 .shiko-nav-list > li > a:hover,
.shiko-header-v2 .shiko-nav-list > li > a:focus-visible,
.shiko-header-v2 .shiko-nav-list > li.current-menu-item > a,
.shiko-header-v2 .shiko-nav-list > li.current-menu-parent > a {
    color: var(--shiko-accent);
    background: transparent;
}
.shiko-header-v2 .shiko-nav-list > li > a:hover::after,
.shiko-header-v2 .shiko-nav-list > li > a:focus-visible::after,
.shiko-header-v2 .shiko-nav-list > li.current-menu-item > a::after,
.shiko-header-v2 .shiko-nav-list > li.current-menu-parent > a::after {
    transform: scaleX(1);
}

/* Cart pill — red, with "Cart" label + count */
.shiko-header-cart,
body.shiko-theme .shiko-header-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    background: var(--shiko-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-inline-start: 4px;
    box-shadow: 0 4px 12px rgba(228,3,3,0.24);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-decoration: none;
    position: relative;
}
[dir="rtl"] .shiko-header-cart { padding: 0 12px 0 14px; font-size: 14px; }
.shiko-header-cart:hover,
body.shiko-theme .shiko-header-cart:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(228,3,3,0.36);
    color: #fff;
    background: var(--shiko-accent);
}
.shiko-header-cart svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.shiko-header-cart .shiko-header-cart-label { line-height: 1; }
.shiko-header-cart .shiko-cart-count {
    position: static;
    background: rgba(255,255,255,0.22);
    color: #fff;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 800;
    min-width: 0;
    width: auto;
    height: auto;
    border: none;
    transform: none;
}

/* Utility viewport classes */
.shiko-tabletdown-only { display: none; }
@media (max-width: 1120px) {
    .shiko-tabletdown-only { display: inline-flex; }
}

/* Tablet (≤1120px): inline search hides (handled above), uppercase nav
   hides so hamburger takes over, desktop-only icons (theme + account)
   hide to avoid overflow. Announcement strip stays. Hamburger shows
   so the nav is reachable. */
@media (max-width: 1120px) {
    .shiko-header-v2 .shiko-nav { display: none; }
    .shiko-header-v2 .shiko-desktop-only { display: none !important; }
    .shiko-header-v2 .shiko-header-inner { gap: 12px; padding: 0 20px; }
    .shiko-header-v2 .shiko-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* Mobile (≤860px): hide cart label, shrink header height, trim
   announcement strip to "Online now · Track order". */
@media (max-width: 860px) {
    .shiko-annc-inner { padding: 5px 16px; gap: 4px; font-size: 10px; }
    [dir="rtl"] .shiko-annc-inner { font-size: 11px; }
    .shiko-annc .shiko-annc-track { display: none; }
    .shiko-header-v2 .shiko-header-inner { height: 60px; padding: 0 16px; gap: 10px; }
    .shiko-header-v2 .shiko-header-cart {
        margin-inline-start: auto;
        padding: 0 10px;
        height: 34px;
        font-size: 12px;
    }
    .shiko-header-v2 .shiko-header-cart .shiko-header-cart-label { display: none; }
}

/* Feature 019 search-suggest CSS removed in 3.3.48 — see inc/search-translit.php */


[dir="rtl"] .shiko-live-dropdown { left: auto; right: 0; }

/* === Header overflow fix at narrow viewports (3.3.47) ============== *
 * At <=480 px the inner 20-px padding + 10-px action-gap pushed the
 * action group 21 px past the right edge on a 360-px phone, producing
 * a page-level horizontal scroll. Tighten both at <=480 px only. */
@media (max-width: 480px) {
    .shiko-header-v2 .shiko-header-inner { padding: 0 12px; gap: 8px; }
    .shiko-header-v2 .shiko-header-actions { gap: 6px; }
}
@media (max-width: 380px) {
    .shiko-header-v2 .shiko-header-inner { padding: 0 6px; gap: 4px; }
    .shiko-header-v2 .shiko-header-actions { gap: 2px; }
    .shiko-header-v2 .shiko-header-cart { padding-inline: 8px; }
}

/* === Floating bubble auto-quiet (3.3.74 INP fix) ================== *
 * Replaces per-bubble inline style writes from main.js with class +
 * attribute toggles. CSS owns the transition. JS only flips state.
 *
 *   <html class="shiko-bubbles-quiet">  ← while user is scrolling
 *   <element data-shiko-bubble-hide>     ← bubble overlaps a primary CTA
 */
/* .shiko-feedback-btn already gets the opacity transition via its base
   rule above (see "transition: background 0.2s, opacity 0.25s ease"). The
   external bubbles below get opacity-only transitions so we don't clobber
   any background/transform transitions their own plugins ship with. */
.shiko-chatbot-fab,
.chaty-channel {
    transition: opacity 0.25s ease;
}
html.shiko-bubbles-quiet .shiko-feedback-btn,
html.shiko-bubbles-quiet .shiko-chatbot-fab,
html.shiko-bubbles-quiet .chaty-channel {
    opacity: 0.25;
    pointer-events: none;
}
.shiko-feedback-btn[data-shiko-bubble-hide],
.shiko-chatbot-fab[data-shiko-bubble-hide],
.chaty-channel[data-shiko-bubble-hide] {
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .shiko-chatbot-fab,
    .chaty-channel { transition: none; }
}