/*
Theme Name: GoBetta Aquatic
Theme URI: https://verdant-quokka-c303dd.netlify.app/
Author: GoBetta Team
Author URI: https://verdant-quokka-c303dd.netlify.app/
Description: A custom, pixel-perfect WordPress theme for GoBetta, an online store for betta, channa, and guppy food, medicine, and aquascape supplies. Hand-built with vanilla PHP, HTML5, and CSS3 following the WordPress Theme Handbook — no page builder required.
Version: 1.0.50
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 {
    --navy: #1c3350;
    --navy-2: #16283f;
    --teal-1: #0f8fa3;
    --teal-2: #1cb5c9;
    --teal-3: #5fd6e0;
    --foam: #d7f4f2;
    --lime: #7bb83f;
    --lime-dark: #5f9530;
    --yellow: #f7c948;
    --coral: #e6543f;
    --coral-dark: #c8402d;
    --shopee: #ee4d2d;
    --ink: #1b2733;
    --ink-2: #0c2233;
    --muted: #57707c;
    --cream: #fffdf8;
    --line: #e7eef0;

    --font-heading: 'Baloo 2', sans-serif;
    --font-body: 'Nunito', sans-serif;

    --container-width: 1240px;
}

*,
*::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: var(--cream);
    -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 28px;
}

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

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

.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(--navy);
    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;
}

.util-bar {
    background: var(--navy-2);
    color: #cfe3e8;
    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: 2px solid var(--yellow);
    outline-offset: 3px;
}

.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 {
    background: var(--navy);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    padding: 10px 18px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.brand-pill svg {
    width: 20px;
    height: 20px;
}

.brand-pill-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.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(--shopee);
    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;
    }
}

.nav-pill {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 6px;
    gap: 4px;
    box-shadow: 0 4px 14px rgba(28, 51, 80, 0.06);
    flex: 0 0 auto;
    order: 3;
}

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

.nav-pill li,
.mobile-menu li {
    display: contents;
}

.nav-pill a {
    font-weight: 700;
    font-size: 0.85rem;
    padding: 9px 16px;
    border-radius: 100px;
    color: var(--navy);
    transition: background .2s ease;
}

.nav-pill a:hover,
.nav-pill a:focus-visible {
    background: #f1f7f7;
}

.nav-pill .current-menu-item a,
.nav-pill .current_page_item a {
    background: var(--lime);
    color: #fff;
}

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

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

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--navy);
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
}

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

.icon-btn .badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--coral);
    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 {
    background: var(--yellow);
    color: var(--ink-2);
    font-weight: 800;
    font-size: 0.88rem;
    padding: 11px 20px;
    border-radius: 100px;
    box-shadow: 0 6px 16px rgba(247, 201, 72, 0.5);
    white-space: nowrap;
}

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

.hamburger {
    display: none;
    flex-direction: column;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f7f7;
    border: none;
    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(--navy);
    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(--navy);
}

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

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

/* ===== HERO ===== */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 40px 40px;
}

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

.slide {
    position: relative;
    display: none;
    min-height: 540px;
    background: linear-gradient(180deg, var(--teal-1) 0%, var(--teal-2) 45%, var(--teal-3) 100%);
    overflow: hidden;
}

.slide.active {
    display: block;
}

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

.slide-full-bleed {
    min-height: 0;
    background: var(--navy);
}

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

.wave-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
}

.hero-content {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 540px;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero-content > .hero-text,
.hero-content > .hero-visual {
    min-width: 0;
}

@media (max-width: 900px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 36px;
    }
}

.hero-text .kicker {
    display: inline-block;
    background: var(--navy);
    color: var(--lime);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 6px 15px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.hero-text h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.5rem);
    color: var(--ink-2);
    line-height: 1.08;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.25);
    min-height: calc(clamp(2.2rem, 4.4vw, 3.5rem) * 1.08 * 2);
}

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

