/* ============================================================================
   Loomapesa — brand stylesheet
   Warm pet-bed palette: terracotta CTAs, a terracotta→honey gradient brand
   mark, soft cream backgrounds, cocoa text. Cozy and trustworthy; rounded
   corners, generous whitespace.

   NB: the CSS custom-property NAMES below (--brand-orange, --brand-cyan,
   --brand-magenta, --brand-pink, --brand-sky) are kept from the template
   so every downstream rule keeps working — only their VALUES are remapped
   to the Loomapesa palette. --brand-orange* = primary terracotta CTA.
   ============================================================================ */

/* Self-hosted Inter (variable) — one WOFF2 replaces 5 external files from
   rsms.me, removing a render-blocking cross-origin request + ~560KB. swap =
   text renders immediately in the fallback, no invisible-text delay (FCP). */
@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
    /* Backgrounds */
    --bg:           #FBF8F4;      /* warm cream */
    --surface:      #FFFFFF;
    --surface-alt:  #F5EFE7;      /* soft sand panel */

    /* Text */
    --text:         #3D2E24;      /* cocoa */
    --text-soft:    #6B5B50;
    --text-mute:    #A09488;

    /* Brand — Loomapesa pet palette (names kept, values remapped) */
    --brand-cyan:    #D4A76A;     /* honey (gradient start / accents) */
    --brand-magenta: #A66E42;     /* deep terracotta (gradient end) */
    --brand-orange:  #C4885A;     /* primary CTA — terracotta */
    --brand-orange-dark: #A66E42; /* CTA hover / links */
    --brand-blue:    #2E3A2E;     /* secondary / forest dark */
    --brand-pink:    #EFE4D6;     /* pale sand tint */
    --brand-sky:     #8BA67E;     /* sage green accent */

    /* Status */
    --success: #5A9E68;
    --error:   #D45A5A;
    --warning: #D4A76A;

    /* Lines + radius + shadow */
    --border:   #E8DFD6;
    --border-soft: #F0E9E0;
    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(61, 46, 36, 0.05);
    --shadow:    0 4px 16px rgba(61, 46, 36, 0.08);
    --shadow-lg: 0 12px 32px rgba(61, 46, 36, 0.12);

    /* Brand gradient (used sparingly — logo ring, hero accent, focus rings) */
    --brand-gradient: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-magenta) 100%);

    /* Typography */
    --font-sans: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Reset / base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }

a {
    color: var(--brand-orange-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--brand-orange); }
a:focus-visible {
    outline: 2px solid var(--brand-cyan);
    outline-offset: 2px;
    border-radius: 4px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text);
    margin-top: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

/* Buttons --------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
    line-height: 1.2;
}
.btn-primary {
    background: var(--brand-orange);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--brand-orange-dark);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
}
.btn-secondary:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}
.btn-gradient {
    background: var(--brand-gradient);
    color: #FFFFFF;
    box-shadow: var(--shadow);
}

/* Brand gradient ring (logo halo) -------------------------------------- */
.brand-ring {
    display: inline-block;
    padding: 4px;
    border-radius: 50%;
    background: var(--brand-gradient);
}
.brand-ring > * {
    display: block;
    border-radius: 50%;
    background: var(--surface);
    overflow: hidden;
}

/* Container -------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Coming Soon page ------------------------------------------------------ */
.cs {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background:
        radial-gradient(ellipse at top right, rgba(79, 191, 184, 0.10), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(232, 168, 92, 0.08), transparent 50%),
        var(--bg);
}
.cs-header {
    padding: 2rem 1.25rem 0;
}
.cs-main {
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}
.cs-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    max-width: 36rem;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border-soft);
}
.cs-logo {
    width: 8rem;
    height: 8rem;
    margin-inline: auto;
    margin-bottom: 1.5rem;
}
.cs-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cs-title {
    font-size: clamp(2rem, 6vw, 2.75rem);
    margin: 0 0 0.5rem;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cs-tagline {
    color: var(--text-soft);
    font-size: 1.125rem;
    margin: 0 0 2rem;
}
.cs-message {
    color: var(--text-soft);
    font-size: 1rem;
    margin: 0 0 2rem;
    line-height: 1.7;
}
.cs-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 2rem;
}
.cs-form input[type="email"] {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-form input[type="email"]:focus {
    outline: none;
    border-color: var(--brand-cyan);
    box-shadow: 0 0 0 3px rgba(0, 200, 232, 0.15);
}
.cs-form button {
    flex: 0 0 auto;
}
.cs-success {
    background: rgba(43, 182, 115, 0.1);
    color: var(--success);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin: 0 0 1.5rem;
    font-weight: 500;
}
.cs-error {
    background: rgba(229, 69, 69, 0.1);
    color: var(--error);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin: 0 0 1.5rem;
    font-weight: 500;
}
.cs-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.cs-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-soft);
    font-size: 0.875rem;
    text-align: center;
}
.cs-feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--surface-alt);
    display: grid;
    place-items: center;
    color: var(--brand-blue);
    font-size: 1.25rem;
}
.cs-contact {
    color: var(--text-mute);
    font-size: 0.875rem;
}
.cs-contact a {
    color: var(--text-soft);
    font-weight: 500;
}
.cs-footer {
    padding: 1.5rem 1.25rem 2rem;
    text-align: center;
    color: var(--text-mute);
    font-size: 0.875rem;
}
.cs-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0 0;
}
.cs-social a {
    color: var(--text-mute);
    text-decoration: none;
}
.cs-social a:hover {
    color: var(--brand-orange);
}

