/*
Theme Name: IndoJaya
Theme URI: https://verdant-quokka-c303dd.netlify.app/
Author: IndoJaya Team
Author URI: https://verdant-quokka-c303dd.netlify.app/
Description: A custom, pixel-perfect WordPress theme for IndoJaya, an online marketplace for authentic Indonesian sambal, snacks, and specialty foods in Singapore. Hand-built with vanilla PHP, HTML5, and CSS3 following the WordPress Theme Handbook — no page builder required.
Version: 2.3.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gobetta
*/

:root {
    --red: #E7332A;
    --red-dark: #9E1B1B;
    --red-deep: #6E1212;
    --cream: #faf9f9;
    --paper: #FFFDF8;
    --kraft: #F1E3C8;
    --kraft-line: #E3CE9F;
    --ink: #2A1712;
    --ink-soft: #5B4A42;
    --gold: #F5A623;
    --gold-deep: #C97E0C;
    --green: #3F8F4E;
    --green-deep: #2A6B37;
    --wa: #25D366;
    --wa-dark: #128C4A;
    --ice: #2E96A8;
    --ice-soft: #DCF1F1;
    --berry: #B0325B;
    --berry-soft: #FBE1EA;
    --line: #F0DCC4;
    --radius: 16px;
    --shadow: 0 10px 30px -12px rgba(110, 18, 18, .28);
    --container-width: 1360px;

    --font-heading: 'Baloo 2', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'Space Grotesk', monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 90px;
}

.admin-bar section[id] {
    scroll-margin-top: 122px;
}

@media screen and (max-width: 782px) {
    .admin-bar section[id] {
        scroll-margin-top: 136px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--cream);
    background-image: radial-gradient(rgba(158, 18, 18, .05) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

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

button {
    font-family: inherit;
}

ul,
ol {
    margin: 0;
}

.wrap {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 640px) {
    .wrap {
        padding: 0 18px;
    }
}

::selection {
    background: var(--gold);
    color: var(--ink);
}

.screen-reader-text,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: 10px 18px;
    z-index: 200;
    border-radius: 0 0 8px 0;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

.skip-link:focus {
    left: 0;
}

/* =====================================================
   INDOJAYA DESIGN SYSTEM — SHARED COMPONENTS (Fase 3)
   ===================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--red-dark);
    background: #FCE7DC;
    border: 1.5px dashed var(--red);
    border-radius: 99px;
    padding: 6px 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: .95rem;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--red);
    color: #fff;
    box-shadow: 0 8px 0 0 var(--red-dark);
}

.btn-primary:hover {
    transform: translateY(2px);
    box-shadow: 0 6px 0 0 var(--red-dark);
}

.btn-primary:active {
    transform: translateY(8px);
    box-shadow: 0 0 0 0 var(--red-dark);
}

.btn-gold {
    background: var(--gold);
    color: #3A2400;
    box-shadow: 0 8px 0 0 var(--gold-deep);
}

.btn-gold:hover {
    transform: translateY(2px);
    box-shadow: 0 6px 0 0 var(--gold-deep);
}

.btn-gold:active {
    transform: translateY(8px);
    box-shadow: 0 0 0 0 var(--gold-deep);
}

.btn-ghost {
    background: transparent;
    color: var(--red-dark);
    border: 2px solid var(--red-dark);
}

.btn-ghost:hover {
    background: var(--red-dark);
    color: #fff;
}

.btn-sm {
    padding: 9px 16px;
    font-size: .82rem;
    border-radius: 9px;
}

.btn:disabled {
    opacity: .6;
    cursor: default;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

.texture-kraft {
    background-color: var(--kraft);
    background-image: radial-gradient(rgba(110, 18, 18, .06) 1.4px, transparent 1.4px);
    background-size: 20px 20px;
}

.marquee-bar {
    background: var(--ink);
    color: var(--gold);
    overflow: hidden;
    position: relative;
    padding: 9px 0;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scrollX 28s linear infinite;
    gap: 48px;
}

.marquee-track span {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .8px;
    white-space: nowrap;
}

@keyframes scrollX {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.util-bar {
    background: var(--red-dark);
    color: #fff;
    font-size: 0.8rem;
    padding: 7px 0;
}

.util-bar .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.util-bar a {
    opacity: 0.85;
}

.util-bar a:hover,
.util-bar a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.util-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.util-social {
    display: flex;
    gap: 12px;
}

.util-social svg {
    width: 15px;
    height: 15px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--gold-deep);
    outline-offset: 2px;
}

.site-header {
    background: var(--cream);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.navbar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 0 0 auto;
}

.brand-wordmark {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--red-dark);
    white-space: nowrap;
}

.brand-wordmark .mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 1px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    transform: translateY(-2px);
}

.brand-wordmark .mark svg {
    width: 13px;
    height: 13px;
}

.brand-tagline {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ink-soft);
    line-height: 1.25;
    white-space: normal;
    max-width: 170px;
}


.brand-pill-logo {
    flex: 0 0 auto;
}

.brand-pill-logo img {
    max-height: 44px;
    width: auto;
}

.search-bar {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 100px;
    padding: 4px 6px 4px 18px;
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.88rem;
    background: transparent;
    min-width: 0;
}

.search-bar button {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 100px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.navbar > .search-bar {
    order: 2;
}

@media (max-width: 900px) {
    .navbar > .search-bar {
        display: none;
    }
}

@media (max-width: 640px) {
    .icon-btn-label,
    .lang-select {
        display: none;
    }

    .brand-tagline {
        display: none;
    }
}

.mobile-menu ul {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li {
    display: contents;
}

@media (max-width: 1080px) {
    .site-nav {
        display: none;
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    order: 4;
}

.icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    color: var(--ink);
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    flex: 0 0 auto;
    text-decoration: none;
}

.icon-btn svg {
    width: 20px;
    height: 20px;
}

.icon-btn-label {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
}

.icon-btn .badge {
    position: absolute;
    top: -2px;
    right: 2px;
    background: var(--red);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* .btn-shop retired Fase 4 — header.php now uses the shared .btn.btn-primary.btn-sm component. */
@media (max-width: 640px) {
    .nav-actions > .btn {
        display: none;
    }
}

.hamburger {
    display: none;
    flex-direction: column;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--cream);
    border: 1.5px solid var(--line);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 1080px) {
    .hamburger {
        display: flex;
    }
}

.hamburger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    margin: 2px 0;
}

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 14px 18px 18px;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu a {
    font-weight: 700;
    padding: 12px 8px;
    border-radius: 10px;
    color: var(--ink);
}

.mobile-menu .current-menu-item a,
.mobile-menu .current_page_item a {
    background: var(--red);
    color: #fff;
}

.mobile-menu .search-bar {
    max-width: none;
    margin-bottom: 8px;
}

/* ===== LANGUAGE SELECT (header) ===== */
.lang-select {
    border: 1.5px solid var(--line);
    border-radius: 9px;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--cream);
    flex: 0 0 auto;
}

/* ===== SITE NAV (red bar under header, Fase 4) ===== */
.site-nav {
    background: var(--red);
}

.site-nav-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-dropdown {
    position: relative;
    flex: 0 0 auto;
}

.category-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--red-dark);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.category-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow);
    z-index: 70;
    flex-direction: column;
    padding: 8px;
}

.category-menu.open {
    display: flex;
}

.category-menu a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.88rem;
}

.category-menu a:hover,
.category-menu a:focus-visible {
    background: var(--cream);
    color: var(--red-dark);
}

.site-nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.site-nav-links ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav-links a {
    display: block;
    padding: 12px 16px;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.site-nav-links a:hover,
.site-nav-links a:focus-visible,
.site-nav-links .current-menu-item a,
.site-nav-links .current_page_item a {
    background: var(--red-dark);
}

/* ===== SOCIAL PROOF BAND (pre-footer) ===== */
.social-proof-band {
    background-color: transparent;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 70px 0;
    text-align: center;
}

.social-proof-heading {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 20px;
}

/* Decorative dashes "----" after the Follow Us heading — matches the reference
   design which shows "Follow Us on Your Favorite Platform ----" */
.social-proof-dashes {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 2px;
    opacity: 0.6;
}

.social-proof-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.social-proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--ink);
    border-radius: 100px;
    padding: 10px 22px 10px 14px;
    text-align: left;
}

.social-proof-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

.social-proof-icon svg {
    width: 22px;
    height: 22px;
}

.social-proof-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.social-proof-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.social-proof-text b {
    font-size: 0.9rem;
}

.social-proof-text span {
    font-size: 0.76rem;
    color: var(--ink-soft);
}

/* ===== FOOTER TRUST ROW (Fase 4) ===== */
.foot-trust-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.foot-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--ink);
}

.foot-trust-icon {
    font-size: 1.3rem;
    flex: 0 0 auto;
}

.foot-trust-item strong {
    display: block;
    font-weight: 800;
    color: var(--ink);
}

.foot-trust-item small {
    display: block;
    opacity: 0.75;
    font-weight: 500;
    color: var(--ink-soft);
}

@media (max-width: 900px) {
    .foot-trust-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .foot-trust-row {
        grid-template-columns: 1fr;
    }
}

/* ===== HERO ===== */
.hero {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.hero:focus-within .progress-fill,
.hero.paused .progress-fill {
    animation-play-state: paused;
}

.slide {
    position: relative;
    display: none;
}

.slide.active {
    display: block;
}

.hero-full-bleed {
    border-radius: 0;
}

.slide-full-bleed {
    background-color: var(--kraft);
}

.hero-bg-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== HERO: RESPONSIVE PICTURE MODE =====
   Full-width banner image via <picture>, with CMS text overlaid on the
   left — matches the approved reference design (rombak/referensi desain/
   homepage.jpeg). Triggered whenever _hero_img_mobile OR _hero_img_tablet
   is set on the hero slide CPT. */
.hero-content-picture {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* No border-radius, no aspect-ratio override — the picture fills the
       full viewport width and sets its own height naturally */
}

.hero-picture {
    display: block;
    width: 100%;
    line-height: 0;
}

.hero-picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Text overlay — absolutely positioned on the left third of the banner */
.hero-content-picture .hero-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-width: 42%;
    padding: 0 0 0 56px;
    z-index: 5;
}

@media (max-width: 1024px) {
    .hero-content-picture .hero-text {
        max-width: 50%;
        padding: 0 0 0 40px;
    }
}

@media (max-width: 640px) {
    .hero-content-picture .hero-text {
        max-width: 58%;
        padding: 0 0 0 20px;
    }

    .hero-content-picture .hero-text .hero-kicker {
        font-size: 0.6rem;
        padding: 4px 10px;
        margin-bottom: 6px;
    }

    .hero-content-picture .hero-text h1 {
        font-size: 1.3rem;
        line-height: 1.15;
    }

    .hero-content-picture .hero-text p {
        display: none;
    }

    .hero-content-picture .hero-actions {
        margin-top: 10px;
    }

    .hero-content-picture .hero-actions .btn {
        padding: 8px 14px;
        font-size: 0.72rem;
    }
}

@media (max-width: 380px) {
    .hero-content-picture .hero-text {
        max-width: 65%;
    }
    .hero-content-picture .hero-text h1 {
        font-size: 1.1rem;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.2;
    }
}

/* Card-style hero: rounded on all sides, inset within .wrap (not
   edge-to-edge) — the uploaded hero banner image (products + temple
   silhouette, already includes the peach backdrop) is used as-is via
   background-size:cover rather than redrawn in CSS. Ratio is fixed rather
   than matching the source file's raw ratio exactly, since the source has
   extra blank peach margin top/bottom that isn't meant to all show — this
   ratio only trims that empty margin, never the products/silhouette. */
.hero-content {
    position: relative;
    z-index: 5;
    aspect-ratio: 2.7;
    border-radius: 28px;
    overflow: hidden;
    background-color: var(--kraft);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 56px;
}

.hero-text {
    position: relative;
    z-index: 1;
    max-width: 440px;
}

@media (max-width: 900px) {
    .hero-content {
        aspect-ratio: 1.6;
        padding: 0 32px;
    }

    .hero-text {
        max-width: 60%;
    }
}

@media (max-width: 640px) {
    .hero-content {
        aspect-ratio: 1.15;
        border-radius: 20px;
        padding: 0 20px;
    }

    .hero-text {
        max-width: 58%;
    }

    .hero-text .hero-kicker {
        font-size: 0.6rem;
        padding: 4px 10px;
        margin-bottom: 6px;
    }

    .hero-text h1 {
        font-size: 1.3rem;
        line-height: 1.15;
    }

    .hero-text p {
        display: none;
    }

    .hero-actions {
        margin-top: 10px;
    }

    .hero-actions .btn {
        padding: 8px 14px;
        font-size: 0.72rem;
    }
}

.hero-text .hero-kicker {
    margin-bottom: 16px;
}

.hero-text h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.3rem, 4.2vw, 3.4rem);
    color: var(--ink);
    line-height: 1.1;
}

.hero-text h1 .hero-title-highlight {
    color: var(--red);
}

.hero-text p {
    margin-top: 14px;
    font-size: 1.02rem;
    color: var(--ink-soft);
    max-width: 440px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .hero-text p {
        margin-left: auto;
        margin-right: auto;
    }
}

.hero-badges {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 7px 14px 7px 10px;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hero-badge svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .hero-badges {
        justify-content: center;
    }
}

.hero-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .hero-actions {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ===== HERO CAROUSEL ANIMATIONS ===== */
@keyframes bubbleRise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    12%  { opacity: 0.7; }
    100% { transform: translateY(-240px) scale(1.35); opacity: 0; }
}

.hero-deco {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.bubble-h {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    animation: bubbleRise 6s ease-in infinite;
}

.hero .dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    border: none;
    padding: 0;
}

.dot.active {
    background: #fff;
    width: 26px;
    border-radius: 6px;
    transition: all .3s;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    border: none;
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(42, 23, 18, 0.15);
}

.arrow svg {
    width: 18px;
    height: 18px;
}

.arrow.left {
    left: 16px;
}

.arrow.right {
    right: 16px;
}

@media (max-width: 640px) {
    .arrow {
        display: none;
    }
}

.progress-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    z-index: 10;
}

.progress-fill {
    height: 100%;
    background: var(--gold);
    width: 0%;
    animation: fillbar 5s linear infinite;
}

@keyframes fillbar {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* ===== VOUCHER STRIP ===== */
.voucher-strip {
    background: var(--ice-soft);
    padding: 22px 0;
}

.voucher-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.voucher-card {
    flex: 0 0 auto;
    min-width: 240px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 14px rgba(28, 51, 80, 0.08);
    overflow: hidden;
}

.voucher-left {
    background: var(--red);
    color: #fff;
    padding: 16px 14px;
    text-align: center;
    font-family: var(--font-heading);
    min-width: 86px;
}

.voucher-left b {
    display: block;
    font-size: 1.15rem;
}

.voucher-left span {
    font-size: 0.62rem;
    font-weight: 700;
}

.voucher-right {
    padding: 12px 16px;
    flex: 1;
}

.voucher-right p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-weight: 700;
}

.voucher-right small {
    display: block;
    font-size: 0.68rem;
    color: #9aa8ae;
    margin-top: 2px;
}

.claim-btn {
    margin: 10px 16px 12px auto;
    display: block;
    background: transparent;
    border: 1.5px solid var(--red);
    color: var(--red);
    font-weight: 800;
    font-size: 0.72rem;
    padding: 6px 14px;
    border-radius: 100px;
    cursor: pointer;
}

.claim-btn.claimed {
    background: #f1f1f1;
    border-color: #d8d8d8;
    color: #aeb4b7;
    cursor: default;
}

/* ===== TRUST STRIP ===== */
.trust-strip {
    padding: 0 0 36px;
    position: relative;
    z-index: 6;
}

/* Sits at normal flow below the hero in picture-mode. In card-mode, pulled
   up to overlap the rounded card's bottom edge via negative margin-top. */
.trust-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    background: #fff;
    border-radius: 20px;
    padding: 24px 36px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px -18px rgba(110, 18, 18, .25);
    margin-top: 0;
}

/* Pull up only when the hero is the card-style (non-picture) mode */
.hero:not(.hero-picture-mode) ~ .trust-strip .trust-grid {
    margin-top: -44px;
}

/* In picture mode: add top padding so trust card has breathing room */
.hero.hero-picture-mode ~ .trust-strip {
    padding-top: 28px;
}

@media (max-width: 640px) {
    .hero.hero-picture-mode ~ .trust-strip {
        padding-top: 20px;
    }

    .trust-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 16px;
        padding: 20px;
        margin-top: 0;
    }
}

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

.trust-item-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--kraft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-item-icon svg {
    width: 20px;
    height: 20px;
    color: var(--red);
}

/* Icon images uploaded via Media Library — illustration style icons */
.gobetta-icon-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 0;
    display: block;
}

/* Trust strip: larger icon images, no background circle */
.trust-item-icon:has(.gobetta-icon-image) {
    background: transparent;
    border-radius: 0;
    width: auto;
    height: auto;
    min-width: 42px;
}
.trust-item-icon .gobetta-icon-image {
    width: 42px;
    height: 42px;
}

/* Stats strip: larger icon images */
.stats-item-icon:has(.gobetta-icon-image) {
    background: transparent;
    border-radius: 0;
    width: auto;
    height: auto;
}
.stats-item-icon .gobetta-icon-image {
    width: 44px;
    height: 44px;
}

/* Why band: larger icon images */
.ic-wrap .gobetta-icon-image {
    width: 56px;
    height: 56px;
}

/* Product page feature badges: icon images replace the outline SVGs */
.product-feature-item .gobetta-icon-image {
    width: 26px;
    height: 26px;
}

/* Value props: medium icon images */
.value-prop-icon .gobetta-icon-image {
    width: 48px;
    height: 48px;
}

.trust-item-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.trust-item-text b {
    font-size: 0.88rem;
    color: var(--ink);
}

.trust-item-text span {
    font-size: 0.76rem;
    color: var(--ink-soft);
}

/* ===== STATS STRIP (second stats row, below Hot Picks) ===== */
.stats-strip {
    padding: 8px 0 40px;
}

.stats-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    background: #fff;
    border-radius: 20px;
    padding: 24px 36px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px -18px rgba(110, 18, 18, .25);
}

@media (max-width: 640px) {
    .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 16px;
        padding: 20px;
    }
}

.stats-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats-item-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--kraft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-item-icon svg {
    width: 20px;
    height: 20px;
    color: var(--red);
}

.stats-item-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.stats-item-text b {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--ink);
}

.stats-item-text span {
    font-size: 0.76rem;
    color: var(--ink-soft);
}

/* ===== PROMO BANNER ===== */
.promo-banner-section {
    padding: 8px 0 28px;
}

@media (max-width: 640px) {
    .promo-banner-section {
        padding: 8px 0 32px;
    }
}

.promo-banner-carousel {
    position: relative;
    overflow: hidden;
}

.promo-banner-track {
    position: relative;
    display: flex;
    gap: 16px;
}

/* Static mode (3 or fewer cards, nothing to slide): cards stretch evenly to
   fill the row so there's never a lonely half-empty card. */