@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(--navy);
    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-primary,
    .hero-actions .btn-outline {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

.btn-primary {
    background: var(--yellow);
    color: var(--ink-2);
    font-weight: 800;
    padding: 13px 28px;
    border-radius: 100px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    font-size: 0.96rem;
    display: inline-block;
}

.btn-outline {
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid var(--ink-2);
    color: var(--ink-2);
    font-weight: 800;
    padding: 11px 24px;
    border-radius: 100px;
    font-size: 0.96rem;
    display: inline-block;
}

.hero-visual {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .hero-visual {
        min-height: 0;
    }
}

.hero-visual-img {
    max-width: 100%;
    max-height: 420px;
    min-width: 0;
    width: auto;
    height: auto;
    border-radius: 24px;
    object-fit: cover;
    filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.2));
    animation: heroSway 6s ease-in-out infinite;
    transform-origin: 50% 60%;
}

/* ===== HERO CAROUSEL ANIMATIONS ===== */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroSway {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(3deg) translateY(-10px); }
}

@keyframes bubbleRise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    12%  { opacity: 0.7; }
    100% { transform: translateY(-240px) scale(1.35); opacity: 0; }
}

.slide.active .hero-text .kicker { animation: heroFadeUp 0.6s ease both; }
.slide.active .hero-text h1      { animation: heroFadeUp 0.7s ease 0.08s both; }
.slide.active .hero-text p       { animation: heroFadeUp 0.7s ease 0.16s both; }
.slide.active .hero-actions      { animation: heroFadeUp 0.7s ease 0.24s both; }
.slide.active .hero-visual       { animation: heroFadeUp 0.8s ease 0.2s both; }

.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(--navy);
}

.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(--yellow);
    width: 0%;
    animation: fillbar 5s linear infinite;
}

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

    to {
        width: 100%;
    }
}

/* ===== VOUCHER STRIP ===== */
.voucher-strip {
    background: var(--foam);
    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(--shopee);
    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(--muted);
    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(--shopee);
    color: var(--shopee);
    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 {
    background: var(--navy);
    padding: 16px 0;
}

.trust-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    color: #fff;
}

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

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.83rem;
    font-weight: 700;
}

.trust-item svg {
    width: 20px;
    height: 20px;
    color: var(--yellow);
    flex: 0 0 auto;
}

/* ===== PROMO BANNER (still full-width/edge-to-edge, but with a small side
   inset so cards never sit flush against the viewport edge) ===== */
.promo-banner-section {
    padding: 30px 16px 10px;
}

@media (max-width: 640px) {
    .promo-banner-section {
        padding: 24px 12px 10px;
    }
}

.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(--foam);
    /* 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 instead of squeezing 3 narrow
       columns into a phone-width screen. */
    .promo-banner-carousel:not(.is-sliding) .promo-banner-track {
        flex-direction: column;
    }
}

.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-2);
}

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

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

.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;
}

.promo-banner-photo-mode img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-arrow {
    background: var(--yellow);
    color: var(--navy);
    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(--yellow);
}

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

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

/* ===== CATEGORY CARDS (Product Listings — 3 big cards) ===== */
.category-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

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

@media (max-width: 640px) {
    .category-cards-grid {
        grid-template-columns: 1fr;
    }
}

.category-big-card {
    position: relative;
    border-radius: 20px;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(28, 51, 80, 0.1);
}

.category-big-card-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-big-card-icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

/* Full-bleed mode: featured image is a complete pre-designed graphic (its
   own heading/copy/button baked in), shown at its natural aspect ratio with
   no cropping and no CMS text overlaid on top. */
.category-big-card-photo-mode {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(28, 51, 80, 0.1);
    line-height: 0;
    transition: transform 0.2s ease;
}

.category-big-card-photo-mode:hover {
    transform: translateY(-3px);
}