/* Countdown (only when launch date set) -------------------------------- */
.cs-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 0 0 2rem;
}
.cs-countdown-unit {
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: 1rem 0.5rem;
}
.cs-countdown-value {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.cs-countdown-label {
    font-size: 0.75rem;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

@media (max-width: 480px) {
    .cs-card { padding: 2rem 1.25rem; }
    .cs-logo { width: 6rem; height: 6rem; }
    .cs-form { flex-direction: column; }
    .cs-form button { width: 100%; }
}

/* Long-form prose (legal pages, descriptions) -------------------------- */
.page-body {
    color: var(--text);
    line-height: 1.75;
    font-size: 1.0625rem;
}
.page-body h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}
.page-body h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2.5rem;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-gradient);
}
.page-body h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--brand-blue);
    font-size: 1.125rem;
}
.page-body p { margin: 0 0 1.25rem; }
.page-body ul, .page-body ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}
.page-body li {
    margin-bottom: 0.5rem;
}
.page-body li::marker {
    color: var(--brand-orange);
}
.page-body a {
    color: var(--brand-orange-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.page-body a:hover {
    color: var(--brand-orange);
    text-decoration-thickness: 2px;
}
.page-body strong { color: var(--text); font-weight: 600; }
.page-body em { color: var(--text-soft); }
.page-body code {
    background: var(--surface-alt);
    color: var(--brand-blue);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
}
.page-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 3px solid var(--brand-orange);
    background: var(--surface-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-soft);
    font-style: italic;
}
.page-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.page-body thead {
    background: var(--surface-alt);
}
.page-body th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.page-body td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.page-body tbody tr:last-child td { border-bottom: none; }
.page-body tbody tr:hover { background: var(--surface-alt); }

/* ============================================================================
   Site shell: header, top-bar, masthead, primary nav, mobile drawer
   ============================================================================ */
.skip-link {
    position: absolute; left: -9999px; top: auto;
    padding: 0.75rem 1.5rem; background: var(--text); color: #fff;
    font-weight: 600; border-radius: var(--radius); z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--border-soft);
}
.site-header[data-scrolled] {
    box-shadow: var(--shadow);
}

/* Top bar */
.topbar {
    background: var(--text);
    color: rgba(255,255,255,0.85);
    font-size: 0.8125rem;
}
.topbar-inner {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    flex-wrap: wrap;
}
.topbar-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar-item--accent { color: var(--brand-sky); font-weight: 600; }
.topbar-divider { opacity: 0.4; }
.topbar-spacer { flex: 1; }
.topbar-link { color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.15s; }
.topbar-link:hover { color: var(--brand-orange); }

/* Masthead (logo + search + actions) */
.masthead { border-bottom: 1px solid var(--border-soft); }
.masthead-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.875rem 1.25rem;
}
.masthead-brand {
    display: flex; align-items: center; gap: 0.75rem;
    text-decoration: none; color: inherit;
}
.masthead-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.masthead-brand-mark img {
    width: 44px; height: 44px;
    object-fit: contain;
    display: block;
}
.masthead-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.masthead-brand-text strong { font-size: 1.125rem; letter-spacing: -0.02em; color: var(--text); }
.masthead-brand-text small { font-size: 0.75rem; color: var(--text-mute); }

.masthead-search {
    display: flex; align-items: center;
    background: var(--surface-alt);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    max-width: 32rem;
    width: 100%;
    justify-self: center;
}
.masthead-search:focus-within {
    border-color: var(--brand-cyan);
    box-shadow: 0 0 0 3px rgba(0,200,232,0.15);
}
.masthead-search-icon { color: var(--text-mute); margin-left: 1rem; flex-shrink: 0; }
.masthead-search input {
    flex: 1; border: none; background: transparent;
    padding: 0.75rem 0.75rem;
    font-family: inherit; font-size: 0.9375rem; color: var(--text);
    outline: none; min-width: 0;
}
.masthead-search-submit {
    background: var(--brand-orange); color: #fff;
    border: none; padding: 0.6rem 1.25rem;
    font-weight: 600; font-size: 0.875rem;
    cursor: pointer; transition: background 0.15s;
    border-radius: 999px; margin: 4px;
}
.masthead-search-submit:hover { background: var(--brand-orange-dark); }