.promo-banner-card {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--ice-soft);
    /* Locking every card (photo or plain-color) to the same aspect ratio
       keeps the row visually level — the designed banner photos are ~1.52:1,
       so plain-color cards match that instead of relying on a fixed px
       height that photos would crop against. */
    aspect-ratio: 1.52;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 4px 14px rgba(28, 51, 80, 0.08);
}

/* Sliding mode (more than 3 cards): every card is a fixed, equal width (1/3
   of the row) so the carousel can slide one card at a time without any
   card changing size as it scrolls through view. */
.promo-banner-carousel.is-sliding .promo-banner-track {
    transition: transform 500ms ease;
}

.promo-banner-carousel.is-sliding .promo-banner-card {
    flex: 0 0 calc((100% - 32px) / 3);
}

@media (max-width: 900px) {
    .promo-banner-carousel.is-sliding .promo-banner-card {
        flex: 0 0 100%;
    }

    /* Static mode (3 or fewer cards): stack cards vertically.
       Card must use flex: 0 0 auto + width:100% so aspect-ratio can
       calculate height from width — flex: 1 1 0 with no container height
       collapses to height 0, hiding photo-bg banners. */
    .promo-banner-carousel:not(.is-sliding) .promo-banner-track {
        flex-direction: column;
    }

    .promo-banner-carousel:not(.is-sliding) .promo-banner-card {
        flex: 0 0 auto;
        width: 100%;
    }
}

.promo-banner-card-inner {
    padding: 26px 28px;
    width: 100%;
}

.promo-banner-card-inner h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin: 0 0 8px;
}

.promo-banner-card-inner p {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 16px;
}

.promo-banner-btn {
    padding: 9px 20px;
    font-size: 0.82rem;
    box-shadow: none;
}

.promo-banner-light .promo-banner-card-inner {
    color: var(--ink);
}

.promo-banner-light .promo-banner-card-inner p {
    opacity: 0.75;
}

.promo-banner-dark {
    background-color: var(--ink);
}

.promo-banner-dark .promo-banner-card-inner {
    color: #fff;
}

.promo-banner-dark .promo-banner-card-inner p {
    opacity: 0.8;
}

/* Photo mode: the image is a complete pre-designed graphic, filling the
   same aspect-ratio box as plain-color cards with no crop (their ratios
   match) and no text overlay. */
.promo-banner-photo-mode {
    display: block;
    line-height: 0;
    aspect-ratio: auto;
}

.promo-banner-photo-mode img,
.promo-banner-photo-mode picture {
    display: block;
    width: 100%;
    height: auto;
}

/* Photo-bg mode: image as backdrop with CMS text overlaid.
   Breakpoints MUST match the <picture><source media> breakpoints exactly
   (576px mobile, 992px tablet) so the CSS aspect-ratio always matches
   the actual image being displayed — mismatched ratios cause cropping.
   Desktop: 1536×565 → 2.72:1 | Tablet: 1536×955 → 1.61:1 | Mobile: 1536×1336 → 1.15:1 */
.promo-banner-photo-bg {
    display: flex;
    align-items: center;
    /* Desktop default — matches banner-bundle-save-more-dekstop ratio */
    aspect-ratio: 2.72;
}

.promo-banner-photo-text {
    max-width: 400px;
    padding: 0 20px 0 48px;
}

.promo-banner-photo-text h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 10px;
}

.promo-banner-photo-text p {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0 0 18px;
}

/* Tablet: matches <source media="(max-width: 992px)"> — 1536×955 → 1.61:1 */
@media (max-width: 992px) {
    .promo-banner-photo-bg {
        aspect-ratio: 1.61;
    }

    .promo-banner-photo-text {
        max-width: 60%;
        padding-left: 28px;
    }

    .promo-banner-photo-text h3 {
        font-size: 1.35rem;
    }
}

/* Mobile: matches <source media="(max-width: 576px)"> — 1536×1336 → 1.15:1 */
@media (max-width: 576px) {
    .promo-banner-photo-bg {
        aspect-ratio: 1.15;
        align-items: flex-start;
        padding-top: 24px;
    }

    .promo-banner-photo-text {
        max-width: 78%;
        padding-left: 18px;
        padding-right: 12px;
    }

    .promo-banner-photo-text h3 {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .promo-banner-photo-text p {
        font-size: 0.78rem;
        margin-bottom: 12px;
    }

    .promo-banner-photo-text .promo-banner-btn {
        padding: 7px 16px;
        font-size: 0.74rem;
    }
}

.promo-arrow {
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(28, 51, 80, 0.2);
}

/* Controls sit in normal flow BELOW the cards (not overlaid on top of card
   text/images like the hero's arrows), so they never clash with card
   content on any screen size. The section's own padding already provides
   the side gutter, so this only needs to center the row. */
.promo-banner-controls {
    margin: 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

@media (max-width: 640px) {
    .promo-banner-controls {
        gap: 12px;
    }
}

.promo-banner-controls .arrow {
    position: static;
    flex: 0 0 auto;
    transform: none;
    width: 38px;
    height: 38px;
    /* Higher specificity than the hero's ".arrow{display:none}" mobile rule
       — the promo carousel has no swipe gesture, so it needs visible
       prev/next buttons on mobile, unlike the hero (dots-only there). */
    display: flex;
}

.promo-banner-controls .dots {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
}

.promo-banner-controls .dot {
    background: rgba(28, 51, 80, 0.22);
}

.promo-banner-controls .dot.active {
    background: var(--gold);
}

@media (max-width: 640px) {
    .promo-banner-card {
        min-height: 220px;
    }

    .promo-banner-card-inner {
        padding: 20px;
    }
}

/* ===== CATEGORY GRID ("Shop Your Favorite Categories") ===== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

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

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

.category-grid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    background: linear-gradient(180deg, var(--cat-card-color, var(--kraft)) 0%, #fff 68%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 10px 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-grid-card:nth-child(7n+1) { --cat-card-color: #FCE1E1; }
.category-grid-card:nth-child(7n+2) { --cat-card-color: #F7ECD8; }
.category-grid-card:nth-child(7n+3) { --cat-card-color: #FFF1CC; }
.category-grid-card:nth-child(7n+4) { --cat-card-color: #FFDFC2; }
.category-grid-card:nth-child(7n+5) { --cat-card-color: #FBE0EC; }
.category-grid-card:nth-child(7n+6) { --cat-card-color: #DCEFFB; }
.category-grid-card:nth-child(7n+7) { --cat-card-color: #DFF3E6; }

.category-grid-card:hover,
.category-grid-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.category-grid-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.category-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-grid-thumb svg {
    width: 28px;
    height: 28px;
    color: var(--red);
}

.category-grid-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

/* ===== TODAY'S HOT PICKS ===== */
/* Joined into one visual unit (no gap) per the approved reference — only
   the outer corners are rounded, the seam between banner and list is a
   plain edge. */
.hot-picks-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(110, 18, 18, .25);
}

@media (max-width: 900px) {
    .hot-picks-panel {
        grid-template-columns: 1fr;
    }
}

.hot-picks-banner {
	overflow: hidden;
	min-height: 220px;
	min-width: 0;
	background: var(--red);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
}

/* "MARKET PRICE TODAY" pill badge at top of left banner */
.hot-picks-market-label {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	background: rgba(255,255,255,0.15);
	border: 1.5px solid rgba(255,255,255,0.7);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: 99px;
	white-space: nowrap;
}

.hot-picks-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hot-picks-list {
    background: #fff;
    border: 1px solid var(--line);
    border-left: none;
    padding: 22px;
    min-width: 0;
}

@media (max-width: 900px) {
    .hot-picks-list {
        border-left: 1px solid var(--line);
    }
}

.hot-picks-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.hot-picks-list-head h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--red-dark);
}

.hot-picks-badge {
    flex: 0 0 auto;
    background: var(--red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 99px;
}

.hot-picks-carousel {
    position: relative;
}

.hot-picks-carousel.is-paged {
    padding: 0 46px;
}

/* Prev belongs to the product-list card, not the banner: with the panel's
   two columns an even 1fr/1fr split and no gap, the panel's own seam sits
   at the exact horizontal center of the (symmetrically padded) carousel
   box, so 50% here lands the button right on the card boundary instead of
   the banner's outer edge. Desktop-only — below 900px the panel stacks
   into a single column and this midpoint no longer means "card seam". */
@media (min-width: 901px) {
    .hot-picks-arrow.left {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 640px) {
    .hot-picks-carousel.is-paged {
        padding: 0;
    }

    .hot-picks-carousel.is-paged .hot-picks-arrow {
        display: none;
    }
}

.hot-picks-arrow {
    top: 50%;
}

.hot-picks-dots {
    position: static;
    justify-content: center;
    margin-top: 16px;
    transform: none;
}

.hot-picks-pages-viewport {
    overflow: hidden;
}

.hot-picks-pages {
    display: flex;
    transition: transform 500ms ease;
}

.hot-picks-grid {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

@media (max-width: 480px) {
    .hot-picks-grid {
        grid-template-columns: 1fr;
    }
}

.hot-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Grid items default to min-width:auto, which sizes this column to fit
       the nowrap product name at its full length instead of the intended
       1fr share — that's what let long names spill across into the
       neighboring column. Overriding to 0 lets .hot-pick-name's own
       ellipsis truncation actually take effect. */
    min-width: 0;
}

.hot-pick-thumb img {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--ice-soft);
}

.hot-pick-info {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.hot-pick-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-pick-price {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--red);
}

.hot-pick-price del {
    font-weight: 500;
    font-size: 0.76rem;
    color: var(--ink-soft);
    margin-right: 4px;
    text-decoration: line-through;
}

.hot-pick-price ins {
    text-decoration: none;
    color: var(--red);
}

/* ===== AI CHAT BANNER ===== */
.ai-banner-section {
    background: transparent;
    padding: 16px 0 28px;
}

.ai-banner-inner {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    background: var(--berry-soft);
    border-radius: 20px;
    padding: 0 40px 0 0;
    position: relative;
    overflow: hidden;
    min-height: 130px;
}

/* ── Mascot (robot) ── */
.ai-banner-mascot {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-right: 28px;
}

.ai-banner-mascot svg,
.ai-banner-mascot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* ── Text block ── */
.ai-banner-text {
    flex: 1 1 0;
    min-width: 0;
    padding: 28px 0;
}

.ai-banner-text h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--red);
    margin: 0 0 6px;
    line-height: 1.2;
}

.ai-banner-text p {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    line-height: 1.45;
}

/* ── Stars decoration — between text and button ── */
.ai-banner-stars {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 32px;
    color: var(--gold);
    pointer-events: none;
    user-select: none;
}

.ai-banner-stars .star-lg {
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.85;
}

.ai-banner-stars .star-sm {
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.6;
    margin-left: 12px;
}

/* ── CTA button ── */
.ai-banner-cta {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    padding: 14px 28px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .ai-banner-inner {
        flex-wrap: wrap;
        padding: 0 24px 24px;
        gap: 0;
    }

    .ai-banner-mascot {
        width: 110px;
        height: 110px;
        margin-right: 20px;
    }

    .ai-banner-stars {
        display: none;
    }

    .ai-banner-cta {
        margin-left: auto;
    }
}

@media (max-width: 640px) {
    .ai-banner-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }

    .ai-banner-mascot {
        width: 100px;
        height: 100px;
        margin-right: 0;
    }

    .ai-banner-text {
        padding: 0;
    }

    .ai-banner-cta {
        margin-left: 0;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}


/* ===== VALUE PROPS ROW ===== */
.value-props {
    background-color: transparent;
    padding: 32px 0;
}

.value-props-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .value-props-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.value-prop {
    display: flex;
    align-items: center;
    gap: 12px;
}

.value-prop-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--kraft);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* When a real icon image is used, remove the circular kraft background */
.value-prop-icon:has(.gobetta-icon-image) {
    background: transparent;
    border-radius: 0;
    width: auto;
    height: auto;
    min-width: 44px;
}

.value-prop:nth-child(4n+1) .value-prop-icon svg { color: var(--red); }
.value-prop:nth-child(4n+2) .value-prop-icon svg { color: var(--red); }
.value-prop:nth-child(4n+3) .value-prop-icon svg { color: var(--green); }
.value-prop:nth-child(4n+4) .value-prop-icon svg { color: var(--ink-soft); }

.value-prop-icon svg {
    width: 22px;
    height: 22px;
    color: var(--red);
}

.value-prop-text h4 {
    font-size: 0.92rem;
    color: var(--ink);
    margin: 0 0 2px;
}

.value-prop-text p {
    font-size: 0.78rem;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.4;
}

/* ===== SECTION HEAD ===== */
.section {
    padding: 40px 0;
}

.sec-head {
    text-align: center;
    margin-bottom: 34px;
}

.sec-head .kicker2 {
    color: var(--red-dark);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sec-head h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-top: 8px;
    color: var(--ink);
}

.sec-head p {
    color: var(--ink-soft);
    max-width: 520px;
    margin: 10px auto 0;
    font-size: 0.94rem;
}

/* ===== CATEGORY ROW ===== */
.cat-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .cat-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cat-pill {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px 10px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(28, 51, 80, 0.05);
    transition: transform .2s ease;
    cursor: pointer;
    display: block;
}

.cat-pill:hover,
.cat-pill:focus-visible {
    transform: translateY(-4px);
}

.cat-pill .ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-pill .ic svg {
    width: 26px;
    height: 26px;
}

.cat-pill span {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--ink);
}

/* ===== FLASH BANNER + FILTER BAR ===== */
.flash-banner {
    background: linear-gradient(90deg, var(--red), #ff7337);
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.flash-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.flash-left h3 {
    font-size: 1.25rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}

.flash-left h3 svg {
    width: 22px;
    height: 22px;
}

.flash-timer {
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: 800;
    font-size: 0.85rem;
}

.flash-timer span {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: monospace;
    min-width: 28px;
    text-align: center;
}

.flash-link {
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== SHOP PAGE — BREADCRUMB ===== */
.shop-breadcrumb-wrap {
    padding: 10px 0 0;
}

.shop-breadcrumb-wrap .breadcrumb {
    font-size: 0.85rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.shop-breadcrumb-wrap .breadcrumb a {
    color: var(--ink-soft);
    text-decoration: none;
}

.shop-breadcrumb-wrap .breadcrumb a:hover {
    color: var(--red);
}

.shop-breadcrumb-wrap .breadcrumb span:last-child {
    color: var(--red);
    font-weight: 600;
}

/* ===== SHOP HERO BANNER — full-width, no text overlay ===== */
.shop-hero-banner {
    width: 100%;
    margin-bottom: 0;
    line-height: 0;
}

.shop-hero-banner picture,
.shop-hero-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* Search results banner — the graphic itself is background-only (same
   convention as the homepage hero's background layer), so the real
   tagline/button (pulled from the site's actual first Hero Slide, see
   search.php) is overlaid on top instead of baked into the image pixels. */
.search-hero-banner {
    position: relative;
}

.search-hero-banner-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    max-width: 480px;
    padding: 0 5%;
    z-index: 2;
}

/* Explicit, self-contained rules (not relying on .hero-text's own p rule,
   which assumes it's inside the carousel's .hero-content flex parent) —
   this banner overlay sits directly on a plain <picture>, not that parent. */
.search-hero-banner-text p {
    display: block;
    line-height: 1.5;
    font-size: 1.02rem;
    color: var(--ink-soft);
    margin-top: 14px;
    max-width: 440px;
}

@media (max-width: 767px) {
    .search-hero-banner-text {
        max-width: 100%;
        top: 20px;
        transform: none;
    }
    .search-hero-banner-text h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    .search-hero-banner-text p {
        display: none;
    }
}

/* ===== SHOP TOOLBAR ===== */
.shop-toolbar-wrap {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
    margin-bottom: 28px;
    position: sticky;
    /* Set from JS to the sticky .site-header's real rendered bottom edge
       (varies with admin-bar presence/breakpoint) — stops this toolbar
       sticking to top:0 and getting stuck under/behind the header instead
       of right below it. Falls back to 0 before JS runs. */
    top: var(--shop-toolbar-top, 0px);
    z-index: 90;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.shop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Search */
.shop-toolbar-search {
    flex: 1 1 200px;
    max-width: 300px;
    margin: 0;
}

.shop-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.shop-search-inner svg {
    position: absolute;
    left: 14px;
    color: var(--ink-soft);
    pointer-events: none;
    flex-shrink: 0;
}

.shop-search-inner input[type="search"] {
    width: 100%;
    padding: 9px 16px 9px 42px;
    border: 1.5px solid var(--line);
    border-radius: 50px;
    font-size: 0.9rem;
    background: var(--paper);
    outline-offset: 2px;
    transition: border-color .2s;
}

.shop-search-inner input[type="search"]:focus {
    border-color: var(--red);
    background: #fff;
}

/* Dropdown filter group */
.shop-toolbar-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

/* Sort + Filters */
.shop-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.shop-sortby-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ===== CUSTOM DROPDOWNS ===== */
.shop-dropdown {
    position: relative;
    display: inline-flex;
}

.shop-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--line);
    border-radius: 50px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s, background .2s;
}

.shop-dropdown-btn:hover,
.shop-dropdown.open .shop-dropdown-btn {
    border-color: var(--red);
    color: var(--red);
}

.shop-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    list-style: none;
    padding: 6px 0;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}

.shop-dropdown-menu-right {
    left: auto;
    right: 0;
}

.shop-dropdown.open .shop-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.shop-dropdown-menu li a {
    display: block;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.shop-dropdown-menu li a:hover,
.shop-dropdown-menu li a[aria-selected="true"] {
    background: var(--paper);
    color: var(--red);
    font-weight: 700;
}

/* Filters button */
.btn-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 50px;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.filter-funnel-right { margin-left: -2px; }

/* ===== MAIN LAYOUT: SIDEBAR + RESULTS ===== */
.shop-main-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: start;
    gap: 28px;
    margin-bottom: 60px;
}

@media (max-width: 992px) {
    .shop-main-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== SHOP SIDEBAR ===== */
.shop-filters {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    /* Set from JS to sit right below the sticky toolbar (header height +
       toolbar height) — see --shop-toolbar-top note above. */
    top: var(--shop-sidebar-top, 74px);
}

@media (max-width: 992px) {
    .shop-filters {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100dvh;
        z-index: 300;
        border-radius: 0 16px 16px 0;
        transform: translateX(-110%);
        transition: transform .3s ease;
        overflow-y: auto;
    }

    .shop-filters.is-open {
        transform: none;
        box-shadow: 4px 0 32px rgba(0,0,0,.18);
    }

    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 299;
    }
}

/* Filters form */
.shop-filters-form {
    padding: 20px;
}

/* Header */
.shop-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--paper);
}

.shop-filters-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.filters-clear-all {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--red);
    text-decoration: underline;
}

/* ===== FILTER GROUPS ===== */
.filter-group {
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.filter-group-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 12px;
}

.filter-group-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Category links */
.filter-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 12px;
    border-left: 3px solid transparent;
    text-decoration: none;
    font-size: 0.875rem;
    color: var(--ink);
    border-radius: 0 6px 6px 0;
    transition: background .15s, color .15s;
}

.filter-cat-link:hover {
    background: var(--paper);
    color: var(--red);
}

.filter-cat-link.is-active {
    border-left-color: var(--red);
    color: var(--red);
    font-weight: 700;
    background: rgba(211, 32, 48, .05);
}