.category-big-card-photo-mode img {
    display: block;
    width: 100%;
    /* The grid stretches every card to match the row's tallest item
       (CSS Grid's default align-items: stretch), and the 3 source photos
       aren't quite identical ratio — height:auto left a gap under the
       slightly-shorter ones. object-fit:cover fills the stretched card
       completely; the ratios are close enough that the crop is negligible. */
    height: 100%;
    object-fit: cover;
}

.category-big-card-inner {
    position: relative;
    z-index: 2;
    padding: 22px;
    color: #fff;
    width: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 85%);
}

.category-big-card-inner h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 6px;
}

.category-big-card-inner p {
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.9;
    margin: 0 0 16px;
    max-width: 240px;
}

.category-big-card-btn {
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    border-radius: 100px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

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

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

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

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

.sec-head p {
    color: var(--muted);
    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(--navy);
}

/* ===== FLASH BANNER + FILTER BAR ===== */
.flash-banner {
    background: linear-gradient(90deg, var(--shopee), #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;
}

.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

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

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

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

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

.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(--navy);
    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(--foam);
    border-radius: 100px;
    height: 6px;
    overflow: hidden;
}

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

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

/* ===== 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;
    }
}

.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(--navy);
}

.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(--lime);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    border-radius: 100px;
}

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

details.filter-group summary {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--navy);
    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(--muted);
    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-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(--navy);
    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(--navy);
    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(--coral);
    flex-shrink: 0;
}

.filter-check span {
    flex: 1;
}

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

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

.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(--muted);
    text-decoration: underline;
}

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

/* ===== PRODUCT GRID ===== */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(5, 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(--shopee);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 800;
    padding: 3px 7px 3px 9px;
    border-bottom-left-radius: 8px;
}

/* Corner ribbon for the shipping label — same spot/shape language as
   Shopee's "Free Shipping" ribbon, but the text is whatever the product's
   real _shipping_label is (never a blanket "free shipping" claim, since
   GoBetta's free shipping is an order-total threshold, not per item).
   Anchored bottom-right (mirrored from the original left-hanging ribbon) so
   it never collides with .prod-swatch, which occupies bottom-left. */
.ship-ribbon {
    position: absolute;
    z-index: 2;
    bottom: 8px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--teal-1);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.3;
    padding: 3px 8px 3px 6px;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ship-ribbon::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: -5px;
    border-style: solid;
    border-width: 5px 0 0 5px;
    border-color: var(--navy-2) transparent transparent transparent;
}

.ship-ribbon svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

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

.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(--coral);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

/* ===== SHOP CATEGORY BANNER ===== */
.shop-category-banner {
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    margin-bottom: 30px;
    color: #fff;
}

.shop-category-banner-inner {
    max-width: 560px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

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

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

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

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

.out-of-stock-tag {
    background: var(--ink-2);
    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(--navy);
}

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

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

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

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

.seller-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--lime-dark);
    margin-bottom: 5px;
}

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

.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;
}

.ship-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    color: var(--teal-1);
    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(--shopee);
    font-weight: 800;
    font-size: 1rem;
}

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

.prod-meta {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.67rem;
    color: var(--muted);
}

.stars {
    color: var(--yellow);
    font-size: 0.72rem;
}

.sold {
    color: var(--muted);
}

.add-cart-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: var(--yellow);
    color: var(--ink-2);
    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(--coral-dark);
    color: #fff;
}

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

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

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

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

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

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

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

.breadcrumb a {
    color: var(--teal-1);
    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-info h1 {
    margin-top: 10px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--navy);
    line-height: 1.2;
}

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

.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(--muted);
    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(--navy);
    margin-bottom: 8px;
}

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

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

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

.size-option.active {
    border-color: var(--teal-1);
    background: var(--foam);
    color: var(--teal-1);
}

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