.masthead-actions { display: flex; align-items: center; gap: 0.5rem; }
.masthead-action {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 0.5rem 0.75rem;
    color: var(--text); text-decoration: none;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.masthead-action:hover { background: var(--surface-alt); color: var(--brand-orange-dark); }
.masthead-action-label { font-size: 0.75rem; }
.masthead-cart-count {
    position: absolute;
    top: 0.25rem; right: 0.25rem;
    background: var(--brand-orange); color: #fff;
    font-size: 0.6875rem; font-weight: 700;
    min-width: 1.125rem; height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.masthead-cart-count[hidden] { display: none; }

.masthead-burger {
    display: none;
    flex-direction: column; gap: 4px; justify-content: center;
    width: 40px; height: 40px;
    border: none; background: transparent; cursor: pointer;
    padding: 0; border-radius: var(--radius);
}
.masthead-burger span {
    display: block; height: 2px; width: 22px;
    background: var(--text); border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.masthead-burger:hover { background: var(--surface-alt); }
.masthead-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.masthead-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.masthead-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Primary nav */
/* ── Primary category nav: compact single row, scrolls instead of wrapping ── */
.primary-nav { border-bottom: 1px solid var(--border-soft); background: var(--surface); }
.primary-nav-inner { padding: 0 1.25rem; }
.primary-nav-list {
    display: flex; align-items: center;
    gap: 0.1rem 0.25rem;
    margin: 0; padding: 0.15rem 0; list-style: none;
    flex-wrap: wrap;                   /* wrap to a 2nd line, never cut off */
    justify-content: flex-start;
    /* dropdowns are position:fixed (JS-positioned) so wrapping rows never
       clip them; no overflow needed. */
}
.primary-nav-item { position: relative; flex-shrink: 0; }
.primary-nav-item > a {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.6rem 0.85rem;           /* slimmer bar */
    color: var(--text-soft); text-decoration: none;
    font-weight: 500; font-size: 0.875rem;
    transition: color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.primary-nav-item > a svg { opacity: 0.5; transition: transform 0.15s; }
.primary-nav-item > a:hover { color: var(--brand-orange-dark); }
.primary-nav-item.has-mega:hover > a svg { transform: rotate(180deg); opacity: 1; }
/* underline indicator on hover/current — modern, no heavy background pill */
.primary-nav-item > a:hover,
.primary-nav-item.current-menu-item > a,
.primary-nav-item.current-menu-parent > a {
    color: var(--brand-orange-dark);
    border-bottom-color: var(--brand-orange);
}
.primary-nav-item--accent > a {
    color: var(--brand-orange-dark); font-weight: 700;
}
.primary-nav-flame {
    color: var(--brand-orange);
    font-size: 0.55rem;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Mega dropdown: position:FIXED so it escapes the scrolling nav row.
   JS (loomapesa-nav) sets --mega-left / --mega-top from the hovered item's
   getBoundingClientRect on hover/focus. ── */
.primary-nav-item.has-mega .mega-menu {
    position: fixed;
    left: var(--mega-left, 0);
    top: var(--mega-top, 0);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0.5rem;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s 0.16s;
    z-index: 60;
}
.primary-nav-item.has-mega .mega-menu ul {
    list-style: none; margin: 0; padding: 0;
    min-width: 15rem;
    columns: 1;
}
.primary-nav-item.has-mega:hover .mega-menu,
.primary-nav-item.has-mega:focus-within .mega-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}
.mega-menu li > a {
    display: block; padding: 0.5rem 0.8rem;
    color: var(--text-soft); text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem; white-space: nowrap;
}
.mega-menu li > a:hover { background: var(--brand-pink); color: var(--brand-magenta); }

/* Mobile drawer */
.mobile-drawer {
    position: fixed; inset: 0;
    z-index: 100;
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(61, 46, 36, 0.5);
    backdrop-filter: blur(2px);
    animation: fade-in 0.2s ease-out;
}
.mobile-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(20rem, 85vw);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    animation: slide-in 0.25s ease-out;
}
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes slide-in { from { transform: translateX(100%) } to { transform: translateX(0) } }

.mobile-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
}
.mobile-drawer-close {
    background: transparent; border: none; cursor: pointer;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text);
}
.mobile-drawer-close:hover { background: var(--surface-alt); }

.mobile-drawer-search {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
}
.mobile-drawer-search input {
    width: 100%; padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    font-family: inherit; font-size: 1rem;
    outline: none;
}
.mobile-drawer-search input:focus { border-color: var(--brand-cyan); }

.mobile-drawer-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.mobile-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-drawer-nav a {
    display: block;
    padding: 0.875rem 1.25rem;
    color: var(--text); text-decoration: none;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.mobile-drawer-nav a:hover { background: var(--surface-alt); color: var(--brand-orange-dark); }
.mobile-drawer-divider {
    height: 0.5rem;
    background: var(--surface-alt);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

/* Mobile breakpoint */
@media (max-width: 920px) {
    .masthead-inner { grid-template-columns: auto 1fr auto; gap: 0.75rem; }
    .masthead-search { display: none; }
    .masthead-action--cart .masthead-action-label,
    .masthead-action[aria-label="Minu konto"] .masthead-action-label { display: none; }
    .masthead-burger { display: inline-flex; }
    .masthead-brand-text small { display: none; }
    .primary-nav { display: none; }
    .topbar-inner { font-size: 0.75rem; }
    .topbar-link, .topbar-divider:nth-of-type(n+3) { display: none; }
}

/* ============================================================================
   Homepage
   ============================================================================ */
.home-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--bg);
    background-image:
        /* Smooth left->right scrim: solid mint-white behind the copy, easing
           gently into the photo so there's no hard "where the white ends"
           seam. A faint green tint at the far left grounds it in the brand. */
        linear-gradient(90deg,
            var(--bg) 0%,
            rgba(250,251,252,0.97) 30%,
            rgba(250,251,252,0.82) 45%,
            rgba(250,251,252,0.35) 60%,
            rgba(250,251,252,0) 74%),
        var(--hero-img);
    background-size: cover, cover;
    background-position: center, center center;  /* photo centered (was right) */
    background-repeat: no-repeat, no-repeat;
    min-height: clamp(24rem, 46vw, 36rem);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-soft);
}
/* Soft top + bottom inner shadow gives the hero gentle depth without a box. */
.home-hero::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    box-shadow: inset 0 -24px 40px -28px rgba(20,32,56,0.18);
}
.home-hero-inner {
    position: relative;
    z-index: 1;
    padding: clamp(3rem, 7vw, 5rem) 1.25rem;
    max-width: 1200px;
    margin-inline: auto;
    width: 100%;
}
.home-hero-copy { max-width: 35rem; }
.home-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-orange-dark);
    background: var(--brand-pink);
    padding: 0.3rem 0.7rem; border-radius: 999px;
    margin-bottom: 1.1rem;
}
.home-hero-copy h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
    color: var(--text);            /* solid, confident — no faint gradient */
    text-wrap: balance;
}
.home-hero-copy h1 .accent { color: var(--brand-orange-dark); }
.home-hero-copy p {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65;
    color: var(--text-soft);
    margin-bottom: 1.9rem;
    max-width: 40ch;
}
.home-hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
/* Bigger, more premium hero buttons + a clear lift on the primary CTA. */
.home-hero-cta .btn { padding: 0.85rem 1.6rem; font-size: 1.0625rem; border-radius: var(--radius); }
.home-hero-cta .btn-primary { box-shadow: 0 8px 22px -8px rgba(63,163,77,0.55); }
.home-hero-cta .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(63,163,77,0.6); }
.home-hero-trust {
    list-style: none; margin: 1.75rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem;
}
.home-hero-trust li {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--text); font-size: 0.875rem; font-weight: 600;
    background: rgba(255,255,255,0.75);
    border: 1px solid var(--border-soft);
    padding: 0.4rem 0.8rem; border-radius: 999px;
    backdrop-filter: blur(2px);
}
.home-hero-trust li::before {
    content: "✓";
    color: #fff; background: var(--brand-orange);
    width: 1.05rem; height: 1.05rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
}
@media (max-width: 768px) {
    .home-hero {
        /* On mobile the products sit behind the text — strengthen the
           scrim to a near-solid wash so copy stays readable. */
        background-image:
            linear-gradient(180deg, rgba(250,251,252,0.92) 0%, rgba(250,251,252,0.78) 55%, rgba(250,251,252,0.55) 100%),
            var(--hero-img);
        background-position: center, center top;
        min-height: 0;
    }
    .home-hero-copy { max-width: none; }
    /* Trust pills: wrap nicely instead of clipping the last one */
    .home-hero-trust {
        flex-wrap: wrap;
        gap: 0.375rem 0.75rem;
    }
    .home-hero-trust li {
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    /* Page H1s a touch smaller on mobile so they fit the viewport */
    .wp-block-woocommerce-cart .wp-block-post-title,
    .wp-block-woocommerce-checkout .wp-block-post-title,
    .page-template-default.woocommerce-cart h1.entry-title,
    .page-template-default.woocommerce-checkout h1.entry-title {
        font-size: 1.75rem !important;
        margin-top: 1rem;
    }
    /* Mobile CTA: stack the cart submit button full-width with extra top space */
    .wc-block-cart__submit-container {
        padding-top: 1rem;
    }
    /* Reduce category-tile height on mobile so 4 fit above the fold */
    .category-tile--photo { aspect-ratio: 16/10; }
}

.section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.section-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 1rem; margin-bottom: 2rem;
}
.section-head h2 {
    margin: 0;
    position: relative; padding-bottom: 0.625rem;
}
.section-head h2::after {
    content: ""; position: absolute; bottom: 0; left: 0;
    width: 3rem; height: 3px; border-radius: 3px;
    background: var(--brand-gradient);
}
.section-head p { margin: 0; color: var(--text-soft); }
.section-link {
    color: var(--brand-orange-dark); font-weight: 600;
    text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
}
.section-link:hover { color: var(--brand-orange); }