.filter-cat-count {
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-weight: 500;
}

/* ===== PRICE RANGE SLIDER ===== */
.price-slider-track {
    position: relative;
    height: 5px;
    background: var(--line);
    border-radius: 5px;
    margin: 8px 0 6px;
}

.price-slider-fill {
    position: absolute;
    height: 100%;
    background: var(--red);
    border-radius: 5px;
    pointer-events: none;
}

.price-range {
    position: absolute;
    width: 100%;
    height: 5px;
    top: 0;
    background: transparent;
    -webkit-appearance: none;
    pointer-events: none;
}

.price-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(211,32,48,.35);
    cursor: pointer;
}

.price-range::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid #fff;
    cursor: pointer;
}

.price-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 6px 10px;
    gap: 4px;
    background: #fff;
}

.price-input-box:focus-within {
    border-color: var(--red);
}

.price-currency {
    font-size: 0.8rem;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.price-input-box input[type="number"] {
    border: none;
    background: transparent;
    width: 100%;
    padding: 0;
    font-size: 0.875rem;
    color: var(--ink);
    outline: none;
}

.price-input-sep {
    color: var(--ink-soft);
    flex-shrink: 0;
}

/* ===== RADIO FILTER (Spice Level) ===== */
.filter-radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--ink);
}

.filter-radio-row input[type="radio"] {
    display: none;
}

.filter-radio-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: #fff;
    transition: border-color .15s;
    position: relative;
}

.filter-radio-row input[type="radio"]:checked ~ .filter-radio-dot {
    border-color: var(--red);
    background: var(--red);
}

.filter-radio-row input[type="radio"]:checked ~ .filter-radio-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}

.filter-radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.spice-chillis {
    font-size: 0.8rem;
}

/* ===== CHECKBOX FILTER ===== */
.filter-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--ink);
}

.filter-check-row input[type="checkbox"] {
    display: none;
}

.filter-checkbox-custom {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--line);
    background: #fff;
    transition: border-color .15s, background .15s;
    position: relative;
}

.filter-check-row input[type="checkbox"]:checked ~ .filter-checkbox-custom {
    background: var(--red);
    border-color: var(--red);
}

.filter-check-row input[type="checkbox"]:checked ~ .filter-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* ===== BRAND FILTER ===== */
.brand-search-wrap {
    margin-bottom: 10px;
}

.brand-search-input {
    width: 100%;
    padding: 7px 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--paper);
}

.brand-search-input:focus {
    outline: none;
    border-color: var(--red);
    background: #fff;
}

.brand-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-item--hidden {
    display: none;
}

.brand-view-more {
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--red);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* ===== FILTER ACTIONS ===== */
.filter-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-apply-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.filter-reset-btn {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-decoration: underline;
}

/* ===== SIDEBAR BUNDLE IMAGE ===== */
.sidebar-bundle-card {
    position: relative;
    display: block;
    margin-top: 16px;
    border-radius: 16px;
    overflow: hidden;
}

.sidebar-bundle-card img {
    display: block;
    width: 100%;
    height: auto;
}

.sidebar-bundle-btn {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.82rem;
    border-radius: 8px;
    box-shadow: none;
}

/* ===== SHOP RESULTS HEADER ===== */
.shop-results {
    min-width: 0;
}

.shop-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.shop-results-count {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: 0;
}

/* View toggle */
.view-toggle {
    display: flex;
    gap: 6px;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.view-btn.active,
.view-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(211,32,48,.05);
}

/* ===== PRODUCT GRID ===== */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Shop-specific grid always 4 col */
.prod-grid--shop {
    grid-template-columns: repeat(4, 1fr);
}

/* List view mode */
.prod-grid--list {
    grid-template-columns: 1fr !important;
}

.prod-grid--list .prod-card {
    flex-direction: row;
    align-items: center;
}

.prod-grid--list .prod-img {
    flex: 0 0 120px;
    width: 120px;
    aspect-ratio: 1;
}

/* Best Sellers — exactly 4 */
.best-sellers-grid.prod-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
    .prod-grid--shop {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .best-sellers-grid.prod-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .prod-grid--shop {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .prod-grid--shop {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

@media (max-width: 1000px) {
    .prod-grid:not(.prod-grid--shop) {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .prod-grid:not(.prod-grid--shop) {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* No results */
.shop-no-results {
    text-align: center;
    padding: 60px 20px;
}

.shop-no-results p {
    color: var(--ink-soft);
    margin-bottom: 20px;
}

/* ===== SHOP TOOLBAR MOBILE ===== */
@media (max-width: 768px) {
    .shop-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .shop-toolbar-search {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .shop-toolbar-filters {
        flex: 1 1 auto;
    }

    .shop-toolbar-actions {
        margin-left: 0;
    }
}

/* ===== SHOP CATEGORY BANNER (legacy) ===== */
.shop-category-banner {
    margin-bottom: 30px;
}

.shop-category-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.shop-category-banner-fallback {
    background-color: var(--ink);
    padding: 50px 0;
    color: #fff;
}

.shop-category-banner-inner {
    max-width: 560px;
}

.shop-category-banner-inner h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 8px;
}

.shop-category-banner-inner p {
    font-size: 0.95rem;
    opacity: 0.95;
}



.filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tab {
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: 100px;
    cursor: pointer;
}

.filter-tab.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.sort-select {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.sort-select select {
    border: 1.5px solid var(--line);
    border-radius: 100px;
    padding: 8px 14px;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--ink);
    background: #fff;
}

/* ===== FLASH SALE STRIP ===== */
.flash-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 14px;
    margin-bottom: 28px;
    scroll-snap-type: x proximity;
}

.flash-strip .prod-card {
    scroll-snap-align: start;
}

@media (max-width: 640px) {
    .flash-strip {
        grid-auto-columns: 150px;
    }
}

.flash-progress {
    margin-top: 8px;
}

.flash-progress-bar {
    background: var(--ice-soft);
    border-radius: 100px;
    height: 6px;
    overflow: hidden;
}

.flash-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--red), #ff7337);
    border-radius: 100px;
}

.flash-progress small {
    display: block;
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--red);
}

/* ===== SHOP LAYOUT (FILTER SIDEBAR + GRID) ===== */
.shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: start;
    gap: 28px;
}

@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }
}

/* Scoped under the retired .shop-layout wrapper (not present in the current
   markup, which uses .shop-main-layout) — dead-scoped on purpose so this old
   rule can't cascade over the live sidebar's .shop-filters styling below. */
.shop-layout .shop-filters {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    position: sticky;
    top: 110px;
}

.shop-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.shop-filters-header h3 {
    font-size: 1.05rem;
    color: var(--ink);
}

.shop-filters-header .shop-filters-clear {
    margin: 0;
    font-size: 0.78rem;
}

.shop-filters-reset {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    padding: 11px;
    background: var(--green);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    border-radius: 100px;
}

.shop-filters-reset:hover,
.shop-filters-reset:focus-visible {
    background: var(--green-deep);
    color: #fff;
}

details.filter-group summary {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

details.filter-group summary::-webkit-details-marker {
    display: none;
}

details.filter-group summary::after {
    content: "▾";
    color: var(--ink-soft);
    font-size: 0.75rem;
}

details.filter-group[open] summary {
    margin-bottom: 10px;
}

.filter-group-body {
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .shop-layout .shop-filters {
        position: static;
    }
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group:last-of-type {
    margin-bottom: 16px;
}

.filter-group h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin-bottom: 10px;
}

.filter-group select {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    margin-top: 8px;
}

.filter-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
    cursor: pointer;
}

.filter-check input {
    accent-color: var(--red);
    flex-shrink: 0;
}

.filter-check span {
    flex: 1;
}

.filter-check small {
    color: var(--ink-soft);
    font-weight: 600;
}

.filter-check-link {
    text-decoration: none;
}

.filter-check-link.is-active span {
    color: var(--red-dark);
    font-weight: 800;
}

.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
}

.price-range-inputs input {
    width: 100%;
    min-width: 0;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 9px 10px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--ink);
}

.shop-filters-apply {
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: center;
}

.shop-filters-clear {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-decoration: underline;
}

.shop-results {
    min-width: 0;
}

/* ===== PRODUCT GRID ===== */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Best Sellers — always exactly 4 curated products, so force 4 columns
   instead of the generic 5-column .prod-grid (which left an empty gap). */
.best-sellers-grid.prod-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .best-sellers-grid.prod-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@media (max-width: 640px) {
    .prod-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.prod-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    min-width: 0;
    transition: box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
}

.prod-card:hover,
.prod-card:focus-within {
    box-shadow: 0 10px 24px rgba(28, 51, 80, 0.14);
    transform: translateY(-3px);
}

.prod-media {
    position: relative;
}

.prod-img {
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.prod-img svg {
    width: 64%;
    height: 64%;
}

.prod-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photo carousel — every slide is stacked full-bleed on top of each other;
   JS toggles .active to cross-fade between them. Falls back to showing just
   the first slide (CSS-only) if JS never runs. Explicit z-index:1 keeps it
   below the badge/ribbon/swatch layer (z-index:2, see below) — without this,
   being later in the DOM with position:absolute would otherwise paint the
   active slide over the stock/flash-sale/discount badges, hiding them. */
.prod-carousel-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}

.prod-carousel-slide.active {
    opacity: 1;
}

.discount-tag {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    background: var(--red);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 800;
    padding: 3px 7px 3px 9px;
    border-bottom-left-radius: 8px;
}

.badge-corner {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    background: var(--gold);
    color: #5b3d00;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-bottom-right-radius: 8px;
}

.badge-corner.badge-hot {
    background: var(--red);
    color: #fff;
}

.badge-corner.badge-new {
    background: #2e9e4f;
    color: #fff;
}

.badge-corner.badge-best-seller {
    background: var(--gold);
    color: #5b3d00;
}

.prod-swatch {
    position: absolute;
    z-index: 2;
    bottom: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.prod-swatch img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.prod-swatch small {
    background: var(--red);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

/* ===== SHOP CATEGORY BANNER ===== */
.shop-category-banner {
    margin-bottom: 30px;
}

.shop-category-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Fallback shown only when no banner image is set in Media Library. */
.shop-category-banner-fallback {
    background-color: var(--ink);
    padding: 50px 0;
    color: #fff;
}

.shop-category-banner-inner {
    max-width: 560px;
}

.shop-category-banner-inner h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 8px;
}

.shop-category-banner-inner p {
    font-size: 0.95rem;
    opacity: 0.95;
}

/* ===== NEW SHOP PAGE STYLES ===== */
.shop-hero {
    background-color: var(--paper, #f7f3ec);
    padding: 40px 0;
    margin-bottom: 24px;
}
.shop-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.shop-hero-content {
    flex: 1;
    max-width: 600px;
}
.shop-hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--red);
    margin: 16px 0;
    line-height: 1.1;
    font-family: var(--font-heading);
}
.shop-hero-content p {
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 0;
}
.shop-hero-media {
    flex: 1;
    max-width: 500px;
}
.shop-hero-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: #fff;
    padding: 12px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 30px;
}
.shop-toolbar-search {
    flex: 1;
    min-width: 200px;
    max-width: 350px;
    margin: 0;
}
.shop-toolbar-search input {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--paper);
}
.shop-toolbar-dropdowns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.shop-toolbar-dropdowns select {
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}
.shop-toolbar-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}
.shop-toolbar-actions select {
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}
.btn-filters-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 24px;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
    margin-bottom: 60px;
}
@media (max-width: 991px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }
}

/* Scoped under the retired .shop-layout wrapper — see identical note above.
   This block's un-scoped original selector was the real bug behind the
   "Filters" toolbar button doing nothing / the sidebar vanishing on
   scroll/resize: it forced the live .shop-filters sidebar to display:none
   below 991px and only showed it back via a `.active` class that the
   current toggle script never applies (it toggles `.is-open`, see
   woocommerce/archive-product.php), so the sidebar was permanently hidden
   at that breakpoint with no way to open it. */
.shop-layout .shop-filters {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 90px;
}
@media (max-width: 991px) {
    .shop-layout .shop-filters {
        display: none;
        position: static;
    }
    .shop-layout .shop-filters.active {
        display: block;
    }
}

.filter-group {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.filter-group h4 {
    margin-bottom: 16px;
    font-size: 1.1rem;
}
.filter-check, .filter-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--ink);
}
.filter-check input, .filter-radio input {
    accent-color: var(--red);
    width: 18px;
    height: 18px;
}
.filter-check-link {
    justify-content: space-between;
    text-decoration: none;
    padding-left: 12px;
    border-left: 3px solid transparent;
}
.filter-check-link small {
    color: var(--ink-soft);
    background: var(--paper);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.filter-check-link.is-active {
    border-left-color: var(--red);
    color: var(--red);
    font-weight: 700;
}

/* Price Range Slider */
.price-slider-wrap {
    margin-top: 10px;
}
.price-slider {
    position: relative;
    height: 4px;
    background: var(--line);
    border-radius: 4px;
    margin-bottom: 20px;
}
.price-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 4px;
    top: 0;
    pointer-events: none;
    -webkit-appearance: none;
    background: transparent;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--red);
    cursor: pointer;
}
.price-range-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.price-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 10px;
    flex: 1;
}
.price-input .currency-symbol {
    color: var(--ink-soft);
    margin-right: 4px;
}
.price-input input {
    border: none;
    background: transparent;
    width: 100%;
    padding: 0;
    outline: none;
}

.brand-search {
    margin-bottom: 12px;
}
.brand-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.view-more-brands {
    color: var(--red);
    font-weight: 600;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 8px;
}

.shop-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.shop-results-count {
    color: var(--ink-soft);
    font-weight: 600;
}
.view-toggle {
    display: flex;
    gap: 8px;
}
.view-toggle button {
    background: transparent;
    border: 1px solid var(--line);
    padding: 6px;
    border-radius: 6px;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-toggle button.active {
    background: var(--paper);
    color: var(--red);
    border-color: var(--red);
}

.prod-grid[data-shop-context] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1200px) {
    .prod-grid[data-shop-context] {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .prod-grid[data-shop-context] {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .prod-grid[data-shop-context] {
        grid-template-columns: 1fr;
    }
}

.shop-filters-apply {
    width: 100%;
    margin-top: 10px;
}
.shop-filters-reset {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: var(--ink-soft);
    text-decoration: underline;
}

.shop-toolbar-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.shop-toolbar-search-wrap .search-icon {
    position: absolute;
    left: 14px;
    color: var(--ink-soft);
    pointer-events: none;
}

.shop-toolbar-search-wrap input[type="search"] {
    padding-left: 42px;
}

.shop-toolbar-sortby {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.shop-toolbar-sortby select {
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* List-view mode: single column with horizontal card layout */
.prod-grid[data-shop-context].view-list-mode {
    grid-template-columns: 1fr;
}

.prod-grid[data-shop-context].view-list-mode .product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.prod-grid[data-shop-context].view-list-mode .product-card .prod-img-wrap {
    flex: 0 0 120px;
    height: 120px;
}

@media (max-width: 600px) {
    .shop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .shop-toolbar-search,
    .shop-toolbar-dropdowns,
    .shop-toolbar-actions {
        width: 100%;
    }

    .shop-toolbar-dropdowns {
        flex-wrap: wrap;
    }
}


.flash-sale-tag {
    background: linear-gradient(90deg, var(--red), #ff7337);
    color: #fff;
}

.dive-sale-tag {
    background: linear-gradient(90deg, var(--ice), var(--ice));
    color: #fff;
}

.out-of-stock-tag {
    background: var(--ink);
    color: #fff;
}

.wish-toggle {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
}

.wish-toggle svg {
    width: 16px;
    height: 16px;
}

.wish-toggle.active {
    color: var(--red);
}

.wish-toggle.active svg {
    fill: var(--red);
}

.prod-info {
    padding: 10px 10px 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.prod-name {
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prod-brand {
    font-size: 0.7rem;
    color: var(--ink-soft);
    margin-top: 2px;
}

.ship-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    color: var(--ice);
    font-weight: 700;
    margin-top: 6px;
}

.ship-tag svg {
    width: 11px;
    height: 11px;
}

.prod-price-row {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.prod-price-group {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.prod-price {
    color: var(--red);
    font-weight: 800;
    font-size: 1rem;
}

.prod-old {
    color: #9aa8ae;
    font-size: 0.7rem;
    text-decoration: line-through;
}

.prod-meta {
    margin-top: 6px;
    min-height: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.prod-meta-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.stars {
    color: var(--gold);
    font-size: 0.92rem;
    letter-spacing: 1px;
    line-height: 1;
}

.no-reviews-yet {
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-style: italic;
}

.sold {
    font-size: 0.72rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.add-cart-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}

.add-cart-btn svg {
    width: 16px;
    height: 16px;
}

.add-cart-btn:hover,
.add-cart-btn:focus-visible {
    background: var(--red-dark);
    color: #fff;
    transform: scale(1.1);
}

.add-cart-btn.added {
    background: var(--green-deep);
    color: #fff;
}

.add-cart-btn:disabled {
    background: var(--ink-soft);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.6;
}

.add-cart-btn:disabled:hover,
.add-cart-btn:disabled:focus-visible {
    background: var(--ink-soft);
    color: #fff;
}

.view-more-wrap {
    text-align: center;
    margin-top: 26px;
}

.btn-view-more {
    display: inline-block;
    border: 2px solid var(--red);
    color: var(--red);
    font-weight: 800;
    padding: 11px 30px;
    border-radius: 100px;
    background: #fff;
}

.btn-view-more:hover,
.btn-view-more:focus-visible {
    background: var(--red);
    color: #fff;
}

/* ===== SINGLE PRODUCT ===== */
.breadcrumb {
    font-size: 0.78rem;
    color: var(--ink-soft);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.breadcrumb a {
    color: var(--ice);
    font-weight: 700;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    text-decoration: underline;
}

.single-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.single-product-grid > .single-product-media,
.single-product-grid > .single-product-info {
    min-width: 0;
}

@media (max-width: 900px) {
    .single-product-grid {
        grid-template-columns: 1fr;
    }
}

.single-product-media {
    aspect-ratio: 1/1;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.single-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .25s ease, transform .2s ease-out;
}

.single-product-media img.is-zoomed {
    transform: scale(2);
}

.single-product-media svg {
    width: 45%;
    height: 45%;
    object-fit: contain;
}

/* ---------- Product image lightbox ---------- */

.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.product-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease;
}

.product-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 34, 51, 0.92);
}

.product-lightbox-stage {
    position: relative;
    z-index: 1;
    max-width: min(90vw, 900px);
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.product-lightbox-close,
.product-lightbox-prev,
.product-lightbox-next {
    position: absolute;
    z-index: 2;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}

.product-lightbox-prev[hidden],
.product-lightbox-next[hidden],
.product-lightbox-counter[hidden] {
    display: none;
}

.product-lightbox-close:hover,
.product-lightbox-prev:hover,
.product-lightbox-next:hover {
    background: rgba(255, 255, 255, .3);
}

.product-lightbox-close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
}

.product-lightbox-close svg {
    width: 20px;
    height: 20px;
}

.product-lightbox-prev,
.product-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
}

.product-lightbox-prev {
    left: 20px;
}

.product-lightbox-next {
    right: 20px;
}

.product-lightbox-prev svg,
.product-lightbox-next svg {
    width: 22px;
    height: 22px;
}

.product-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .15);
    padding: 4px 12px;
    border-radius: 999px;
}

body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .product-lightbox-prev,
    .product-lightbox-next {
        width: 40px;
        height: 40px;
    }

    .product-lightbox-prev {
        left: 8px;
    }

    .product-lightbox-next {
        right: 8px;
    }

    .product-lightbox-close {
        top: 12px;
        right: 12px;
    }
}

.single-product-badge {
    display: inline-flex;
    background: var(--red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
}

.single-product-info h1 {
    margin-top: 10px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--ink);
    line-height: 1.2;
}

.single-product-cat-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--ink-soft);
    font-weight: 600;
}

.single-product-cat-link:hover,
.single-product-cat-link:focus-visible {
    color: var(--ice);
    text-decoration: underline;
}

.single-product-info .prod-meta {
    margin-top: 10px;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 10px;
    font-size: 0.85rem;
}

.single-product-rating-row {
    margin-top: 8px;
}

.single-product-info .stars {
    font-size: 1rem;
}

.single-product-price-row {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.single-product-price-row .prod-price {
    font-size: 1.8rem;
}

.single-product-price-row .prod-old {
    font-size: 1rem;
}

.single-product-info .ship-tag {
    margin-top: 10px;
    font-size: 0.78rem;
}

.single-product-description {
    margin-top: 20px;
    color: var(--ink-soft);
    line-height: 1.7;
    font-size: 0.94rem;
}

.single-product-sizes {
    margin-top: 18px;
}

.size-picker-label {
    display: block;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--ink);
    margin-bottom: 8px;
}

.size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.size-option {
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.size-option:hover {
    border-color: var(--ice);
}

.size-option.active {
    border-color: var(--ice);
    background: var(--ice-soft);
    color: var(--ice);
}

/* Product Trust Features — 3 columns grid below description */
.product-features-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0;
}

.product-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: center;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--ink-soft);
    line-height: 1.3;
}