.single-product-actions .add-cart-btn {
    width: auto;
    height: auto;
    margin: 0;
    padding: 13px 28px;
    font-size: 0.88rem;
    font-weight: 800;
    gap: 8px;
    border-radius: 100px;
    background: #fff;
    color: var(--navy);
    border: 2px solid var(--navy);
}

.single-product-actions .add-cart-btn:hover,
.single-product-actions .add-cart-btn:focus-visible {
    background: #f1f7f7;
}

.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;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--navy);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
}

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

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

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

.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(--teal-1);
}

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

.single-product-savings {
    color: var(--lime-dark);
    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(--teal-1);
    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(--navy);
}

.single-product-qty input {
    width: 50px;
}

.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(--lime-dark);
}

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

.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(--navy);
}

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

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

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

.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(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
}

.product-tab-btn.active {
    color: var(--navy);
    border-bottom-color: var(--teal-1);
}

.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;
    }
}

.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(--navy);
}

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

.product-reviews-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    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(--navy);
    font-weight: 700;
    font-size: 0.85rem;
    background: #fff;
}

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

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

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

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

.cart-empty p {
    color: var(--muted);
    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 {
    color: var(--navy);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
}

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

.free-shipping-nudge {
    background: var(--foam);
    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(--lime);
}

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

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

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

.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(--teal-2), var(--teal-1));
    transition: width 0.3s ease;
}

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

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

.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-cross-sell {
    margin-top: 40px;
}

.cart-cross-sell h3 {
    font-size: 20px;
    margin-bottom: 16px;
}

.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(--navy);
    cursor: pointer;
}

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

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

.cart-table-headers {
    display: none;
    grid-template-columns: 24px 70px 1fr 90px 130px 90px;
    gap: 16px;
    padding: 0 16px;
    margin-bottom: 8px;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (min-width: 900px) {
    .cart-table-headers {
        display: grid;
    }
}

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

.cart-row {
    display: grid;
    grid-template-columns: 24px 70px 1fr 90px 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;
}

@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 total   total";
        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 { grid-area: total; text-align: left; }
    .cart-row-price { display: none; }
}

.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(--coral);
}

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

.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(--teal-1);
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
}

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

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

.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(--navy);
    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(--teal-2);
    color: var(--teal-1);
}

.cart-row-total {
    font-weight: 800;
    color: var(--shopee);
    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(--navy);
    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(--muted);
    padding: 8px 0;
}

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

.cart-discount-row {
    color: var(--coral);
    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(--navy);
    color: var(--navy);
    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(--teal-1);
    color: var(--teal-1);
}

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

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

.voucher-message.is-success {
    color: var(--lime-dark);
}

.available-vouchers {
    margin-bottom: 12px;
}
.available-vouchers summary {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--teal-1);
    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(--coral);
    color: var(--coral);
    font-weight: 800;
    font-size: 0.76rem;
    padding: 4px 14px;
    border-radius: 100px;
    cursor: pointer;
}
.voucher-use-btn.is-claimed {
    border-color: var(--lime);
    color: var(--lime-dark);
}
.voucher-use-btn.is-disabled {
    border-color: var(--line);
    color: var(--muted);
    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(--navy);
    font-size: 1.05rem;
}

.cart-summary-total span:last-child {
    color: var(--shopee);
    font-size: 1.3rem;
}

.cart-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 18px;
}