/* Category tiles */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}
.category-tile {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    text-decoration: none; color: inherit;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.15s;
    aspect-ratio: 4/3;
}
.category-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-cyan);
}
.category-tile-icon {
    font-size: 2.5rem; line-height: 1;
    margin-bottom: 0.75rem;
}
.category-tile-name {
    font-weight: 600; font-size: 1rem;
    color: var(--text);
}
.category-tile-count {
    color: var(--text-mute); font-size: 0.8125rem; margin-top: 0.25rem;
}

/* Photo-backed category tile (uses --tile-img inline style) */
.category-tile--photo {
    aspect-ratio: 1/1;
    padding: 0;
    overflow: hidden;
    background-image: var(--tile-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    position: relative;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
}
.category-tile--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(15, 26, 46, 0.85) 0%,
        rgba(15, 26, 46, 0.45) 35%,
        rgba(15, 26, 46, 0) 65%);
    border-radius: inherit;
}
.category-tile--photo > * {
    position: relative;  /* sit above the gradient */
    z-index: 1;
}
.category-tile--photo {
    padding: 1.25rem;
}
.category-tile--photo .category-tile-name {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.category-tile--photo .category-tile-count {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}
.category-tile--photo:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border: 0;
}
.category-tile--photo:hover::before {
    background: linear-gradient(to top,
        rgba(15, 26, 46, 0.9) 0%,
        rgba(15, 26, 46, 0.5) 40%,
        rgba(79, 191, 184, 0.15) 100%);
}

/* USP strip */
.usp-strip {
    background: var(--surface);
    border-block: 1px solid var(--border-soft);
    padding: 1.5rem 0;
}
.usp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
}
.usp {
    display: flex; align-items: center; gap: 0.875rem;
}
.usp-icon {
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--surface-alt);
    display: grid; place-items: center;
    color: var(--brand-blue);
    flex-shrink: 0;
}
.usp-title { font-weight: 600; font-size: 0.9375rem; }
.usp-sub { font-size: 0.8125rem; color: var(--text-mute); }

/* ============================================================================
   Product card (used on homepage + PLP)
   ============================================================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1.25rem;
}
/* WooCommerce ships float-based grid CSS that loads after ours; override
   the layout-critical properties with !important so our CSS-grid wins
   regardless of source order. WC also adds .columns-N modifiers + clears. */