.product-feature-item svg {
    width: 26px;
    height: 26px;
    color: var(--red);
    flex: 0 0 auto;
}

.product-feature-item small {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--ink-soft);
    opacity: 0.8;
}

.single-product-actions {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.single-product-actions .add-cart-btn {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 15px 28px;
    font-size: 0.95rem;
    font-weight: 800;
    gap: 10px;
    border-radius: 10px;
    background: var(--red);
    color: #fff;
    border: none;
    justify-content: center;
    letter-spacing: 0.01em;
}

.single-product-actions .add-cart-btn:hover,
.single-product-actions .add-cart-btn:focus-visible {
    background: var(--red-dark);
    transform: scale(1.01);
}

.single-product-actions .add-cart-btn:disabled,
.single-product-actions .buy-now-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.buy-now-btn {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
}

.buy-now-btn svg {
    width: 16px;
    height: 16px;
}

.wish-toggle-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--ink);
    font-weight: 800;
    font-size: 0.88rem;
    padding: 13px 20px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.wish-toggle-inline svg {
    width: 16px;
    height: 16px;
}

.wish-toggle-inline:hover {
    border-color: var(--red);
    color: var(--red);
}

.wish-toggle-inline.active {
    color: var(--red);
    border-color: var(--red);
}

.wish-toggle-inline.active svg {
    fill: var(--red);
}

.single-product-gallery {
    min-width: 0;
}

.single-product-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.single-product-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: #fff;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}

.single-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-product-thumb.active {
    border-color: var(--ice);
}

.review-count {
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.single-product-savings {
    color: var(--green-deep);
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 4px;
}

.single-product-highlights {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.single-product-highlights li {
    font-size: 0.86rem;
    color: var(--ink);
    padding-left: 18px;
    position: relative;
}

.single-product-highlights li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--ice);
    font-weight: 800;
}

.single-product-qty-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.qty-row-label {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--ink);
}

.single-product-qty {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.single-product-qty .qty-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    line-height: 1;
}

.single-product-qty .qty-btn:hover,
.single-product-qty .qty-btn:focus-visible {
    background: var(--line);
}

.single-product-qty input {
    width: 48px;
    height: 40px;
    padding: 0;
    border: none;
    border-left: 1.5px solid var(--line);
    border-right: 1.5px solid var(--line);
    text-align: center;
    font-family: var(--font-body);
    font-weight: 700;
    -moz-appearance: textfield;
}

.single-product-qty input::-webkit-outer-spin-button,
.single-product-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stock-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-weight: 700;
    font-size: 0.85rem;
}

.stock-status svg {
    width: 16px;
    height: 16px;
}

.stock-status.in-stock {
    color: var(--green-deep);
}

.stock-status.out-of-stock {
    color: var(--red);
}

.single-product-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

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

.single-product-trust-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--ice);
}

.single-product-trust-item span {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
}

.single-product-trust-item small {
    color: var(--ink-soft);
    font-weight: 400;
}

.single-product-free-delivery {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--green-soft, #eaf7ee);
    border: 1px solid var(--green-deep);
    border-radius: 10px;
}

.single-product-free-delivery svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--green-deep);
}

.single-product-free-delivery span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.single-product-free-delivery b {
    font-size: 0.86rem;
    color: var(--ink);
}

.single-product-free-delivery small {
    font-size: 0.76rem;
    color: var(--ink-soft);
}

.perfect-with-block {
    margin-top: 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}

.perfect-with-block h3 {
    font-size: 1.1rem;
    margin: 0 0 12px;
    color: var(--red);
}

.perfect-with-photo {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
}

.perfect-with-block p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}

.single-product-tabs {
    margin-top: 40px;
}

.product-tab-nav {
    display: flex;
    gap: 24px;
    border-bottom: 1.5px solid var(--line);
    flex-wrap: wrap;
}

.product-tab-btn {
    background: none;
    border: none;
    padding: 12px 2px;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--ink-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
}

.product-tab-btn.active {
    color: var(--ink);
    border-bottom-color: var(--ice);
}

.product-tab-panel {
    display: none;
    padding-top: 24px;
}

.product-tab-panel.active {
    display: block;
}

.product-tab-description-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 780px) {
    .product-tab-description-grid {
        grid-template-columns: 1fr;
    }
}

.reviews-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
}

@media (max-width: 780px) {
    .reviews-layout {
        grid-template-columns: 1fr;
    }
}

.product-spec-table {
    width: 100%;
    border-collapse: collapse;
    background: #f8fafb;
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.85rem;
}

.product-spec-table tr:not(:last-child) th,
.product-spec-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--line);
}

.product-spec-table th,
.product-spec-table td {
    text-align: left;
    padding: 10px 16px;
    font-weight: 700;
    color: var(--ink);
}

.product-spec-table td {
    font-weight: 400;
    color: var(--ink-soft);
}

.product-reviews-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.product-reviews-summary .stars {
    font-size: 1.1rem;
}

/* ===== SHOP PAGINATION ===== */
.shop-pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.shop-pagination .nav-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.shop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 100px;
    border: 1.5px solid var(--line);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.85rem;
    background: #fff;
}

.shop-pagination .page-numbers.current {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.shop-pagination .page-numbers:hover,
.shop-pagination .page-numbers:focus-visible {
    background: #f1f7f7;
}

.shop-pagination .page-numbers.current:hover {
    background: var(--ink);
}

/* ===== CART PAGE ===== */
.cart-empty {
    text-align: center;
    padding: 40px 0;
}

.cart-empty p {
    color: var(--ink-soft);
    margin-bottom: 20px;
}

.cart-page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.cart-page-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
}

.cart-heading-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.continue-shopping-link {
    color: var(--ice);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: underline;
}

.free-shipping-nudge {
    background: var(--ice-soft);
    border: 1px solid var(--teal-3);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.free-shipping-nudge.is-unlocked {
    background: #eaf9ef;
    border-color: var(--green);
}

.free-shipping-nudge p {
    margin: 0 0 10px;
    font-size: 0.88rem;
    color: var(--ink);
}

.free-shipping-nudge p strong {
    color: var(--ice);
}

.free-shipping-nudge.is-unlocked p strong {
    color: var(--green-deep);
}

.free-shipping-nudge-bar {
    height: 8px;
    border-radius: 100px;
    background: #fff;
    overflow: hidden;
}

.free-shipping-nudge-bar span {
    display: block;
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--ice), var(--ice));
    transition: width 0.3s ease;
}

.free-shipping-nudge.is-unlocked .free-shipping-nudge-bar span {
    background: linear-gradient(90deg, var(--green), var(--green-deep));
}

.continue-shopping-link:hover,
.continue-shopping-link:focus-visible {
    color: var(--ice);
}

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

@media (max-width: 900px) {
    .cart-grid {
        grid-template-columns: 1fr;
    }
}

.cart-main {
    min-width: 0;
}

.cart-saved-for-later {
    margin-top: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
}

.cart-saved-for-later h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    margin: 0 0 16px;
}

.cart-saved-for-later h3 svg {
    width: 18px;
    height: 18px;
    color: var(--red);
}

.saved-for-later-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
    gap: 16px;
}

.saved-for-later-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
}

.saved-for-later-media {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
}

.saved-for-later-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.saved-for-later-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.saved-for-later-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-for-later-name:hover,
.saved-for-later-name:focus-visible {
    color: var(--red);
}

.saved-for-later-price {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--red);
}

.saved-for-later-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.saved-for-later-actions .btn-outline-small {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 0.78rem;
}

.cart-cross-sell {
    margin-top: 40px;
}

.cart-cross-sell-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-cross-sell-track.prod-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.cart-cross-sell-track.prod-grid::-webkit-scrollbar {
    display: none;
}

.cart-cross-sell-track .prod-card {
    flex: 0 0 calc((100% - 5 * 14px) / 6);
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .cart-cross-sell-track .prod-card {
        flex-basis: calc((100% - 3 * 14px) / 4);
    }
}

@media (max-width: 640px) {
    .cart-cross-sell-track .prod-card {
        flex-basis: calc((100% - 14px) / 2);
    }
}

.cart-cross-sell-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    z-index: 1;
}

.cart-cross-sell-arrow svg {
    width: 16px;
    height: 16px;
}

.cart-cross-sell-arrow:hover,
.cart-cross-sell-arrow:focus-visible {
    border-color: var(--red);
    color: var(--red);
}

.cart-cross-sell-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cart-cross-sell h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    margin-bottom: 16px;
}

/* Reference design's cross-sell cards show a labelled outline "Add to Cart"
   pill (full width, under the price) instead of the round icon-only button
   the shared product-card.php uses everywhere else on the site — restyled
   here via CSS only (same markup/AJAX handler) so every other place that
   template renders is unaffected. */
.cart-cross-sell .prod-price-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.cart-cross-sell .add-cart-btn {
    width: 100%;
    height: auto;
    border-radius: 100px;
    background: #fff;
    color: var(--red);
    border: 1.5px solid var(--red);
    padding: 8px 14px;
    gap: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

.cart-cross-sell .add-cart-btn .screen-reader-text {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
}

.cart-cross-sell .add-cart-btn:hover,
.cart-cross-sell .add-cart-btn:focus-visible {
    background: var(--red);
    color: #fff;
    transform: none;
}

.cart-cross-sell .add-cart-btn:disabled {
    background: #fff;
    color: var(--ink-soft);
    border-color: var(--line);
}

/* AI Cart Assistant strip shown at bottom of cart items list */
.cart-ai-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 18px;
    background: #EEF2F8;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.cart-ai-strip:hover {
    box-shadow: 0 4px 16px rgba(110, 18, 18, 0.12);
}

.cart-ai-mascot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.cart-ai-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-ai-text strong {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
}

.cart-ai-text span {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.cart-ai-sparkles {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--gold);
    opacity: 0.7;
    line-height: 1;
}

.cart-ai-sparkles small {
    font-size: 0.55rem;
    vertical-align: super;
    margin-left: 4px;
}

.cart-bulk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cart-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.cart-remove-selected {
    background: none;
    border: none;
    color: var(--red);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
}

.cart-remove-selected:disabled {
    color: var(--ink-soft);
    cursor: not-allowed;
}

.cart-bulk-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-move-to-wishlist {
    background: none;
    border: none;
    color: var(--red);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cart-move-to-wishlist:disabled {
    color: var(--ink-soft);
    cursor: not-allowed;
}

#cartSelectAll,
#cartSellerSelectAll,
.cart-row-select {
    accent-color: var(--red);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.cart-seller-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 0.86rem;
}

.cart-verified-seller {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--green-deep);
    font-size: 0.78rem;
    font-weight: 700;
}

.cart-verified-seller svg {
    width: 13px;
    height: 13px;
}

.cart-voucher-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1.5px dashed var(--red);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.cart-voucher-banner-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-voucher-banner-text svg {
    width: 22px;
    height: 22px;
    color: var(--red);
    flex-shrink: 0;
}

.cart-voucher-banner-text span {
    display: flex;
    flex-direction: column;
}

.cart-voucher-banner-text strong {
    color: var(--red);
    font-size: 0.9rem;
}

.cart-voucher-banner-text small {
    color: var(--ink-soft);
    font-size: 0.76rem;
}

.cart-voucher-banner-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.cart-voucher-banner-list[hidden] {
    display: none;
}

.cart-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-row {
    display: grid;
    grid-template-columns: 24px 70px 1fr 130px 90px;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
}

/* Order History cards reuse .cart-row for its card chrome (background/
   border/radius) but need block flow, not the cart page's 6-column grid —
   the compound selector (not just a 2nd class) beats .cart-row on
   specificity so this survives even after JS clears an inline style
   (row.style.display = '' falls back to whatever the stylesheet says, so
   that fallback has to already be correct here, not just true when this
   was set as an inline style). */
.cart-row.account-order-card {
    display: block;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .cart-row {
        grid-template-columns: 20px 56px 1fr auto;
        grid-template-areas:
            "select media info      info"
            "select media qty       qty"
            "select media totalwrap totalwrap";
        row-gap: 10px;
    }
    .cart-row-select-cell { grid-area: select; }
    .cart-row-media { grid-area: media; }
    .cart-row-info { grid-area: info; }
    .cart-row-qty { grid-area: qty; }
    .cart-row-total-wrap { grid-area: totalwrap; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
}

.cart-row-select-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-row-media {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cart-row-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
}

.cart-row-name:hover,
.cart-row-name:focus-visible {
    color: var(--red);
}

.cart-row-size {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.cart-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.78rem;
}

.cart-row-actions span {
    color: var(--line);
}

.cart-row-action-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ice);
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
}

.cart-row-action-link:hover,
.cart-row-action-link:focus-visible {
    color: var(--red);
    text-decoration: underline;
}

.cart-row-stock {
    display: inline-block;
    width: fit-content;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 100px;
    margin-top: 2px;
}

.cart-row-stock.in-stock {
    color: var(--green-deep);
    background: var(--green-soft, #eaf7ee);
}

.cart-row-stock.out-of-stock {
    color: var(--red);
    background: #fdeceb;
}

.cart-row-price {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
    margin-top: 2px;
}

.cart-row-total-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cart-row-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-row-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: color .2s ease, background .2s ease;
}

.cart-row-icon-btn svg {
    width: 17px;
    height: 17px;
}

.cart-row-icon-btn:hover,
.cart-row-icon-btn:focus-visible {
    color: var(--red);
    background: #fdeceb;
}

.cart-row-icon-heart.active {
    color: var(--red);
}

.cart-row-icon-heart.active svg {
    fill: var(--red);
}

.cart-row-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-row-qty input {
    width: 40px;
    padding: 8px 4px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 700;
}

.qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qty-btn:hover,
.qty-btn:focus-visible {
    border-color: var(--ice);
    color: var(--ice);
}

.cart-row-total {
    font-weight: 800;
    color: var(--red);
    font-size: 0.95rem;
    min-width: 70px;
    text-align: right;
}

.cart-summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
}

.cart-summary-card h3 {
    color: var(--ink);
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: var(--ink-soft);
    padding: 8px 0;
}

.cart-summary-row[hidden] {
    display: none;
}

.cart-summary-row span:last-child {
    color: var(--ink);
    font-weight: 600;
}

#cartShippingValue {
    text-transform: uppercase;
}

.cart-discount-row {
    color: var(--red);
    font-weight: 700;
}

.voucher-apply-row {
    display: flex;
    gap: 8px;
    margin: 14px 0 6px;
}

.voucher-apply-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-body);
}

.btn-outline-small {
    background: #fff;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0 18px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
}
.btn-outline-small svg { width: 14px; height: 14px; flex: 0 0 auto; }

.btn-outline-small:hover,
.btn-outline-small:focus-visible {
    border-color: var(--ice);
    color: var(--ice);
}

#cartVoucherApply {
    border-color: var(--red);
    color: var(--red);
}

#cartVoucherApply:hover,
#cartVoucherApply:focus-visible {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.voucher-message {
    font-size: 0.78rem;
    min-height: 1.2em;
    margin-bottom: 6px;
}

.voucher-message.is-error {
    color: var(--red);
}

.voucher-message.is-success {
    color: var(--green-deep);
}

.available-vouchers {
    margin-bottom: 12px;
}
.available-vouchers summary {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ice);
    cursor: pointer;
    list-style: none;
}
.available-vouchers summary::-webkit-details-marker { display: none; }
.available-vouchers summary::before {
    content: '▾ ';
}
.available-vouchers[open] summary::before {
    content: '▴ ';
}
#availableVouchersList {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.available-voucher-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
}
.available-voucher-row.disabled {
    opacity: 0.55;
}
.voucher-use-btn {
    flex: 0 0 auto;
    background: #fff;
    border: 1.5px solid var(--red);
    color: var(--red);
    font-weight: 800;
    font-size: 0.76rem;
    padding: 4px 14px;
    border-radius: 100px;
    cursor: pointer;
}
.voucher-use-btn.is-claimed {
    border-color: var(--green);
    color: var(--green-deep);
}
.voucher-use-btn.is-disabled {
    border-color: var(--line);
    color: var(--ink-soft);
    cursor: default;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding-top: 14px;
    font-weight: 800;
    color: var(--ink);
    font-size: 1.05rem;
}

.cart-summary-total span:last-child {
    color: var(--red);
    font-size: 1.3rem;
}

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
    margin-top: 18px;
    padding-left: 26px;
    padding-right: 26px;
    border: none;
    cursor: pointer;
}

.cart-checkout-btn svg {
    margin-left: auto;
}

.cart-checkout-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.cart-checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== CHECKOUT ===== */
.checkout-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

.express-checkout-band {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 24px;
}

.express-checkout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.express-checkout-head h4 {
    font-size: 1.05rem;
    color: var(--ink);
}

.express-checkout-sub {
    font-size: 0.8rem;
    color: var(--ink-soft);
    font-weight: 700;
}

.express-checkout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.express-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.express-checkout-btn:hover,
.express-checkout-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(28, 51, 80, 0.12);
}

.express-checkout-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

.express-checkout-btn.gpay,
.express-checkout-btn.apay {
    background: #000;
    color: #fff;
    border-color: #000;
}

.express-checkout-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 800;
}