/* ===== 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(--navy);
}

.express-checkout-sub {
    font-size: 0.8rem;
    color: var(--muted);
    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(--muted);
    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(--teal-1);
    margin-top: 10px;
}

.cart-guest-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.cart-trust-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.cart-trust-row span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

.cart-trust-row svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--teal-1);
}

.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(--muted);
    background: var(--foam);
    border-radius: 6px;
    padding: 4px 8px;
}

.checkout-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
}

.checkout-form h3 {
    font-size: 1.05rem;
    color: var(--navy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkout-form h3 svg { width: 17px; height: 17px; color: var(--teal-1); flex: 0 0 auto; }

.checkout-form h3:not(:first-child) {
    margin-top: 26px;
}

.checkout-section-heading {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.checkout-section-heading svg {
    width: 18px;
    height: 18px;
    color: var(--teal-1);
    flex: 0 0 auto;
}

.checkout-hidden-field {
    display: none;
}

.checkout-guest-hint {
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--muted);
}

.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(--teal-1);
    font-weight: 600;
    margin-bottom: 16px;
}

.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.checkout-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.checkout-steps li:not(:last-child)::after {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--line);
    margin-left: 10px;
}

.checkout-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--foam);
    color: var(--muted);
    font-size: 0.72rem;
    flex: 0 0 auto;
}

.checkout-steps li.is-active {
    color: var(--coral);
}

.checkout-steps li.is-active .checkout-step-dot {
    background: var(--coral);
    color: #fff;
}

.checkout-steps li.is-done {
    color: var(--lime-dark);
}

.checkout-steps li.is-done .checkout-step-dot {
    background: var(--lime-dark);
    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(--foam);
    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(--navy);
    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(--teal-1);
}

.checkout-legal-text {
    margin-top: 12px;
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}

.checkout-legal-text a {
    color: var(--teal-1);
    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(--muted);
}

.checkout-trust-list svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--teal-1);
}

.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(--muted);
    font-size: 0.72rem;
}

.checkout-summary-item-qty {
    color: var(--muted);
    font-size: 0.78rem;
}

.form-row {
    margin-bottom: 16px;
}

.form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--navy);
    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(--foam);
}

.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(--coral);
    background: rgba(255, 111, 97, 0.05);
}

.payment-method-option input {
    accent-color: var(--coral);
}

.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(--muted);
}

.payment-method-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--muted);
    background: var(--foam);
    border-radius: 6px;
    padding: 4px 8px;
    white-space: nowrap;
}

.form-error {
    display: block;
    color: var(--shopee);
    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(--coral);
    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(--coral);
    background: #fdeceb;
}
.shipping-method-option input {
    accent-color: var(--coral);
    flex: 0 0 auto;
}
.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(--muted);
    margin-top: 2px;
}
.shipping-method-price {
    font-weight: 800 !important;
    color: var(--navy) !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(--lime-dark);
    font-weight: 700;
}

.checkout-submit {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}

.checkout-disclaimer {
    margin-top: 14px;
    font-size: 0.76rem;
    color: var(--muted);
    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(--navy);
    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(--muted);
    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(--navy);
    font-size: 1.05rem;
}

.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(--lime);
    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(--navy);
    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(--navy));
}

/* 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-mode-toggle {
    display: flex;
    background: var(--foam);
    border-radius: 100px;
    padding: 4px;
    margin-bottom: 20px;
}

.login-mode-toggle button {
    flex: 1;
    background: none;
    border: none;
    border-radius: 100px;
    padding: 9px;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--muted);
    cursor: pointer;
    font-family: var(--font-body);
}

.login-mode-toggle button.active {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 2px 6px rgba(28, 51, 80, 0.1);
}

.otp-note {
    background: var(--foam);
    color: var(--teal-1);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.or-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    color: var(--muted);
    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(--navy);
    font-family: var(--font-body);
    width: 100%;
}

.social-btn:hover {
    background: #f9fbfb;
    border-color: var(--navy);
}

.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(--coral);
    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(--teal-1);
    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(--muted);
    font-size: 0.9rem;
    margin-top: 6px;
    margin-bottom: 24px;
}

.auth-subheading a {
    color: var(--coral);
    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(--muted);
    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(--coral);
    cursor: pointer;
}

.forgot-link {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--teal-1);
}

.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;
}

.auth-guest-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--lime-dark);
    font-weight: 700;
    text-align: center;
}

.auth-guest-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.auth-guest-note a {
    color: var(--navy);
    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(--navy);
    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(--muted);
    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(--foam);
    color: var(--teal-1);
}
.account-nav-count {
    margin-left: auto;
    background: var(--coral);
    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(--coral);
}
.account-logout-link:hover { background: none; color: var(--coral-dark); }

.account-sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--muted);
    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(--coral);
    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(--navy); }
.account-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--yellow);
    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(--teal-1), 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-2);
    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(--navy);
    line-height: 1;
}
.account-stat-label {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
    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(--foam);
}
.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(--muted);
    cursor: pointer;
}
.account-add-card:hover { border-color: var(--teal-2); color: var(--teal-1); }
.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(--muted); 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(--foam); color: var(--teal-1); }
.account-status-completed,
.account-status-delivered { background: #e9f5e0; color: var(--lime-dark); }
.account-status-cancelled { background: #fdeceb; color: var(--coral-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(--yellow);
    border: none;
    border-radius: 100px;
    padding: 8px;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
}
.account-reorder-btn.added { background: var(--lime); 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(--navy); }
.account-loyalty-ring-threshold { font-size: 0.6rem; fill: var(--muted); font-weight: 700; }
.account-loyalty-card h4 { color: var(--navy); 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(--muted);
    cursor: pointer;
}
.account-order-filter.active { background: var(--navy); 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(--coral);
}
.account-address-default-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--coral);
    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(--muted);
    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(--coral); }
.account-tank-stock-mid { background: var(--yellow); }
.account-tank-stock-high { background: var(--lime); }
.account-tank-restock-btn {
    margin-top: 12px;
    background: var(--foam);
    border: none;
    color: var(--teal-1);
    border-radius: 100px;
    padding: 8px 16px;
}
.account-tank-restock-btn:hover { background: var(--teal-2); 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(--coral);
    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(--yellow); letter-spacing: 2px; }
.account-review-title { font-weight: 800; color: var(--navy); 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(--lime-dark); }
.status-tag.status-pending { background: #fff6e0; color: #a97b0a; }
.status-tag.status-rejected { background: #fdeceb; color: var(--coral-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(--navy);
    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(--teal-2); color: var(--teal-1); }
.icon-action.danger:hover { border-color: var(--coral); color: var(--coral); }

.account-edit-panel,
.account-delete-confirm {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.account-delete-confirm p { color: var(--coral-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(--yellow);
}
.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(--coral);
    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(--muted); 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(--lime); }
.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(--navy); }

.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(--muted); margin-top: 4px; }
.char-count.warn { color: var(--coral); }

.prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prompt-chip {
    background: var(--foam);
    border: none;
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--teal-1);
    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(--navy); margin: 6px 0 4px; }
.upload-zone span { font-size: 0.78rem; color: var(--muted); }
.upload-zone.drag { border-color: var(--teal-2); background: var(--foam); }

.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(--coral);
    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(--foam);
    color: var(--teal-1);
    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(--muted); 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-2);
    opacity: 0.85;
    font-weight: 600;
    font-size: 0.9rem;
}
.account-welcome-cta {
    background: var(--yellow);
    color: var(--ink-2);
    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(--muted);
    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(--foam);
    color: var(--teal-1);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 100px;
}

/* ===== 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(--navy);
    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(--yellow); }
.reviews-stat-card .lbl { font-size: 0.72rem; color: var(--muted); 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(--muted);
}
.reviews-sort-select select {
    border: 1.5px solid var(--line);
    border-radius: 100px;
    padding: 7px 14px;
    font-weight: 700;
    color: var(--navy);
    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(--teal-1);
    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(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.account-review-helpful svg { width: 14px; height: 14px; color: var(--lime-dark); }

.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(--muted);
    cursor: pointer;
}
.review-helpful-btn svg { width: 14px; height: 14px; }
.review-helpful-btn:hover:not(:disabled) { border-color: var(--lime-dark); color: var(--lime-dark); }
.review-helpful-btn.voted,
.review-helpful-btn:disabled {
    color: var(--lime-dark);
    border-color: var(--lime-dark);
    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(--navy); margin-bottom: 8px; }
.reviews-empty-state p { color: var(--muted); font-size: 0.88rem; margin-bottom: 20px; }

.checkout-bank-info {
    margin-top: 16px;
    background: var(--foam);
    border-radius: 10px;
    padding: 14px;
}

.checkout-bank-info h4 {
    font-size: 0.85rem;
    color: var(--navy);
    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(--coral);
    line-height: 1;
}

.error-404 h1 {
    margin-top: 8px;
    font-size: 1.6rem;
    color: var(--navy);
}

.error-404 p {
    margin-top: 12px;
    color: var(--muted);
    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(--navy);
    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(--coral);
}

.search-list-title {
    display: block;
    font-weight: 700;
    color: var(--navy);
    font-size: 0.95rem;
}

.search-list-excerpt {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--muted);
}

/* ===== WHY BAND (full-bleed colorful ribbon — same width treatment as .hero) ===== */
.why-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--navy), var(--teal-1) 50%, var(--navy));
    padding: 56px 0;
}