ul.products,
ul.products li.product { list-style: none !important; }
ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)) !important;
    gap: 1.25rem !important;
    margin: 0 0 2rem !important;
    padding: 0 !important;
}
ul.products::before,
ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product,
ul.products[class*="columns-"] li.product {
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.product-card,
ul.products li.product {
    display: flex !important;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.15s;
    position: relative;
}
.product-card:hover,
ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-cyan);
}
.product-card a,
ul.products li.product > a {
    color: inherit; text-decoration: none;
    display: flex; flex-direction: column; flex: 1;
}
.product-card img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
ul.products li.product img,
ul.products li.product .wp-post-image,
ul.products li.product a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: var(--surface-alt);
    padding: 1rem;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block !important;
}
.product-card-body,
ul.products li.product > a {
    padding: 0.875rem 1rem 1rem;
}
ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.9375rem !important;
    line-height: 1.35;
    font-weight: 500;
    margin: 0 0 0.5rem !important;
    padding: 0 1rem !important;
    color: var(--text) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
ul.products li.product .price {
    padding: 0 1rem 1rem;
    margin: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}
ul.products li.product .price del { color: var(--text-mute); margin-right: 0.5rem; font-weight: 400; }
ul.products li.product .price ins { background: transparent !important; color: var(--brand-orange-dark) !important; }
ul.products li.product .button,
ul.products li.product .added_to_cart {
    background: var(--brand-orange) !important;
    color: #fff !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    padding: 0.625rem 1rem !important;
    margin: 0 1rem 1rem !important;
    text-align: center;
    display: block;
    transition: background 0.15s;
}
ul.products li.product .button:hover { background: var(--brand-orange-dark) !important; }
ul.products li.product .onsale {
    background: var(--brand-magenta) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    position: absolute !important;
    top: 0.625rem; right: 0.625rem;
    margin: 0 !important;
}
ul.products li.product .star-rating {
    display: none; /* hide star rating column without reviews */
}

/* ============================================================================
   PLP wrapper (single-column, no sidebar by default)
   ============================================================================ */
.woocommerce-products-header {
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    text-align: center;
}
.woocommerce-products-header__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0 0 0.5rem;
}
.term-description { color: var(--text-soft); max-width: 60ch; margin: 0 auto; }
.woocommerce-result-count {
    color: var(--text-mute); font-size: 0.875rem;
}
.woocommerce-ordering select {
    padding: 0.5rem 0.875rem; border-radius: var(--radius);
    border: 1.5px solid var(--border); font-family: inherit;
    background: var(--surface); cursor: pointer;
}
.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
    display: flex; gap: 0.25rem;
    margin-top: 2rem;
    justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border-radius: var(--radius) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    padding: 0.625rem 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--brand-orange) !important;
    color: #fff !important;
    border-color: var(--brand-orange) !important;
}

/* ============================================================================
   Single product (PDP)
   ============================================================================ */
.woocommerce div.product {
    padding: 2rem 0;
}
.woocommerce div.product .woocommerce-product-gallery {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    padding: 1rem;
    border: 1px solid var(--border-soft);
}
/* CLS fix: WooCommerce's flexslider sets img width/height=100 then a JS
   onload handler rewrites them to natural size, which shifts layout. Lock
   the gallery wrapper + image to a stable square so nothing jumps. The
   !important overrides the inline width/height the onload hack writes. */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
    aspect-ratio: 1 / 1;
}
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--radius);
}
.woocommerce div.product .product_title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.875rem !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
}
.woocommerce div.product .price .woocommerce-Price-currencySymbol { font-weight: 700; }
.woocommerce-price-suffix {
    display: block; font-size: 0.8125rem; color: var(--text-mute); font-weight: 400;
    margin-top: 0.125rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--text-soft); line-height: 1.7; margin-bottom: 1.5rem;
}
.woocommerce div.product form.cart {
    display: flex; gap: 0.75rem; align-items: stretch;
    background: var(--surface-alt);
    padding: 1rem; border-radius: var(--radius-lg);
    margin: 1.5rem 0;
}
.woocommerce div.product form.cart .quantity {
    margin: 0 !important;
}
.woocommerce div.product form.cart div.quantity input.qty {
    width: 4rem; padding: 0.75rem; border-radius: var(--radius);
    border: 1.5px solid var(--border); font-size: 1rem;
    text-align: center;
}
.woocommerce div.product form.cart .button {
    background: var(--brand-orange) !important;
    color: #fff !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.75rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border: none !important;
    flex: 1;
    transition: background 0.15s, transform 0.1s;
}
.woocommerce div.product form.cart .button:hover {
    background: var(--brand-orange-dark) !important;
    transform: translateY(-1px);
}
.woocommerce div.product .product_meta {
    color: var(--text-mute);
    font-size: 0.875rem;
    border-top: 1px solid var(--border-soft);
    padding-top: 1.25rem;
}
.woocommerce div.product .product_meta a {
    color: var(--brand-blue);
}
.woocommerce-tabs .tabs {
    border: none !important; padding: 0 !important;
    display: flex; gap: 0.25rem;
    border-bottom: 1px solid var(--border-soft) !important;
    margin-bottom: 1.5rem !important;
}
.woocommerce-tabs .tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    margin: 0 !important;
}
.woocommerce-tabs .tabs li a {
    padding: 0.875rem 1.25rem !important;
    color: var(--text-mute) !important;
    font-weight: 500;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px;
}
.woocommerce-tabs .tabs li.active a {
    color: var(--brand-orange-dark) !important;
    border-bottom-color: var(--brand-orange) !important;
}
.related.products h2 {
    font-size: 1.5rem; margin-top: 3rem;
}

/* WC notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--radius) !important;
    border-top-style: solid !important;
    border-top-width: 3px !important;
    padding: 1rem 1.25rem !important;
}
.woocommerce-message { border-top-color: var(--success) !important; background: rgba(43, 182, 115, 0.08) !important; }
.woocommerce-info    { border-top-color: var(--brand-cyan) !important; background: rgba(0, 200, 232, 0.08) !important; }
.woocommerce-error   { border-top-color: var(--error) !important; background: rgba(229, 69, 69, 0.08) !important; }

/* ============================================================================
   Cart + Checkout
   ============================================================================ */