.express-checkout-divider::before,
.express-checkout-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

@media (max-width: 640px) {
    .express-checkout-grid {
        grid-template-columns: 1fr;
    }
}

/* Cart's Order Summary card is a narrow sidebar column, not the wide
   checkout band — always stack the wallet buttons there regardless of
   viewport width. */
.cart-summary-card .express-checkout-grid {
    grid-template-columns: 1fr;
}

.cart-summary-card .express-checkout-divider {
    margin: 14px 0 4px;
}

.cart-guest-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ice);
    margin-top: 10px;
}

.cart-guest-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.cart-trust-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    margin-top: 14px;
}

.cart-trust-row span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.cart-trust-row svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--ink-soft);
}

.cart-payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.cart-payment-badges span {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    background: var(--ice-soft);
    border-radius: 6px;
    padding: 4px 8px;
}

.checkout-section {
    background-color: #fdf8f4;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top center;
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
}

.checkout-card h3 {
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-card-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.checkout-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.checkout-card-head h3 {
    margin: 0;
}

#checkoutAddressChangeBtn {
    border-color: var(--red);
    color: var(--red);
    border-radius: 100px;
}

#checkoutAddressChangeBtn:hover,
#checkoutAddressChangeBtn:focus-visible {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* Delivery Address — summary state */
.checkout-address-summary-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.86rem;
    color: var(--ink-soft);
}

.checkout-address-summary-box b {
    color: var(--ink);
}

/* Store note card */
.checkout-store-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.92rem;
}

.checkout-store-head b {
    color: var(--red);
}

.checkout-store-card {
    position: relative;
}

.checkout-store-card textarea {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px 10px 34px;
    font-family: var(--font-body);
    resize: vertical;
}

.checkout-store-card::after {
    content: '✏️';
    position: absolute;
    left: 34px;
    top: 58px;
    font-size: 0.85rem;
    pointer-events: none;
}

/* Delivery Option — boxed selectable rows */
.shipping-method-option {
    position: relative;
}

.shipping-method-option:has(input:checked) {
    border-color: var(--red);
    background: #fdeceb;
}

.shipping-method-price {
    font-weight: 800;
}

.shipping-method-price.is-free {
    color: var(--green-deep);
}

.shipping-method-check {
    display: none;
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 0.68rem;
    align-items: center;
    justify-content: center;
}

.shipping-method-option:has(input:checked) .shipping-method-check {
    display: flex;
}

/* Vouchers — collapsed trigger */
.checkout-voucher-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ink);
    cursor: pointer;
}

.checkout-voucher-trigger svg {
    width: 16px;
    height: 16px;
    color: var(--ink-soft);
}

/* Payment Method grid — always exactly 2 columns (the two square wallet
   cards) with any further method as a full-width row below, at every
   viewport. Explicit 2-column track (not auto-fit) on purpose: auto-fit
   with a min-width could resolve to 3+ columns on a wide sidebar-free
   layout, which combined with an item's own explicit grid-column (see
   page-checkout.php) produced gaps/misplacement instead of a clean pair. */
.payment-methods.payment-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 14px;
}

@media (max-width: 480px) {
    .payment-methods.payment-cards-grid {
        gap: 10px;
    }

    .payment-card-option {
        min-height: 90px;
        padding: 14px 8px;
        min-width: 0;
    }

    .payment-card-option--wide {
        min-height: 0;
        padding: 12px 14px;
    }

    .payment-card-icon {
        height: 22px;
        max-height: 22px;
    }

    .payment-card-label {
        font-size: 0.76rem;
        white-space: nowrap;
    }
}

.payment-card-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid var(--line);
    border-radius: 10px;
    padding: 22px 14px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}

.payment-card-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-card-option:has(input:checked) {
    border-color: var(--red);
    background: #fdeceb;
}

.payment-card-check {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    align-items: center;
    justify-content: center;
}

.payment-card-option:has(input:checked) .payment-card-check {
    display: flex;
}

.payment-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.payment-card-option--wide {
    grid-column: 1 / -1;
    padding: 14px 18px;
}

.payment-card-option--wide .payment-card-content {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
}

.payment-card-option--wide .payment-card-icon {
    height: 22px;
}

.payment-card-option--wide .payment-card-check {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}

.payment-card-content .payment-card-icon {
    height: 30px;
    max-width: 100%;
    object-fit: contain;
}

.payment-card-icon:not(.payment-card-logo) {
    color: var(--ink);
}

.payment-card-label {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ink);
}

/* Order Protection — pink dashed highlight only while the toggle is actually on;
   it used to be painted unconditionally, so switching it off still looked "on"
   (stuck highlight, like the shipping/payment selection bug). */
.checkout-protection-card:has(input:checked) {
    background: #fdeceb;
    border: 1.5px dashed #f0a8a2;
}

.checkout-protection-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.checkout-protection-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkout-protection-text b {
    color: var(--red);
    font-size: 0.9rem;
}

.checkout-protection-text small {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.checkout-protection-row .switch input:checked + .slider-toggle {
    background: var(--red);
}

/* Order Summary head with thumbnail collage */
.checkout-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.checkout-summary-head h3 {
    margin: 0;
}

.checkout-summary-collage {
    display: flex;
}

.checkout-summary-collage img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    margin-left: -10px;
}

.checkout-summary-collage img:first-child {
    margin-left: 0;
}

.checkout-gst-note {
    font-size: 0.74rem;
    color: var(--ink-soft);
    margin: 6px 0 14px;
}

.checkout-terms-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--ink-soft);
    margin-bottom: 16px;
    cursor: pointer;
}

.checkout-terms-row input {
    margin-top: 2px;
    accent-color: var(--red);
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkout-section-heading {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.checkout-section-heading svg {
    width: 18px;
    height: 18px;
    color: var(--ice);
    flex: 0 0 auto;
}

.checkout-hidden-field {
    display: none;
}

.checkout-guest-hint {
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--ink-soft);
}

.checkout-info-banner {
    background: rgba(0, 168, 150, 0.08);
    border: 1px solid rgba(0, 168, 150, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: var(--ice);
    font-weight: 600;
    margin-bottom: 16px;
}

.checkout-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
}

.checkout-steps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft);
    position: relative;
    min-width: 100px;
    text-align: center;
}

.checkout-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 11px;
    left: calc(50% + 17px);
    width: calc(100% - 34px);
    height: 1.5px;
    background: var(--line);
}

.checkout-steps li.is-done:not(:last-child)::after {
    background: var(--green-deep);
}

.checkout-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ice-soft);
    color: var(--ink-soft);
    font-size: 0.72rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.checkout-steps li.is-active {
    color: var(--red);
    font-weight: 800;
}

.checkout-steps li.is-active .checkout-step-dot {
    background: var(--red);
    color: #fff;
    width: 34px;
    height: 34px;
    font-size: 0.88rem;
    box-shadow: 0 0 0 6px rgba(231, 51, 42, 0.15), 0 4px 12px rgba(231, 51, 42, 0.3);
}

.checkout-step-icon {
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.7;
}

.checkout-steps li.is-done {
    color: var(--green-deep);
}

.checkout-steps li.is-done .checkout-step-dot {
    background: var(--green-deep);
    color: #fff;
}

/* Double-class selector for specificity — this rule needs to win over the
   plain .checkout-summary-row{display:flex} rule declared later below,
   without depending on source order. */
.checkout-summary-row.checkout-summary-row-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 10px;
}

.checkout-summary-thumb-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.checkout-summary-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--ice-soft);
    display: block;
}

.checkout-summary-qty-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-voucher-applied[hidden] {
    display: none;
}

.checkout-voucher-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 168, 150, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 14px 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ice);
}

.checkout-legal-text {
    margin-top: 12px;
    font-size: 0.72rem;
    color: var(--ink-soft);
    text-align: center;
    line-height: 1.5;
}

.checkout-legal-text a {
    color: var(--ice);
    text-decoration: underline;
}

.checkout-trust-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(28, 51, 80, 0.12);
}

.checkout-trust-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.checkout-trust-list svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--ice);
}

.checkout-summary-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.checkout-summary-item-info b {
    color: var(--ink) !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-summary-item-info small {
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.checkout-summary-item-qty {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.form-row {
    margin-bottom: 16px;
}

.form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row input[type="url"],
.form-row input[type="date"],
.form-row select,
.form-row textarea {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    background: #fff;
}

.form-row textarea {
    resize: vertical;
}

.form-row input[type="date"] {
    line-height: 1.3;
}
.form-row input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    padding: 3px;
    filter: invert(24%) sepia(23%) saturate(1189%) hue-rotate(166deg) brightness(93%) contrast(88%);
}
.form-row input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background: var(--ice-soft);
}

.form-row select {
    cursor: pointer;
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-method-option {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: var(--ink) !important;
    margin-bottom: 0 !important;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 11px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.payment-method-option:has(input:checked) {
    border-color: var(--red);
    background: rgba(255, 111, 97, 0.05);
}

.payment-method-option input {
    accent-color: var(--red);
}

.payment-method-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.payment-method-info small {
    font-weight: 500;
    font-size: 0.76rem;
    color: var(--ink-soft);
}

.payment-method-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    background: var(--ice-soft);
    border-radius: 6px;
    padding: 4px 8px;
    white-space: nowrap;
}

.form-error {
    display: block;
    color: var(--red);
    font-size: 0.76rem;
    font-weight: 700;
    margin-top: 4px;
    min-height: 1em;
}

.voucher-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voucher-option {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: var(--ink) !important;
    margin-bottom: 0 !important;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 11px 14px;
    cursor: pointer;
}

.voucher-option input {
    accent-color: var(--red);
    margin-top: 3px;
}

.shipping-method-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shipping-method-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 11px 14px;
    cursor: pointer;
}
.shipping-method-option:has(input:checked) {
    border-color: var(--red);
    background: #fdeceb;
}
.shipping-method-option input {
    /* The design shows no visible radio circle — only the border/background
       swap plus the red checkmark badge indicate selection. Leaving the
       native radio visible let the browser's own focus/active ring linger
       after each click ("hover ngancing" — looked jammed/stuck), since a
       clicked radio keeps focus until something else is clicked. Hiding it
       visually (not display:none, so it stays keyboard-focusable and the
       label click still toggles it) removes that lingering ring. */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.shipping-method-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem !important;
    color: var(--ink) !important;
}
.shipping-method-info small {
    font-weight: 600;
    font-size: 0.76rem;
    color: var(--ink-soft);
    margin-top: 2px;
}
.shipping-method-price {
    font-weight: 800 !important;
    color: var(--ink) !important;
    white-space: nowrap;
}

.voucher-option.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.voucher-option.disabled input {
    cursor: not-allowed;
}

.checkout-discount-row {
    color: var(--green-deep);
    font-weight: 700;
}

.checkout-submit {
    position: relative;
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}

.checkout-submit svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.checkout-submit-sparkle {
    position: absolute;
    right: 16px;
    top: 8px;
    font-size: 0.7rem;
    opacity: 0.8;
}

.checkout-disclaimer {
    margin-top: 14px;
    font-size: 0.76rem;
    color: var(--ink-soft);
    text-align: center;
}

.checkout-summary {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 110px;
}

.checkout-summary h3 {
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 14px;
}

.checkout-summary-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--ink);
}

.checkout-summary-row[hidden] {
    display: none;
}

.checkout-summary-row b {
    color: var(--ink-soft);
    font-weight: 700;
}

.checkout-summary-total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(28, 51, 80, 0.15);
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    color: var(--ink);
    font-size: 1.05rem;
}

.checkout-summary-total span:last-child {
    color: var(--red);
    font-size: 1.25rem;
}

.checkout-confirmation {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 36px;
    text-align: center;
}

.checkout-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.checkout-success-icon svg {
    width: 26px;
    height: 26px;
}

.checkout-confirmation h3 {
    color: var(--ink);
    font-size: 1.2rem;
}

.checkout-confirmation p {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--ink);
}

.checkout-confirmation .checkout-summary-items {
    margin-top: 16px;
    text-align: left;
}

.checkout-confirmation .checkout-summary-total {
    text-align: left;
}

/* ===== Auth pages (Login/Register) — full-screen split layout ===== */

/* When a banner image is configured, the whole section goes edge-to-edge
   full-viewport (no .wrap max-width, no .section vertical padding) so the
   split is a true full-screen left/right layout, not a boxed card. */
.auth-fullscreen-section {
    padding: 0;
}

.auth-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Plain 100vh doesn't know the sticky .site-header sits on top of it, so
       subtracting an estimate keeps the section from running past the fold.
       Kept small on purpose: the banner photo (portrait-ish, ~0.82 ratio)
       needs a tall column to show its full height under object-fit:cover
       before object-position:top starts eating into the bottom of the image
       (the "Healthy Fish..." sign) — subtracting the full ~90px header
       estimate here cropped mid-sentence on common desktop heights. This is
       a compromise, not a full fix: at very wide/short viewports (e.g. a
       1920px-wide, ~950px-tall window) the column still can't be tall enough
       to show 100% of the image without the same tradeoff resurfacing —
       there's no CSS-only fix for that without either capping the column's
       width or supplying a less-tall-relative-to-width banner image. */
    min-height: calc(100vh - 40px);
    align-items: stretch;
}

.admin-bar .auth-page-grid {
    min-height: calc(100vh - 72px);
}

@media screen and (max-width: 782px) {
    .admin-bar .auth-page-grid {
        min-height: calc(100vh - 86px);
    }
}

@media (max-width: 640px) {
    /* .admin-bar .auth-page-grid included explicitly — it's a higher-
       specificity selector than the plain .auth-page-grid above, so without
       repeating it here the calc(100vh - 136px) rule from the 782px query
       would win over this min-height:0 on mobile-with-admin-bar. */
    .auth-page-grid,
    .admin-bar .auth-page-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }
}

.visual-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--teal-1, #0f4c4c), var(--ink));
}

/* object-fit:cover fills the panel edge-to-edge with no letterbox gap.
   This only looks right because each breakpoint now shows the image
   built for that exact column shape (see the tablet media query below) —
   cover only trims a small, usually-empty margin around the image
   instead of cutting into the subject, the way it did before the
   tablet-breakpoint bug forced a portrait image into a wide strip. */
.visual-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Both banner assets are portrait, narrower than every container they get
       cropped into — cover always trims top/bottom, never left/right. Anchor
       to the top so the crop eats into the (usually decorative/empty) bottom
       of the image instead of slicing through the headline that sits near
       the top, especially on the short mobile reveal panel where the crop is
       most aggressive. */
    object-position: 50% 0%;
}

.visual-panel .visual-panel-tablet-img {
    display: none;
}

/* The "mobile-tablet" banner asset is shared by BOTH tablet (side-by-side
   split, narrower column) and mobile (full-bleed top strip with the
   reveal animation) — only the desktop banner is exclusive to ≥901px.
   Tablet keeps the same 2-column split as desktop; only mobile (≤640px,
   separate media query below) collapses to a single stacked column. */
@media (max-width: 900px) {
    .visual-panel .visual-panel-desktop-img {
        display: none;
    }
    .visual-panel .visual-panel-tablet-img {
        display: block;
    }
}

@media (max-width: 640px) {
    /* Mobile reveal shows the WHOLE banner image, uncropped — unlike
       desktop/tablet (object-fit:cover, deliberately crops to fill a fixed
       column shape), the point here is the full photo fills the width top to
       bottom before it slides away, so the box's height must follow the
       image's own aspect ratio instead of a fixed pixel value. max-height
       (not height) is what animates: height:auto can't transition, so the
       "open" state uses a max-height comfortably larger than any real
       rendered height (portrait ratio ~0.48 tops out around 1330px at the
       640px upper edge of this breakpoint) and the "closed" state collapses
       it to 0 — overflow:hidden on .visual-panel clips during the animation.
       The <img> width/height attributes (from wp_get_attachment_image())
       let the browser reserve this space before the image finishes loading,
       so there's no layout jump once it arrives. */
    .visual-panel {
        height: auto;
        max-height: 2000px;
        transition: max-height 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
    }
    .visual-panel img {
        position: static;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .visual-panel.auth-banner-hide {
        max-height: 0;
        opacity: 0;
        transform: translateY(-24px);
        margin-bottom: -20px;
    }
}

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 32px;
}

.auth-form-inner {
    max-width: 420px;
    width: 100%;
}

.auth-form-panel-solo {
    max-width: 480px;
    margin: 0 auto;
}

.login-identifier-toggle {
    display: flex;
    background: var(--cream);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px;
    gap: 4px;
}
.login-identifier-toggle button {
    flex: 1;
    background: none;
    border: none;
    border-radius: 9px;
    padding: 11px;
    font-weight: 800;
    font-size: 0.86rem;
    color: var(--ink-soft);
    cursor: pointer;
    font-family: var(--font-body);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.login-identifier-toggle button:hover:not(.active) {
    background: rgba(28, 51, 80, 0.06);
    color: var(--ink);
}
.login-identifier-toggle button.active {
    background: var(--red);
    color: #fff;
}

.or-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 800;
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.social-login-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-btn {
    border: 1.5px solid var(--line);
    border-radius: 100px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--ink);
    font-family: var(--font-body);
    width: 100%;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.social-btn:hover {
    background: #f9fbfb;
    border-color: var(--ink);
}

.social-btn:active {
    transform: scale(0.98);
}

.social-btn svg {
    width: 18px;
    height: 18px;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 420px) {
    .field-grid {
        grid-template-columns: 1fr;
    }
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.checkbox-row input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--red);
    cursor: pointer;
    flex: 0 0 auto;
}

.checkbox-row label {
    font-size: 0.82rem;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}

.checkbox-row label a {
    color: var(--ice);
    font-weight: 800;
}

.checkbox-row label a:hover {
    text-decoration: underline;
}

/* ===== Auth (Login/Register) form extras: subheading, password toggle,
   remember-me row, password strength meter, guest-checkout note ===== */

.auth-subheading {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-top: 6px;
    margin-bottom: 24px;
}

.auth-subheading a {
    color: var(--red);
    font-weight: 800;
}

.auth-subheading a:hover {
    text-decoration: underline;
}

.password-field-wrap {
    position: relative;
}

.password-field-wrap input {
    padding-right: 42px !important;
}

.toggle-pw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0;
    display: flex;
}

.toggle-pw svg {
    width: 18px;
    height: 18px;
}

.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
}

.remember-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--ink);
    font-weight: 600;
}

.remember-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--red);
    cursor: pointer;
}

.forgot-link {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--red);
}

.forgot-link:hover {
    text-decoration: underline;
}

.strength-meter {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.strength-bar {
    flex: 1;
    height: 5px;
    border-radius: 100px;
    background: var(--line);
    transition: background 0.2s ease;
}

.strength-label {
    font-size: 0.72rem;
    font-weight: 800;
    margin-top: 6px;
    display: none;
}

.strength-label.show {
    display: block;
}

.pw-rule-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
}
.pw-rule {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink-soft);
}
.pw-rule svg {
    width: 13px;
    height: 13px;
    color: var(--line);
    flex-shrink: 0;
}
.pw-rule.met {
    color: var(--green-deep);
}
.pw-rule.met svg {
    color: var(--green);
}