.why-band .sec-head h2 {
    color: #fff;
    position: relative;
}

.why-spark {
    display: inline-flex;
    color: var(--yellow);
    vertical-align: middle;
    margin: 0 6px;
}

.why-spark svg {
    width: 18px;
    height: 18px;
}

.why-deco {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    height: 90px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.why-deco svg {
    width: 100%;
    height: 100%;
    color: #fff;
    fill: currentColor;
    stroke: currentColor;
}

.why-deco-left {
    left: 3%;
}

.why-deco-right {
    right: 3%;
    transform: translateY(-50%) scaleX(-1);
}

@media (max-width: 900px) {
    .why-deco {
        display: none;
    }
}

.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;
    }
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

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

@media (min-width: 901px) and (max-width: 1100px) {
    .why-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.why-card {
    text-align: center;
}

.why-card .ic-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.why-card svg {
    width: 26px;
    height: 26px;
    color: #fff;
}

.why-card h4 {
    font-size: 1rem;
    margin: 14px 0 6px;
    color: #fff;
}

.why-card p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
    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(--teal-1), 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(--coral);
    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(--navy);
}

.about-text p {
    margin-top: 16px;
    color: var(--muted);
    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(--coral);
}

.about-stats div span {
    font-size: 0.76rem;
    color: var(--muted);
    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(--navy);
}