.woocommerce-cart .shop_table,
.woocommerce-checkout .shop_table {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    overflow: hidden;
}
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
    background: var(--surface-alt) !important;
    color: var(--text) !important;
    font-weight: 600;
    padding: 1rem !important;
}
.cart_totals h2, #order_review_heading {
    font-size: 1.25rem;
    margin-top: 2rem;
}
.cart_totals .shop_table {
    background: var(--surface) !important;
}
.checkout-button, .wc-proceed-to-checkout .button {
    background: var(--brand-orange) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: var(--radius) !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1.0625rem !important;
    display: block; text-align: center;
}

/* ============================================================================
   Community / social-proof band (Facebook group 6.5K)
   ============================================================================ */
.community-band {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        radial-gradient(ellipse at 15% 30%, rgba(0,200,232,0.10), transparent 55%),
        radial-gradient(ellipse at 85% 70%, rgba(233,75,208,0.10), transparent 55%),
        linear-gradient(135deg, #1A2438 0%, #28344d 100%);
    color: #fff;
}
.community-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.community-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--brand-sky);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}
.community-copy h2 {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 0.875rem;
}
.community-copy p {
    color: rgba(255,255,255,0.8);
    line-height: 1.65;
    margin: 0 0 1.5rem;
    max-width: 44ch;
}
.community-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.community-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
.community-cta .btn-secondary:hover {
    border-color: var(--brand-sky);
    color: var(--brand-sky);
}
.community-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.community-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    padding: 1.25rem 0.75rem;
    text-align: center;
}
.community-stat-num {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1;
    background: var(--brand-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.community-stat-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin-top: 0.4rem;
}
@media (max-width: 768px) {
    .community-inner { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* (removed stale tarkuni .footer-trust-* star-badge styles — the live footer
   trust strip is styled by the .footer-trust / .pay-logos / .pay-logo rules
   further down.) */

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── WooCommerce Block Cart + Block Checkout polish ─────────────────── */

/* Page heading */
.wp-block-woocommerce-cart .wp-block-post-title,
.wp-block-woocommerce-checkout .wp-block-post-title,
.page-template-default.woocommerce-cart h1.entry-title,
.page-template-default.woocommerce-checkout h1.entry-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 2rem 0 1.5rem;
    color: var(--text);
}

/* Two-column layout polish */
.wc-block-cart,
.wc-block-checkout {
    --wc-blocks-spacing: 1.5rem;
    margin: 0 auto 4rem;
}

/* Cart line item table headers */
.wc-block-cart-items__header,
.wc-block-components-totals-item__label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    font-weight: 600;
}

/* Summary cards (sidebar). Card-styling only the real content blocks —
   the notices wrappers (.wc-block-components-notices and ...__snackbar)
   are empty most of the time and would otherwise render as blank
   floating boxes above the summary. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
/* Strip card styling from the notices wrappers regardless of content —
   the snackbar holds an empty aria-live region most of the time and
   would still render as a styled blank box above the summary. WC will
   position any actual notice it pushes via JS-injected absolute styles. */
.wc-block-components-sidebar > .wc-block-components-notices,
.wc-block-components-sidebar > .wc-block-components-notices__snackbar,
.wc-block-components-sidebar-layout > .wc-block-components-notices,
.wc-block-components-sidebar-layout > .wc-block-components-notices__snackbar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
/* And outright hide them when they have no real child notice */
.wc-block-components-notices:empty,
.wc-block-components-notices__snackbar:not(:has(.wc-block-components-notice-banner)):not(:has(.snackbar-notice)) {
    display: none !important;
}
.wc-block-components-sidebar h2.wc-block-cart__totals-title,
.wc-block-components-sidebar .wc-block-components-totals-wrapper > h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--brand-cyan);  /* teal accent */
}

/* Total row big + bold */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    text-transform: none;
    letter-spacing: -0.01em;
}

/* "Including X VAT" subline */
.wc-block-components-totals-footer-item-tax-value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
    font-size: 0.8125rem;
    color: var(--text-mute);
    font-weight: 400;
    text-align: right;
}

/* The big call-to-action: "Vormista tellimus" + "Esita tellimus".
   Selectors stack the actual class names on the rendered element + use
   :not(.is-link) to outrank WC's own :not(.is-link) rule on
   .wc-block-components-button. */