.verify-human-block {
    margin-bottom: 18px;
}
.verify-human-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}
.verify-human-label svg {
    width: 14px;
    height: 14px;
    color: var(--ink-soft);
}

.slide-to-verify {
    position: relative;
    height: 48px;
    border-radius: 10px;
    background: var(--cream);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.slide-to-verify-handle {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: grab;
    touch-action: none;
    z-index: 1;
}
.slide-to-verify-handle:active {
    cursor: grabbing;
}
.slide-to-verify-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink-soft);
    pointer-events: none;
}
.slide-to-verify.verified {
    background: #e9f5e0;
    border-color: var(--green);
}
.slide-to-verify.verified .slide-to-verify-label {
    color: var(--green-deep);
}

.encrypted-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--ink-soft);
    margin: 4px 0 16px;
}
.encrypted-note svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.auth-guest-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--green-deep);
    font-weight: 700;
    text-align: center;
}

.auth-guest-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.auth-guest-note a {
    color: var(--ink);
    text-decoration: underline;
}

/* ===== My Account dashboard (sidebar-tab) ===== */

.account-dash {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}

.account-sidebar-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    margin-bottom: 12px;
}
.account-sidebar-toggle svg { width: 18px; height: 18px; }

.account-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 34, 51, 0.5);
    z-index: 40;
}
.account-sidebar-overlay.is-visible { display: block; }

.account-side-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    position: sticky;
    top: 100px;
}

.account-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 11px 12px;
    font-weight: 700;
    font-size: 0.87rem;
    color: var(--ink-soft);
    cursor: pointer;
    font-family: var(--font-body);
}
.account-tab-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.account-tab-btn.active,
.account-tab-btn:hover {
    background: var(--ice-soft);
    color: var(--ice);
}
.account-nav-count {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex: 0 0 auto;
}
.account-nav-divider { height: 1px; background: var(--line); margin: 10px 0; }
.account-logout-link {
    color: var(--red);
}
.account-logout-link:hover { background: none; color: var(--red-dark); }

.account-sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    margin-bottom: 6px;
    margin-left: auto;
}
.account-sidebar-close svg { width: 20px; height: 20px; }

.account-sidebar-profile {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}
.account-sidebar-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 auto 10px;
    overflow: hidden;
}
.account-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-sidebar-profile h4 { font-size: 0.98rem; color: var(--ink); }
.account-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--gold);
    color: #5b3d00;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 100px;
    margin-top: 8px;
}
.account-tier-badge svg { width: 11px; height: 11px; }

.account-tab-panel { display: none; }
.account-tab-panel.active { display: block; }

@media (max-width: 900px) {
    .account-dash { grid-template-columns: 1fr; }
    .account-sidebar-toggle { display: inline-flex; }
    .account-side-nav {
        position: fixed;
        top: 0;
        left: -300px;
        bottom: 0;
        width: 280px;
        z-index: 50;
        border-radius: 0;
        overflow-y: auto;
        transition: left 0.25s ease;
        padding: 16px;
    }
    .account-side-nav.is-open { left: 0; box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2); }
    .account-sidebar-close { display: flex; justify-content: flex-end; }
}

.account-welcome-banner {
    background: linear-gradient(160deg, var(--ice), var(--teal-3));
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.account-welcome-banner p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--ink);
    font-weight: 700;
}

.account-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 640px) { .account-stat-grid { grid-template-columns: repeat(2, 1fr); } }

.account-stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.account-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.account-stat-icon svg { width: 22px; height: 22px; }
.account-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--ink);
    line-height: 1;
}
.account-stat-label {
    display: block;
    font-size: 0.76rem;
    color: var(--ink-soft);
    font-weight: 700;
    margin-top: 4px;
}

.account-order-row { display: flex; align-items: center; gap: 14px; }
.account-order-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--ice-soft);
}
.account-order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.account-order-info { flex: 1; min-width: 0; }

.account-add-card {
    width: 100%;
    border: 2px dashed var(--line);
    border-radius: 12px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    color: var(--ink-soft);
    cursor: pointer;
}
.account-add-card:hover { border-color: var(--ice); color: var(--ice); }
.account-add-card svg { width: 24px; height: 24px; }
.account-add-card span { font-weight: 800; font-size: 0.85rem; }

.account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.account-section-head h3 { margin-bottom: 0; }
.account-subtle-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }

.account-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--line);
    color: var(--ink);
}
.account-status-pending { background: #fff6e0; color: #a97b0a; }
.account-status-processing { background: var(--ice-soft); color: var(--ice); }
.account-status-completed,
.account-status-delivered { background: #e9f5e0; color: var(--green-deep); }
.account-status-cancelled { background: #fdeceb; color: var(--red-dark); }

.account-reorder-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 900px) { .account-reorder-grid { grid-template-columns: repeat(2, 1fr); } }
.account-reorder-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    /* Grid stretches every card in a row to the tallest one, but without
       flex the Reorder button just sits wherever the (variable-length)
       product name pushes it — a long real title on one card leaves the
       shorter cards' buttons floating above it, out of line. Flex-column +
       margin-top:auto on the button below pins it to the bottom of every
       card regardless of name length. */
    display: flex;
    flex-direction: column;
}
/* flex:1 makes this the child that absorbs the row's extra stretched
   height (see .account-reorder-card comment above), so the button below
   keeps a consistent gap instead of being flush against a variable-height
   name. */
.account-reorder-card > a { flex: 1; display: block; }
.account-reorder-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.account-reorder-name {
    /* Clamped so one unusually long product title can't make its card (and
       therefore the whole grid row, since CSS Grid stretches siblings to
       match) dramatically taller than the others. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 6px;
    min-height: 2.2em;
}
.account-reorder-btn {
    width: 100%;
    margin-top: 8px;
    background: var(--gold);
    border: none;
    border-radius: 100px;
    padding: 8px;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
}
.account-reorder-btn.added { background: var(--green); color: #fff; }

.account-loyalty-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.account-loyalty-ring-points { font-family: var(--font-heading); font-size: 1.3rem; fill: var(--ink); }
.account-loyalty-ring-threshold { font-size: 0.6rem; fill: var(--ink-soft); font-weight: 700; }
.account-loyalty-card h4 { color: var(--ink); font-size: 1rem; }

.account-order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.account-order-filter {
    background: #f1f7f7;
    border: none;
    border-radius: 100px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--ink-soft);
    cursor: pointer;
}
.account-order-filter.active { background: var(--ink); color: #fff; }

.account-tank-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 700px) { .account-tank-grid { grid-template-columns: 1fr; } }

.account-address-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 6px;
}
@media (max-width: 700px) { .account-address-grid { grid-template-columns: 1fr; } }
.account-address-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
}
.account-address-card.is-default {
    background: #fdeceb;
    border-color: var(--red);
}
.account-address-default-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--red);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 100px;
}
.account-address-grid .account-add-card { height: 100%; }
.account-tank-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 14px;
}
.account-tank-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.account-tank-avatar svg { width: 60%; }
.account-tank-body { flex: 1; min-width: 0; }
.account-tank-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-tank-sub {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin: 6px 0 12px;
    /* Real product titles in this store run long (SEO-stuffed) — clamp so
       one tank's subtitle can't blow the card (and its grid row sibling)
       out to several times the others' height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.account-tank-stock-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.account-tank-stock-bar { background: var(--line); border-radius: 100px; height: 8px; overflow: hidden; }
.account-tank-stock-fill { height: 100%; border-radius: 100px; }
.account-tank-stock-low { background: var(--red); }
.account-tank-stock-mid { background: var(--gold); }
.account-tank-stock-high { background: var(--green); }
.account-tank-restock-btn {
    margin-top: 12px;
    background: var(--ice-soft);
    border: none;
    color: var(--ice);
    border-radius: 100px;
    padding: 8px 16px;
}
.account-tank-restock-btn:hover { background: var(--ice); color: #fff; }

.account-pending-review-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.account-pending-review-row:last-child { border-bottom: none; }
.account-pending-review-row img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.account-pending-review-name { font-weight: 700; color: var(--ink); }

.count-badge {
    display: inline-block;
    background: var(--red);
    color: #fff;
    border-radius: 100px;
    padding: 2px 9px;
    font-size: 0.72rem;
    font-weight: 800;
}

.account-review-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.account-review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.account-review-top img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.account-review-stars { color: var(--gold); letter-spacing: 2px; }
.account-review-title { font-weight: 800; color: var(--ink); margin-top: 6px; }
.account-review-text { font-size: 0.9rem; color: var(--ink); margin: 6px 0; }
.account-review-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.account-review-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }

.status-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 800;
}
.status-tag.status-published { background: #e9f5e0; color: var(--green-deep); }
.status-tag.status-pending { background: #fff6e0; color: #a97b0a; }
.status-tag.status-rejected { background: #fdeceb; color: var(--red-dark); }

.icon-action {
    background: none;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Sized explicitly — without this, an inline <svg> with no width/height
   attributes falls back to the browser's 300x150px replaced-element
   default and effectively disappears inside a small icon button. */
.icon-action svg { width: 14px; height: 14px; display: block; }
.icon-action:hover { border-color: var(--ice); color: var(--ice); }
.icon-action.danger:hover { border-color: var(--red); color: var(--red); }

.account-edit-panel,
.account-delete-confirm {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.account-delete-confirm p { color: var(--red-dark); font-weight: 700; margin-bottom: 10px; }
.edit-star-picker,
.star-picker,
.mini-star-picker {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.edit-star-picker button,
.star-picker button,
.mini-star-picker button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--line);
}
.edit-star-picker button.filled,
.star-picker button.filled,
.mini-star-picker button.filled {
    color: var(--gold);
}
.edit-star-picker svg { width: 20px; height: 20px; }

.account-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.account-avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    overflow: hidden;
    flex: 0 0 auto;
}
.account-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } }

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.toggle-row:last-of-type { border-bottom: none; }
.id-label { font-weight: 700; color: var(--ink); }
.id-sub { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider-toggle {
    position: absolute;
    inset: 0;
    background: var(--line);
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.slider-toggle::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.switch input:checked + .slider-toggle { background: var(--green); }
.switch input:checked + .slider-toggle::before { transform: translateX(20px); }

/* ===== Write a Review page ===== */

.write-review-reward-note {
    background: #fff6e0;
    color: #a97b0a;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.overall-rating { text-align: center; margin-bottom: 20px; }
.overall-rating .star-picker { justify-content: center; }
.overall-rating .star-picker svg { width: 32px; height: 32px; }
.rating-label { font-weight: 800; color: var(--ink); }

.subrating-list { margin-bottom: 20px; }
.subrating-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.sr-label { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.mini-star-picker svg { width: 18px; height: 18px; }
.mini-star-picker { margin-bottom: 0; }

.char-count { text-align: right; font-size: 0.74rem; color: var(--ink-soft); margin-top: 4px; }
.char-count.warn { color: var(--red); }

.prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prompt-chip {
    background: var(--ice-soft);
    border: none;
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ice);
    cursor: pointer;
}

.upload-zone {
    border: 2px dashed var(--line);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    margin: 16px 0 10px;
}
.upload-zone p { font-weight: 700; color: var(--ink); margin: 6px 0 4px; }
.upload-zone span { font-size: 0.78rem; color: var(--ink-soft); }
.upload-zone.drag { border-color: var(--ice); background: var(--ice-soft); }

.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
@media (max-width: 560px) { .photo-preview-grid { grid-template-columns: repeat(3, 1fr); } }
.photo-thumb { position: relative; aspect-ratio: 1; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.photo-thumb .remove-photo {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    border: none;
    cursor: pointer;
    line-height: 1;
    font-size: 0.9rem;
}

.identity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f9fbfb;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
}

.points-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff6e0;
    color: #a97b0a;
    border-radius: 100px;
    padding: 8px 18px;
    font-weight: 800;
    margin: 14px 0;
}
.success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.write-review-guidelines {
    display: flex;
    gap: 10px;
    background: var(--ice-soft);
    color: var(--ice);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.write-review-guidelines svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

.rating-sub { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }

/* ===== Overview: welcome banner CTA, order rows, loyalty perks ===== */

.account-welcome-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.account-welcome-subtext {
    margin: 4px 0 0;
    color: var(--ink);
    opacity: 0.85;
    font-weight: 600;
    font-size: 0.9rem;
}
.account-welcome-cta {
    background: var(--gold);
    color: var(--ink);
    font-weight: 800;
    padding: 11px 22px;
    border-radius: 100px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
}
.account-welcome-cta:hover { background: #f5c02f; }

.account-order-row-full {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.account-order-row-full:last-child { border-bottom: none; }

#accountOrderList { display: flex; flex-direction: column; gap: 14px; }
.account-order-items-list { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.account-order-items-list .order-item-row { padding: 12px 0; }
.account-order-name { font-weight: 700; font-size: 0.88rem; color: var(--ink); margin-top: 2px; }
.account-order-side {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
}

.account-loyalty-description {
    font-size: 0.86rem;
    color: var(--ink-soft);
    margin: 4px 0 0;
    line-height: 1.5;
}
.account-loyalty-perks {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.account-loyalty-perks span {
    background: var(--ice-soft);
    color: var(--ice);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 100px;
}

/* ===== Account nav group labels ===== */

.account-nav-group-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: 0.7;
    margin: 16px 0 4px;
    padding: 0 12px;
}
.account-nav-group-label:first-of-type { margin-top: 8px; }

/* ===== Account hero banner (dashboard overview) ===== */

.account-hero-banner {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 60%, var(--red-deep) 100%);
    border-radius: var(--radius);
    padding: 24px;
    color: #fff;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}
.account-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px);
    background-size: 22px 22px;
    pointer-events: none;
}
.account-hero-top { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; margin-bottom: 18px; }
.account-hero-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--gold);
    color: var(--red-deep);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800;
    flex-shrink: 0; overflow: hidden; border: 3px solid rgba(255,255,255,.5);
}
.account-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-hero-info h3 { font-family: var(--font-heading); font-size: 1.4rem; margin: 2px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-hero-welcome { font-size: 0.85rem; opacity: 0.85; margin: 0; }
.account-hero-contact { font-size: 0.82rem; opacity: 0.85; margin: 2px 0 0; }
.account-tier-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.18);
    border-radius: 100px; padding: 4px 12px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.account-tier-pill svg { width: 13px; height: 13px; color: var(--gold); }
.account-hero-progress-card {
    background: rgba(255,255,255,.94);
    color: var(--ink);
    border-radius: 12px;
    padding: 16px 18px;
    position: relative; z-index: 1;
}
.account-hero-progress-label { font-weight: 700; font-size: 0.92rem; margin: 0 0 10px; }
.account-hero-progress-bar { background: var(--line); border-radius: 100px; height: 9px; overflow: hidden; }
.account-hero-progress-bar div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 100px; }
.account-hero-progress-sub { font-size: 0.76rem; color: var(--ink-soft); margin: 8px 0 0; text-align: right; }

.account-section-label {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    margin: 0 0 12px;
}

/* ===== Quick Access ===== */

.account-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width: 900px) { .account-quick-grid { grid-template-columns: repeat(2, 1fr); } }
.account-quick-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    transition: transform .15s ease, box-shadow .15s ease;
    font-family: inherit;
}
.account-quick-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.account-quick-card strong { font-size: 0.92rem; }
.account-quick-card > span:last-child { font-size: 0.76rem; color: var(--ink-soft); }
.account-quick-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.account-quick-icon svg { width: 20px; height: 20px; }

/* ===== Rewards & Offers ===== */

.account-rewards-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 900px) { .account-rewards-grid { grid-template-columns: 1fr; } }
.account-rewards-balance-card {
    background: linear-gradient(160deg, var(--kraft), var(--paper));
    border: 1px solid var(--kraft-line);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.account-rewards-balance-card strong { font-family: var(--font-heading); font-size: 1.8rem; color: var(--ink); }
.account-rewards-balance-card strong em { font-size: 0.9rem; font-style: normal; color: var(--ink-soft); font-weight: 600; margin-left: 4px; }
.account-rewards-links { display: flex; flex-direction: column; gap: 10px; }
.account-rewards-link {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
}
.account-rewards-link span:nth-child(2) { flex: 1; font-size: 0.82rem; line-height: 1.5; }
.account-rewards-link span:nth-child(2) strong { font-size: 0.88rem; }
.account-rewards-link-arrow { width: 16px; height: 16px; color: var(--ink-soft); flex-shrink: 0; }

/* ===== Account Settings quick grid ===== */

.account-settings-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width: 900px) { .account-settings-quick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .account-settings-quick-grid { grid-template-columns: 1fr; } }
.account-settings-quick-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
}
.account-settings-quick-card span:last-child { font-size: 0.82rem; line-height: 1.5; }
.account-settings-quick-card span:last-child strong { font-size: 0.86rem; }

/* ===== My Orders: stats + search ===== */

.account-order-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 700px) { .account-order-stats-row { grid-template-columns: 1fr; } }
.account-order-stat-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-order-stat-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
.account-order-stat-icon svg { width: 20px; height: 20px; }
.account-order-stat-card strong { font-family: var(--font-heading); font-size: 1.7rem; }
.account-order-stat-card span { font-weight: 700; font-size: 0.86rem; }
.account-order-stat-card em { font-style: normal; font-size: 0.76rem; color: var(--ink-soft); }

.account-order-search-row { margin-bottom: 14px; }
.account-order-search {
    position: relative;
    max-width: 420px;
}
.account-order-search svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--ink-soft);
}
.account-order-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.88rem;
    font-family: inherit;
}

/* ===== Wishlist ===== */

.wishlist-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.wishlist-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-primary-small {
    display: inline-flex; align-items: center;
    background: var(--red); color: #fff;
    border: none; border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.btn-primary-small:hover { background: var(--red-dark); }
.btn-primary-small:active { transform: scale(0.97); }
.wishlist-sort-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-bottom: 14px; font-size: 0.84rem; }
.wishlist-sort-row select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.84rem; font-family: inherit; }

.wishlist-subtabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}
.wishlist-subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 12px 18px;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--ink-soft);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
}
.wishlist-subtab svg { width: 16px; height: 16px; }
.wishlist-subtab.active {
    color: var(--red);
    border-bottom-color: var(--red);
}
.wishlist-subtab-panel { display: none; }
.wishlist-subtab-panel.active { display: block; }