.review-date {
    font-size: 0.7rem;
    color: var(--muted);
}

.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(--lime-dark);
}

.review-verified svg {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--lime-dark);
    color: #fff;
    padding: 2px;
    box-sizing: content-box;
}

.review-tag {
    display: inline-block;
    margin-top: 12px;
    background: var(--foam);
    color: var(--teal-1);
    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(--navy);
    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(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ===== CTA ===== */
.cta-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, var(--teal-1) 55%, var(--teal-2) 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(--muted);
}

.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(--yellow);
    color: var(--ink-2);
    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(--navy);
}

.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: 59%;
    top: 30%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 100px;
    padding: 5px 5px 5px 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.cta-photo-form input[type="email"] {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: clamp(0.68rem, 1.4vw, 0.88rem);
    width: clamp(90px, 14vw, 190px);
    min-width: 0;
}

.cta-photo-form button {
    background: var(--yellow);
    color: var(--ink-2);
    border: none;
    border-radius: 100px;
    padding: 10px 18px;
    font-weight: 800;
    font-size: clamp(0.66rem, 1.3vw, 0.85rem);
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cta-photo-message {
    position: absolute;
    left: 59%;
    top: calc(30% + 26px);
    transform: translateX(-50%);
    z-index: 2;
    max-width: 260px;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink-2);
    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: var(--navy);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #cfe3e8;
    /* 60px (was margin-top) folded into padding-top so the footer's own
       background — solid navy 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: 116px 0 24px;
}

.site-footer-has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 31, 46, 0.55), rgba(11, 31, 46, 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(--teal-3);
    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-brand-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    line-height: 1;
}

.foot-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.foot-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    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;
    opacity: 0.85;
}

.foot-contact-list svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
    opacity: 0.8;
}

.foot-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.foot-payment-badge {
    background: #fff;
    color: var(--navy);
    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 rgba(255, 255, 255, 0.14);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.76rem;
    opacity: 0.75;
}

@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(--foam);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card-body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-cat {
    color: var(--coral);
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-card-title {
    margin-top: 8px;
    font-size: 1rem;
    line-height: 1.35;
}

.blog-card-title a {
    color: var(--navy);
}

.blog-card-title a:hover,
.blog-card-title a:focus-visible {
    color: var(--coral);
}

.blog-card-excerpt {
    margin-top: 8px;
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.55;
    flex: 1;
}

.blog-card-date {
    margin-top: 12px;
    font-size: 0.72rem;
    color: #9aa8ae;
}

.blog-single {
    max-width: 780px;
    margin: 0 auto;
}

.blog-article-header {
    text-align: center;
    margin-bottom: 26px;
}

.blog-article-header .kicker2 {
    color: var(--coral);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-article-header h1 {
    margin-top: 10px;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: var(--navy);
    line-height: 1.25;
}

.blog-article-meta {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--muted);
}

.blog-article-thumb {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 26px;
}

.blog-article-thumb img {
    width: 100%;
}

.blog-article-content {
    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(--navy);
    margin: 1.6em 0 0.6em;
}

.blog-article-nav {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.blog-article-nav a {
    color: var(--teal-1);
    font-weight: 700;
    font-size: 0.9rem;
}

/* ===== 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(--navy);
    margin-bottom: 20px;
}

.static-page-content h2 {
    color: var(--navy);
    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(--navy);
    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(--teal-1);
    text-decoration: underline;
}

.page-extra-content blockquote {
    border-left: 3px solid var(--coral);
    margin: 0 0 1.2em;
    padding: 4px 0 4px 18px;
    color: var(--muted);
    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(--navy);
    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(--foam);
    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(--foam);
    border-radius: 16px;
    padding: 26px;
}

.contact-info h3 {
    color: var(--navy);
    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(--teal-1);
    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(--muted); }
.tracking-meta-item b { display: block; color: var(--navy); 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(--lime); 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(--lime); color: var(--lime-dark); }
.route-pin.current { border-color: var(--coral); color: var(--coral); 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(--lime); }
.event-item.current .event-dot { background: var(--coral); }
.event-dot svg { width: 12px; height: 12px; }
.event-title { font-weight: 800; font-size: 0.86rem; color: var(--navy); }
.event-item:not(.done):not(.current) .event-title { color: var(--muted); }
.event-desc { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.event-time { font-size: 0.7rem; color: var(--muted); margin-top: 3px; }

/* ---- Item row action buttons (Buy Again / Review) ---- */
.oi-btn {
    background: var(--navy);
    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(--navy); }

/* ---- 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(--foam), #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(--teal-1);
    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(--navy); margin: 0; }
.support-card-left p { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

.oi-return-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    background: var(--foam);
    color: var(--teal-1);
    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(--coral); 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(--navy); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1.4rem; line-height: 1; }

.modal-submit-btn {
    width: 100%;
    background: var(--coral);
    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(--coral-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(--lime-dark); margin: 0 auto 16px; }
.return-success h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; }
.return-success p { font-size: 0.86rem; color: var(--muted); line-height: 1.6; }
.return-success .rma-id {
    font-family: monospace;
    background: var(--foam);
    color: var(--teal-1);
    padding: 8px 16px;
    border-radius: 100px;
    display: inline-block;
    margin: 14px 0;
    font-weight: 700;
    font-size: 0.85rem;
}