a.wc-block-cart__submit-button.wc-block-components-button:not(.is-link),
a.wc-block-cart__submit-button.wp-element-button:not(.is-link),
.wc-block-cart__submit-container > a:not(.is-link),
.wp-block-woocommerce-proceed-to-checkout-block a:not(.is-link),
button.wc-block-components-checkout-place-order-button:not(.is-link),
button.wc-block-components-checkout-place-order-button.wp-element-button:not(.is-link) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 1rem 2rem !important;
    background: var(--brand-orange) !important;
    background-color: var(--brand-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--radius) !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, transform 0.05s ease !important;
    box-shadow: 0 4px 14px -4px rgba(232, 168, 92, 0.45) !important;
    text-shadow: none !important;
    min-height: 3.25rem !important;
}
a.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):hover,
a.wc-block-cart__submit-button.wp-element-button:not(.is-link):hover,
.wc-block-cart__submit-container > a:not(.is-link):hover,
button.wc-block-components-checkout-place-order-button:not(.is-link):hover {
    background: var(--brand-orange-dark) !important;
    background-color: var(--brand-orange-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
/* Inner span carries its own colour rule — force white text */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
    color: #fff !important;
}

/* Coupon input + apply button */
.wc-block-components-totals-coupon button {
    background: var(--brand-cyan) !important;
    color: #fff !important;
    border-radius: var(--radius) !important;
}

/* Form fields */
.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-checkout select {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--surface) !important;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input.is-active input,
.wc-block-components-country-input input:focus {
    border-color: var(--brand-cyan) !important;
    box-shadow: 0 0 0 3px rgba(79, 191, 184, 0.18) !important;
    outline: none !important;
}

/* Section headings (Tarneaadress, Kontaktandmed) */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 600;
    border-bottom: 2px solid var(--brand-cyan);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Cart item: product name link, price, qty controls */
.wc-block-cart-item__name,
.wc-block-cart-item__product-name a {
    color: var(--brand-orange-dark) !important;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}
.wc-block-cart-item__name:hover {
    color: var(--brand-orange) !important;
}
.wc-block-cart-item__quantity {
    align-items: center;
}
.wc-block-components-quantity-selector {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    overflow: hidden;
}
.wc-block-components-quantity-selector button {
    color: var(--text-soft) !important;
}

/* Coupon "Add coupons" link/toggle */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon-link {
    color: var(--brand-orange-dark);
    font-weight: 500;
}

/* Make sure block container has breathing room */
@media (min-width: 768px) {
    .wc-block-cart .wp-block-woocommerce-cart-items-block,
    .wc-block-checkout .wp-block-woocommerce-checkout-fields-block {
        padding-right: 2rem;
    }
}


/* ─── Checkout + Cart layout polish ──────────────────────────────────── */

/* page.php uses a 768px-max container for legal pages (good for text),
   but Cart + Checkout need the full 1200px so the order-summary sidebar
   isn't crammed into 250px. Target those two pages by WC body class. */
body.woocommerce-cart main.page-content,
body.woocommerce-checkout main.page-content,
body.page-template-default.woocommerce-cart .container,
body.page-template-default.woocommerce-checkout .container {
    max-width: 1200px !important;
    width: 100% !important;
}
body.woocommerce-cart .page-article,
body.woocommerce-cart .page-body,
body.woocommerce-checkout .page-article,
body.woocommerce-checkout .page-body {
    max-width: 100% !important;
}

/* And keep the WC block itself stretching to the new container width */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wc-block-checkout,
.wc-block-cart {
    max-width: 1200px !important;
    width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box;
}

/* Wider sidebar — give the order summary breathing room. WC's flex grows
   the main column over the sidebar; lock sidebar to ~30-35% on desktop.
   IMPORTANT: target .wc-block-components-sidebar-layout (the real content
   wrapper) — NOT .wc-block-checkout (which is the outer container that
   also holds the notices wrapper, breaking grid auto-flow). */
@media (min-width: 900px) {
    /* WC default = flex with main:65%/sidebar:35% but width:100% on each in
       a later override → both wrap to full width on narrow viewports. We
       force a grid with explicit columns and override WC's width:100%. */
    .wc-block-components-sidebar-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr) !important;
        gap: 2.5rem !important;
        align-items: start;
        flex-wrap: nowrap !important;
    }
    /* WC injects empty scroll-anchor + notices wrappers as first children;
       make them span the full grid row so they don't claim column slots. */
    .wc-block-components-sidebar-layout > div:first-child:empty,
    .wc-block-components-sidebar-layout > .with-scroll-to-top__scroll-point,
    .wc-block-components-sidebar-layout > .wc-block-components-notices,
    .wc-block-components-sidebar-layout > .wc-block-components-notices__snackbar {
        grid-column: 1 / -1;
        margin: 0;
    }
    /* WC's .main/.sidebar inline-style fixed widths (65%/100%) — force
       them to fill their grid cell instead. */
    .wc-block-components-sidebar-layout .wc-block-components-main {
        width: auto !important;
        max-width: none !important;
        padding-right: 0 !important;
        min-width: 0;
    }
    .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        width: auto !important;
        max-width: none !important;
        min-width: 0;
    }
}

/* Sticky sidebar so the order summary stays visible while filling fields */
@media (min-width: 900px) {
    .wc-block-components-sidebar {
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}

/* Order-summary line item: name and description shouldn't break per-character */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-product-name {
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: none;
    font-size: 0.875rem;
    line-height: 1.45;
}
.wc-block-components-product-name {
    font-weight: 600;
    color: var(--text);
}
.wc-block-components-order-summary-item__description p {
    margin: 0.25rem 0 0;
    color: var(--text-soft);
}

/* ─── Radio buttons: brand the Tarne + Maksevõrk options ─────────────── */

.wc-block-components-radio-control__input,
.wc-block-components-radio-control input[type="radio"] {
    accent-color: var(--brand-cyan);
}

.wc-block-components-radio-control__option {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 0.9rem 1.1rem 0.9rem 2.9rem !important;  /* room for the radio dot */
    margin-bottom: 0.5rem !important;
    background: var(--surface) !important;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
    position: relative;
    min-height: 0 !important;
}
.wc-block-components-radio-control__option:hover {
    border-color: var(--brand-orange) !important;
    background: rgba(63, 163, 77, 0.04) !important;
}
.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option:has(input[type="radio"]:checked) {
    border-color: var(--brand-orange) !important;
    background: rgba(63, 163, 77, 0.06) !important;
    box-shadow: 0 0 0 1px var(--brand-orange) inset;
}
/* keep the radio dot vertically centered with the (possibly wrapping) label */
.wc-block-components-radio-control__input,
.wc-block-components-radio-control input[type="radio"] {
    accent-color: var(--brand-orange);
    top: 1.05rem !important;          /* align with first line of label */
    left: 1.1rem !important;
}

/* Row layout: label (left, may wrap) + price (right, fixed, centered). */
.wc-block-components-radio-control__option-layout {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;   /* labels start at the LEFT */
    gap: 0.5rem 1rem;
    width: 100%;
    flex-wrap: nowrap;
    text-align: left !important;
}
.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__label {
    min-width: 0;                     /* let long label wrap instead of pushing price */
    text-align: left !important;
    margin-right: auto;               /* push the price to the far right */
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description {
    color: var(--text);
    font-weight: 500;
    line-height: 1.35;
    text-align: left !important;
}
.wc-block-components-radio-control__description {
    color: var(--text-mute);
    font-weight: 400;
    font-size: 0.8125rem;
    margin-top: 0.15rem;
}
/* price / amount on the right — never wraps, stays aligned */
.wc-block-components-radio-control__secondary-label {
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-left: auto;
}


/* ===========================================================================
   Single-product description (.otg-desc) — designed layout for imported
   product copy: rating row, section headings, spec table, FAQ accordion-look.
   Markup is plain semantic HTML (h2/h3/ul/table/dl); all styling lives here.
   =========================================================================== */
.otg-desc {
    color: var(--text);
    line-height: 1.7;
    font-size: 1rem;
    max-width: 60ch;
}
.otg-desc > * + * { margin-top: 1rem; }

.otg-desc h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-orange);
    display: inline-block;
}
.otg-desc h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-magenta);
    margin: 2rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.otg-desc h3::before {
    content: "";
    width: 0.5rem; height: 1.1rem;
    background: var(--brand-gradient);
    border-radius: 3px;
    display: inline-block;
}