.product-request-form-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}
.product-request-form-card h4 { margin: 0 0 4px; }
.product-request-form-card .form-row { margin-bottom: 14px; }
.product-request-form-card textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.product-request-list { display: flex; flex-direction: column; gap: 10px; }
.product-request-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}
.product-request-status {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 100px;
    white-space: nowrap;
}
.product-request-status-pending { background: #fff6e0; color: #a97b0a; }
.product-request-status-sourcing { background: var(--ice-soft); color: var(--ice); }
.product-request-status-added { background: #e9f5e0; color: var(--green-deep); }
.product-request-status-declined { background: #fdeceb; color: var(--red-dark); }

.wishlist-recs-band {
    background: var(--cream);
    border: 1px dashed var(--kraft-line);
    border-radius: var(--radius);
    padding: 22px;
    margin-top: 24px;
}
.wishlist-recs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.wishlist-recs-icon { font-size: 1.6rem; }
.wishlist-recs-head h4 { margin: 0; font-family: var(--font-heading); font-size: 1.05rem; }
.wishlist-recs-head p { margin: 2px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.prod-grid-compact { grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1100px) { .prod-grid-compact { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .prod-grid-compact { grid-template-columns: repeat(2, 1fr); } }

/* ===== My Coupons ===== */

.account-coupon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 700px) { .account-coupon-grid { grid-template-columns: 1fr; } }
.account-coupon-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--paper);
    border: 1.5px dashed var(--kraft-line);
    border-radius: 12px;
    padding: 16px;
}
.account-coupon-value {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--red-dark);
    background: #fce7dc;
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    flex-shrink: 0;
    min-width: 84px;
}
.account-coupon-body { flex: 1; min-width: 0; }
.account-coupon-code { font-family: var(--font-mono); letter-spacing: .5px; }
.account-coupon-body p { margin: 4px 0; font-size: 0.82rem; }

/* ===== Refer & Earn ===== */

.account-refer-card { text-align: center; max-width: 520px; margin: 0 auto; }
.account-refer-icon { font-size: 2.4rem; margin-bottom: 6px; }
.account-refer-code-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.account-refer-code-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    background: var(--cream);
}

/* ===== Payment Methods (settings) ===== */

.account-payment-methods-list { display: flex; flex-direction: column; gap: 10px; }
.account-payment-method-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
}
.account-payment-method-row:has(input:checked) { border-color: var(--red); background: #fdeceb; }

/* ===== My Reviews (standalone page) ===== */

.reviews-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 22px 0;
}
@media (max-width: 640px) { .reviews-stats-row { grid-template-columns: repeat(2, 1fr); } }
.reviews-stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}
.reviews-stat-card .val {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--ink);
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.reviews-stat-card .val svg { width: 18px; height: 18px; color: var(--gold); }
.reviews-stat-card .lbl { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; margin-top: 6px; }

.reviews-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.reviews-sort-select {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-soft);
}
.reviews-sort-select select {
    border: 1.5px solid var(--line);
    border-radius: 100px;
    padding: 7px 14px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    font-size: 0.78rem;
}

.account-review-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.account-review-readmore {
    background: none;
    border: none;
    color: var(--ice);
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 8px;
    display: block;
}

.account-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 8px;
}
.account-review-helpful {
    font-size: 0.76rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}
.account-review-helpful svg { width: 14px; height: 14px; color: var(--green-deep); }

.review-helpful-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.review-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-size: 0.8rem;
    color: var(--ink-soft);
    cursor: pointer;
}
.review-helpful-btn svg { width: 14px; height: 14px; }
.review-helpful-btn:hover:not(:disabled) { border-color: var(--green-deep); color: var(--green-deep); }
.review-helpful-btn.voted,
.review-helpful-btn:disabled {
    color: var(--green-deep);
    border-color: var(--green-deep);
    background: var(--lime-light, rgba(132, 204, 22, 0.1));
    cursor: default;
    opacity: 1;
}

.reviews-empty-state {
    display: none;
    text-align: center;
    padding: 60px 20px;
}
.reviews-empty-state.show { display: block; }
.reviews-empty-state svg { width: 80px; height: 80px; color: var(--line); margin: 0 auto 18px; }
.reviews-empty-state h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 8px; }
.reviews-empty-state p { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 20px; }

.checkout-bank-info {
    margin-top: 16px;
    background: var(--ice-soft);
    border-radius: 10px;
    padding: 14px;
}

.checkout-bank-info h4 {
    font-size: 0.85rem;
    color: var(--ink);
    margin-bottom: 6px;
}

/* ===== 404 ===== */
.error-404-section {
    padding: 90px 0;
}

.error-404 {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

.error-404-illustration {
    width: 180px;
    margin: 0 auto 10px;
}

.error-404-code {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 800;
    color: var(--red);
    line-height: 1;
}

.error-404 h1 {
    margin-top: 8px;
    font-size: 1.6rem;
    color: var(--ink);
}

.error-404 p {
    margin-top: 12px;
    color: var(--ink-soft);
    line-height: 1.6;
}

.error-404-search {
    margin: 24px auto 0;
}

.error-404-actions {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== SEARCH RESULTS ===== */
.search-group-heading {
    font-family: var(--font-heading);
    color: var(--ink);
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.search-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-list-item {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 20px;
}

.search-list-item:hover,
.search-list-item:focus-visible {
    border-color: var(--red);
}

.search-list-title {
    display: block;
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
}

.search-list-excerpt {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

/* ===== WHY BAND ("Why Shop with IndoJaya?" — plain background, matches
   the approved homepage screenshot; no colorful ribbon/decorative fish) ===== */
.why-band {
    position: relative;
    overflow: hidden;
    background: transparent;
    padding: 40px 0;
}

.why-band .sec-head h2 {
    color: var(--ink);
    position: relative;
}

.why-spark {
    display: inline-flex;
    color: var(--gold);
    vertical-align: middle;
    margin: 0 6px;
}

.why-spark svg {
    width: 18px;
    height: 18px;
}

.why-band .wrap {
    position: relative;
    z-index: 1;
}

/* Photo mode: a single pre-designed banner (heading + all value props
   already baked in) replaces the CMS-rendered version above entirely.
   Desktop and Mobile are separate uploads (Theme Settings → Section
   Headings) so each can be proportioned/legible for its own viewport —
   .gb-hide-mobile / .gb-hide-desktop below pick the right one. */
.why-band-photo-desktop,
.why-band-photo-mobile {
    line-height: 0;
}

.why-band-photo-desktop img,
.why-band-photo-mobile img {
    display: block;
    width: 100%;
    height: auto;
}

/* Generic responsive-swap utilities: an element only shows on the viewport
   its name implies. Used to toggle between the Desktop banner, the Mobile
   banner, and the CMS-rendered fallback (why-band.php / cta.php) — each
   image field is independent, so any combination (both set, one set,
   neither set) resolves correctly per breakpoint. */
@media (max-width: 768px) {
    .gb-hide-mobile {
        display: none;
    }
}

@media (min-width: 769px) {
    .gb-hide-desktop {
        display: none;
    }
}

/* Three-way responsive swap for template-parts/cta.php's Desktop/Tablet/Mobile
   banner uploads — independent from .gb-hide-mobile/.gb-hide-desktop above so
   changing these breakpoints can never affect the Why Band component that
   already relies on the two-way utility. */
@media (max-width: 767px) {
    .cta-tablet-only,
    .cta-desktop-only,
    .cta-fallback-hide-mobile {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cta-mobile-only,
    .cta-desktop-only,
    .cta-fallback-hide-tablet {
        display: none;
    }
}

@media (min-width: 1024px) {
    .cta-mobile-only,
    .cta-tablet-only,
    .cta-fallback-hide-desktop {
        display: none;
    }
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #fff;
    border-radius: 20px;
    padding: 28px 36px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px -18px rgba(110, 18, 18, .25);
}

@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px;
    }
}

.why-card {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
}

.why-card .ic-wrap {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--kraft);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* When a real icon image is used, remove the circular kraft background */
.why-card .ic-wrap:has(.gobetta-icon-image) {
    background: transparent;
    border-radius: 0;
    width: auto;
    height: auto;
    min-width: 52px;
}

.why-card svg {
    width: 24px;
    height: 24px;
    color: var(--red);
}

.why-card-text {
    min-width: 0;
}

.why-card h4 {
    font-size: 0.95rem;
    margin: 0 0 3px;
    color: var(--ink);
}

.why-card p {
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.4;
    margin: 0;
}

/* ===== ABOUT ===== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

.about-visual {
    background: linear-gradient(160deg, var(--ice), var(--teal-3));
    border-radius: 24px;
    padding: 40px;
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-visual svg {
    width: 220px;
}

.about-visual img {
    width: 220px;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.about-text .kicker2 {
    color: var(--red);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-text h2 {
    margin-top: 8px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--ink);
}

.about-text p {
    margin-top: 16px;
    color: var(--ink-soft);
    line-height: 1.7;
    font-size: 0.96rem;
}

.about-stats {
    display: flex;
    gap: 30px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.about-stats div b {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--red);
}

.about-stats div span {
    font-size: 0.76rem;
    color: var(--ink-soft);
    font-weight: 700;
}

/* ===== REVIEWS ===== */
.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 900px) {
    .review-grid {
        grid-template-columns: 1fr;
    }
}

.review-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
}

.review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    flex: 0 0 auto;
}

.avatar-photo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.review-name {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--ink);
}

.review-date {
    font-size: 0.7rem;
    color: var(--ink-soft);
}

.review-card .stars {
    margin-top: 12px;
    display: block;
}

.review-card p {
    margin-top: 10px;
    font-size: 0.86rem;
    color: var(--ink);
    line-height: 1.55;
}

.review-verified {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--green-deep);
}

.review-verified svg {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--green-deep);
    color: #fff;
    padding: 2px;
    box-sizing: content-box;
}

.review-tag {
    display: inline-block;
    margin-top: 12px;
    background: var(--ice-soft);
    color: var(--ice);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 100px;
}

/* ===== FAQ ===== */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 800;
    color: var(--ink);
    font-size: 0.94rem;
}

.faq-q svg {
    width: 16px;
    height: 16px;
    transition: transform .35s ease;
    flex: 0 0 auto;
}

.faq-item.open .faq-q svg {
    transform: rotate(45deg);
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease, padding .35s ease;
    padding: 0 20px;
}

.faq-item.open .faq-a {
    grid-template-rows: 1fr;
    padding-bottom: 18px;
}

.faq-a > p {
    overflow: hidden;
    min-height: 0;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ===== CTA ===== */
.cta-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ice) 55%, var(--ice) 100%);
    border-radius: 28px;
    margin: 0 28px;
    padding: 40px 44px 26px;
    color: #fff;
}

@media (max-width: 640px) {
    .cta-band {
        margin: 0 14px;
        padding: 30px 22px 20px;
    }
}

.cta-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.cta-coral {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 140px;
    height: auto;
    opacity: 0.9;
}

@media (max-width: 640px) {
    .cta-coral {
        width: 90px;
    }
}

.cta-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.cta-copy {
    flex: 1 1 380px;
    max-width: 520px;
}

.cta-band h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: #fff;
    margin: 0 0 8px;
}

.cta-subheading {
    margin: 0 0 20px;
    max-width: 420px;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.cta-form {
    display: flex;
    max-width: 460px;
    gap: 10px;
    margin: 0;
}

@media (max-width: 480px) {
    .cta-form {
        flex-direction: column;
    }
}

.cta-input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 100px;
    padding: 0 8px 0 16px;
}

.cta-input-wrap svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--ink-soft);
}

.cta-form input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 13px 10px 13px 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.cta-form input:focus {
    outline: none;
}

.cta-form button {
    background: var(--gold);
    color: var(--ink);
    border: none;
    border-radius: 100px;
    padding: 13px 26px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cta-message {
    margin: 12px 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    min-height: 1.2em;
    color: #fff;
}

.cta-visual {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
}

.cta-visual svg,
.cta-visual-img {
    width: 100%;
    max-width: 240px;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}

@media (max-width: 780px) {
    .cta-visual {
        display: none;
    }
}

.cta-perks {
    position: relative;
    z-index: 2;
    margin-top: 26px;
    background: rgba(12, 34, 51, 0.28);
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 22px;
}

.cta-perk {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    flex: 1 1 180px;
}

.cta-perk-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(12, 34, 51, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-perk-icon svg {
    width: 18px;
    height: 18px;
    color: var(--ink);
}

.cta-perk-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cta-perk-text strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
}

.cta-perk-text small {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 170px;
}

/* Photo mode: the banner is a complete pre-designed graphic (heading,
   subheading and perks already baked in) — only a working email + Subscribe
   form overlays it, positioned in the open water between the headline block
   and the fish. Percentage-based so it tracks the image at any width. */
.cta-band-photo-mode {
    padding: 0;
    background: none;
}

.cta-band-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.cta-photo-form {
    position: absolute;
    left: 70%;
    top: 58%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
}

.cta-photo-form input[type="email"] {
    border-radius: 10px 0 0 10px;
    outline: none;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(0.78rem, 1.5vw, 1rem);
    width: clamp(170px, 18vw, 260px);
    min-width: 0;
    padding: 15px 18px;
}

.cta-photo-form button {
    background: var(--red-dark);
    color: #fff;
    border: none;
    padding: 15px 26px;
    font-weight: 800;
    font-size: clamp(0.78rem, 1.4vw, 0.95rem);
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cta-photo-form button:hover,
.cta-photo-form button:focus-visible {
    background: var(--red);
}

.cta-photo-message {
    position: absolute;
    left: 65%;
    top: calc(50% + 26px);
    transform: translateX(-50%);
    z-index: 2;
    max-width: 260px;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
}

.cta-photo-message:empty {
    display: none;
}

@media (max-width: 640px) {
    .cta-photo-form {
        padding: 4px 4px 4px 12px;
        gap: 4px;
    }

    .cta-photo-form button {
        padding: 8px 12px;
    }
}

/* Mobile Banner overlay form (#ctaPhotoMobileForm, template-parts/cta.php)
   gets its own width — the shared .cta-photo-form/input clamp() above is
   tuned for the desktop banner's wider open-water space, and reads too
   narrow/cramped against the mobile banner's full-width layout. */
@media (max-width: 768px) {
    #ctaPhotoMobileForm {
        width: 84%;
        max-width: 360px;
        padding: 6px 6px 6px 18px;
    }

    #ctaPhotoMobileForm input[type="email"] {
        flex: 1 1 auto;
        width: auto;
        font-size: 0.85rem;
    }

    #ctaPhotoMobileForm button {
        padding: 11px 20px;
        font-size: 0.85rem;
    }
}

/* Responsive swap for this section now handled by the generic
   .gb-hide-mobile / .gb-hide-desktop utilities (see the Why Band rules
   above) — the desktop banner, mobile banner, and CMS fallback blocks in
   cta.php each carry whichever of the two applies to them. */

.site-footer {
    position: relative;
    background: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--ink);
    /* 60px (was margin-top) folded into padding-top so the footer's own
       background — solid white or the has-image photo — fills this space
       too. margin sits outside the box's background, so with a background
       image configured (site-footer-has-image) that gap showed the page's
       cream body background instead, then hard-cut to the image below it. */
    padding: 44px 0 24px;
}

.site-footer-has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(110, 18, 18, 0.55), rgba(110, 18, 18, 0.85));
}

.site-footer .wrap {
    position: relative;
    z-index: 1;
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 30px;
}

@media (max-width: 800px) {
    .foot-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .foot-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.foot-grid h5 {
    color: var(--red);
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.foot-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.foot-grid a {
    font-size: 0.85rem;
    opacity: 0.85;
}

.foot-grid a:hover,
.foot-grid a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.foot-brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.foot-brand-logo img {
    max-height: 44px;
    width: auto;
    display: block;
}

.foot-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.foot-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.foot-social svg {
    width: 16px;
    height: 16px;
}

.foot-contact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foot-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.foot-contact-list svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--red);
}

.foot-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.foot-payment-badge {
    background: #fff;
    color: var(--ink);
    border-radius: 6px;
    padding: 0 14px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.foot-payment-logo {
    height: 18px;
    width: auto;
    max-width: 64px;
    display: block;
    object-fit: contain;
}

.foot-payment-badge-visa { color: #1a1f71; }
.foot-payment-badge-mastercard { color: #eb001b; }
.foot-payment-badge-paypal { color: #003087; }
.foot-payment-badge-shopeepay { background: #ee4d2d; color: #fff; }
.foot-payment-badge-bca { color: #0056a4; }
.foot-payment-badge-paynow { background: #d0006f; color: #fff; }
.foot-payment-badge-grabpay { background: #00b14f; color: #fff; }

.foot-bottom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.76rem;
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    .foot-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
}


/* ===== BLOG ===== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

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

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}

.blog-card:hover,
.blog-card:focus-within {
    box-shadow: 0 10px 24px rgba(28, 51, 80, 0.12);
    transform: translateY(-3px);
}

.blog-card-media {
    aspect-ratio: 16/10;
    background: var(--ice-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.blog-card-body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #fff;
    background: var(--red);
    font-weight: 800;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    z-index: 1;
}
.blog-cat-lifestyle { background: var(--green); }
.blog-cat-tips { background: var(--gold-deep); }
.blog-cat-snacks { background: var(--ice); }
.blog-cat-news { background: var(--berry); }

.blog-card-readtime {
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-weight: 700;
}

.blog-card-readmore {
    margin-top: 12px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blog-card-title {
    margin-top: 8px;
    font-size: 1rem;
    line-height: 1.35;
}

.blog-card-title a {
    color: var(--ink);
}

.blog-card-title a:hover,
.blog-card-title a:focus-visible {
    color: var(--red);
}

.blog-card-excerpt {
    margin-top: 8px;
    font-size: 0.84rem;
    color: var(--ink-soft);
    line-height: 1.55;
    flex: 1;
}

.blog-single { padding-top: 24px; }

.blog-article-header-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 28px;
}
@media (max-width: 900px) { .blog-article-header-grid { grid-template-columns: 1fr; } }

.blog-article-header h1 {
    margin-top: 10px;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: var(--ink);
    line-height: 1.2;
}

.blog-article-excerpt {
    margin-top: 10px;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.blog-article-meta {
    margin-top: 16px;
    font-size: 0.82rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.blog-article-author { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.blog-article-author-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--kraft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
}

.blog-share-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.blog-share-row > span { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.blog-share-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; border: none; cursor: pointer;
}
.blog-share-btn svg { width: 16px; height: 16px; }
.blog-share-fb { background: #1877F2; }
.blog-share-wa { background: #25D366; }
.blog-share-pin { background: #E60023; }
.blog-share-copy { background: var(--ink-soft); }

.blog-article-thumb {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.blog-article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-article-thumb-fallback {
    background: var(--kraft);
    display: flex; align-items: center; justify-content: center;
}

.blog-article-content {
    max-width: 780px;
    margin: 0 auto;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.8;
}

.blog-article-content p { margin: 0 0 1.2em; }
.blog-article-content h2,
.blog-article-content h3 { color: var(--ink); margin: 1.6em 0 0.6em; }
.blog-article-content ul,
.blog-article-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.blog-article-content li { margin-bottom: 0.4em; }

.recipe-intro-band {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    margin: 0 0 24px;
    flex-wrap: wrap;
}
.recipe-intro-icon { font-size: 2rem; flex-shrink: 0; }
.recipe-intro-band > p { flex: 1; min-width: 220px; margin: 0; font-size: 0.9rem; }
.recipe-intro-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 14px;
    width: 100%;
}
.recipe-intro-stats div { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; }
.recipe-intro-stats strong { font-size: 0.86rem; }
.recipe-intro-stats span { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; font-size: 0.66rem; font-weight: 700; }

.recipe-steps-list { counter-reset: recipe-step; list-style: none; padding-left: 0; }
.recipe-steps-list > li {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 18px 18px 60px;
    margin-bottom: 14px;
}
.recipe-steps-list > li::before {
    counter-increment: recipe-step;
    content: counter(recipe-step);
    position: absolute;
    left: 16px; top: 18px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.9rem;
}
.recipe-steps-list h3 { margin: 0 0 6px; font-size: 1.02rem; }
.recipe-ingredients { font-size: 0.82rem; color: var(--ink-soft); margin: 6px 0 !important; }
.recipe-meta { font-size: 0.78rem; color: var(--red-dark); font-weight: 700; margin: 0 !important; }

.recipe-product-tiein {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--cream);
    border: 1.5px dashed var(--kraft-line);
    border-radius: 14px;
    padding: 20px;
    margin: 24px 0;
}
.recipe-product-tiein h4 { margin: 0 0 6px; }
.recipe-product-tiein p:first-of-type { margin: 0; font-size: 0.86rem; max-width: 460px; }

.blog-author-box {
    max-width: 780px;
    margin: 32px auto 0;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
}
.blog-author-box-icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.blog-author-box p { margin: 4px 0 0; font-size: 0.84rem; color: var(--ink-soft); }

.blog-related-section { margin-top: 40px; }
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .blog-related-grid { grid-template-columns: repeat(2, 1fr); } }
.blog-related-card { color: var(--ink); }
.blog-related-media {
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ice-soft);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
.blog-related-card strong { display: block; font-size: 0.88rem; line-height: 1.35; }
.blog-related-card span { font-size: 0.74rem; color: var(--ink-soft); }

/* ===== Blog listing hero + category filter ===== */

.blog-hero-banner { background: var(--kraft); padding: 40px 0; overflow: hidden; }
.blog-hero-banner-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
}
@media (max-width: 700px) { .blog-hero-banner-inner { grid-template-columns: 1fr; } }
.blog-hero-banner h1 { font-family: var(--font-heading); font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 10px 0 0; }
.blog-hero-rule { width: 60px; height: 4px; background: var(--red); border-radius: 4px; margin: 14px 0; }
.blog-hero-banner p { max-width: 460px; color: var(--ink-soft); }
.blog-hero-banner-img { max-width: 420px; min-width: 0; overflow: hidden; }
.blog-hero-banner-img img { display: block; width: 100%; height: auto; border-radius: 14px; }

.blog-cat-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 26px 0;
}
.blog-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 100px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.86rem;
}
.blog-cat-pill svg { width: 15px; height: 15px; }
.blog-cat-pill.active,
.blog-cat-pill-all.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ===== Producer story page ===== */

.producer-hero { background: var(--kraft); padding: 44px 0; }
.producer-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
    align-items: center;
}
@media (max-width: 900px) { .producer-hero-grid { grid-template-columns: 1fr; } }
.producer-hero h1 { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin: 0 0 14px; }
.producer-hero-lede { font-size: 1rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 14px; }
.producer-hero-media {
    aspect-ratio: 4/3;
    background: var(--paper);
    border-radius: 18px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    min-width: 0;
}
.producer-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.producer-body { max-width: 1000px; padding: 36px 24px 60px; }

.producer-intro-band {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 28px;
}
.producer-intro-icon { font-size: 1.8rem; flex-shrink: 0; }
.producer-intro-band p { margin: 0; font-weight: 600; }

.producer-split-block {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 32px;
}
@media (max-width: 800px) { .producer-split-block { grid-template-columns: 1fr; } }
.producer-split-media {
    aspect-ratio: 4/3;
    background: var(--kraft);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    min-width: 0;
}

.producer-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}
@media (max-width: 800px) { .producer-panel-grid { grid-template-columns: 1fr; } }
.producer-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
}
.producer-panel h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 12px; }
.producer-panel p { font-size: 0.9rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 12px; }

.producer-quote {
    border-left: 3px solid var(--gold);
    padding: 10px 0 10px 16px;
    margin: 16px 0 0;
    font-style: italic;
    color: var(--ink);
}
.producer-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.8rem; color: var(--ink-soft); }

.producer-product-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cream);
    border-radius: 12px;
    padding: 14px;
    margin-top: 14px;
}
.producer-product-box img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.producer-product-box > div { display: flex; flex-direction: column; gap: 4px; }
.producer-product-rating { font-size: 0.78rem; color: var(--ink-soft); }
.producer-product-price { font-family: var(--font-heading); font-size: 1.1rem; color: var(--red-dark); }
.producer-product-box .btn-primary-small { align-self: flex-start; margin-top: 4px; }

.producer-steps-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
}
@media (max-width: 600px) { .producer-steps-row { grid-template-columns: repeat(2, 1fr); } }
.producer-steps-row > div { text-align: center; }
.producer-steps-row span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--gold); color: #3A2400;
    font-weight: 800; margin-bottom: 8px;
}
.producer-steps-row p { font-size: 0.76rem; margin: 0; color: var(--ink-soft); }

.producer-facts-panel dl { margin: 0; }
.producer-facts-panel dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.producer-facts-panel dl > div:last-child { border-bottom: none; }
.producer-facts-panel dt { font-weight: 700; color: var(--ink); flex-shrink: 0; }
.producer-facts-panel dd { margin: 0; text-align: right; color: var(--ink-soft); }

.producer-callout-band {
    background: #e9f5e0;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 0.86rem;
    color: var(--green-deep);
    text-align: center;
    margin-bottom: 32px;
}

.producer-author-panel { display: flex; align-items: center; gap: 16px; }
.producer-author-panel p { margin: 4px 0 0; }

.producer-feedback-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 40px;
    align-items: center;
}
.producer-feedback-btn {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
}
.producer-feedback-btn.is-selected { background: #fdeceb; border-color: var(--red); color: var(--red-dark); }
.producer-feedback-thanks { font-size: 0.82rem; color: var(--green-deep); font-weight: 700; }

.producer-related-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .producer-related-grid { grid-template-columns: 1fr; } }

/* ===== Policy / legal pages ===== */

.policy-hero { padding: 0; }

/* Banner variant — full-bleed, background-only graphic (decorative pattern
   + product photography) with the real title/copy overlaid as HTML, same
   convention as .shop-hero-banner/.search-hero-banner. Falls back to
   .policy-hero-grid (plain text, no image, inset in .wrap) further below
   when no banner has been uploaded yet. */
.policy-hero-banner {
    position: relative;
    width: 100%;
    height: clamp(280px, 31vw, 550px);
    overflow: hidden;
}
.policy-hero-banner picture {
    display: block;
    width: 100%;
    height: 100%;
}
.policy-hero-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.policy-hero-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    max-width: min(600px, 50%);
    padding: 0 5%;
    z-index: 2;
}
.policy-hero-text h1 { font-family: var(--font-heading); font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.15; margin: 0 0 14px; }
.policy-hero-text p { color: var(--ink-soft); max-width: 460px; margin: 0 0 14px; line-height: 1.5; }
.policy-hero-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-soft); }
.policy-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.policy-hero-meta svg { width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }

@media (max-width: 767px) {
    .policy-hero-banner { height: clamp(320px, 90vw, 420px); }
    .policy-hero-text {
        max-width: 100%;
        top: 20px;
        transform: none;
    }
    .policy-hero-text h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
    .policy-hero-text p { display: none; }
}

/* Fallback (no banner uploaded) — plain text-only hero, no image column. */
.policy-hero-grid {
    background: var(--kraft);
    border-radius: 20px;
    padding: 40px;
}
.policy-hero-grid h1 { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin: 0 0 10px; }
.policy-hero-grid p { color: var(--ink-soft); max-width: 460px; margin: 0 0 14px; }

.policy-faq-chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px auto; }
.policy-faq-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 600;
}
.policy-faq-chip svg { width: 14px; height: 14px; color: var(--red); }

.policy-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 60px;
}
@media (max-width: 900px) { .policy-layout { grid-template-columns: 1fr; } }

.policy-sidebar-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}
.policy-sidebar-card h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 0 0 10px; }
.policy-sidebar-card nav { display: flex; flex-direction: column; gap: 2px; }
.policy-sidebar-card nav a { padding: 9px 10px; border-radius: 8px; font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.policy-sidebar-card nav a.active { background: #fdeceb; color: var(--red-dark); }

.policy-help-card {
    background: var(--kraft);
    border-radius: 14px;
    padding: 18px;
}
.policy-help-card strong { display: block; margin-bottom: 4px; }
.policy-help-card p { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 12px; }
.policy-help-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; border-radius: 10px; padding: 10px; font-weight: 700; font-size: 0.86rem;
    color: var(--green-deep);
}
.policy-help-btn svg { width: 16px; height: 16px; }

.policy-content {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px;
}
.policy-content-head { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.policy-content-icon { font-size: 2.2rem; flex-shrink: 0; }
.policy-content-head h2 { font-family: var(--font-heading); color: var(--red); font-size: 1.5rem; margin: 0 0 6px; }
.policy-content-head p { margin: 0; color: var(--ink-soft); }

.policy-section-list { list-style: none; padding: 0; margin: 0; counter-reset: policy-step; }
.policy-section-list > li {
    position: relative;
    padding: 0 0 20px 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.policy-section-list > li:last-child { border-bottom: none; margin-bottom: 0; }
.policy-section-list > li::before {
    counter-increment: policy-step;
    content: counter(policy-step);
    position: absolute;
    left: 0; top: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-weight: 800; font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center;
}
.policy-section-list h3 { margin: 0 0 8px; font-size: 1rem; }
.policy-section-list p { margin: 0 0 10px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.policy-section-list ul { margin: 0 0 10px; padding-left: 1.3em; font-size: 0.9rem; color: var(--ink-soft); }
.policy-section-list li li { margin-bottom: 6px; }

.policy-important {
    background: #fdeceb;
    border: 1px solid #f3c9c3;
    border-radius: 10px;
    padding: 14px 16px;
}
.policy-important strong { color: var(--red-dark); font-size: 0.82rem; display: block; margin-bottom: 6px; }
.policy-important p { color: var(--red-dark); margin: 0; font-size: 0.86rem; }

.policy-tip {
    background: var(--cream);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.86rem !important;
    color: var(--ink) !important;
}

/* ===== STATIC PAGE (Privacy / Terms) ===== */
.static-page {
    max-width: 780px;
    margin: 0 auto;
}

.static-page-content h1 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: var(--ink);
    margin-bottom: 20px;
}

.static-page-content h2 {
    color: var(--ink);
    font-size: 1.15rem;
    margin: 1.6em 0 0.5em;
}

.static-page-content p {
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.75;
    margin: 0 0 1.2em;
}

/* ===== PAGE EXTRA CONTENT (block editor content on functional page templates) ===== */
.page-extra-content {
    max-width: 720px;
    margin: 0 auto 34px;
}

.page-extra-content > *:last-child {
    margin-bottom: 0;
}

.page-extra-content h1,
.page-extra-content h2,
.page-extra-content h3,
.page-extra-content h4 {
    color: var(--ink);
    margin: 1.4em 0 0.5em;
}

.page-extra-content h1:first-child,
.page-extra-content h2:first-child,
.page-extra-content h3:first-child,
.page-extra-content h4:first-child {
    margin-top: 0;
}

.page-extra-content p,
.page-extra-content li {
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.75;
}

.page-extra-content p {
    margin: 0 0 1.2em;
}

.page-extra-content ul,
.page-extra-content ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

.page-extra-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.page-extra-content a {
    color: var(--ice);
    text-decoration: underline;
}

.page-extra-content blockquote {
    border-left: 3px solid var(--red);
    margin: 0 0 1.2em;
    padding: 4px 0 4px 18px;
    color: var(--ink-soft);
    font-style: italic;
}

.page-extra-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2em;
    font-size: 0.9rem;
}

.page-extra-content table th,
.page-extra-content table td {
    border: 1px solid var(--line);
    padding: 8px 10px;
    text-align: left;
}

/* ===== TRACK ORDER ===== */
.track-order-form {
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
}

.track-order-form .btn-primary {
    width: 100%;
    border: none;
    cursor: pointer;
}

.track-order-result {
    max-width: 480px;
    margin: 30px auto 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
}

.track-order-result h3 {
    color: var(--ink);
    font-size: 1.1rem;
}

.track-order-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding: 14px;
    background: var(--ice-soft);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--ink);
}

/* ===== CONTACT ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-info {
    background: var(--ice-soft);
    border-radius: 16px;
    padding: 26px;
}

.contact-info h3 {
    color: var(--ink);
    font-size: 1.05rem;
    margin-bottom: 14px;
}

.contact-info p {
    font-size: 0.9rem;
    color: var(--ink);
    margin: 0 0 14px;
}

.contact-info a {
    color: var(--ice);
    font-weight: 700;
}

/* ===== WP core pagination list reset (paginate_links) ===== */
.shop-pagination ul.page-numbers {
    list-style: none;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.shop-pagination ul.page-numbers li {
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Floating WhatsApp button (template-parts/whatsapp-widget.php) ---------- */

.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.wa-float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    animation: wa-float-pulse 2.4s ease-in-out infinite;
    flex: 0 0 auto;
}

.wa-float-btn svg {
    width: 30px;
    height: 30px;
}

.wa-float-btn:hover {
    animation-play-state: paused;
    transform: scale(1.06);
}

@keyframes wa-float-pulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    50% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(37, 211, 102, 0);
    }
}

.wa-float-bubble {
    position: relative;
    max-width: 260px;
    background: #fff;
    color: var(--ink-2, #1c3350);
    border-radius: 16px;
    padding: 16px 18px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.wa-float-bubble.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease;
}

.wa-float-bubble::after {
    content: '';
    position: absolute;
    right: 22px;
    bottom: -8px;
    width: 16px;
    height: 16px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: rotate(-45deg);
}

.wa-float-bubble p {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.wa-float-bubble-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: none;
    color: var(--ink-2, #1c3350);
    opacity: 0.5;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

.wa-float-bubble-close:hover {
    opacity: 1;
}

.wa-float-bubble-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 9px 12px;
    border-radius: 100px;
}

@media (max-width: 640px) {
    .wa-float {
        right: 14px;
        bottom: 14px;
    }

    .wa-float-btn {
        width: 52px;
        height: 52px;
    }

    .wa-float-bubble {
        max-width: calc(100vw - 100px);
    }
}

/* ===== ORDER DETAIL PAGE ===== */
.order-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.order-item-row:last-child { border-bottom: none; }
.order-item-row .account-order-info { flex: 1; min-width: 0; }
.order-item-row .oi-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
@media (max-width: 640px) {
    .order-item-row { flex-wrap: wrap; }
}

.order-head-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 26px;
    margin: 16px 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---- Tracking meta row (Carrier / Tracking Number / Estimated Delivery) ---- */
.tracking-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.tracking-meta-item { font-size: 0.8rem; color: var(--ink-soft); }
.tracking-meta-item b { display: block; color: var(--ink); font-size: 0.88rem; margin-top: 2px; }

/* ---- Real-data route visualization: 4 checkpoints this theme can actually
   verify (placed / shipment created / current carrier status / delivered) —
   no fabricated intermediate steps or timestamps. ---- */
.route-map { position: relative; height: 70px; margin-bottom: 10px; }
.route-line { position: absolute; top: 50%; left: 4%; right: 4%; height: 3px; background: var(--line); transform: translateY(-50%); }
.route-line-fill { position: absolute; top: 50%; left: 4%; height: 3px; background: var(--green); transform: translateY(-50%); transition: width .6s ease; }
.route-pin {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 26px; height: 26px; border-radius: 50%; background: #fff;
    border: 3px solid var(--line); display: flex; align-items: center; justify-content: center; z-index: 2;
}
.route-pin.done { border-color: var(--green); color: var(--green-deep); }
.route-pin.current { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 6px #fdeceb; }
.route-pin svg { width: 12px; height: 12px; }

.event-list { display: flex; flex-direction: column; margin-top: 18px; }
.event-item { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.event-item:last-child { padding-bottom: 0; }
.event-item::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.event-item:last-child::before { display: none; }
.event-dot {
    width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: #fff;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; z-index: 1; font-size: 0.7rem; font-weight: 800;
}
.event-item.done .event-dot { background: var(--green); }
.event-item.current .event-dot { background: var(--red); }
.event-dot svg { width: 12px; height: 12px; }
.event-title { font-weight: 800; font-size: 0.86rem; color: var(--ink); }
.event-item:not(.done):not(.current) .event-title { color: var(--ink-soft); }
.event-desc { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.event-time { font-size: 0.7rem; color: var(--ink-soft); margin-top: 3px; }

/* ---- Item row action buttons (Buy Again / Review) ---- */
.oi-btn {
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 7px 14px;
    font-weight: 700;
    font-size: 0.74rem;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.oi-btn.secondary { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }

/* ---- Support card (teal-tinted variant of the standard .checkout-form card) ---- */
.support-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(120deg, var(--ice-soft), #eef8f7);
    border-color: transparent;
}
.support-card-left { display: flex; align-items: center; gap: 14px; }
.support-card-left .ic {
    width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ice);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.support-card-left .ic svg { width: 22px; height: 22px; }
.support-card-left h4 { font-size: 0.96rem; color: var(--ink); margin: 0; }
.support-card-left p { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }

.oi-return-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    background: var(--ice-soft);
    color: var(--ice);
    padding: 2px 8px;
    border-radius: 100px;
}

.return-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}
.return-item-row input { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; flex: 0 0 auto; }

/* ===== GENERIC MODAL (Return/Refund, and reusable for future confirm dialogs) ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 34, 51, 0.55);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
    background: #fff;
    border-radius: 22px;
    padding: 30px;
    max-width: 560px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-head h3 { font-size: 1.15rem; color: var(--ink); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 1.4rem; line-height: 1; }

.modal-submit-btn {
    width: 100%;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 14px;
    font-weight: 800;
    font-size: 0.92rem;
    cursor: pointer;
    margin-top: 20px;
}
.modal-submit-btn:hover { background: var(--red-dark); }
.modal-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.return-success { text-align: center; padding: 20px 0; }
.return-success svg { width: 56px; height: 56px; color: var(--green-deep); margin: 0 auto 16px; }
.return-success h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 8px; }
.return-success p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; }
.return-success .rma-id {
    font-family: monospace;
    background: var(--ice-soft);
    color: var(--ice);
    padding: 8px 16px;
    border-radius: 100px;
    display: inline-block;
    margin: 14px 0;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ===== BUNDLE DEALS PAGE ===== */
.bundles-page-title {
    font-size: 2rem;
    color: var(--red);
    margin-bottom: 8px;
}

.bundles-page-subtitle {
    color: var(--ink-soft);
    margin-bottom: 28px;
}

.bundles-empty {
    color: var(--ink-soft);
    padding: 40px 0;
    text-align: center;
}

.bundles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

@media (max-width: 767px) {
    .bundles-grid {
        grid-template-columns: 1fr;
    }
}

.bundle-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bundle-card-media {
    position: relative;
    line-height: 0;
}

.bundle-card-media img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.bundle-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bundle-card-title {
    font-size: 1.15rem;
    color: var(--ink);
}

.bundle-card-desc {
    font-size: 0.85rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.bundle-card-contents {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.bundle-card-contents li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 68px;
    text-align: center;
}

.bundle-card-contents img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.bundle-card-contents span {
    font-size: 0.62rem;
    color: var(--ink-soft);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bundle-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.bundle-card-price-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bundle-card-savings {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--green-deep);
    background: var(--green-soft, #eaf7ee);
    padding: 3px 10px;
    border-radius: 100px;
}

.bundle-add-btn {
    width: 100%;
    margin-top: 6px;
}