/* Rating row */
.otg-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-alt);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.9375rem;
}

/* Feature bullet list -> check marks */
.otg-desc ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.6rem;
}
.otg-desc ul li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--text-soft);
}
.otg-desc ul li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 0.05rem;
    width: 1.3rem; height: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-orange);
    border-radius: 50%;
}

/* Technical-specs table -> clean striped key/value */
.otg-desc table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.9375rem;
}
.otg-desc table th,
.otg-desc table td {
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.otg-desc table tr:last-child td { border-bottom: none; }
.otg-desc table th {
    background: var(--brand-magenta);
    color: #fff;
    font-weight: 600;
}
/* first data column = property label */
.otg-desc table td:first-child {
    font-weight: 600;
    color: var(--text);
    width: 42%;
    background: var(--surface-alt);
}
.otg-desc table tr:nth-child(even) td:last-child { background: #fff; }
.otg-desc table tr:nth-child(odd)  td:last-child { background: var(--surface-alt); }

/* FAQ (dl) -> card-style Q/A */
.otg-desc dl {
    display: grid;
    gap: 0.6rem;
    margin: 0.5rem 0;
}
.otg-desc dt {
    font-weight: 700;
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--brand-orange);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem;
}
.otg-desc dt::before { content: "❔ "; }
.otg-desc dd {
    margin: 0 0 0.25rem;
    padding: 0 1rem 0.5rem 1.65rem;
    color: var(--text-soft);
}

/* ===========================================================================
   Single-product meta (categories / tags / brand) — Estonian, chip styled.
   Used by the theme's woocommerce/single-product/meta.php override.
   =========================================================================== */
.woocommerce div.product .product_meta {
    display: grid;
    gap: 0.75rem;
}
.loomapesa-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}
.loomapesa-meta-row > .loomapesa-meta-label {
    font-weight: 700;
    color: var(--text);
    margin-right: 0.15rem;
}
.loomapesa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--brand-pink);
    color: var(--brand-magenta) !important;
    border: 1px solid transparent;
    font-weight: 600;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.loomapesa-chip:hover {
    background: #fff;
    border-color: var(--brand-orange);
    color: var(--brand-orange-dark) !important;
}
.loomapesa-chip--tag { background: var(--surface-alt); color: var(--text-soft) !important; }
.loomapesa-chip--brand {
    background: var(--brand-gradient);
    color: #fff !important;
    border: none;
}
.loomapesa-meta-sku {
    font-size: 0.8125rem;
    color: var(--text-mute);
}
.loomapesa-meta-sku strong { color: var(--text-soft); }

/* ============================================================================
   Payment / shipping logo chips (footer trust strip + block-checkout rows)
   ============================================================================ */
.footer-trust {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--border-soft);
    margin-top: 0.5rem;
}
.footer-trust-label {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-mute);
    margin-right: 0.25rem;
}
.pay-logos { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pay-logo {
    height: 30px !important;
    width: auto !important;
    max-width: 84px;
    object-fit: contain;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: #fff;
    flex: 0 0 auto;
}
@media (max-width: 600px) { .pay-logo { height: 32px; } }

/* --- Checkout bank/shipping logos (injected by Loomapesa\Core\Payment_Shipping_Logos).
   Payment: a row of bank chips under the SEPA description. Shipping: the
   smartpost chip after the method label. Works on classic checkout; block
   checkout shows the same logos via the gateway-icon + rate-meta surfaces. --- */
.loomapesa-bank-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.loomapesa-bank-logos img,
img.loomapesa-ship-logo {
    height: 32px; width: auto;
    border: 1px solid var(--border-soft);
    border-radius: 6px; background: #fff;
}
img.loomapesa-ship-logo { margin-left: 8px; vertical-align: middle; }
/* keep WC's own gateway icon tidy if used */
.wc_payment_method img, .wc-block-components-payment-method-label img { max-height: 30px; width: auto; }

/* Payment method title ("Pangaülekanne / SEPA") — left-align like the shipping
   labels (WC block centers it by default). */
.wc-block-components-payment-method-label,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label-group {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-right: auto;
    width: 100%;
}