/* ============================================================
   DESIGN TOKENS — :root custom properties
   Source: Figma design audit (Sailor Tattoo)
   All blocks must consume these tokens. Never hardcode values.
   ============================================================ */

:root {
    --st-header-h: 104px;

    /* -------------------------------------------------------
       1. COLOUR TOKENS
    ------------------------------------------------------- */

    /* Brand */
    --color-brand-navy:          #344857;   /* Primary — headings, logo, UI accents */
    --color-accent-gold:         #e6be5c;   /* Premium highlight */
    --color-accent-gold-dark:    #d29c08;   /* Gold hover state */

    /* Base */
    --color-black:               #000000;   /* Default text, icons */
    --color-white:               #ffffff;   /* Backgrounds, reversed text */

    /* Gray scale */
    --color-gray-100:            #f9f9f9;   /* Page background */
    --color-gray-200:            #eeeeee;   /* Dividers, card backgrounds */
    --color-gray-300:            #e5e5e5;   /* Borders */
    --color-gray-400:            #d7d7d7;   /* Subtle borders */
    --color-gray-500:            #bdbdbd;   /* Disabled / muted */
    --color-gray-600:            #ababab;   /* Placeholder text */
    --color-gray-700:            #909090;   /* Secondary labels */
    --color-gray-800:            #616161;   /* Body text secondary */
    --color-gray-900:            #5b5b5b;   /* Body text primary */

    /* UI text */
    --color-charcoal:            #424242;   /* Dark UI text */
    --color-dark:                #252525;   /* Near-black text */

    /* Utility */
    --color-blue-link:           #2f84f3;   /* Links (rare) */
    --color-input-placeholder:   #9ca3af;   /* Form input placeholder */

    /* Phase 2 / E-commerce colours */
    --color-brand-teal:          #73dccf;   /* CTA buttons, active states, free shipping */
    --color-brand-teal-dark:     #438a83;   /* Teal hover / gradient end */
    --color-success-green:       #2a9d8f;   /* Free shipping label */
    --color-confirmed-green:     #00a42c;   /* Order confirmed badge */
    --color-surface-light:       #f9f9f9;   /* Product card bg (= gray-100) */
    --color-surface-warm:        #f7f7f5;   /* Confirmation rows, alt table rows */
    --color-active-fill:         rgba(37, 37, 37, 0.10); /* Navbar backdrop */
    --color-hero-olive:          #6f8c1a;   /* Hero gradient bottom (olive-green from Figma) */

    /* Gradients (defined as CSS custom props for reuse) */
    --gradient-hero:             linear-gradient(180deg, var(--color-brand-teal) 0%, var(--color-hero-olive) 100%);
    --gradient-hero-section:     linear-gradient(to bottom, var(--color-brand-teal) 0%, var(--color-accent-gold-dark) 100%);
    --gradient-dark-navy:        linear-gradient(135deg, #b1cde4 0%, #031c50 100%);
    --gradient-total-price:      linear-gradient(135deg, var(--color-brand-teal) 0%, var(--color-brand-teal-dark) 100%);
    --gradient-footer-wordmark:  linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.25) 100%);

    /* Semantic aliases — use these in blocks */
    --color-text:                var(--color-black);
    --color-text-secondary:      var(--color-gray-900);
    --color-text-muted:          var(--color-gray-800);
    --color-bg:                  var(--color-white);
    --color-bg-alt:              var(--color-gray-100);
    --color-border:              var(--color-gray-300);
    --color-overlay:             rgba(52, 72, 87, 0.75);  /* navy overlay */

    /* -------------------------------------------------------
       2. TYPOGRAPHY TOKENS
    ------------------------------------------------------- */

    /* Font families */
    --font-display:       "Big Shoulders Display", "Big Shoulders", sans-serif; /* hero headings */
    --font-heading:       "Big Shoulders", "Big Shoulders Display", sans-serif; /* h1–h6 */
    --font-decorative:    "Fondamento", serif;                                  /* logo / accent */
    --font-body:          "Source Sans Pro", "Helvetica Neue", sans-serif;      /* UI, body, nav */
    --font-body-alt:      "Source Sans 3", sans-serif;                          /* small body */
    --font-quote:         "Lora", Georgia, serif;                               /* pull-quotes */
    --font-testimonial:   "Mona Sans", sans-serif;                              /* testimonials */
    --font-review:        "Manrope", sans-serif;                                /* review attribution */
    --font-form:          "Roboto", sans-serif;                                 /* form inputs */
    --font-ui:            "Inter", sans-serif;                                  /* breadcrumbs, pagination */
    --font-dashboard:     "Lexend", sans-serif;                                 /* dashboard inputs, labels */

    /* Font sizes — px values matching Figma; use as-is or wrap in clamp() per block */
    --font-size-hero-xl:  200px;   /* Hero display "WEAR THE VOYAGE…" */
    --font-size-h1:       120px;
    --font-size-h2:       100px;
    --font-size-h2-alt:    80px;
    --font-size-h3:        60px;
    --font-size-h3-alt:    56px;
    --font-size-h4:        50px;
    --font-size-h5:        34px;
    --font-size-h6:        32px;
    --font-size-decorative-hero: 200px;  /* Fondamento hero accent */
    --font-size-decorative-section: 160px; /* Fondamento section title */
    --font-size-decorative-logo:  40px;  /* Fondamento logo wordmark */
    --font-size-stat:      54px;   /* KPI / counter */
    --font-size-body-lg:   20px;
    --font-size-body:      18px;
    --font-size-nav:       16px;
    --font-size-ui-label:  24px;
    --font-size-cta:       18px;
    --font-size-price:     30px;
    --font-size-card-title: 26px;
    --font-size-body-sm:   16px;
    --font-size-input:     16px;
    --font-size-caption:   12px;
    --font-size-footer-label: 11.8px;
    --font-size-fine-print: 11.25px;

    /* Font weights */
    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;
    --font-weight-black:     900;

    /* Line heights */
    --line-height-hero:    0.5;    /* 100px / 200px */
    --line-height-tight:   1;      /* h1–h3 */
    --line-height-snug:    1.125;  /* h2-alt */
    --line-height-normal:  1.4;    /* body */
    --line-height-relaxed: 1.5;    /* body-lg */
    --line-height-loose:   1.8;

    /* Letter spacing */
    --letter-spacing-tight:   -0.02em;
    --letter-spacing-normal:   0;
    --letter-spacing-wide:     0.05em;
    --letter-spacing-wider:    0.1em;
    --letter-spacing-widest:   0.2em;

    /* -------------------------------------------------------
       3. SPACING TOKENS (8-pt scale)
    ------------------------------------------------------- */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* -------------------------------------------------------
       4. LAYOUT TOKENS
    ------------------------------------------------------- */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1440px;
    --container-max: 1600px;

    --gutter:    var(--space-6);
    --gutter-lg: var(--space-12);

    /* -------------------------------------------------------
       5. BORDER & RADIUS TOKENS
    ------------------------------------------------------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    --border-width:       1px;
    --border-width-thick: 2px;

    /* -------------------------------------------------------
       6. SHADOW TOKENS
    ------------------------------------------------------- */
    --shadow-sm:  0 1px 3px  rgba(0, 0, 0, 0.12);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.16);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.22);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.28);

    /* -------------------------------------------------------
       7. TRANSITION TOKENS
    ------------------------------------------------------- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* -------------------------------------------------------
       8. Z-INDEX TOKENS
    ------------------------------------------------------- */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}

/* ============================================================
   GOOGLE FONTS IMPORT
   Loaded here so editor also picks them up.
   (wp_enqueue_style handles front-end; this covers block editor)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800&family=Big+Shoulders:wght@500;600;700;800&family=Fondamento&family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;600;700&family=Lora:ital@1&family=Mona+Sans:wght@500&family=Manrope:wght@400;700&family=Roboto:wght@400&family=Inter:wght@400;500;600;700&family=Lexend:wght@300;400;600&display=swap');

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Ensure [hidden] always wins over display:flex/grid/block rules */
[hidden] {
    display: none !important;
}

html,
body,
#page,
#content,
#primary,
#main {
    background-color: #ffffff !important;
}

body {
    overflow-x: hidden;
    position: relative;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-text);
    line-height: var(--line-height-normal);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-brand-navy);
    margin: 0;
}

a {
    color: var(--color-brand-navy);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-gold-dark);
}

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

p {
    margin: 0;
}

/* ============================================================
   SVG ICON SYSTEM — .st-icon base + modifiers
   All icons via assets/icons/icons.svg sprite.
   Size via --st-icon-size; stroke via --st-icon-sw.
   ============================================================ */

.st-icon {
    display: inline-block;
    width: var(--st-icon-size, 1em);
    height: var(--st-icon-size, 1em);
    flex-shrink: 0;
    stroke-width: var(--st-icon-sw, 2);
    vertical-align: middle;
    fill: inherit;
    stroke: inherit;
}

/* ============================================================
   UTILITY CLASSES — shared across all BEM blocks
   ============================================================ */

/* Container */
.st-container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.st-container--wide {
    max-width: var(--container-2xl);
}

.st-container--full {
    max-width: 100%;
    padding-inline: 0;
}

/* Section spacing */
.st-section {
    padding-block: var(--space-20);
}

.st-section--sm {
    padding-block: var(--space-12);
}

.st-section--lg {
    padding-block: var(--space-32);
}

/* Buttons */
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    font-family: var(--font-heading);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: var(--border-width-thick) solid transparent;
    cursor: pointer;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.st-btn--primary {
    background-color: var(--color-brand-navy);
    color: var(--color-white);
    border-color: var(--color-brand-navy);
}

.st-btn--primary:hover {
    background-color: var(--color-accent-gold-dark);
    border-color: var(--color-accent-gold-dark);
    color: var(--color-white);
}

.st-btn--gold {
    background-color: var(--color-accent-gold);
    color: var(--color-black);
    border-color: var(--color-accent-gold);
}

.st-btn--gold:hover {
    background-color: var(--color-accent-gold-dark);
    border-color: var(--color-accent-gold-dark);
    color: var(--color-white);
}

.st-btn--outline {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.st-btn--outline:hover {
    background-color: var(--color-white);
    color: var(--color-brand-navy);
}

.st-btn--outline-dark {
    background-color: transparent;
    color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
}

.st-btn--outline-dark:hover {
    background-color: var(--color-brand-navy);
    color: var(--color-white);
}

/* ============================================================
   WOOCOMMERCE — global layout wrapper
   ============================================================ */
.st-wc-main {
    width: 100%;
}

/* WC notices */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
    border-top: 3px solid var(--color-brand-navy);
    background: var(--color-gray-100);
    color: var(--color-text);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
    list-style: none;
}

.woocommerce-notices-wrapper .woocommerce-error {
    border-color: #e53e3e;
}

.woocommerce-notices-wrapper .woocommerce-message {
    border-color: var(--color-success-green);
}

/* ============================================================
   WOOCOMMERCE — shop archive (product grid)
   ============================================================ */
.st-shop {
    padding-block: var(--space-20);
}

.st-shop__inner {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Toolbar: result count + ordering */
.woocommerce-result-count {
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
    color: var(--color-gray-700);
    margin: 0;
}

.woocommerce-ordering select {
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-white);
    outline: none;
    cursor: pointer;
}

/* Product grid — WC outputs ul.products */
ul.products {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: var(--space-6);
}

ul.products.columns-2 { grid-template-columns: repeat( 2, 1fr ); }
ul.products.columns-4 { grid-template-columns: repeat( 4, 1fr ); }

/* Product card */
ul.products li.product {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

ul.products li.product:hover {
    box-shadow: var(--shadow-lg);
}

/* Product image area */
ul.products li.product .woocommerce-loop-product__link {
    display: block;
    text-decoration: none;
}

ul.products li.product img {
    width: 100%;
    aspect-ratio: 427 / 500;
    object-fit: cover;
    background-color: var(--color-surface-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: transform var(--transition-slow);
}

ul.products li.product:hover img {
    transform: scale(1.03);
}

/* Product info */
ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: 1.2;
    padding: var(--space-4) var(--space-4) var(--space-2);
    margin: 0;
}

/* Brand tag */
ul.products li.product .st-product__brand {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    padding: 0 var(--space-4);
}

/* Price */
ul.products li.product .price {
    font-family: var(--font-heading);
    font-size: var(--font-size-price);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    padding: var(--space-2) var(--space-4);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

ul.products li.product .price del {
    font-size: var(--font-size-body);
    color: var(--color-gray-500);
    text-decoration: line-through;
}

ul.products li.product .price ins {
    text-decoration: none;
    color: var(--color-black);
}

/* Sale badge */
ul.products li.product .onsale {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    background-color: var(--color-accent-gold);
    color: var(--color-black);
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-raised);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Add to cart button */
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
    display: block;
    margin: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-brand-navy);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--transition-base);
    margin-top: auto;
}

ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
    background-color: var(--color-accent-gold-dark);
    color: var(--color-white);
}

/* ============================================================
   WOOCOMMERCE — single product page
   ============================================================ */
.woocommerce div.product {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding: var(--space-16) var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

/* Gallery */
.woocommerce div.product div.images {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.woocommerce div.product div.images img {
    width: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-light);
}

/* Summary */
.woocommerce div.product div.summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.woocommerce div.product .product_title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2-alt);
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1;
    margin: 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--font-heading);
    font-size: var(--font-size-price);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

.woocommerce div.product p.price del {
    color: var(--color-gray-500);
    font-size: var(--font-size-body);
}

/* Add to cart form */
.woocommerce div.product form.cart .qty {
    font-family: var(--font-heading);
    font-size: var(--font-size-price);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-navy);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    width: 80px;
    text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border: none;
    border-radius: var(--radius-full);
    padding: var(--space-4) var(--space-12);
    cursor: pointer;
    transition: background-color var(--transition-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--gradient-hero-section);
    background-color: transparent;
    color: var(--color-white);
}

/* Variation selects */
.woocommerce div.product .variations select {
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    background-color: var(--color-white);
    width: 100%;
    margin-bottom: var(--space-4);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    border-top: var(--border-width) solid var(--color-border);
    padding-top: var(--space-8);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: flex;
    gap: 0;
    border-bottom: var(--border-width) solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-heading);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    text-decoration: none;
    display: block;
    padding: var(--space-3) var(--space-8);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-black);
    border-bottom-color: var(--color-black);
}

.woocommerce div.product .woocommerce-tabs .panel {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-gray-900);
    line-height: var(--line-height-normal);
    max-width: 740px;
}

/* ============================================================
   WOOCOMMERCE — cart page
   ============================================================ */
.woocommerce-cart .woocommerce {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding: var(--space-16) var(--gutter);
}

.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.page-title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    margin-bottom: var(--space-8);
}

/* Cart table */
table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
}

table.shop_table th {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
    text-align: left;
}

table.shop_table td {
    padding: var(--space-5) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-gray-200);
    vertical-align: middle;
    color: var(--color-text);
}

table.shop_table .product-thumbnail img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-light);
}

table.shop_table .product-name a {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    text-decoration: none;
    transition: color var(--transition-fast);
}

table.shop_table .product-name a:hover {
    color: var(--color-brand-navy);
}

table.shop_table .product-price,
table.shop_table .product-subtotal {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-black);
}

table.shop_table .product-quantity input.qty {
    font-family: var(--font-ui);
    font-size: var(--font-size-body-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    width: 64px;
    text-align: center;
    color: var(--color-brand-navy);
}

.cart-subtotals,
.woocommerce-cart-form__cart-item .remove {
    color: var(--color-gray-500);
    font-size: 20px;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.woocommerce-cart-form__cart-item .remove:hover {
    color: var(--color-black);
}

/* Cart totals box */
.cart_totals {
    max-width: 380px;
    margin-left: auto;
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-border);
    border-radius: 24px;
    padding: var(--space-8);
}

.cart_totals h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    margin-bottom: var(--space-6);
}

.cart_totals table th,
.cart_totals table td {
    font-family: var(--font-body-alt);
    font-size: 15px;
    color: var(--color-gray-800);
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-gray-200);
}

.cart_totals table .order-total th,
.cart_totals table .order-total td {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-brand-navy);
    border-bottom: none;
    padding-top: var(--space-5);
}

.cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block;
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    margin-top: var(--space-6);
    transition: background-color var(--transition-base);
}

.cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--color-brand-navy);
}

/* Free shipping label */
.woocommerce-shipping-destination,
.free-shipping {
    color: var(--color-success-green) !important;
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   WOOCOMMERCE — checkout page
   ============================================================ */
.woocommerce-checkout .woocommerce {
    max-width: 1180px;
    margin-inline: auto;
    padding: var(--space-16) var(--gutter);
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 128px;
    align-items: start;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
    /* All flow within left column via WC default flow */
}

/* Form section cards */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #payment {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* Section headings */
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-navy);
    margin-bottom: var(--space-6);
}

/* Form fields */
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea {
    font-family: var(--font-form);
    font-size: var(--font-size-input);
    color: var(--color-text);
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    width: 100%;
    transition: border-color var(--transition-fast);
    height: 49px;
}

.woocommerce-checkout .woocommerce-input-wrapper input::placeholder {
    color: var(--color-input-placeholder);
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper select:focus {
    outline: none;
    border-color: var(--color-brand-teal);
}

/* Field labels */
.woocommerce-checkout .form-row label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    display: block;
    margin-bottom: var(--space-2);
}

/* Place order button */
#place_order {
    width: 100%;
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border: none;
    border-radius: var(--radius-full);
    padding: var(--space-5) var(--space-8);
    cursor: pointer;
    transition: background-color var(--transition-base);
    margin-top: var(--space-4);
}

#place_order:hover {
    background-color: var(--color-brand-navy);
}

/* Order review sidebar */
#order_review {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 100px;
}

#order_review h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    margin-bottom: var(--space-6);
}

#order_review table.shop_table th,
#order_review table.shop_table td {
    font-size: var(--font-size-body-sm);
    color: var(--color-gray-800);
    padding: var(--space-3) var(--space-2);
}

#order_review table.shop_table tfoot .order-total td,
#order_review table.shop_table tfoot .order-total th {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-brand-navy);
}

/* ============================================================
   WOOCOMMERCE — My Account
   ============================================================ */
.woocommerce-account .woocommerce {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding: var(--space-16) var(--gutter);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-12);
    align-items: start;
}

/* Sidebar nav */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    font-family: var(--font-body-alt);
    font-size: 15px;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-800);
    text-decoration: none;
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--color-brand-navy);
    color: var(--color-white);
}

/* Content area */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-navy);
    margin-bottom: var(--space-6);
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: 52px;
}

.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content table {
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
    color: var(--color-gray-800);
}

/* Order status badges */
.woocommerce-order-status {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    padding: 3px var(--space-3);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

mark.order-status.status-processing,
mark.order-status.status-on-hold {
    background-color: #e8f4fd;
    color: var(--color-brand-navy);
}

mark.order-status.status-completed {
    background-color: #e8f7ed;
    color: var(--color-confirmed-green);
}

mark.order-status.status-cancelled,
mark.order-status.status-refunded {
    background-color: #fef2f2;
    color: #e53e3e;
}

/* Hide page title on My Account page */
.woocommerce-account .entry-title,
.woocommerce-account h1.page-title {
    display: none !important;
}

/* Fix header overlap — push content below fixed header */
.woocommerce-account:not(.logged-in) .site-main,
.woocommerce-account:not(.logged-in) #primary {
    padding-top: 100px !important;
}

/* Login / Lost password / Register pages — full white page, no padding */
.woocommerce-account:not(.logged-in) .site-main,
.woocommerce-account:not(.logged-in) #primary,
.woocommerce-account:not(.logged-in) #content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #fff;
    position: relative;
    z-index: 5;
    min-height: 100vh;
}

/* Hide orphaned notices/text outside st-login wrapper */
.woocommerce-account:not(.logged-in) .site-main > .woocommerce-notices-wrapper:empty,
.woocommerce-account:not(.logged-in) .site-main > p:not([class]),
.woocommerce-account:not(.logged-in) .site-main > .woocommerce > p:not([class]) {
    display: none;
}

/* Ensure st-login always covers full page white */
.st-login {
    position: relative;
    z-index: 2;
}

/* Login / Register forms */
.woocommerce-account:not(.logged-in) .woocommerce {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.woocommerce form.login,
.woocommerce form.register {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: var(--space-10) var(--space-12);
    box-shadow: var(--shadow-md);
    margin-top: 0 !important;
}

.woocommerce form.login h2,
.woocommerce form.register h2 {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    margin-bottom: var(--space-6);
}

/* Reduce gap between error/notice and form */
.woocommerce-account .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: var(--space-4) !important;
}

/* Password toggle eye icon */
.woocommerce form .show-password-input {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--color-gray-600);
}
.woocommerce form .show-password-input::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ababab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
.woocommerce form .show-password-input.display-password::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23344857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.woocommerce form .form-row.password-field {
    position: relative;
}
.woocommerce form .form-row.password-field input[type="password"],
.woocommerce form .form-row.password-field input[type="text"] {
    padding-right: 46px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="tel"] {
    font-family: var(--font-dashboard);
    font-size: var(--font-size-input);
    font-weight: 300;
    color: var(--color-text);
    background-color: var(--color-surface-light);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    width: 100%;
    height: 49px;
    transition: border-color var(--transition-fast);
}

.woocommerce form .form-row input.input-text:focus {
    outline: none;
    border-color: var(--color-brand-teal);
}

.woocommerce form .form-row input.input-text::placeholder {
    color: var(--color-input-placeholder);
}

/* ============================================================
   WOOCOMMERCE — order confirmation (thank you page)
   ============================================================ */
.woocommerce-order {
    max-width: 600px;
    margin-inline: auto;
    padding: var(--space-16) var(--gutter);
    text-align: center;
}

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
    text-align: left;
}

.woocommerce-thankyou-order-received {
    font-family: var(--font-decorative);
    font-size: 72px;
    font-weight: var(--font-weight-regular);
    color: var(--color-brand-navy);
    line-height: 1.1;
    margin-bottom: var(--space-6);
}

.woocommerce-order p {
    font-family: var(--font-body-alt);
    font-size: var(--font-size-body);
    color: var(--color-gray-800);
    line-height: var(--line-height-relaxed);
}

.woocommerce-order ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    padding: var(--space-6);
    background-color: var(--color-surface-warm);
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
}

.woocommerce-order ul.woocommerce-order-overview li {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-gray-600);
}

.woocommerce-order ul.woocommerce-order-overview li strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-brand-navy);
}

/* ============================================================
   WOOCOMMERCE — responsive
   ============================================================ */
@media ( max-width: 1024px ) {
    ul.products {
        grid-template-columns: repeat( 2, 1fr );
    }

    .woocommerce div.product {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .woocommerce-checkout .woocommerce {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

@media ( max-width: 768px ) {
    ul.products {
        grid-template-columns: repeat( 2, 1fr );
        gap: var(--space-4);
    }

    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        display: flex;
        overflow-x: auto;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-2);
    }
}

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

/* ============================================================
   BLOCK: st-hero
   ============================================================ */

/* Break out of GP container — full viewport, starts behind fixed header */
.st-hero {
    position: relative;
    min-height: 100vh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    overflow: hidden;
    background: var(--gradient-hero-section);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Pull GP's content area flush — no extra space top or bottom */
.site-main,
.content-area,
#primary,
#content,
.grid-container,
.entry-content > *:first-child,
.wp-block-group:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.site-main,
.content-area,
#primary,
#content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Dark gradient at bottom for text legibility */
.st-hero__gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0)    40%,
        rgba(0,0,0,0.62) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Left / right wave images — blended into gradient */
.st-hero__wave {
    position: absolute;
    z-index: 2;
    width: 22%;
    max-width: 340px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: multiply;
    opacity: 0.75;
}

.st-hero__wave--left  {
    left: 0;
    top: 50%;
    transform: translateY(-15%);
}

.st-hero__wave--right {
    right: 0;
    top: 50%;
    transform: translateY(-15%) scaleX(-1);
}

/* Watermark — Fondamento 170px, upper-center */
.st-hero__watermark {
    position: absolute;
    top: 22%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-family: var(--font-decorative);
    font-size: 170px;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.17);
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: visible;
    pointer-events: none;
    user-select: none;
    z-index: 3;
    margin: 0;
    padding: 0;
}

/* Model / product cutout — centered, anchored to bottom */
.st-hero__model {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    height: 90%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.st-hero__model-img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

/* Bottom content bar — 2 columns */
.st-hero__bottom {
    position: relative;
    z-index: 5;
    width: 100%;
    padding-bottom: var(--space-16);
    padding-inline: var(--space-12);
}

.st-hero__bottom-inner {
    max-width: var(--container-xl);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
    gap: var(--space-8);
}

/* Left col */
.st-hero__col-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.st-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    letter-spacing: var(--letter-spacing-wide);
    margin: 0;
}

.st-hero__eyebrow-dash { flex-shrink: 0; line-height: 1; }

/* Heading — Big Shoulders Display, Bold, 36px (Figma exact) */
.st-hero__heading {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.02;
    margin: 0;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Right col — right-aligned to edge */
.st-hero__col-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: var(--space-5);
}

.st-hero__description {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    line-height: var(--line-height-relaxed);
    max-width: 400px;
    margin: 0;
}

.st-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-5);
    flex-wrap: wrap;
}

/* Primary CTA — white pill */
.st-hero__cta-primary,
.st-collection__view-all { border-radius: 100px !important; }

.st-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-white);
    color: var(--color-dark);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    padding: 6px 6px 6px var(--space-6);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: opacity var(--transition-base);
    white-space: nowrap;
}

.st-hero__cta-primary:hover { opacity: 0.88; color: var(--color-dark); }

.st-hero__cta-arrow {
    width: 40px;
    height: 40px;
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Secondary CTA */
.st-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    opacity: 0.90;
    transition: opacity var(--transition-base);
    white-space: nowrap;
}

.st-hero__cta-secondary:hover { opacity: 1; color: var(--color-white); }

/* Responsive */
@media (max-width: 1024px) {
    .st-hero__model     { height: 78%; }
    .st-hero__heading   { font-size: 42px; }
    .st-hero__watermark { font-size: 140px; }
    .st-hero__wave      { width: 18%; }
}

@media (max-width: 768px) {
    /* Hero becomes normal flow column so model can sit below content */
    .st-hero {
        justify-content: flex-start;
        min-height: 110svh;
    }

    /* Content block — order 1, margin-top clears fixed header */
    .st-hero__bottom {
        order: 1;
        padding-inline: 20px;
        padding-bottom: 24px;
        margin-top: 110px;
        position: relative;
        z-index: 5;
    }
    .st-hero__bottom-inner {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Model — order 2 (below content), pulled out of absolute */
    .st-hero__model {
        position: relative;
        order: 2;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        height: auto;
        flex: 1;
        min-height: 300px;
        opacity: 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
    }
    .st-hero__model-img {
        width: auto;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: bottom center;
    }

    /* Text */
    .st-hero__watermark   { font-size: 37px; top: calc(var(--st-header-h, 104px) + 16px); transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden !important; width: 100%; max-width: 100vw; text-align: center; }
    .st-hero__heading     { font-size: 32px; line-height: 1.02; width: 100%; }
    .st-hero__eyebrow     { font-size: 13px; }
    .st-hero__description { font-size: 15px; max-width: 100%; line-height: 1.55; }
    .st-hero__col-right   { align-items: flex-start; text-align: left; }
    .st-hero__col-left    { margin-top: 90px; }
    .st-hero__wave        { width: 80%; opacity: 0.6; top: auto; bottom: 0; transform: none; }
    .st-hero__wave--left  { left: -20%; }
    .st-hero__wave--right { right: -20%; transform: scaleX(-1); }

    /* CTAs — both on same row, compact */
    .st-hero__actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 12px;
    }
    .st-hero__cta-primary {
        white-space: nowrap;
        font-size: 12px;
        padding: 4px 4px 4px 12px;
        gap: 6px;
        flex-shrink: 1;
        min-width: 0;
    }
    .st-hero__cta-arrow {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
    .st-hero__cta-secondary {
        white-space: nowrap;
        font-size: 12px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .st-hero__watermark   { font-size: 37px !important; top: calc(var(--st-header-h, 104px) + 16px) !important; transform: none !important; letter-spacing: 0; overflow: hidden !important; }
    .st-hero__col-left    { margin-top: 80px; }
    .st-hero__heading     { font-size: 28px; }
    .st-hero__model       { min-height: 260px; }
    .st-hero__bottom      { padding-inline: 16px; }
    .st-hero__wave        { width: 80%; bottom: 0; }
    .st-hero__wave--left  { left: -20%; }
    .st-hero__wave--right { right: -20%; }
    .st-hero__cta-secondary { font-size: 13px; }
}

/* ============================================================
   BLOCK: st-page-hero
   ============================================================ */
.st-page-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--space-16);
    background-size: cover;
    background-position: center;
    background-color: var(--color-brand-navy);
    overflow: hidden;
}

.st-page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #133d8b 0%, #142f4a 100%);
    opacity: 0.85;
    z-index: var(--z-base);
}

.st-page-hero__content {
    position: relative;
    z-index: var(--z-raised);
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--gutter);
    width: 100%;
}

.st-page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.st-page-hero__breadcrumb-link,
.st-page-hero__breadcrumb-sep,
.st-page-hero__breadcrumb-current {
    font-family: var(--font-ui);
    font-size: var(--font-size-nav);
    color: var(--color-white);
}

.st-page-hero__breadcrumb-link {
    opacity: 0.75;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.st-page-hero__breadcrumb-link:hover { opacity: 1; color: var(--color-white); }

.st-page-hero__title {
    font-family: var(--font-decorative);
    font-size: var(--font-size-decorative-section);
    font-weight: var(--font-weight-regular);
    color: var(--color-white);
    line-height: 1;
    margin: 0;
}

@media (max-width: 768px) {
    .st-page-hero { min-height: 360px; }
    .st-page-hero__title { font-size: clamp(3rem, 12vw, 80px); }
}

/* ============================================================
   BLOCK: st-articles
   ============================================================ */
.st-articles__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.st-articles__subheading {
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin: 0 0 var(--space-2);
}

.st-articles__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    line-height: var(--line-height-tight);
    margin: 0;
}

.st-articles__view-all {
    font-family: var(--font-body);
    font-size: var(--font-size-ui-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-navy);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.st-articles__view-all:hover { color: var(--color-accent-gold-dark); gap: var(--space-3); }

.st-articles__track-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
}

.st-articles__track-wrap::-webkit-scrollbar { display: none; }

.st-articles__track {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-4);
    display: flex;
    gap: var(--space-10);
    width: max-content;
}

.st-articles__card {
    width: 580px;
    flex-shrink: 0;
}

.st-articles__card-link { display: block; text-decoration: none; }

.st-articles__card-thumb {
    position: relative;
    width: 100%;
    height: 340px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-light);
    margin-bottom: var(--space-5);
}

.st-articles__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.st-articles__card-link:hover .st-articles__card-img { transform: scale(1.04); }

.st-articles__card-cat {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    font-family: var(--font-body-alt);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background-color: var(--color-brand-navy);
    padding: 3px var(--space-3);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.st-articles__card-body { display: flex; flex-direction: column; gap: var(--space-2); }

.st-articles__card-date {
    font-family: var(--font-ui);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-500);
    margin: 0;
}

.st-articles__card-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    line-height: 1.2;
    margin: 0;
    transition: color var(--transition-fast);
}

.st-articles__card-link:hover .st-articles__card-title { color: var(--color-brand-navy); }

.st-articles__card-excerpt {
    font-family: var(--font-body-alt);
    font-size: var(--font-size-body-sm);
    color: var(--color-gray-800);
    line-height: var(--line-height-normal);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-articles__card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.st-articles__card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-brand-navy);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.st-articles__card-author {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-navy);
}

.st-articles__card-read-time {
    font-family: var(--font-ui);
    font-size: var(--font-size-body-sm);
    color: var(--color-gray-500);
    margin-left: auto;
}

/* ============================================================
   BLOCK: st-split-section
   ============================================================ */
.st-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 525px;
}

.st-split--image-left { direction: ltr; }
.st-split--image-right .st-split__image-panel { order: 2; }
.st-split--image-right .st-split__text-panel  { order: 1; }

.st-split__image-panel { position: relative; overflow: hidden; min-height: 525px; }
.st-split__img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.st-split__text-panel {
    display: flex;
    align-items: center;
    padding: var(--space-16) var(--space-16);
}

.st-split--bg-navy  .st-split__text-panel { background-color: var(--color-brand-navy); }
.st-split--bg-gray  .st-split__text-panel { background-color: var(--color-gray-100); }
.st-split--bg-white .st-split__text-panel { background-color: var(--color-white); }

.st-split__text-inner { max-width: 480px; display: flex; flex-direction: column; gap: var(--space-6); }

.st-split__label {
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-gold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin: 0;
}

.st-split--bg-navy .st-split__label { color: var(--color-accent-gold); }

.st-split__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2-alt);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-navy);
    line-height: var(--line-height-snug);
    margin: 0;
}

.st-split--bg-navy .st-split__heading { color: var(--color-white); }

.st-split__body {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    color: var(--color-gray-900);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.st-split--bg-navy .st-split__body { color: rgba(255,255,255,0.8); }

@media (max-width: 768px) {
    .st-split { grid-template-columns: 1fr; }
    .st-split--image-right .st-split__image-panel,
    .st-split--image-right .st-split__text-panel { order: unset; }
    .st-split__image-panel { min-height: 300px; }
    .st-split__text-panel { padding: var(--space-10) var(--space-6); }
}

/* ============================================================
   BLOCK: st-stats
   ============================================================ */
.st-stats {
    background-color: var(--color-brand-navy);
    padding-block: var(--space-12);
}

.st-stats__inner {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.st-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.st-stats__number {
    font-family: var(--font-heading);
    font-size: var(--font-size-stat);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    line-height: 1;
}

.st-stats__label {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: rgba(255,255,255,0.7);
    line-height: 1.3;
    max-width: 180px;
}

/* ============================================================
   BLOCK: st-core-values
   ============================================================ */
.st-core-values__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-navy);
    margin-bottom: var(--space-12);
    line-height: var(--line-height-tight);
}

.st-core-values__list { display: flex; flex-direction: column; }

.st-core-values__row {
    display: grid;
    grid-template-columns: 280px 80px 1fr;
    align-items: center;
    gap: var(--space-8);
    padding-block: var(--space-8);
    border-top: var(--border-width) solid var(--color-gray-200);
    min-height: 160px;
}

.st-core-values__row:last-child { border-bottom: var(--border-width) solid var(--color-gray-200); }

.st-core-values__icon-wrap { width: 280px; height: 160px; overflow: hidden; border-radius: var(--radius-md); }
.st-core-values__icon { width: 100%; height: 100%; object-fit: cover; }

.st-core-values__num {
    font-family: var(--font-display);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-gray-200);
    line-height: 1;
    text-align: center;
}

.st-core-values__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-navy);
    margin: 0 0 var(--space-3);
    line-height: var(--line-height-tight);
}

.st-core-values__body {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    color: var(--color-gray-900);
    line-height: var(--line-height-relaxed);
    margin: 0;
    max-width: 600px;
}

@media (max-width: 768px) {
    .st-core-values__row { grid-template-columns: 1fr; gap: var(--space-4); }
    .st-core-values__icon-wrap { width: 100%; height: 180px; }
    .st-core-values__num { display: block; }
}

/* ============================================================
   BLOCK: st-reviews
   ============================================================ */
.st-reviews__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2-alt);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-navy);
    margin-bottom: var(--space-10);
    line-height: var(--line-height-tight);
}

.st-reviews__track-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
}

.st-reviews__track-wrap::-webkit-scrollbar { display: none; }

.st-reviews__track {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-4);
    display: flex;
    gap: var(--space-6);
    width: max-content;
}

.st-reviews__card {
    width: 442px;
    min-height: 224px;
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex-shrink: 0;
}

.st-reviews__card-stars {
    font-family: var(--font-review);
    font-size: 13px;
    color: var(--color-accent-gold);
    letter-spacing: 2px;
}

.st-reviews__card-quote { margin: 0; }

.st-reviews__card-text {
    font-family: var(--font-testimonial);
    font-size: 21px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    line-height: 1.4;
    margin: 0 0 var(--space-4);
}

.st-reviews__card-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: auto;
}

.st-reviews__card-author {
    font-family: var(--font-review);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-style: normal;
}

.st-reviews__card-role {
    font-family: var(--font-review);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-700);
}

.st-reviews__card-date {
    font-family: var(--font-review);
    font-size: 11px;
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ============================================================
   BLOCK: st-faq-accordion
   ============================================================ */
.st-faq-accordion {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 80px 24px 100px;
}

.st-faq-accordion__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.st-faq-accordion__heading {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.6vw, 56px);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-brand-navy);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 56px;
    line-height: 1.05;
}

.st-faq-accordion__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Each item — closed state: just a bottom border */
.st-faq-accordion__item {
    border-bottom: 1px solid var(--color-gray-200);
}

/* Open state: card bg, rounded, no border */
.st-faq-accordion__item.is-open {
    background: #f4f5f5;
    border-radius: 12px;
    border-bottom: none;
    margin-bottom: 2px;
    padding: 4px 20px 0;
}

/* Keep a visual gap after open item before next border */
.st-faq-accordion__item.is-open + .st-faq-accordion__item {
    border-top: 1px solid var(--color-gray-200);
}

.st-faq-accordion__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.st-faq-accordion__toggle:hover,
.st-faq-accordion__toggle:focus,
.st-faq-accordion__toggle:active { background: transparent; outline: none; box-shadow: none; }

.st-faq-accordion__question {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-brand-navy);
    line-height: 1.35;
    pointer-events: none;
}
.st-faq-accordion__toggle:hover .st-faq-accordion__question,
.st-faq-accordion__toggle:focus .st-faq-accordion__question,
.st-faq-accordion__toggle:active .st-faq-accordion__question { color: var(--color-brand-navy); }

/* Circle icon button */
.st-faq-accordion__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-300);
    color: var(--color-gray-400);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

/* Open: solid gradient fill, white icon */
.st-faq-accordion__item.is-open .st-faq-accordion__icon {
    background: linear-gradient(135deg, #73dccf 0%, #d29c08 100%);
    border-color: transparent;
    color: #ffffff;
}

.st-faq-accordion__icon-plus  { display: block; }
.st-faq-accordion__icon-minus { display: none; }
.st-faq-accordion__item.is-open .st-faq-accordion__icon-plus  { display: none; }
.st-faq-accordion__item.is-open .st-faq-accordion__icon-minus { display: block; }

.st-faq-accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding-bottom 0.35s ease;
    padding-bottom: 0;
}
.st-faq-accordion__item.is-open .st-faq-accordion__panel {
    max-height: 600px;
    padding-bottom: 20px;
}

.st-faq-accordion__answer {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-gray-700);
    line-height: 1.7;
    margin: 0 0 18px;
    max-width: 860px;
}

/* Gradient decorative line at bottom of open panel */
.st-faq-accordion__gradient-line {
    display: block;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--color-brand-teal) 0%, var(--color-accent-gold) 100%);
    border-radius: 2px;
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .st-faq-accordion {
        padding: 56px 20px 72px;
    }
    .st-faq-accordion__heading {
        margin-bottom: 40px;
    }
    .st-faq-accordion__question {
        font-size: 16px;
    }
    .st-faq-accordion__icon {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {
    .st-faq-accordion__toggle {
        padding: 18px 0;
    }
    .st-faq-accordion__question {
        font-size: 15px;
    }
}

/* ============================================================
   BLOCK: st-product-collection
   ============================================================ */
/* Centered text header */
.st-collection__header {
    text-align: center;
    max-width: 860px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
}

.st-collection__heading {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    line-height: var(--line-height-tight);
    margin: 0 0 12px;
}

.st-collection__description {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--color-gray-800);
    line-height: 1.6;
    margin: 0;
    max-width: 860px;
}

/* Grid wrapper */
.st-collection__grid-wrap {
    position: relative;
}

/* Staggered 3-col grid: col-1 & col-3 top, col-2 offset down */
.st-collection__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: start;
}

/* Middle card pushed down to create stagger */
.st-collection__card:nth-child(3n+2) {
    margin-top: 120px;
}

/* See All — pill, bottom-right */
.st-collection__empty-notice {
    text-align: center;
    color: var(--color-gray-400);
    padding: var(--space-8) 0;
    margin: 0;
}

.st-collection__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-8);
}

.st-collection__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    padding: 8px 8px 8px 20px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.st-collection__view-all:hover { opacity: 0.82; color: var(--color-white); }

.st-collection__view-all-arrow {
    width: 32px;
    height: 32px;
    background: var(--color-white);
    color: var(--color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.st-collection__card { position: relative; display: flex; flex-direction: column; }

.st-collection__card-link { display: block; text-decoration: none; }

.st-collection__card-thumb {
    position: relative;
    aspect-ratio: 427 / 500;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f9f9f9;
    margin-bottom: var(--space-4);
}

.st-collection__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.st-collection__card-link:hover .st-collection__card-img { transform: scale(1.04); }

.st-collection__card-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background-color: var(--color-accent-gold);
    color: var(--color-black);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.st-collection__card-info { padding: var(--space-3) 0 0; }

.st-collection__card-brand {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    margin: 0 0 var(--space-1);
}

.st-collection__card-name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1.2;
    margin: 0 0 var(--space-2);
    transition: color var(--transition-fast);
}

.st-collection__card-link:hover .st-collection__card-name { color: var(--color-brand-navy); }

.st-collection__card-price {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    margin: var(--space-1) 0 0;
    line-height: 1;
}

/* Sale price — normal color */
.st-collection__card-price-sale {
    color: var(--color-black);
    font-weight: var(--font-weight-bold);
}

/* Regular price — gray strikethrough */
.st-collection__card-price-reg {
    color: var(--color-gray-600);
    font-weight: var(--font-weight-regular);
    text-decoration: line-through;
    font-size: 16px;
}

.st-collection__card-atc {
    display: none;
    position: absolute;
    bottom: var(--space-16);
    left: var(--space-3);
    right: var(--space-3);
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    padding: var(--space-3) var(--space-4);
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.st-collection__card:hover .st-collection__card-atc { display: block; }
.st-collection__card-atc:hover { background-color: var(--color-brand-navy); color: var(--color-white); }

@media (max-width: 1024px) {
    .st-collection__grid { grid-template-columns: repeat(2, 1fr); }
    .st-collection__heading { font-size: 38px; }
    .st-collection__card:nth-child(3n+2) { margin-top: 60px; }
}

@media (max-width: 768px) {
    /* Header — centered */
    .st-collection__heading     { font-size: 28px; line-height: 1.1; text-align: center; }
    .st-collection__description { font-size: 15px; text-align: center; }
    .st-collection__header      { max-width: 100%; text-align: center; margin-bottom: 20px; }

    /* Grid → horizontal scroll slider */
    .st-collection__grid-wrap   { overflow: hidden; position: relative; }
    .st-collection__grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0 !important;
        padding: 4px 0 8px !important;
        grid-template-columns: unset !important;
    }
    .st-collection__grid::-webkit-scrollbar { display: none; }

    /* Each card — full snap width */
    .st-collection__card {
        flex: 0 0 100% !important;
        scroll-snap-align: center;
        margin-top: 0 !important;
        padding: 0 4px;
    }
    .st-collection__card:nth-child(3n+2) { margin-top: 0 !important; }

    /* Slider dots */
    .st-collection__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 16px 0 20px;
    }
    .st-collection__dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #d1d5db;
        transition: all .3s;
        cursor: pointer;
        border: none;
        padding: 0;
        flex-shrink: 0;
    }
    .st-collection__dot.is-active {
        width: 32px;
        border-radius: 99px;
        background: #111;
    }

    /* See All — full width pill, height reduced */
    .st-collection__footer {
        justify-content: center;
        margin-top: 4px;
    }
    .st-collection__view-all {
        width: 100%;
        justify-content: space-between;
        border-radius: 100px !important;
        padding: 8px 8px 8px 24px;
        font-size: 15px;
        height: 52px;
    }
    .st-collection__view-all-arrow {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   BLOCK: st-reviews
   ============================================================ */
.st-reviews__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: end;
    margin-bottom: var(--space-8);
}

.st-reviews__heading {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 600;
    line-height: 62px;
    color: var(--color-brand-navy);
    margin: 0;
    max-width: 700px;
}

.st-reviews__desc {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--color-gray-800);
    line-height: 1.6;
    margin: 0;
    text-align: end;
}

/* Marquee */
.st-reviews__marquee {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-reviews__track {
    display: flex;
    gap: 20px;
    will-change: transform;
}
.st-reviews__track:hover { animation-play-state: paused; }

/* Row 1 — right to left */
.st-reviews__track--row1 {
    animation: st-reviews-rtl 30s linear infinite;
}
/* Row 2 — left to right */
.st-reviews__track--row2 {
    animation: st-reviews-ltr 30s linear infinite;
}

@keyframes st-reviews-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}
@keyframes st-reviews-ltr {
    0%   { transform: translateX(-33.333%); }
    100% { transform: translateX(0); }
}

/* Card */
.st-reviews__card {
    flex-shrink: 0;
    width: 380px;
    background: linear-gradient(135deg, #e8f7f5 0%, #f5f0e4 100%);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-reviews__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.st-reviews__stars { display: flex; gap: 3px; }

.st-reviews__star { --st-icon-size: 14px; }
.st-reviews__star--filled { color: var(--color-brand-teal); }
.st-reviews__star--empty  { color: var(--color-gray-300); }

.st-reviews__quote-mark {
    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1;
    color: rgba(115, 220, 207, 0.3);
}

.st-reviews__text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: #5b5b5b;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.st-reviews__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.st-reviews__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.st-reviews__avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
}

.st-reviews__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-reviews__name {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-brand-navy);
}

.st-reviews__role {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    color: #909090;
}

@media (max-width: 768px) {
    /* Header */
    .st-reviews__header { grid-template-columns: 1fr; gap: 8px; }
    .st-reviews__heading { font-size: 26px !important; line-height: 1.15 !important; width: 100%; }
    .st-reviews__desc { font-size: 14px; text-align: left; }

    /* Kill marquee — show as stacked vertical list */
    .st-reviews__marquee {
        overflow: visible;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .st-reviews__track,
    .st-reviews__track--row1,
    .st-reviews__track--row2 {
        animation: none !important;
        transform: none !important;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    /* Each card: full width */
    .st-reviews__card {
        width: 100% !important;
        box-sizing: border-box;
    }
    .st-reviews__text {
        font-size: 14px;
    }
    .st-reviews__quote-mark {
        font-size: 36px;
    }
    .st-reviews__name {
        font-size: 13px;
    }
    .st-reviews__role {
        font-size: 10px;
    }

    /* Hide row 2 entirely on mobile — avoids duplicate reviews */
    .st-reviews__track--row2 { display: none; }
}

/* ============================================================
   BLOCK: st-shop-hero
   ============================================================ */
.st-shero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    overflow: hidden;
    position: relative;
    background-color: var(--color-brand-teal);
}

.st-shero__image-wrap {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.st-shero__image {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    object-position: bottom left;
    display: block;
}

.st-shero__content {
    position: relative;
    z-index: 1;
    padding: 60px 60px 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.st-shero__heading {
    font-family: var(--font-heading);
    font-size: 70px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    margin: 0;
    text-align: right;
}

.st-shero__heading-ghost {
    display: block;
    color: rgba(255, 255, 255, 0.35);
}

.st-shero__desc {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
    text-align: right;
    max-width: 420px;
}

.st-shero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #ffffff;
    color: #000000;
    border-radius: 99px;
    padding: 10px 10px 10px 22px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 8px;
    transition: opacity 0.2s;
}
.st-shero__cta:hover { opacity: 0.85; color: #000000; }

.st-shero__cta-arrow {
    width: 36px;
    height: 36px;
    background: #000000;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .st-shero { grid-template-columns: 1fr; }
    .st-shero__image-wrap { min-height: 320px; }
    .st-shero__heading { font-size: 56px; }
    .st-shero__content { padding: 40px 24px; }
}

@media (max-width: 768px) {
    /* Remove inline bg image, keep gradient color */
    .st-shero {
        background-image: none !important;
        background: var(--gradient-hero-section) !important;
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    /* Content (heading + desc + cta) goes on top */
    .st-shero__content {
        order: 1;
        padding: 36px 20px 24px;
        text-align: center;
    }

    /* Illustration image goes to bottom */
    .st-shero__image-wrap {
        order: 2;
        min-height: auto;
        width: 100%;
    }

    .st-shero__image {
        max-height: 420px;
        object-position: center top;
    }

    /* Heading: smaller */
    .st-shero__heading {
        font-size: 36px !important;
        line-height: 1.05;
    }

    /* Ghost line: smaller */
    .st-shero__heading-ghost { font-size: inherit; }

    /* Description: smaller */
    .st-shero__desc {
        font-size: 14px;
        max-width: 100%;
    }

    /* CTA: center */
    .st-shero__cta { align-self: center; }
}

/* ============================================================
   BLOCK: st-featured-split
   ============================================================ */
.st-fsplit__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: end;
    margin-bottom: var(--space-8);
}

.st-fsplit__heading {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 700;
    line-height: 58px;
    color: var(--color-brand-navy);
    text-transform: uppercase;
    margin: 0;
}

.st-fsplit__desc {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-gray-800);
    line-height: 1.6;
    margin: 0;
    text-align: right;
}

.st-fsplit__rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.st-fsplit__row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    align-items: stretch;
    min-height: 460px;
}

.st-fsplit__row--img-right {
    grid-template-columns: 2fr 3fr;
}
.st-fsplit__row--img-right .st-fsplit__img-wrap { order: 2; }
.st-fsplit__row--img-right .st-fsplit__content   { order: 1; }

.st-fsplit__img-wrap {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.st-fsplit__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-fsplit__content {
    background: #f5f0e4;
    border-radius: 16px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
}

.st-fsplit__name {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-brand-navy);
    margin: 0;
    line-height: 1.2;
}

.st-fsplit__text {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-gray-800);
    line-height: 1.6;
    margin: 0;
}

.st-fsplit__btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #000000;
    color: #ffffff;
    border-radius: 99px;
    padding: 10px 10px 10px 22px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: opacity 0.2s;
}
.st-fsplit__btn:hover { opacity: 0.8; color: #ffffff; }

.st-fsplit__btn-arrow {
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .st-fsplit__row,
    .st-fsplit__row--img-right { grid-template-columns: 1fr; min-height: auto; }
    .st-fsplit__row--img-right .st-fsplit__img-wrap { order: 1; }
    .st-fsplit__row--img-right .st-fsplit__content   { order: 2; }
    .st-fsplit__img-wrap { aspect-ratio: 4/3; }
    .st-fsplit__heading { font-size: 52px; line-height: 58px; }
    .st-fsplit__header { grid-template-columns: 1fr; }
    .st-fsplit__desc { text-align: left; }
}

/* ============================================================
   BLOCK: st-collections-split
   ============================================================ */
.st-csplit__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.st-csplit__heading {
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 600;
    line-height: 68px;
    color: var(--color-brand-navy);
    margin: 0;
    max-width: 780px;
}

.st-csplit__view-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-brand-navy);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.st-csplit__view-all:hover { opacity: 0.7; }

.st-csplit__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.st-csplit__item { display: flex; flex-direction: column; }

.st-csplit__card {
    display: block;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.st-csplit__card-img-wrap {
    position: relative;
    aspect-ratio: 427 / 500;
    background: var(--color-gray-100);
    border-radius: 16px;
    overflow: hidden;
}

.st-csplit__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.st-csplit__card:hover .st-csplit__card-img { transform: scale(1.04); }

.st-csplit__card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(2px);
    border-radius: 0 0 16px 16px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.st-csplit__card:hover .st-csplit__card-overlay {
    opacity: 1;
    transform: translateY(0);
}

.st-csplit__card-label {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.1;
}

.st-csplit__card-arrow {
    color: #ffffff;
    flex-shrink: 0;
}

.st-csplit__card-info {
    padding: 16px 4px 0;
}

.st-csplit__card-name {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-brand-navy);
    margin: 0 0 6px;
    line-height: 1.2;
}

.st-csplit__card-desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gray-800);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 900px) {
    .st-csplit__grid { grid-template-columns: repeat(2, 1fr); }
    .st-csplit__heading { font-size: 56px; line-height: 64px; }
}
@media (max-width: 540px) {
    .st-csplit__grid { grid-template-columns: 1fr; }
    .st-csplit__heading { font-size: 40px; line-height: 48px; }
    .st-csplit__header { flex-direction: column; }
}

/* ============================================================
   BLOCK: st-voyage-banner
   ============================================================ */
.st-voyage {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 620px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-hero-section);
}

/* ============================================================
   ST ABOUT: HERO — modifier on st-hero, same visual, no heading
   ============================================================ */

.st-hero--about .st-hero__watermark {
    color: rgba(255, 255, 255, 0.75);
}

.st-hero--about .st-hero__quote {
    font-family: var(--font-quote);
    font-style: italic;
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-white);
    max-width: 420px;
    margin: 0;
    quotes: "\201C" "\201D";
}

.st-hero--about .st-hero__quote::before { content: open-quote; }
.st-hero--about .st-hero__quote::after  { content: close-quote; }

@media (max-width: 768px) {
    /* Watermark — bigger, pushed below fixed header */
    .st-hero--about .st-hero__watermark { font-size: 72px !important; top: calc(var(--st-header-h, 104px) + 16px) !important; transform: none !important; }

    /* Push col-left content below watermark so they don't overlap */
    .st-hero--about .st-hero__col-left { margin-top: 90px !important; }

    /* Quote — center aligned */
    .st-hero--about .st-hero__quote { text-align: center; }

    /* Waves — wider, near bottom */
    .st-hero--about .st-hero__wave        { width: 80% !important; opacity: 0.7 !important; top: auto !important; bottom: 0 !important; transform: none !important; }
    .st-hero--about .st-hero__wave--left  { left: -20% !important; }
    .st-hero--about .st-hero__wave--right { right: -20% !important; transform: scaleX(-1) !important; }

    /* Model — taller, flush to bottom with no gap */
    .st-hero--about .st-hero__model {
        height: auto;
        flex: 1;
        min-height: 320px;
        align-items: flex-end;
        margin-bottom: 0;
        padding-bottom: 0;
        overflow: hidden;
    }
    .st-hero--about .st-hero__model-img {
        width: auto;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: bottom center;
        margin-bottom: 0;
        display: block;
    }
}

@media (max-width: 480px) {
    .st-hero--about .st-hero__watermark   { font-size: 58px !important; top: calc(var(--st-header-h, 104px) + 16px) !important; transform: none !important; }
    .st-hero--about .st-hero__col-left { margin-top: 80px !important; }
    .st-hero--about .st-hero__model       { min-height: 280px; overflow: hidden; }
    .st-hero--about .st-hero__wave        { width: 80% !important; top: auto !important; bottom: 0 !important; }
    .st-hero--about .st-hero__wave--left  { left: -20% !important; }
    .st-hero--about .st-hero__wave--right { right: -20% !important; }
}

/* ============================================================
   ST ABOUT: GALLERY
   ============================================================ */

.wp-block-acf-st-about-gallery,
.wp-block-acf-st-about-gallery.alignfull {
    overflow: visible !important;
}

.st-about-gallery {
    padding: var(--space-20) 0;
    background-color: var(--color-white);
    text-align: center;
    overflow: visible;
}

.st-about-gallery__fan {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
    padding-top: 60px;
    padding-bottom: 50px;
    margin-bottom: var(--space-14);
}

.st-about-gallery__card {
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    transform-origin: bottom center;
    position: relative;
    isolation: isolate;
}

.st-about-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.st-about-gallery__card--left {
    width: 420px;
    height: 540px;
    transform: rotate(-7deg);
    margin-right: -70px;
    z-index: 2;
}

.st-about-gallery__card--center {
    width: 460px;
    height: 600px;
    z-index: 4;
}

.st-about-gallery__card--right {
    width: 420px;
    height: 540px;
    transform: rotate(7deg);
    margin-left: -70px;
    z-index: 3;
}

.st-about-gallery__card--left .st-about-gallery__img,
.st-about-gallery__card--right .st-about-gallery__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transform: none;
}

.st-about-gallery__text-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--space-16) var(--space-12) 0;
}

.st-about-gallery__text {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}

.st-about-gallery__text-main  { color: var(--color-brand-navy); }
.st-about-gallery__text-ghost { color: rgba(52, 72, 87, 0.28); }

@media (max-width: 1260px) {
    .st-about-gallery__card--left   { width: 360px; height: 500px; transform: rotate(-7deg); margin-right: -60px; }
    .st-about-gallery__card--right  { width: 360px; height: 500px; transform: rotate(7deg);  margin-left: -60px; }
    .st-about-gallery__card--center { width: 400px; height: 560px; }
}

@media (max-width: 1100px) {
    .st-about-gallery__card--left   { width: 310px; height: 420px; transform: rotate(-7deg); margin-right: -52px; }
    .st-about-gallery__card--right  { width: 310px; height: 420px; transform: rotate(7deg);  margin-left: -52px; }
    .st-about-gallery__card--center { width: 350px; height: 480px; }
    .st-about-gallery__text         { font-size: 26px; }
}

@media (max-width: 768px) {
    .st-about-gallery {
        padding: var(--space-10) 0;
        text-align: left;
    }

    /* Vertical deck: right at back (top), left middle, center front (bottom) */
    .st-about-gallery__fan {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-top: 0;
        margin-bottom: var(--space-8);
        gap: 0;
    }

    /* Reorder: right first (back), left second, center last (front) */
    .st-about-gallery__card--right  { order: 1; z-index: 1; }
    .st-about-gallery__card--left   { order: 2; z-index: 2; }
    .st-about-gallery__card--center { order: 3; z-index: 3; }

    /* All cards full width, no rotation */
    .st-about-gallery__card--left,
    .st-about-gallery__card--right,
    .st-about-gallery__card--center {
        width: 100%;
        transform: none !important;
        margin: 0 !important;
        border-radius: 16px;
        position: relative;
    }

    /* Back cards: short height — only strip visible above center */
    .st-about-gallery__card--right { height: 80px; }
    .st-about-gallery__card--left  { height: 80px; margin-top: 0 !important; }

    /* Center: pull up to overlap the cards behind */
    .st-about-gallery__card--center {
        height: 460px;
        margin-top: -16px !important;
    }

    /* Fix images filling their card */
    .st-about-gallery__card--left .st-about-gallery__img,
    .st-about-gallery__card--right .st-about-gallery__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
    }

    /* Fan container: side padding so strips don't touch edges */
    .st-about-gallery__fan { padding: 0 20px !important; margin-bottom: 12px !important; }

    /* Left/right strip cards: restore absolute image fill within padded container */
    .st-about-gallery__card--left,
    .st-about-gallery__card--right { padding: 0; }

    /* Text: left aligned, sentence case, tight gap */
    .st-about-gallery__text-wrap { padding: 8px 20px 0 !important; }
    .st-about-gallery__text { font-size: 22px; text-align: left; line-height: 1.3; text-transform: none; }
}

@media (max-width: 480px) {
    .st-about-gallery__card--right  { height: 70px; }
    .st-about-gallery__card--left   { height: 70px; }
    .st-about-gallery__card--center { height: 380px; }
    .st-about-gallery__text         { font-size: 18px; }
}

/* ============================================================
   ST VOYAGE BANNER
   ============================================================ */

.st-voyage__marquee {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.st-voyage__marquee-track {
    display: flex;
    gap: 80px;
    animation: st-marquee 18s linear infinite;
    will-change: transform;
}

.st-voyage__tagline {
    font-family: var(--font-heading);
    font-size: 120px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: -2px;
    flex-shrink: 0;
}

@keyframes st-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

.st-voyage__birds {
    position: absolute;
    top: 6%;
    right: 3%;
    width: 38%;
    max-width: 520px;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

.st-voyage__arc {
    position: absolute;
    width: 68%;
    max-width: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    color: rgba(255, 255, 255, 0.25);
}

.st-voyage__image-wrap {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.st-voyage__image {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom;
    display: block;
}

/* Voyage Banner — Mobile */
@media (max-width: 768px) {
    .st-voyage {
        min-height: 620px;
    }
    /* Text marquee — top area */
    .st-voyage__marquee {
        z-index: 5 !important;
        align-items: flex-start;
        padding-top: 100px;
    }
    .st-voyage__tagline {
        font-size: 72px;
    }
    /* Image bigger */
    .st-voyage__image-wrap {
        top: auto;
        bottom: 0;
        height: 80%;
        z-index: 2;
    }
    .st-voyage__image {
        height: 100%;
        width: auto;
    }
    /* Birds bigger */
    .st-voyage__birds {
        width: 85%;
        top: 4%;
    }
}

@media (max-width: 480px) {
    .st-voyage { min-height: 420px; }
    .st-voyage__tagline { font-size: 52px; }
    .st-voyage__image-wrap { height: 65%; }
    .st-voyage__marquee { padding-top: 36px; }
}

/* ============================================================
   BLOCK: st-newsletter-banner
   ============================================================ */
.st-newsletter-banner {
    position: relative;
    padding-block: var(--space-20);
    background-color: var(--color-brand-navy);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.st-newsletter-banner__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(52, 72, 87, 0.88);
    z-index: var(--z-base);
}

.st-newsletter-banner__inner {
    position: relative;
    z-index: var(--z-raised);
    max-width: var(--container-md);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}

.st-newsletter-banner__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    line-height: var(--line-height-snug);
    margin: 0;
}

.st-newsletter-banner__subtext {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.st-newsletter-banner__form {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 500px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background-color: var(--color-white);
}

.st-newsletter-banner__input {
    flex: 1;
    border: none;
    outline: none;
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-form);
    font-size: var(--font-size-input);
    color: var(--color-text);
    background: transparent;
}

.st-newsletter-banner__input::placeholder { color: var(--color-input-placeholder); }

.st-newsletter-banner__form .st-btn {
    border-radius: 0;
    flex-shrink: 0;
}

/* ============================================================
   GeneratePress overrides — strip default GP header/footer
   ============================================================ */
.site-header,
.main-navigation,
.footer-widgets,
.site-footer {
    display: none !important;
}

/* ============================================================
   BLOCK: st-header (Navbar pill — floats over hero)
   ============================================================ */
.st-header {
    position: fixed;
    top: var(--space-6);
    left: 0;
    right: 0;
    z-index: 1000;
    pointer-events: none;
}

.st-nav {
    display: flex;
    justify-content: center;
    pointer-events: auto;
}

.st-nav__pill {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 1000px;
    max-width: calc(100% - var(--space-8));
    height: 80px;
    padding: var(--space-5) var(--space-8);
    background-color: var(--color-active-fill);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-full);
}

/* Logo */
.st-nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.st-nav__logo-img {
    width: 84px;
    height: 40px;
    object-fit: contain;
}

.st-nav__logo-text {
    font-family: var(--font-decorative);
    font-size: var(--font-size-decorative-logo);
    font-weight: var(--font-weight-regular);
    color: var(--color-white);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* Nav links */
.st-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

.st-nav__link {
    font-family: var(--font-body);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-regular);
    color: var(--color-white);
    text-decoration: none;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.st-nav__link:hover {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.12);
}

.st-nav__link--active {
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}

.st-nav__link--active:hover {
    background-color: var(--color-brand-navy);
}

/* Actions (cart + hamburger) */
.st-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.st-nav__cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    text-decoration: none;
    border-radius: 99px;
    transition: background 0.2s;
}
.st-nav__cart:hover,
.st-nav__cart[aria-expanded="true"] {
    background: var(--gradient-hero-section);
}

.st-nav__cart-icon {
    width: 24px;
    height: 24px;
    stroke: var(--color-white);
    fill: none;
}

.st-nav__cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 17px;
    height: 17px;
    background: var(--gradient-hero-section);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.st-nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 99px;
    transition: background 0.2s;
}
.st-nav__hamburger:hover,
.st-nav__hamburger[aria-expanded="true"] {
    background: var(--gradient-hero-section);
}

.st-nav__hamburger-line {
    display: block;
    height: 2px;
    background-color: var(--color-white);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base), width var(--transition-base);
}

.st-nav__hamburger-line:nth-child(1) { width: 24px; }
.st-nav__hamburger-line:nth-child(2) { width: 19px; }
.st-nav__hamburger-line:nth-child(3) { width: 13px; }

/* Hamburger open state */
.st-nav__hamburger[aria-expanded="true"] .st-nav__hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    width: 24px;
}
.st-nav__hamburger[aria-expanded="true"] .st-nav__hamburger-line:nth-child(2) {
    opacity: 0;
}
.st-nav__hamburger[aria-expanded="true"] .st-nav__hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    width: 24px;
}

/* Mobile Menu Drawer */
.st-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(115,220,207,0.62) 0%, rgba(210,156,8,0.58) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-8) var(--space-6);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    visibility: hidden;
    pointer-events: none;
}

.st-mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.st-mobile-menu__close {
    align-self: flex-end;
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: var(--font-size-xl);
    cursor: pointer;
    padding: var(--space-2);
    line-height: 1;
}

.st-mobile-menu__links {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.st-mobile-menu__links li {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(210,156,8,0.6) 100%) 1;
    padding: 14px 0;
}

.st-mobile-menu__links li:first-child {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(210,156,8,0.6) 100%) 1;
}

.st-mobile-menu__link {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-decoration: none;
    line-height: 1;
    transition: color var(--transition-fast);
}

.st-mobile-menu__link:hover,
.st-mobile-menu__link--active {
    color: #000000;
}

/* ============================================================
   BLOCK: st-footer
   ============================================================ */
.st-footer {
    background: #000000;
    color: #ffffff;
    font-family: var(--font-body);
    padding: 60px 60px 0;
    overflow: hidden;
}

.st-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
}

/* Newsletter label */
.st-footer__newsletter-label {
    font-family: var(--font-form);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.40);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 14px 0;
}

/* Newsletter form */
.st-footer__newsletter-form {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    background: none;
    border-radius: 0;
    overflow: visible;
    max-width: none;
}

.st-footer__newsletter-input {
    width: 280px !important;
    height: 46px !important;
    background: transparent !important;
    border: 1px solid #424242 !important;
    border-radius: 6px !important;
    padding: 0 16px !important;
    font-family: var(--font-form) !important;
    font-size: 14px !important;
    color: #ffffff !important;
    outline: none !important;
    transition: border-color 0.2s;
    box-sizing: border-box !important;
    flex: none !important;
}

.st-footer__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.st-footer__newsletter-input:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.st-footer__newsletter-btn {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid #424242;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    transition: background 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.st-footer__newsletter-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.st-footer__newsletter-btn svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
    fill: none;
}

/* Newsletter note */
.st-footer__newsletter-note {
    font-family: var(--font-form);
    font-size: 11px;
    color: #868686;
    line-height: 1.6;
    margin: 0;
}

.st-footer__newsletter-note a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.st-footer__newsletter-note a:hover {
    color: #ffffff;
}

/* 4-column menu grid */
.st-footer__columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin: 50px 0 60px;
}

.st-footer__col-heading {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.40);
    margin: 0 0 22px 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.st-footer__col-links,
.st-footer__col-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-footer__col-links li {
    margin: 0;
    padding: 0;
}

.st-footer__col-links li a {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #eeeeee;
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s;
    opacity: 0.85;
    display: block;
}

.st-footer__col-links li a:hover {
    color: #ffffff;
    opacity: 1;
}

/* Brand wordmark — full bleed */
.st-footer__brand-wrap {
    overflow: hidden;
    margin: 0 -60px;
    text-align: center;
}

.st-footer__wordmark {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(80px, 11vw, 160px);
    line-height: 0.88;
    white-space: nowrap;
    margin: 0 auto;
    padding: 0 60px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.08) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.02em;
}

/* Divider */
.st-footer__divider {
    border: none;
    width: 100%;
    height: 1px;
    background: #424242;
    margin: 40px 0 28px;
}

/* Bottom bar */
.st-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 40px;
    gap: 20px;
    flex-wrap: wrap;
}

.st-footer__social {
    display: flex;
    align-items: center;
    gap: 32px;
}

.st-footer__social-link {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: #eeeeee;
    text-decoration: none;
    transition: opacity 0.2s;
    opacity: 0.85;
}

.st-footer__social-link:hover {
    opacity: 1;
}

.st-footer__credit {
    font-family: var(--font-form);
    font-size: 14px;
    font-weight: 500;
    color: #ababab;
    margin: 0;
}

@media (max-width: 768px) {
    .st-footer { padding: 40px 20px 0; }
    .st-footer__newsletter-form { flex-wrap: nowrap; gap: 8px; }
    .st-footer__newsletter-input { width: calc(100% - 58px) !important; max-width: none !important; min-width: 0 !important; flex: 1 !important; }
    .st-footer__newsletter-btn { flex-shrink: 0; width: 46px !important; }
    .st-footer__columns { grid-template-columns: 1fr; gap: 36px; margin: 36px 0 48px; }
    .st-footer__brand-wrap { margin: 0 -20px; }
    .st-footer__wordmark { font-size: clamp(36px, 10vw, 68px) !important; padding: 0 20px; }
    .st-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-bottom: 32px; }
    .st-footer__social { gap: 24px; flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   BLOCK: st-mega-menu
   ============================================================ */

.st-mega-menu {
    position: fixed;
    top: 116px;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: calc(100% - 48px);
    max-width: 1300px;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.14);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    overflow: hidden;
}

.st-mega-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.st-mega-menu__panel {
    display: grid;
    grid-template-columns: 220px 1fr 340px;
    min-height: 380px;
}

/* --- Sidebar --- */
.st-mega-menu__sidebar {
    background: #f7f7f7;
    border-radius: 18px 0 0 18px;
    padding: 28px 0;
    border-right: 1px solid var(--color-gray-200);
}

.st-mega-menu__cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.st-mega-menu__cat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-800);
    text-align: left;
    transition: color var(--transition-fast), background var(--transition-fast);
    gap: 8px;
    line-height: 1.3;
}

.st-mega-menu__cat-btn svg {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
    color: var(--color-black);
}

.st-mega-menu__cat-item.is-active .st-mega-menu__cat-btn,
.st-mega-menu__cat-item:hover .st-mega-menu__cat-btn {
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    background: rgba(0,0,0,0.04);
}

.st-mega-menu__cat-item.is-active .st-mega-menu__cat-btn svg,
.st-mega-menu__cat-item:hover .st-mega-menu__cat-btn svg {
    opacity: 1;
}

/* --- Panes --- */
.st-mega-menu__panes {
    position: relative;
    padding: 32px 28px;
}

.st-mega-menu__pane {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    height: 100%;
}

.st-mega-menu__pane.is-active {
    display: grid;
}

.st-mega-menu__col {
    list-style: none;
    margin: 0;
    padding: 0 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid var(--color-gray-200);
    padding-right: 28px;
    margin-right: 28px;
}

.st-mega-menu__col:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.st-mega-menu__link {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-700);
    text-decoration: none;
    display: block;
    padding: 8px 0;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    line-height: 1.3;
}

.st-mega-menu__link:hover {
    color: var(--color-black);
    padding-left: 6px;
}

/* --- Promo Banner --- */
.st-mega-menu__promo {
    position: relative;
    background: linear-gradient(135deg, var(--color-brand-teal) 0%, var(--color-accent-gold) 100%);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 380px;
    margin: 12px 12px 12px 0;
}

.st-mega-menu__promo-body {
    position: relative;
    z-index: 2;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 55%;
}

.st-mega-menu__promo-heading {
    font-family: var(--font-display);
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.st-mega-menu__promo-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    line-height: 1.55;
    margin: 0;
}

.st-mega-menu__promo-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    padding: 7px 16px;
    border-radius: var(--radius-full);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.35);
    transition: background var(--transition-fast);
    margin-top: 4px;
}

.st-mega-menu__promo-cta:hover {
    background: rgba(255,255,255,0.35);
    color: var(--color-white);
}

.st-mega-menu__promo-img-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 65%;
    z-index: 1;
    pointer-events: none;
}

.st-mega-menu__promo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
    display: block;
}

/* Mega menu hidden on mobile — mobile uses drawer instead */
@media (max-width: 768px) {
    .st-mega-menu { display: none; }
}

/* ============================================================
   BLOCK: st-mini-cart (off-canvas cart drawer)
   ============================================================ */
.st-mini-cart {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

.st-mini-cart.is-open {
    visibility: visible;
    pointer-events: auto;
}

.st-mini-cart__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
    opacity: 0;
    transition: opacity var(--transition-slow);
    z-index: 1;
    pointer-events: none;
    top: 104px; /* match panel top on desktop so overlay starts below header */
}
@media ( max-width: 480px ) {
    .st-mini-cart__overlay {
        top: 80px;
    }
}

.st-mini-cart.is-open .st-mini-cart__overlay {
    pointer-events: auto;
}

.st-mini-cart__panel {
    position: absolute;
    top: 104px;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: 2;
    border-radius: 20px 0 0 0;
}

.st-mini-cart.is-open .st-mini-cart__overlay {
    opacity: 1;
}

.st-mini-cart.is-open .st-mini-cart__panel {
    transform: translateX(0);
}

/* Header */
.st-mini-cart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    border-bottom: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
}

.st-mini-cart__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    color: #374151;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.st-mini-cart__close:hover { background: #111; color: #fff; }

.st-mini-cart__header-left {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.st-mini-cart__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1;
    margin: 0;
}

.st-mini-cart__count-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-500);
}

.st-mini-cart__close { display: none; }

/* Body (scrollable items) */
.st-mini-cart__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
    overscroll-behavior: contain;
}

/* Empty state */
.st-mini-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-16) 0;
    color: var(--color-gray-500);
    text-align: center;
}

.st-mini-cart__empty-text {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-gray-700);
}

/* Items list */
.st-mini-cart__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.st-mini-cart__item {
    display: flex;
    gap: var(--space-4);
    position: relative;
}

.st-mini-cart__item-thumb {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-light);
    display: block;
}

.st-mini-cart__item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-mini-cart__item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.st-mini-cart__item-name {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    text-decoration: none;
    line-height: 1.1;
    transition: color var(--transition-fast);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-mini-cart__item-name:hover {
    color: var(--color-brand-navy);
}

.st-mini-cart__item-attrs {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    background-color: var(--color-gray-200);
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-md);
}

.st-mini-cart__item-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
}

.st-mini-cart__item-qty {
    font-family: var(--font-ui);
    font-size: var(--font-size-body-sm);
    color: var(--color-gray-600);
}

/* Mini cart qty stepper */
.st-mini-cart__qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 99px;
    height: 34px;
    overflow: hidden;
}
.st-mini-cart__qty-btn {
    width: 32px;
    height: 100%;
    background: none;
    border: none;
    font-size: 17px;
    font-weight: 300;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.st-mini-cart__qty-btn:hover {
    background: var(--gradient-hero-section);
    color: #fff;
}
.st-mini-cart__qty-val {
    min-width: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1;
}

.st-mini-cart__item-price {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-black);
    line-height: 1;
}

.st-mini-cart__item-remove {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-gray-500);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: color var(--transition-fast);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.st-mini-cart__item-remove:hover {
    color: var(--color-black);
}

/* Footer */
.st-mini-cart__footer {
    padding: var(--space-6) var(--space-8);
    border-top: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.st-mini-cart__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.st-mini-cart__subtotal-label {
    font-family: var(--font-body-alt);
    font-size: 15px;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-800);
}

.st-mini-cart__subtotal-value {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-navy);
}

.st-mini-cart__checkout-btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-cta);
    border-radius: var(--radius-full);
    transition: background 0.2s, opacity 0.2s;
}
.st-mini-cart__checkout-btn:hover {
    background: var(--gradient-hero-section) !important;
    opacity: 1;
}

.st-mini-cart__view-cart {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-700);
    text-align: center;
    text-decoration: underline;
    transition: color var(--transition-fast);
    padding: 6px 0;
    display: block;
}
.st-mini-cart__view-cart:hover {
    color: transparent;
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    background-clip: text;
    text-decoration-color: transparent;
}

/* ── Mini cart mobile responsive ── */
@media ( max-width: 480px ) {
    .st-mini-cart__panel {
        width: 100vw;
        top: 80px;
        border-radius: 0;
    }
    .st-mini-cart__overlay { top: 80px; }

    .st-mini-cart__header {
        padding: 14px 18px;
    }
    .st-mini-cart__header-left {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }
    .st-mini-cart__title {
        font-size: 26px;
    }
    .st-mini-cart__count-label {
        white-space: nowrap;
        font-size: 13px;
    }

    .st-mini-cart__body {
        padding: 14px 18px;
    }
    .st-mini-cart__items {
        gap: 14px;
    }
    .st-mini-cart__item-thumb {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }
    .st-mini-cart__item-name {
        font-size: 14px;
        line-height: 1.3;
    }
    .st-mini-cart__item-attrs {
        font-size: 11px;
    }
    .st-mini-cart__item-row {
        gap: 8px;
        flex-wrap: nowrap;
    }
    .st-mini-cart__qty-wrap {
        height: 30px;
        flex-shrink: 0;
        overflow: visible;
        min-width: 88px;
    }
    .st-mini-cart__qty-btn {
        width: 28px;
        font-size: 15px;
    }
    .st-mini-cart__qty-val {
        font-size: 13px;
        min-width: 22px;
    }
    .st-mini-cart__item-price {
        font-size: 16px;
        white-space: nowrap;
    }

    .st-mini-cart__footer {
        padding: 14px 18px;
        gap: 12px;
    }
    .st-mini-cart__subtotal-label,
    .st-mini-cart__subtotal-value {
        font-size: 14px;
    }
    .st-mini-cart__checkout-btn {
        font-size: 14px;
        padding: 14px 20px;
    }
    .st-mini-cart__view-cart {
        font-size: 13px;
    }
}

/* Cart count badge — always visible with 0 hidden via JS */
.st-nav__cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    background: var(--gradient-hero-section);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    border-radius: 8.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 4px;
}

/* ============================================================
   RESPONSIVE — Header & Footer
   ============================================================ */
@media (max-width: 1024px) {
    .st-nav__pill {
        width: calc(100% - var(--space-8));
        gap: var(--space-5);
    }

    .st-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .st-footer__wordmark {
        font-size: 160px;
    }

    .st-footer {
        padding: 60px 40px 40px;
    }
}

@media (max-width: 768px) {
    .st-nav__links {
        display: none;
    }

    .st-nav__hamburger {
        display: flex;
    }

    /* Logo left, actions pushed to far right */
    .st-nav__pill {
        justify-content: space-between;
    }

    /* Reduce gap between cart and hamburger on mobile */
    .st-nav__actions {
        gap: var(--space-2);
        margin-left: auto;
    }

    .st-footer__grid {
        grid-template-columns: 1fr;
    }

    .st-footer__wordmark {
        font-size: 80px;
    }

    .st-footer {
        padding: 40px 24px 32px;
    }
}

@media (max-width: 480px) {
    .st-header {
        top: var(--space-4);
    }

    .st-nav__pill {
        height: 64px;
        padding: var(--space-3) var(--space-5);
    }

    .st-nav__logo-text {
        font-size: 28px;
    }
}

/* ============================================================
   ST ABOUT: FEATURED SPLIT
   ============================================================ */
.wp-block-acf-st-about-featured-split,
.wp-block-acf-st-about-featured-split.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.st-about-fsplit {
    background: var(--gradient-hero-section);
    padding: 80px 0 100px;
    overflow: hidden;
    width: 100%;
}

/* --- Top header: heading left + body right --- */
.st-about-fsplit__header {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 60px;
    padding: 0 60px;
}

.st-about-fsplit__heading {
    flex: 0 0 65%;
    font-family: var(--font-display);
    font-size: clamp(28px, 3.2vw, 52px);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.05;
    color: var(--color-white);
    margin: 0;
    text-transform: uppercase;
}

.st-about-fsplit__body {
    flex: 1;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-white);
    text-align: right;
    margin: 0;
    align-self: flex-end;
}

/* --- Main scene: 3-column grid --- */
.st-about-fsplit__scene {
    display: grid;
    grid-template-columns: 1fr 480px 1fr;
    align-items: center;
    gap: 0;
    padding: 0 40px;
}

/* --- Left / Right callout columns --- */
.st-about-fsplit__col {
    display: flex;
    flex-direction: column;
    gap: 60px;
    min-width: 0;
    overflow: visible;
    position: relative;
    z-index: 3;
}

.st-about-fsplit__col--left {
    padding-right: 32px;
}

.st-about-fsplit__col--right {
    padding-left: 32px;
}

/* --- Product image --- */
.st-about-fsplit__product-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.st-about-fsplit__product-img {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,0.28));
}

/* --- Individual callout --- */
.st-about-fsplit__callout {
    display: flex;
    flex-direction: column;
}

.st-about-fsplit__callout--left {
    align-items: flex-start;
    text-align: left;
}

.st-about-fsplit__callout--right {
    align-items: flex-end;
    text-align: right;
}

.st-about-fsplit__callout-num {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: 0 0 10px;
    letter-spacing: 0.04em;
}

/* Horizontal rule line with dot at product end */
.st-about-fsplit__callout-line {
    width: 100%;
    height: 1px;
    background-color: rgba(255,255,255,0.7);
    position: relative;
    margin-bottom: 14px;
}

.st-about-fsplit__callout--left .st-about-fsplit__callout-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-white);
}

.st-about-fsplit__callout--right .st-about-fsplit__callout-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-white);
}

.st-about-fsplit__callout-title {
    font-family: var(--font-heading);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: 0 0 8px;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.st-about-fsplit__callout-desc {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
    margin: 0;
    max-width: 240px;
}

.st-about-fsplit__callout--right .st-about-fsplit__callout-desc {
    align-self: flex-end;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .st-about-fsplit__scene {
        grid-template-columns: 1fr 400px 1fr;
        padding: 0 32px;
    }
    .st-about-fsplit__product-img {
        max-width: 400px;
    }
    .st-about-fsplit__header {
        padding: 0 32px;
    }
}

@media (max-width: 1100px) {
    .st-about-fsplit {
        padding: 60px 0 80px;
    }
    .st-about-fsplit__scene {
        grid-template-columns: 1fr 320px 1fr;
        padding: 0 24px;
    }
    .st-about-fsplit__header {
        padding: 0 24px;
    }
    .st-about-fsplit__product-img {
        max-width: 320px;
    }
    .st-about-fsplit__heading {
        flex: 0 0 60%;
    }
}

@media (max-width: 900px) {
    .st-about-fsplit {
        padding: 50px 0 70px;
    }
    .st-about-fsplit__header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
        padding: 0 20px;
    }
    .st-about-fsplit__heading {
        flex: none;
    }
    .st-about-fsplit__body {
        text-align: left;
    }
    .st-about-fsplit__scene {
        grid-template-columns: 1fr 260px 1fr;
        padding: 0 16px;
        gap: 0;
    }
    .st-about-fsplit__col {
        gap: 40px;
    }
    .st-about-fsplit__col--left {
        padding-right: 16px;
    }
    .st-about-fsplit__col--right {
        padding-left: 16px;
    }
    .st-about-fsplit__product-img {
        max-width: 260px;
    }
}

@media (max-width: 768px) {
    .st-about-fsplit {
        padding: 40px 0 60px;
    }

    /* Header: full width, smaller fonts, 20px padding */
    .st-about-fsplit__header {
        flex-direction: column;
        gap: 12px;
        padding: 0 20px !important;
    }
    .st-about-fsplit__heading {
        flex: none;
        width: 100%;
        font-size: 28px !important;
        line-height: 1.1;
    }
    .st-about-fsplit__body {
        width: 100%;
        font-size: 14px;
        text-align: left;
    }

    /* Scene: single column, tight gap between img and callouts */
    .st-about-fsplit__scene {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 0 20px !important;
        gap: 20px;
    }

    /* Order: product first (img), then right col (1,2), then left col (3,4) */
    .st-about-fsplit__product-wrap { order: 1; margin-bottom: 0; }
    .st-about-fsplit__col--right   { order: 2; }
    .st-about-fsplit__col--left    { order: 3; }

    /* Callout columns: vertical stack, full width, tight gap */
    .st-about-fsplit__col {
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 0 !important;
    }

    /* All callouts base */
    .st-about-fsplit__callout--left,
    .st-about-fsplit__callout--right {
        flex: none;
        width: 100%;
    }
    .st-about-fsplit__callout-line { width: 100% !important; }

    /* 1st callout in each col (1 & 3) → left aligned */
    .st-about-fsplit__col > .st-about-fsplit__callout:first-child {
        align-items: flex-start;
        text-align: left;
    }
    .st-about-fsplit__col > .st-about-fsplit__callout:first-child .st-about-fsplit__callout-desc {
        align-self: flex-start;
    }

    /* 2nd callout in each col (2 & 4) → right side but text left */
    .st-about-fsplit__col > .st-about-fsplit__callout:last-child {
        align-items: flex-start;
        text-align: left;
    }
    .st-about-fsplit__col > .st-about-fsplit__callout:last-child .st-about-fsplit__callout-desc {
        align-self: flex-start;
    }

    /* Callout 1: --right class but left-aligned → flip dot to right side */
    .st-about-fsplit__col--right > .st-about-fsplit__callout:first-child .st-about-fsplit__callout-line::after {
        left: auto;
        right: 0;
        transform: translate(50%, -50%);
    }

    /* Callout 4: --left class but right-aligned → flip dot to left side */
    .st-about-fsplit__col--left > .st-about-fsplit__callout:last-child .st-about-fsplit__callout-line::after {
        right: auto;
        left: 0;
        transform: translate(-50%, -50%);
    }

    /* Product image: bigger, full width */
    .st-about-fsplit__product-img {
        max-width: 100%;
        width: 100%;
    }
}


/* ============================================================
   ST ABOUT: COLLECTIONS
   ============================================================ */
.wp-block-acf-st-about-collections,
.wp-block-acf-st-about-collections.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.st-about-coll {
    background: var(--color-white);
    overflow: hidden;
    width: 100%;
    margin-top: 60px;
}

/* --- Stage: relative container for watermark + cards + cta --- */
.st-about-coll__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 80px 70px;
    min-height: 670px;
    margin: 0;
}

/* --- Watermark background text --- */
.st-about-coll__watermark {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
    overflow: hidden;
    padding: 0 90px;
    margin: 0;
}

.st-about-coll__wm-row {
    display: flex;
    align-items: center;
    gap: 24px;
    pointer-events: none;
}

.st-about-coll__wm-line {
    font-family: var(--font-display);
    font-size: clamp(120px, 16vw, 230px);
    font-weight: var(--font-weight-black);
    line-height: 0.88;
    color: var(--color-black);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: -0.02em;
    display: block;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.st-about-coll__wm-row .st-about-coll__wm-line {
    flex-shrink: 0;
}

.st-about-coll__wm-line:last-child {
    text-align: right;
    width: 100%;
}

/* --- Cards container --- */
.st-about-coll__cards {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0;
    margin: 0;
}

/* --- Individual card --- */
.st-about-coll__card {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 390px;
    height: 500px;
    padding: 0;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
}

.st-about-coll__card--1 { z-index: 3; }
.st-about-coll__card--2 { z-index: 4; }
.st-about-coll__card--3 { z-index: 5; }

.st-about-coll__card--bordered {
    /* border intentionally removed */
}

.st-about-coll__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    max-width: none;
    display: block;
}

.st-about-coll__card-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* --- Bottom label — glassmorphism, only shows when text is entered --- */
.st-about-coll__card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    padding: 14px 20px;
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* --- Arrow CTA button --- */
.st-about-coll__cta {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-black);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    text-decoration: none;
    pointer-events: auto;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    align-self: flex-start;
    margin-top: 32px;
}

.st-about-coll__cta:hover {
    background: var(--color-white);
    color: var(--color-black);
    transform: scale(1.1) rotate(-45deg);
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

.st-about-coll__cta svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    display: block;
    flex-shrink: 0;
    transition: stroke 0.25s ease;
}

/* --- Responsive --- */

@media (max-width: 1000px) {
    .st-about-coll__card { width: 260px; height: 380px; }
    .st-about-coll__cards { gap: 12px; }
    .st-about-coll__cta { width: 52px; height: 52px; }
}

@media (max-width: 800px) {
    .st-about-coll__stage { padding: 60px 40px; min-height: 480px; }
    .st-about-coll__card { width: 200px; height: 300px; border-radius: 14px; }
    .st-about-coll__cards { gap: 10px; }
    .st-about-coll__card-label { font-size: 13px; padding: 10px 14px; }
    .st-about-coll__cta { width: 44px; height: 44px; }
    .st-about-coll__cta svg { width: 20px; height: 20px; }
}

@media (max-width: 560px) {
    .st-about-coll__stage { padding: 40px 16px; min-height: 340px; }
    .st-about-coll__card { width: 140px; height: 210px; border-radius: 12px; }
    .st-about-coll__cards { gap: 8px; }
    .st-about-coll__card-label { font-size: 11px; padding: 8px 10px; }
    .st-about-coll__cta { width: 40px; height: 40px; }
    .st-about-coll__cta svg { width: 18px; height: 18px; }
}

@media (max-width: 768px) {
    /* Section top spacing */
    .st-about-coll { margin-top: 20px !important; margin-bottom: 0 !important; }

    /* Stage: normal flow, no min-height */
    .st-about-coll__stage {
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 40px;
        min-height: auto;
    }
    .st-about-coll { padding-top: 0 !important; margin-top: 0 !important; }

    /* Watermark: pull out of absolute, show at top */
    .st-about-coll__watermark {
        position: relative;
        inset: auto;
        padding: 20px 20px 0;
        overflow: hidden;
        z-index: 1;
        justify-content: flex-start;
        gap: 0;
    }
    .st-about-coll__wm-line {
        font-size: clamp(44px, 16vw, 72px);
        line-height: 0.9;
    }
    .st-about-coll__wm-row { pointer-events: auto; }

    /* CTA button: smaller */
    .st-about-coll__cta {
        pointer-events: auto;
        width: 34px;
        height: 34px;
    }
    .st-about-coll__cta svg { width: 16px; height: 16px; }

    /* Cards: vertical stack, centered, tight gap */
    .st-about-coll__cards {
        position: relative;
        z-index: 2;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px 20px 0;
    }

    /* All cards: wider, fixed height, border radius, center */
    .st-about-coll__card {
        width: 88%;
        height: 240px;
        border-radius: 16px;
        overflow: hidden;
        align-self: center;
    }
    .st-about-coll__card-img { border-radius: 16px; }

    /* Slide-in animation — card 1 & 3 from left, card 2 from right */
    .st-about-coll__card--1,
    .st-about-coll__card--3 {
        transform: translateX(-120px);
        opacity: 0;
        transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.65s ease;
    }
    .st-about-coll__card--2 {
        transform: translateX(120px);
        opacity: 0;
        transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.65s ease;
    }
    /* Final position: center */
    .st-about-coll__card.is-visible {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    .st-about-coll__card-label { font-size: 12px; padding: 10px 14px; }
}

/* ============================================================
   BLOCK: st-about-articles
   ============================================================ */

.wp-block-acf-st-about-articles,
.wp-block-acf-st-about-articles.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.st-about-art {
    background: transparent;
    padding: 80px 90px;
}

.st-about-art__inner {
    max-width: 1400px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* --- Left column --- */
.st-about-art__left {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.st-about-art__heading {
    font-family: var(--font-display);
    font-size: 50px;
    font-weight: var(--font-weight-black);
    color: var(--color-black);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0;
    width: 100%;
    word-break: break-word;
}

.st-about-art__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    padding: 10px 10px 10px 22px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
    align-self: flex-start;
    letter-spacing: 0.01em;
}

.st-about-art__cta:hover {
    background: var(--color-black);
    color: var(--color-white);
}

.st-about-art__cta-arrow {
    width: 34px;
    height: 34px;
    background: var(--color-white);
    color: var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.st-about-art__cta:hover .st-about-art__cta-arrow {
    background: var(--color-accent-gold);
    color: var(--color-black);
    transform: rotate(-45deg);
}

.st-about-art__img-wrap {
    width: 100%;
    height: 470px;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
}

.st-about-art__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 20px;
}

/* --- Right column --- */
.st-about-art__right {
    padding-top: 8px;
    min-width: 0;
}

.st-about-art__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.st-about-art__item {
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 28px;
    margin-bottom: 28px;
}

.st-about-art__item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.st-about-art__article-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--transition-fast);
}

.st-about-art__article-link:hover {
    opacity: 0.75;
    color: inherit;
}

.st-about-art__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.st-about-art__cal-icon {
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.st-about-art__date {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-600);
}

.st-about-art__title {
    font-family: var(--font-heading);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1.2;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.st-about-art__excerpt {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-gray-700);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .st-about-art {
        padding: 70px 50px;
    }
    .st-about-art__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 860px) {
    .st-about-art {
        padding: 60px 32px;
    }
    .st-about-art__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .st-about-art__heading {
        font-size: clamp(36px, 9vw, 56px);
    }
    .st-about-art__img-wrap {
        max-width: 460px;
    }
}

@media (max-width: 560px) {
    .st-about-art {
        padding: 48px 20px;
    }
    .st-about-art__heading {
        font-size: clamp(32px, 10vw, 46px);
    }
    .st-about-art__item {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .st-about-art__title {
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    /* Section: 20px padding all sides, no extra */
    .st-about-art { padding: 20px !important; }

    /* Inner: single column */
    .st-about-art__inner {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Heading: smaller, full width */
    .st-about-art__heading {
        font-size: 26px !important;
        line-height: 1.1;
        width: 100%;
    }

    /* CTA btn: shorter height */
    .st-about-art__cta {
        padding: 6px 6px 6px 16px;
        font-size: 13px;
    }
    .st-about-art__cta-arrow { width: 28px; height: 28px; }

    /* Gap between btn and image: tight */
    .st-about-art__left { gap: 12px !important; }

    /* Image: wider, tighter gap to articles */
    .st-about-art__img-wrap {
        width: 100%;
        max-width: 100% !important;
        height: 340px;
        margin-bottom: 16px;
    }

    /* Articles list: no top padding */
    .st-about-art__right { padding-top: 0; }
    .st-about-art__item {
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    .st-about-art__title { font-size: 16px !important; }
    .st-about-art__excerpt { font-size: 13px; }
}

/* ============================================================
   ST Shipping: Cards
   ============================================================ */
.st-shipping-cards {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 80px 24px 100px;
}

.st-shipping-cards__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.st-shipping-cards__heading {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 62px);
    font-weight: var(--font-weight-extrabold);
    color: #344857;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 56px;
    line-height: 1.05;
}

.st-shipping-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card — glassy, top transparent → bottom warm orange tint */
.st-shipping-cards__card {
    position: relative;
    border-radius: 20px;
    border-left: none; /* replaced by ::before gradient */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(230, 160, 30, 0.07) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 1px rgba(200,200,200,0.18);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 28px 28px 34px;
    min-height: 320px;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Gradient left border: teal top → gold/orange bottom */
.st-shipping-cards__card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 20px 0 0 20px;
    background: linear-gradient(to bottom, #73dccf 0%, #d29c08 100%);
}

.st-shipping-cards__card:hover {
    transform: none;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 1px rgba(200,200,200,0.18);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.st-shipping-cards__card-body {
    flex: 1;
}

/* Badge */
.st-shipping-cards__badge {
    display: block;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4a4a4a;
    margin-bottom: 10px;
}

/* Title */
.st-shipping-cards__title {
    font-family: "Big Shoulders Display", var(--font-heading);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: var(--font-weight-extrabold);
    color: #344857;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 18px;
    line-height: 1.1;
    width: 100%;
    display: block;
}

/* Description */
.st-shipping-cards__desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.7;
    margin: 0;
}

/* Footer / price button */
.st-shipping-cards__footer {
    margin-top: 28px;
}

.st-shipping-cards__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease;
    cursor: default;
}

a.st-shipping-cards__btn {
    cursor: pointer;
}
a.st-shipping-cards__btn:hover {
    background: #333;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 900px) {
    .st-shipping-cards__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .st-shipping-cards {
        padding: 56px 20px 72px;
    }
    .st-shipping-cards__grid {
        grid-template-columns: 1fr;
    }
    .st-shipping-cards__card {
        min-height: auto;
    }
}

/* ============================================================
   Single Post: Kill GP right sidebar — our layout handles its own sidebar
   ============================================================ */
.single .is-right-sidebar.sidebar,
.single .is-left-sidebar.sidebar {
    display: none !important;
}
.single .content-area {
    width: 100% !important;
    max-width: 100% !important;
}
.single .site-content {
    overflow: visible;
}

/* ============================================================
   Single Post: Hero
   ============================================================ */
.st-post-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--gradient-hero-section);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 520px;
    padding-top: 104px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 0;
    position: relative;
}

.st-post-hero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 900px;
    padding: 40px 0 36px;
}

.st-post-hero__title {
    font-family: "Fondamento", serif;
    font-style: normal;
    font-size: clamp(32px, 5vw, 72px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 32px;
    letter-spacing: -0.01em;
}

/* Meta row */
.st-post-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.st-post-hero__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.st-post-hero__author {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.st-post-hero__date {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255,255,255,0.85);
}

.st-post-hero__dot {
    color: rgba(255,255,255,0.6);
    font-size: 18px;
}

.st-post-hero__read-time {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255,255,255,0.85);
}

/* Breadcrumb bar */
.st-post-hero__breadcrumbs-wrap {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.35);
    padding: 18px 24px;
    margin-top: 8px;
}

.st-post-hero__breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255,255,255,0.9);
}

.st-post-hero__bc-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: opacity 0.2s;
}
.st-post-hero__bc-link:hover { opacity: 1; text-decoration: underline; color: #fff; }
.st-post-hero__bc-bold { font-weight: 700; color: #ffffff; }

.st-post-hero__bc-sep {
    opacity: 0.6;
    font-size: 16px;
}

/* ── Post layout: content + sidebar ── */
.st-post-layout {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 56px 0 96px;
    box-sizing: border-box;
}

.st-post-layout__grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: start;
    box-sizing: border-box;
}

/* Left column: article */
.st-post-content {
    min-width: 0;
}

/* Featured image */
.st-post-content__featured-img {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 36px;
    aspect-ratio: 16 / 9;
}
.st-post-content__featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Post body typography */
.st-post-content__body {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #3a3a3a;
}
.st-post-content__body > p:first-child {
    font-size: 19px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.65;
}
.st-post-content__body h2,
.st-post-content__body h3,
.st-post-content__body h4 {
    font-family: "Big Shoulders Display", sans-serif;
    font-weight: 800;
    color: #344857;
    text-transform: uppercase;
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1.1;
}
.st-post-content__body h2 { font-size: clamp(22px, 2.4vw, 32px); }
.st-post-content__body h3 { font-size: clamp(18px, 2vw, 26px); }
.st-post-content__body p  { margin: 0 0 20px; }
.st-post-content__body a  { color: #73dccf; text-decoration: underline; }
.st-post-content__body img {
    max-width: 100%;
    border-radius: 12px;
    margin: 8px 0 20px;
}
.st-post-content__body ul,
.st-post-content__body ol { padding-left: 24px; margin-bottom: 20px; }
.st-post-content__body li { margin-bottom: 8px; }
.st-post-content__body blockquote {
    border-left: 4px solid #73dccf;
    padding: 16px 24px;
    margin: 28px 0;
    background: rgba(115,220,207,0.07);
    border-radius: 0 8px 8px 0;
    font-family: "Lora", Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: #444;
    line-height: 1.7;
}
.st-post-content__body blockquote cite,
.st-post-content__body blockquote p:last-child {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-style: normal;
    color: #888;
    font-family: var(--font-body);
}

/* ── Sidebar wrapper ── */
.st-post-sidebar {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── TOC widget ── */
.st-sidebar-toc {
    background: var(--color-white);
    border: 1px solid #e5e0d8;
    border-radius: 16px;
    padding: 24px 22px 20px;
}

.st-sidebar-toc__heading {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #344857;
    margin: 0 0 18px;
}

.st-sidebar-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-sidebar-toc__item {
    border-radius: 8px;
    transition: background 0.2s;
}

/* Active TOC item — light teal bg */
.st-sidebar-toc__item.is-active {
    background: linear-gradient(to right, rgba(115,220,207,0.15) 0%, rgba(210,156,8,0.07) 100%);
}

.st-sidebar-toc__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #4a4a4a;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s;
    border-radius: 8px;
}

.st-sidebar-toc__link::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #73dccf 0%, #d29c08 100%);
    flex-shrink: 0;
}

.st-sidebar-toc__item.is-active .st-sidebar-toc__link {
    color: #344857;
    font-weight: 700;
}

.st-sidebar-toc__link:hover { color: #344857; }

/* ── Recent Posts widget ── */
.st-sidebar-recent {
    background: var(--color-white);
    border: 1px solid #e5e0d8;
    border-radius: 16px;
    padding: 24px 22px 20px;
}

.st-sidebar-recent__heading {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #344857;
    margin: 0 0 18px;
}

.st-sidebar-recent__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-sidebar-recent__link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.st-sidebar-recent__thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f3f0;
}

.st-sidebar-recent__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-sidebar-recent__thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #f5f3f0;
}

.st-sidebar-recent__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.st-sidebar-recent__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: #344857;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.st-sidebar-recent__link:hover .st-sidebar-recent__title { color: #000; }

.st-sidebar-recent__meta {
    font-family: var(--font-body);
    font-size: 12px;
    color: #999;
}

/* Post layout responsive */
@media (max-width: 1100px) {
    .st-post-layout__grid {
        grid-template-columns: 1fr 300px;
        gap: 40px;
        padding: 0 28px;
    }
}
@media (max-width: 768px) {
    .st-post-hero {
        min-height: 380px;
        padding-top: 104px;
    }
    .st-post-hero__title {
        font-size: clamp(26px, 8vw, 48px);
        width: 100%;
    }
    .st-post-hero__meta {
        font-size: 12px;
        gap: 6px;
    }
    .st-post-hero__author,
    .st-post-hero__date,
    .st-post-hero__read-time {
        font-size: 12px !important;
    }
    .st-post-hero__avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .st-post-content__body {
        font-size: 14px;
        width: 100%;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }
    .st-post-content__body br {
        display: none;
    }
    .st-post-content__body > p:first-child {
        font-size: 15px;
    }
    .st-post-content__body h2 {
        font-size: 18px !important;
    }
    .st-post-content__body h3 {
        font-size: 16px !important;
    }
    .st-post-layout {
        padding: 40px 0 72px;
    }
    .st-post-layout__grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 40px;
    }
    .st-post-sidebar {
        display: none;
    }
}

/* ============================================================
   ST Blog: Posts Grid
   ============================================================ */
.st-blog-posts {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 64px 24px 96px;
}

.st-blog-posts__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header row */
.st-blog-posts__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    gap: 16px;
}

.st-blog-posts__heading {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 800;
    color: #344857;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.0;
}

.st-blog-posts__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: #344857;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.st-blog-posts__view-all:hover { color: #000000; }

/* 3-col grid */
.st-blog-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Card */
.st-blog-posts__card {
    background: var(--color-white);
    border-radius: 16px;
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.22s ease;
}
.st-blog-posts__card:hover {
    box-shadow: none;
}

/* Image */
.st-blog-posts__img-link { display: block; }

.st-blog-posts__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f5f3f0;
}

.st-blog-posts__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.st-blog-posts__card:hover .st-blog-posts__img {
    transform: scale(1.04);
}

.st-blog-posts__img-placeholder {
    width: 100%;
    height: 100%;
    background: #f5f3f0;
}

/* Body */
.st-blog-posts__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

/* Category badge */
.st-blog-posts__cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    width: fit-content;
}

/* Date */
.st-blog-posts__date {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-gray-500);
    display: block;
}

/* Title */
.st-blog-posts__title {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 4px 0 0;
}
.st-blog-posts__title a {
    color: #344857;
    text-decoration: none;
    transition: color 0.2s;
}
.st-blog-posts__title a:hover { color: #000000; }

/* Excerpt */
.st-blog-posts__excerpt {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.65;
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row: author + read time */
.st-blog-posts__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-100);
}

.st-blog-posts__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Gradient avatar circle with initial */
.st-blog-posts__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.st-blog-posts__author-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #344857;
}

.st-blog-posts__read-time {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-gray-500);
    white-space: nowrap;
}

.st-blog-posts__empty {
    text-align: center;
    color: var(--color-gray-500);
    padding: 48px 0;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
    .st-blog-posts__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .st-blog-posts {
        padding: 48px 20px 72px;
    }
    .st-blog-posts__inner {
        display: flex;
        flex-direction: column;
    }
    .st-blog-posts__heading {
        display: none;
    }
    .st-blog-posts__header {
        order: 2;
        justify-content: flex-end;
        margin-top: 20px;
        margin-bottom: 0;
    }
    .st-blog-posts__grid {
        order: 1;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .st-blog-posts__title {
        font-size: 14px !important;
        width: 100%;
    }
    .st-blog-posts__excerpt {
        font-size: 12px;
        width: 100%;
    }
}

/* ============================================================
   ST Blog: Category Filter
   ============================================================ */
.st-blog-filter {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 48px 24px 32px;
}

.st-blog-filter__heading {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #344857;
    margin: 0 0 16px;
    padding-left: calc((100% - 1200px) / 2);
}

/* Constrain pills to same max-width as inner content */
.st-blog-filter__pills {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Base pill */
.st-blog-filter__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border: 1.5px solid var(--color-gray-200);
    background: var(--color-white);
    color: #344857;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.st-blog-filter__pill:hover {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

/* Active pill — gradient fill */
.st-blog-filter__pill.is-active {
    background: linear-gradient(135deg, #73dccf 0%, #d29c08 100%);
    border-color: transparent;
    color: #ffffff;
    font-weight: 600;
}

.st-blog-filter__pill.is-active:hover {
    color: #ffffff;
    border-color: transparent;
}

/* Responsive */
@media (max-width: 768px) {
    .st-blog-filter {
        padding: 36px 20px 24px;
    }
    .st-blog-filter__heading {
        padding-left: 0;
    }
    .st-blog-filter__pill {
        font-size: 14px;
        padding: 9px 18px;
    }
}

/* ============================================================
   ST Return: Policy Cards (Returns + Exchange)
   ============================================================ */
.st-re {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 80px 24px 100px;
}

.st-re__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}

/* ── Base card ── */
.st-re__card {
    border-radius: 20px;
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Light card — orange bottom → green top, very light */
.st-re__card--light {
    background: linear-gradient(to bottom, rgba(115, 220, 207, 0.18) 0%, rgba(230, 160, 30, 0.12) 100%);
}

/* Dark card — near black */
.st-re__card--dark {
    background: #111111;
}

/* ── Badge ── */
.st-re__badge {
    display: block;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.st-re__card--light .st-re__badge { color: #4a4a4a; }
.st-re__card--dark  .st-re__badge { color: rgba(255,255,255,0.55); }

/* ── Heading ── */
.st-re__heading {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(24px, 2.6vw, 40px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 28px;
    line-height: 1.05;
}
.st-re__card--light .st-re__heading { color: #344857; }
.st-re__card--dark  .st-re__heading { color: #ffffff; }

/* ── Bullet list ── */
.st-re__list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-re__item {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    padding-left: 22px;
    position: relative;
}

/* Bullet dot */
.st-re__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Light card — gradient teal→gold dot */
.st-re__list--light .st-re__item { color: #344857; }
.st-re__list--light .st-re__item::before {
    background: linear-gradient(135deg, #73dccf 0%, #d29c08 100%);
}

/* Dark card — white dot */
.st-re__list--dark .st-re__item { color: rgba(255,255,255,0.88); }
.st-re__list--dark .st-re__item::before {
    background: #ffffff;
}

/* Bold text within items */
.st-re__item strong {
    font-weight: 700;
}
.st-re__list--light .st-re__item strong { color: #344857; }
.st-re__list--dark  .st-re__item strong { color: #ffffff; }

/* ── Note box ── */
.st-re__note {
    margin-top: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 16px 18px;
    border-left: 3.5px solid transparent;
    /* gradient left border trick */
    background-clip: padding-box;
    position: relative;
}

.st-re__note::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(to bottom, #73dccf 0%, #d29c08 100%);
}

/* Light note bg */
.st-re__card--light .st-re__note {
    background: rgba(115, 220, 207, 0.12);
}

/* Dark note bg */
.st-re__note--dark {
    background: rgba(255, 255, 255, 0.07) !important;
}

.st-re__note-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.st-re__note-text {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.st-re__card--light .st-re__note-text { color: #4a4a4a; }
.st-re__card--dark  .st-re__note-text { color: rgba(255,255,255,0.65); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .st-re {
        padding: 56px 20px 72px;
    }
    .st-re__inner {
        grid-template-columns: 1fr;
    }
    .st-re__card {
        padding: 24px 20px 20px;
    }
    .st-re__badge {
        font-size: 10px;
        margin-bottom: 6px;
    }
    .st-re__heading {
        font-size: 20px !important;
        margin-bottom: 16px;
        width: 100%;
    }
    .st-re__list {
        gap: 8px;
        margin-bottom: 16px;
    }
    .st-re__item {
        font-size: 13px;
    }
    .st-re__note {
        padding: 12px 14px;
    }
    .st-re__note-text {
        font-size: 12px;
    }
}

/* ============================================================
   ST Return: Policy Steps
   ============================================================ */
.st-return-policy {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 80px 24px 100px;
}

.st-return-policy__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.st-return-policy__heading {
    font-family: "Big Shoulders Display", var(--font-heading);
    font-size: clamp(32px, 4.5vw, 68px);
    font-weight: var(--font-weight-extrabold);
    color: #344857;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 64px;
    line-height: 1.0;
}

/* Timeline row */
.st-return-policy__timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

/* Each step takes equal width */
.st-return-policy__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Circle + line wrapper — keeps line at circle vertical center */
.st-return-policy__circle-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

/* Gradient connector line — stretches from center of this step to center of next */
.st-return-policy__line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #73dccf 0%, #d29c08 100%);
    z-index: 0;
}

/* Gradient circle */
.st-return-policy__circle {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #73dccf 0%, #d29c08 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(115, 220, 207, 0.3);
}

.st-return-policy__num {
    font-family: "Big Shoulders Display", var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

/* Step label */
.st-return-policy__label {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #344857;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
    line-height: 1.2;
}

/* Step description */
.st-return-policy__desc {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.65;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

/* Responsive — PNG layout: circle left, text right, vertical line between circles */
@media (max-width: 768px) {
    /* Section */
    .st-return-policy { padding: 40px 20px 60px !important; }

    /* Heading: smaller, center, full width */
    .st-return-policy__heading {
        font-size: clamp(22px, 7vw, 34px) !important;
        margin-bottom: 36px;
        text-align: center !important;
        width: 100%;
    }

    /* Timeline: vertical column */
    .st-return-policy__timeline {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* Each step: 2-col grid */
    .st-return-policy__step {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 20px;
        align-items: start;
        text-align: left;
        width: 100%;
        max-width: 100%;
    }

    /* Circle wrap: spans all rows, flex column */
    .st-return-policy__circle-wrap {
        grid-column: 1;
        grid-row: 1 / 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 56px;
        position: static;
    }

    .st-return-policy__circle { order: 1; width: 56px; height: 56px; flex-shrink: 0; }
    .st-return-policy__num    { font-size: 22px; }

    /* Line: fixed 70px, same for all */
    .st-return-policy__line {
        order: 2;
        position: static !important;
        transform: none !important;
        width: 2px !important;
        height: 70px !important;
        flex: none;
        min-height: unset;
        background: linear-gradient(to bottom, #73dccf 0%, #d29c08 100%);
        margin-top: 4px;
    }

    .st-return-policy__label {
        grid-column: 2;
        margin-top: 10px;
        margin-bottom: 4px;
        font-size: 15px;
    }

    .st-return-policy__desc {
        grid-column: 2;
        max-width: 100%;
        font-size: 13px;
        padding-bottom: 0;
    }

    /* Uniform step height so lines align */
    .st-return-policy__step { min-height: 130px; }
    .st-return-policy__step--last { min-height: auto; }
}

/* ============================================================
   ST Shipping: FAQ
   ============================================================ */
.st-shipping-faq {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 72px 24px 96px;
}

.st-shipping-faq__inner {
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .st-shipping-faq { padding-top: 28px !important; }
    .st-shipping-faq__heading {
        font-size: 22px !important;
        text-align: center !important;
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100%;
    }
}

.st-shipping-faq__heading {
    font-family: "Big Shoulders Display", var(--font-heading);
    font-size: clamp(26px, 3vw, 48px);
    font-weight: var(--font-weight-extrabold);
    color: #344857;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 40px;
    line-height: 1.05;
    text-align: left;
    margin-left: -50px;
}

.st-shipping-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Item */
.st-shipping-faq__item {
    border-bottom: 1px solid var(--color-gray-200);
}

/* Open: card bg */
.st-shipping-faq__item.is-open {
    background: #f6f6f6;
    border-radius: 12px;
    border-bottom: none;
    margin-bottom: 2px;
    padding: 4px 20px 0;
}

.st-shipping-faq__item.is-open + .st-shipping-faq__item {
    border-top: 1px solid var(--color-gray-200);
}

/* Toggle row */
.st-shipping-faq__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.st-shipping-faq__toggle:hover,
.st-shipping-faq__toggle:focus,
.st-shipping-faq__toggle:active { background: transparent; outline: none; box-shadow: none; }

.st-shipping-faq__question {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: #344857;
    line-height: 1.35;
    pointer-events: none;
}

/* Circle icon — closed: white bg, gray border, gray icon */
.st-shipping-faq__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-300);
    color: var(--color-gray-400);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

/* Open: solid gradient fill, white icon, no border */
.st-shipping-faq__item.is-open .st-shipping-faq__icon {
    background: linear-gradient(135deg, #73dccf 0%, #d29c08 100%);
    border-color: transparent;
    color: #ffffff;
}

.st-shipping-faq__icon-plus  { display: block; }
.st-shipping-faq__icon-minus { display: none; }
.st-shipping-faq__item.is-open .st-shipping-faq__icon-plus  { display: none; }
.st-shipping-faq__item.is-open .st-shipping-faq__icon-minus { display: block; }

/* Panel — smooth max-height transition */
.st-shipping-faq__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding-bottom 0.35s ease;
    padding-bottom: 0;
}

.st-shipping-faq__item.is-open .st-shipping-faq__panel {
    max-height: 600px;
    padding-bottom: 24px;
}

.st-shipping-faq__answer {
    font-family: var(--font-body);
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.75;
    margin: 0;
    max-width: 900px;
}

/* Responsive */
@media (max-width: 768px) {
    .st-shipping-faq {
        padding: 56px 20px 72px;
    }
    .st-shipping-faq__question {
        font-size: 16px;
    }
    .st-shipping-faq__icon {
        width: 38px;
        height: 38px;
    }
}

/* ============================================================
   ST FAQ: Marquee
   ============================================================ */
.st-faq-marquee {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-white);
    padding: 48px 0 64px;
    overflow: hidden;
}

.st-faq-marquee__label {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    margin: 0 0 28px;
}

/* Fade edges */
.st-faq-marquee__track-wrap {
    position: relative;
    overflow: hidden;
}
.st-faq-marquee__track-wrap::before,
.st-faq-marquee__track-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.st-faq-marquee__track-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--color-white) 0%, transparent 100%);
}
.st-faq-marquee__track-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--color-white) 0%, transparent 100%);
}

@keyframes st-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.st-faq-marquee__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
    width: max-content;
    animation: st-marquee-scroll var(--st-mq-speed, 30s) linear infinite;
}

/* Pause on hover */
.st-faq-marquee__track-wrap:hover .st-faq-marquee__track {
    animation-play-state: paused;
}

.st-faq-marquee__item {
    flex-shrink: 0;
}

.st-faq-marquee__img {
    width: 260px;
    height: 340px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.st-faq-marquee__item:hover .st-faq-marquee__img {
    transform: scale(1.03);
    box-shadow: 0 12px 36px rgba(0,0,0,0.13);
}

@media (max-width: 768px) {
    .st-faq-marquee__img {
        width: 180px;
        height: 240px;
    }
}

/* ============================================================
   ST FAQ: Hero
   ============================================================ */
.st-faq-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--gradient-hero-section);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 580px;
    position: relative;
    padding-top: 104px;
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
}

.st-faq-hero__inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}

.st-faq-hero__heading {
    font-family: var(--font-decorative);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1;
    margin: 0;
    text-align: center;
    letter-spacing: 0.02em;
}

.st-faq-hero__breadcrumbs-wrap {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 18px 24px;
    margin-top: 40px;
}

.st-faq-hero__breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-white);
}

.st-faq-hero__bc-link {
    color: var(--color-white);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.st-faq-hero__bc-link:hover { opacity: 1; text-decoration: underline; }

.st-faq-hero__bc-sep {
    opacity: 0.7;
    font-size: 16px;
}

.st-faq-hero__bc-current {
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .st-faq-hero {
        min-height: 400px;
        padding-top: 104px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 0;
    }
    .st-faq-hero__heading {
        font-size: 64px !important;
    }
}

@media (max-width: 480px) {
    .st-faq-hero__heading {
        font-size: 48px !important;
    }
}

/* ============================================================
   GeneratePress overrides — keep GP layout intact
   ============================================================ */
.site-header,
.main-navigation {
    font-family: var(--font-body);
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation {
    padding: 0 !important;
}

html {
    overflow-x: clip;
    max-width: 100%;
}
html,
body {
    margin-right: 0 !important;
    overflow-x: hidden;
}

/* Single post — full width layout */
.single .content-area {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.single .inside-article {
    padding: 0 !important;
}

/* Hide GP's default entry elements — we render our own in single.php */
.single .entry-header,
.single .entry-footer,
.single .post-navigation,
.single .entry-content {
    display: none !important;
}

/* Kill GP's extra spacing above/below on single + all custom pages */
.single #page,
.single #main,
.single .site-main,
.single #primary,
.single .content-area,
.single .grid-container,
.single .inside-article,
.page .inside-article,
.page .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Kill any gap before footer — all pages */
.site-footer,
#colophon,
.footer-widgets {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Zero all GP wrapper bottom spacing globally */
#page,
#content,
#primary,
#main,
.site-main,
.content-area,
.inside-article,
.entry-content,
.grid-container,
.separate-containers .inside-article {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* GP grid-container — remove padding on ALL pages (full-bleed layout) */
.grid-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Prevent any wrapper bg color bleeding through between full-bleed sections */
.single body,
.single #page,
.single #content {
    background-color: #ffffff !important;
}

/* ============================================================
   404 Page
   ============================================================ */
.error404 .content-area,
.error404 .inside-article,
.error404 .grid-container,
.error404 #primary,
.error404 #main,
.error404 .site-main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.error404 .content-area,
.error404 #primary,
.error404 #main,
.error404 .site-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.error404 .st-404 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.st-404 {
    position: relative;
    min-height: calc(100vh - 116px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    overflow: hidden;
    background: #ffffff;
}

/* Watermark "404" — gradient */
.st-404__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(200px, 30vw, 360px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    background: linear-gradient(135deg, rgba(115,220,207,0.25) 0%, rgba(210,156,8,0.18) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Anchor icon circle */
.st-404__icon-wrap {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #73dccf 0%, #d29c08 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
    flex-shrink: 0;
}

.st-404__anchor {
    width: 40px;
    height: 40px;
}

.st-404__icon-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
}

/* Heading */
.st-404__heading {
    position: relative;
    z-index: 1;
    font-family: "Fondamento", serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    color: #1a2e3b;
    line-height: 1.25;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}

/* Subtext */
.st-404__desc {
    position: relative;
    z-index: 1;
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
    margin: 0 0 44px;
    max-width: 520px;
}

/* Buttons */
.st-404__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.st-404__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 100px;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
}

.st-404__btn--primary {
    background: linear-gradient(135deg, #73dccf 0%, #d29c08 100%);
    color: #ffffff;
    border: none;
}

.st-404__btn--primary:hover {
    opacity: 0.88;
    color: #ffffff;
}

.st-404__btn--outline {
    background: transparent;
    color: #1a2e3b;
    border: 1.5px solid #1a2e3b;
}

.st-404__btn--outline:hover {
    background: #1a2e3b;
    color: #ffffff;
}

@media (max-width: 768px) {
    .st-404 {
        padding: 60px 20px;
        min-height: calc(100svh - 80px);
    }
    .st-404__watermark {
        font-size: clamp(120px, 40vw, 200px);
    }
    .st-404__icon-wrap {
        width: 72px;
        height: 72px;
        margin-bottom: 24px;
    }
    .st-404__heading {
        font-size: clamp(28px, 8vw, 44px);
        margin-bottom: 16px;
    }
    .st-404__desc {
        font-size: 14px;
        margin-bottom: 32px;
        max-width: 100%;
    }
    .st-404__desc br {
        display: none;
    }
    .st-404__actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .st-404__btn {
        width: 100%;
        padding: 13px 24px;
        font-size: 13px;
    }
}

/* ============================================================
   ST Impact: Stats
   ============================================================ */
.st-impact-stats {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #f5f3ee;
}

.st-impact-stats__grid {
    display: grid;
    width: 100%;
}

.st-impact-stats__grid--4 { grid-template-columns: repeat(4, 1fr); }
.st-impact-stats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.st-impact-stats__grid--2 { grid-template-columns: repeat(2, 1fr); }
.st-impact-stats__grid--5 { grid-template-columns: repeat(5, 1fr); }
.st-impact-stats__grid--6 { grid-template-columns: repeat(6, 1fr); }

.st-impact-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 32px;
    gap: 12px;
    position: relative;
}

.st-impact-stats__item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80px;
    background: #ddd8cf;
}

.st-impact-stats__item:last-child::after {
    display: none;
}

.st-impact-stats__number {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 800;
    color: #0d0d0d;
    line-height: 1;
    display: block;
}

.st-impact-stats__label {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #777;
    margin: 0;
    max-width: 180px;
    text-align: center;
}

@media (max-width: 768px) {
    .st-impact-stats__grid--2,
    .st-impact-stats__grid--3,
    .st-impact-stats__grid--4,
    .st-impact-stats__grid--5,
    .st-impact-stats__grid--6 {
        grid-template-columns: 1fr;
    }
    .st-impact-stats__item {
        padding: 28px 20px;
        border: none;
        gap: 6px;
    }
    .st-impact-stats__item::after {
        display: none;
    }
    .st-impact-stats__number {
        font-size: clamp(40px, 13vw, 60px);
    }
    .st-impact-stats__label {
        font-size: 13px;
        max-width: 240px;
    }
}

/* ============================================================
   Reviews — centered variant (Our Impact page)
   ============================================================ */
.st-reviews--centered .st-reviews__header {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}

.st-reviews--centered .st-reviews__heading {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 800;
    text-transform: uppercase;
    color: #0d0d0d;
    max-width: 100%;
}

.st-reviews--centered .st-reviews__desc {
    text-align: center;
    font-size: 16px;
    color: #666;
}

@media (max-width: 768px) {
    .st-reviews--centered .st-reviews__marquee {
        padding: 0 20px;
    }
    .st-reviews--centered .st-reviews__card {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* ============================================================
   ST: Core Values
   ============================================================ */
.st-core-values {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #ffffff;
}

/* Header — 2-col: heading left, subtext bottom-right */
.st-core-values__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 24px;
    width: 100%;
    padding: 72px 80px 56px;
    box-sizing: border-box;
}

.st-core-values__main-heading {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 800;
    text-transform: uppercase;
    color: #0d0d0d;
    line-height: 1.0;
    margin: 0;
    letter-spacing: -0.01em;
}

.st-core-values__subtext {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    text-align: right;
    margin: 0;
}

/* List */
.st-core-values__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Row */
.st-core-values__item {
    border-top: 1px solid #e8e8e8;
    background: #ffffff;
    width: 100%;
}

.st-core-values__item--highlight {
    background: linear-gradient(to bottom, rgba(115,220,207,0.12) 0%, rgba(210,156,8,0.08) 100%);
}

.st-core-values__item:last-child {
    border-bottom: 1px solid #e8e8e8;
}

.st-core-values__item-inner {
    display: grid;
    grid-template-columns: 80px 1fr 260px;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    padding: 44px 80px;
    box-sizing: border-box;
}

/* Col 1: number aligned with title top, arrow at bottom */
.st-core-values__num-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 2px;
}

.st-core-values__num {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #aaa;
    letter-spacing: 0.04em;
}

.st-core-values__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #555;
    text-decoration: none;
    border: 1.5px solid #bbb;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.st-core-values__arrow svg {
    display: block;
    flex-shrink: 0;
}

.st-core-values__arrow:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Col 2: title + desc */
.st-core-values__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    align-self: start;
}

.st-core-values__title {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(19px, 1.8vw, 23px);
    font-weight: 800;
    text-transform: uppercase;
    color: #344857;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.15;
}

.st-core-values__desc {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
    word-break: break-word;
}

/* Col 3: image */
.st-core-values__img-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    align-self: center;
}

.st-core-values__img-inner {
    width: 240px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.st-core-values__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 900px) {
    .st-core-values__header {
        grid-template-columns: 1fr;
        padding: 48px 20px 36px;
    }
    .st-core-values__subtext {
        text-align: left;
    }
    .st-core-values__item-inner {
        grid-template-columns: 56px 1fr;
        padding: 32px 20px;
    }
    .st-core-values__img-wrap {
        display: none;
    }
}

@media (max-width: 768px) {
    .st-core-values__header {
        padding: 36px 20px 24px;
    }
    .st-core-values__main-heading {
        font-size: 24px !important;
        width: 100%;
    }
    .st-core-values__subtext {
        font-size: 13px;
        width: 100%;
    }
    .st-core-values__item-inner {
        grid-template-columns: 36px 1fr;
        padding: 24px 20px;
        gap: 16px;
    }
    .st-core-values__arrow {
        width: 22px;
        height: 22px;
    }
    .st-core-values__arrow svg {
        width: 10px;
        height: 10px;
    }
    .st-core-values__title {
        font-size: 16px !important;
        width: 100%;
    }
    .st-core-values__desc {
        font-size: 13px;
        width: 100%;
    }
}

/* ============================================================
   ST Impact: Split Rows
   ============================================================ */
.st-impact-rows {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-top: 80px;
    padding-bottom: 40px;
}

.st-impact-rows__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
}

/* Image column */
.st-impact-rows__img {
    overflow: hidden;
    position: relative;
}

.st-impact-rows__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Content column */
.st-impact-rows__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 88px;
    background: #ffffff;
    min-width: 0;
}

/* Label */
.st-impact-rows__label {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 18px;
}

/* Heading */
.st-impact-rows__heading {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(24px, 2.5vw, 43px);
    font-weight: 800;
    text-transform: uppercase;
    color: #0d0d0d;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Description */
.st-impact-rows__desc {
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 32px;
    width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Link */
.st-impact-rows__link {
    display: inline-block;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0d0d0d;
    text-decoration: none;
    border-bottom: 1.5px solid #0d0d0d;
    padding-bottom: 3px;
    transition: color 0.2s, border-color 0.2s;
    align-self: flex-start;
}

.st-impact-rows__link:hover {
    color: #000;
    border-color: #000;
}

/* Responsive */
@media (max-width: 900px) {
    .st-impact-rows__row {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .st-impact-rows__img {
        height: 360px;
        order: 0 !important;
    }

    .st-impact-rows__content {
        padding: 52px 28px;
        order: 1 !important;
    }

    /* On mobile both rows: image always on top */
    .st-impact-rows__row--img-left .st-impact-rows__img,
    .st-impact-rows__row--img-right .st-impact-rows__img {
        order: 0;
    }
    .st-impact-rows__row--img-left .st-impact-rows__content,
    .st-impact-rows__row--img-right .st-impact-rows__content {
        order: 1;
    }
}

@media (max-width: 768px) {
    .st-impact-rows__img {
        height: 280px;
    }
    .st-impact-rows__content {
        padding: 32px 20px;
    }
    .st-impact-rows__heading {
        font-size: 22px !important;
        width: 100%;
        margin-bottom: 12px;
    }
    .st-impact-rows__desc {
        font-size: 13px;
        width: 100%;
        margin-bottom: 20px;
    }
    .st-impact-rows__link {
        font-size: 11px;
    }
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */

.single-product .site-content,
.single-product #primary,
.single-product .content-area,
.single-product .inside-article,
.single-product .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
}

.st-product {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #fff;
    padding-bottom: 80px;
}

/* Header */
.st-product__header {
    padding: 120px 60px 0;
    border-bottom: 1px solid #eeeeee;
}
.st-product__title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 800;
    color: #000;
    margin: 0 0 28px;
    line-height: 1.1;
}
.st-product__tab-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 20px;
}
.st-product__tab-btn {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: #909090;
    background: none !important;
    border: 1.5px solid transparent;
    border-radius: 99px;
    padding: 9px 22px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.st-product__tab-btn sup {
    font-size: 10px;
    margin-left: 2px;
    vertical-align: super;
}
.st-product__tab-btn.is-active {
    color: #000;
    font-weight: 600;
    border-color: #000;
}
.st-product__tab-btn:not(.is-active):hover {
    border-color: #000;
    color: #252525;
    background: none !important;
}

/* Panels */
.st-product__panel { display: none; padding: 48px 60px; }
.st-product__panel.is-active { display: block; }

/* 2-col grid */
.st-product__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: start;
}

/* Gallery */
.st-product__gallery { display: flex; flex-direction: column; gap: 14px; }

.st-product__main-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 4/5;
    max-height: 480px;
}
.st-product__slide {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.st-product__slide.is-active { display: block; }
.st-product__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.st-product__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1.5px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.18s, border-color 0.18s;
}
.st-product__nav-btn { transition: background 0.18s, border-color 0.18s; }
.st-product__nav-btn::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2.5px solid #111;
    border-right: 2.5px solid #111;
    transition: border-color 0.18s;
}
.st-product__nav-btn--prev::after { transform: rotate(-135deg) translateY(-2px); }
.st-product__nav-btn--next::after { transform: rotate(45deg) translateY(-2px); }
.st-product__nav-btn:hover { background: #000; border-color: #000; }
.st-product__nav-btn:hover::after { border-color: #fff; }
.st-product__nav-btn--prev { left: 12px; }
.st-product__nav-btn--next { right: 12px; }

.st-product__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.st-product__thumb-btn {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #f5f5f5;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s;
    flex-shrink: 0;
}
.st-product__thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-product__thumb-btn.is-active { border-color: #252525; }

/* Summary */
.st-product__summary { display: flex; flex-direction: column; gap: 24px; }

.st-product__top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.st-product__prices { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-product__sale-price { font-size: 26px; font-weight: 700; color: #d29c08; }
.st-product__sale-price .woocommerce-Price-amount { color: inherit; }
.st-product__reg-price { font-size: 18px; color: #909090; text-decoration: line-through; }
.st-product__reg-price .woocommerce-Price-amount { color: inherit; }
.st-product__disc-badge { font-size: 12px; font-weight: 700; background: #000; color: #fff; border-radius: 99px; padding: 4px 10px; }

.st-product__rating-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.st-product__stars { display: flex; gap: 2px; font-size: 18px; line-height: 1; }
.st-product__review-count { font-size: 12px; color: #909090; text-decoration: none; }
.st-product__review-count:hover { color: #252525; }

/* WooCommerce form overrides */
.st-product__form-wrap .variations {
    display: block;
    width: 100%;
    border: none !important;
    margin: 0;
    border-collapse: collapse;
}
.st-product__form-wrap .variations tbody,
.st-product__form-wrap .variations tr { display: block; }
.st-product__form-wrap .variations tr { margin-bottom: 24px; }
.st-product__form-wrap .variations td,
.st-product__form-wrap .variations th {
    display: block;
    border: none !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.st-product__form-wrap .variations td.label {
    font-size: 15px;
    font-weight: 700;
    color: #252525;
    margin-bottom: 12px;
}
.st-product__form-wrap .variations td.label label { margin: 0; }
.st-product__form-wrap .variations td.value {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* WC select stays in DOM for JS filtering but invisible */
.st-product__form-wrap .variations td.value select.st-hidden-select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.st-product__form-wrap .variations select {
    height: 46px;
    border: 1.5px solid #d1d5db;
    border-radius: 99px;
    padding: 0 44px 0 20px;
    font-size: 14px;
    color: #252525;
    background: #fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23252525' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) center;
    appearance: none;
    -webkit-appearance: none;
    min-width: 200px;
    cursor: pointer;
    box-shadow: none;
}
.st-product__form-wrap .variations select:focus {
    outline: none;
    border-color: #252525;
}
.st-product__form-wrap .reset_variations { font-size: 12px; color: #909090; text-decoration: underline; }

.st-product__form-wrap .single_variation_wrap { margin-top: 0; }
.st-product__form-wrap .woocommerce-variation-price { display: none; }
.st-product__form-wrap .woocommerce-variation-description p { font-size: 13px; color: #616161; margin-bottom: 8px; }

/* Qty + buttons row */
.st-product__form-wrap .woocommerce-variation-add-to-cart,
.st-product__form-wrap form.cart:not(.grouped_form) {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}

/* Quantity */
.st-product__form-wrap .quantity {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    height: 52px;
    flex-shrink: 0;
}
.st-product__form-wrap .qty {
    width: 56px;
    height: 100%;
    border: none !important;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #252525;
    background: #fff;
    padding: 0;
    -moz-appearance: textfield;
}
.st-product__form-wrap .qty::-webkit-inner-spin-button,
.st-product__form-wrap .qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.st-product__qty-btn {
    width: 36px;
    height: 100%;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #252525;
    line-height: 1;
    flex-shrink: 0;
}
.st-product__qty-btn:hover { background: #eeeeee; }

/* Add to cart button */
.st-product__form-wrap .single_add_to_cart_button.button {
    height: 52px !important;
    padding: 0 28px !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 99px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.2s !important;
    flex-shrink: 0;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.st-product__form-wrap .single_add_to_cart_button.button::before {
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 01-8 0' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.st-product__form-wrap .single_add_to_cart_button.button:hover {
    background: var(--gradient-hero-section) !important;
}

/* Favourite button */
.st-product__fav-btn {
    height: 52px;
    padding: 0 24px;
    background: #fff;
    color: #252525;
    border: 1.5px solid #e5e5e5;
    border-radius: 99px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s;
    flex-shrink: 0;
}
.st-product__fav-btn:hover { border-color: #252525; }
.st-product__fav-btn svg { stroke: #252525; fill: none; transition: fill 0.18s, stroke 0.18s; }
.st-product__fav-btn.is-fav { border-color: #e53e3e; color: #e53e3e; }
.st-product__fav-btn.is-fav svg { fill: #e53e3e; stroke: #e53e3e; }
.st-product__fav-btn:disabled { opacity: 0.6; cursor: wait; }

/* Color swatches */
.st-color-swatches { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.15s, transform 0.15s;
    position: relative;
}
.st-color-swatch:hover {
    transform: scale(1.1);
}
.st-color-swatch.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
    transform: scale(1.08);
}
.st-color-swatch-text {
    font-size: 14px;
    color: #424242;
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s;
}
.st-color-swatch-text.is-active {
    font-weight: 700;
    color: #000;
    border-bottom-color: #000;
}

/* Unavailable swatch — diagonal strikethrough line */
.st-color-swatch.is-unavailable {
    opacity: 0.45;
    cursor: not-allowed;
    position: relative;
}
.st-color-swatch.is-unavailable::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        transparent calc(50% - 1px),
        rgba(255,255,255,0.85) calc(50% - 1px),
        rgba(255,255,255,0.85) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
}
.st-color-swatch-text.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Size chart link */
.st-product__size-chart {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #252525;
    text-decoration: none;
    white-space: nowrap;
}
.st-product__size-chart:hover { text-decoration: underline; }

/* Section headings */
.st-product__section-hd { font-size: 16px; font-weight: 700; color: #252525; margin: 0 0 10px; }

/* Delivery */
.st-product__delivery-note { font-size: 14px; color: #616161; margin: 0 0 14px; line-height: 1.6; }
.st-product__delivery-tbl { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid #eeeeee; border-radius: 8px; overflow: hidden; }
.st-product__delivery-tbl th { text-align: left; font-size: 11px; font-weight: 600; color: #909090; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 16px; border-bottom: 1px solid #eeeeee; background: #fafafa; }
.st-product__delivery-tbl td { padding: 13px 16px; color: #424242; border-bottom: 1px solid #f0f0f0; }
.st-product__delivery-tbl tbody tr:last-child td { border-bottom: none; }

/* Return */
.st-product__return p { font-size: 14px; color: #616161; line-height: 1.6; margin: 0 0 8px; }
.st-product__return-list { list-style: disc; padding-left: 18px; margin: 0; }
.st-product__return-list li { font-size: 14px; color: #616161; margin-bottom: 4px; }

/* Share */
.st-product__share { display: flex; align-items: center; gap: 14px; }
.st-product__share-label { font-size: 14px; font-weight: 600; color: #252525; }
.st-product__share-icon { color: #616161; display: flex; align-items: center; transition: color 0.15s; }
.st-product__share-icon:hover { color: #000; }

/* Payment */
.st-product__payment { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.st-product__pay-badge { border: 1.5px solid #e5e5e5; border-radius: 8px; padding: 6px 12px; display: flex; align-items: center; justify-content: center; background: #fff; }

/* Product details tab */
.st-product__desc { max-width: 780px; font-size: 15px; line-height: 1.7; color: #424242; }

/* Responsive */
@media (max-width: 900px) {
    .st-product__header { padding: 32px 20px 0; }
    .st-product__panel { padding: 28px 20px; }
    .st-product__title { font-size: 32px; }
    .st-product__grid { grid-template-columns: 1fr; gap: 28px; }
    .st-product__rating-wrap { align-items: flex-start; }
}
@media (max-width: 480px) {
    .st-product__title { font-size: 22px; line-height: 1.2; margin-bottom: 18px; }

    /* Tabs — smaller font, tighter padding, fit all 3 on screen */
    .st-product__tab-nav {
        gap: 6px;
        padding-bottom: 14px;
        flex-wrap: nowrap;
    }
    .st-product__tab-btn {
        font-size: 12px;
        padding: 8px 14px;
        white-space: nowrap;
        flex: 1;
        text-align: center;
    }
    .st-product__tab-btn sup { font-size: 9px; }

    .st-product__form-wrap .woocommerce-variation-add-to-cart,
    .st-product__form-wrap form.cart:not(.grouped_form) { flex-direction: column; align-items: stretch; }
    .st-product__form-wrap .single_add_to_cart_button.button,
    .st-product__fav-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   SHOP PAGE — archive-product.php
   ============================================================ */

/* Hide GP widget sidebar on all WooCommerce pages */
.woocommerce-page #sidebar,
.woocommerce-page .widget-area,
.woocommerce-page aside.secondary {
    display: none !important;
}

/* Remove any black bg from shop sidebar category toggles */
.st-shop-sidebar__cat-toggle:focus,
.st-shop-sidebar__cat-toggle:active,
.st-shop-sidebar__cat-toggle:focus-visible {
    background: linear-gradient(to bottom, rgba(115,220,207,0.25) 0%, rgba(210,156,8,0.18) 100%) !important;
    outline: none;
}
.st-shop-sidebar a:hover,
.st-shop-sidebar a:focus,
.st-shop-sidebar button:hover,
.st-shop-sidebar button:focus {
    background-color: transparent !important;
    color: inherit;
}

/* ============================================================
   FAVOURITES PAGE
   ============================================================ */
/* ============================================================
   CART PAGE
   ============================================================ */
.woocommerce-cart .site-content,
.woocommerce-cart #primary,
.woocommerce-cart .content-area,
.woocommerce-cart .inside-article,
.woocommerce-cart .entry-content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; display: block !important; }

.woocommerce-cart .site-content { padding-top: 0 !important; }

.st-cart {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 120px 60px 100px;
    align-items: start;
}

/* ── Header ── */
.st-cart__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
}
.st-cart__title {
    font-size: 42px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0 0 4px;
    line-height: 1;
}
.st-cart__count { font-size: 14px; color: #6b7280; margin: 0; }
.st-cart__clear-all {
    font-size: 13px;
    color: #374151;
    text-decoration: underline;
    margin-top: 8px;
    white-space: nowrap;
    transition: color 0.18s;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.st-cart__clear-all:hover {
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
}

/* ── Items ── */
.st-cart__items { display: flex; flex-direction: column; }
.st-cart__item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: start;
}
.st-cart__item:first-child { border-top: 1px solid #f0f0f0; }

/* Image */
.st-cart__item-img {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
}
.st-cart__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Details */
.st-cart__item-brand { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; display: block; margin-bottom: 4px; }
.st-cart__item-name {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 10px;
    line-height: 1.2;
}
.st-cart__item-name a { color: #111; text-decoration: none; }
.st-cart__item-name a:hover { text-decoration: underline; }

/* Variation tags */
.st-cart__item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.st-cart__item-tag {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: #fff;
}

/* Qty row */
.st-cart__item-row { display: flex; align-items: center; gap: 16px; }
.st-cart__qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 99px;
    height: 40px;
    overflow: hidden;
}
.st-cart__qty-btn {
    width: 36px;
    height: 100%;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 300;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.st-cart__qty-btn:hover { background: #f3f4f6; }
.st-cart__qty-input {
    width: 48px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    background: none;
    -moz-appearance: textfield;
    outline: none;
}
.st-cart__qty-input::-webkit-inner-spin-button,
.st-cart__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.st-cart__remove {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s;
}
.st-cart__remove:hover { color: #ef4444; }

/* Price */
.st-cart__item-price { text-align: right; padding-top: 4px; min-width: 90px; }
.st-cart__item-subtotal { display: block; font-size: 22px; font-weight: 800; color: #111; }
.st-cart__item-subtotal .woocommerce-Price-amount { font-size: 22px; font-weight: 800; }
.st-cart__item-unit { display: block; font-size: 13px; color: #9ca3af; margin-top: 3px; }
.st-cart__item-unit .woocommerce-Price-amount { font-size: 13px; color: #9ca3af; }

/* ── Coupon ── */
.st-cart__coupon-wrap { margin-top: 28px; }
.st-cart__coupon-form {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    height: 56px;
    background: #fff;
}
.st-cart__coupon-input {
    flex: 1;
    height: 100%;
    border: none;
    padding: 0 20px;
    font-size: 14px;
    color: #374151;
    outline: none;
    background: transparent;
}
.st-cart__coupon-input::placeholder { color: #9ca3af; }
.st-cart__coupon-btn {
    height: 100%;
    padding: 0 24px;
    background: #111;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s;
    border-radius: 0 10px 10px 0;
}
.st-cart__coupon-btn:hover { opacity: 0.85; }

/* ── Sidebar ── */
.st-cart__sidebar { position: sticky; top: 100px; }
.st-cart__summary {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 24px;
}
.st-cart__summary-title {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 24px;
}
.st-cart__summary-rows { display: flex; flex-direction: column; gap: 14px; }
.st-cart__summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.st-cart__summary-label { color: #374151; }
.st-cart__summary-val { font-weight: 600; color: #111; }
.st-cart__summary-val--free { color: #0ea5e9; font-weight: 700; }
.st-cart__summary-val--discount { color: #22c55e; font-weight: 700; }
.st-cart__remove-coupon { color: #9ca3af; margin-left: 6px; font-size: 15px; text-decoration: none; }
.st-cart__remove-coupon:hover { color: #ef4444; }

.st-cart__summary-divider { height: 1px; background: #f0f0f0; margin: 20px 0; }

.st-cart__summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.st-cart__summary-total-label {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.st-cart__summary-total-val {
    font-size: 28px;
    font-weight: 900;
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.st-cart__summary-total-val .woocommerce-Price-amount {
    font-size: 28px;
    font-weight: 900;
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Checkout button */
/* fee row (e.g. Ocean Impact Donation) */
.st-cart__summary-val--fee { color: #d4a017; font-weight: 700; }

/* Checkout button */
.st-cart__checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    background: #111;
    color: #fff;
    border-radius: 99px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.3s;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.st-cart__checkout-btn:hover {
    background: var(--gradient-hero-section);
    color: #fff;
}
.st-cart__checkout-arrow { font-size: 18px; font-weight: 400; }

/* "or continue as" divider */
.st-cart__or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
}
.st-cart__or-divider::before,
.st-cart__or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.st-cart__or-text { font-size: 13px; color: #9ca3af; white-space: nowrap; }

/* Guest checkout button */
.st-cart__guest-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background: #fff;
    color: #111;
    border: 2px solid #e5e7eb;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.st-cart__guest-btn:hover {
    background: var(--gradient-hero-section);
    color: #fff;
    border-color: transparent;
}

/* ── Empty cart ── */
.woocommerce-cart .st-cart.st-cart--empty { grid-template-columns: 1fr; }
.st-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 0 80px;
    text-align: center;
    width: 100%;
}
.st-cart__empty-msg { font-size: 22px; font-weight: 700; color: #374151; margin: 0; }
.st-cart__shop-btn,
.woocommerce-cart .woocommerce-cart-form ~ * .return-to-shop .button,
.woocommerce-cart .return-to-shop .button,
.woocommerce-cart p.return-to-shop a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    padding: 0 32px !important;
    background: #111 !important;
    color: #fff !important;
    border-radius: 99px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    margin-top: 8px !important;
    transition: opacity 0.18s !important;
    border: none !important;
}
.st-cart__shop-btn:hover,
.woocommerce-cart p.return-to-shop a.button:hover { opacity: 0.8 !important; color: #fff !important; }

/* WC empty cart notice — center it */
.woocommerce-cart .cart-empty.woocommerce-info {
    text-align: center;
    justify-content: center;
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: 700;
    color: #374151;
    padding: 160px 0 10px;
}
.woocommerce-cart .return-to-shop {
    text-align: center;
    margin-top: 0;
    padding-bottom: 60px;
}
/* Gradient hover on Return to Shop */
.woocommerce-cart p.return-to-shop a.button:hover {
    background: var(--gradient-hero-section) !important;
    opacity: 1 !important;
}

/* ── WC notices inside cart ── */
/* Cart notices — hide "added to cart" messages on cart page itself */
.woocommerce-cart .woocommerce-notices-wrapper { display: none !important; }
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 10px;
    border-top: none;
    border: 1.5px solid #e5e7eb;
    background: #fafafa;
    font-size: 14px;
    color: #374151;
    list-style: none;
    margin-bottom: 0;
}
/* VIEW CART / action buttons inside notices */
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-message a.button {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    background: #111 !important;
    color: #fff !important;
    border-radius: 99px !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.woocommerce-cart .woocommerce-message .button:hover,
.woocommerce-cart .woocommerce-message a.button:hover {
    background: #333 !important;
    color: #fff !important;
}

/* Hide GP page title on cart */
.woocommerce-cart .entry-header,
.woocommerce-cart .page-title-wrap { display: none !important; }

.st-cart .woocommerce-message,
.st-cart .woocommerce-error,
.st-cart .woocommerce-info { margin: 0 0 20px; border-radius: 8px; }

/* ── Cart Responsive ── */

/* Tablet (≤900px): single column, sidebar below */
@media ( max-width: 900px ) {
    .st-cart {
        grid-template-columns: 1fr;
        padding: 100px 32px 80px;
        gap: 32px;
    }
    .st-cart__sidebar { position: static; }
    .st-cart__title { font-size: 32px; }
}

/* Mobile (≤640px): tighter layout */
@media ( max-width: 640px ) {
    .st-cart {
        padding: 90px 16px 60px;
        gap: 24px;
    }

    /* Header: title smaller, wrap if needed */
    .st-cart__header { align-items: center; gap: 12px; margin-bottom: 20px; }
    .st-cart__title { font-size: 26px; }
    .st-cart__count { font-size: 13px; }
    .st-cart__clear-all { font-size: 12px; padding: 6px 14px; }

    /* Cart item: image left, details+price right (2 col grid) — see second 640px block for explicit placement */
    .st-cart__item {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
        padding: 16px 0;
        gap: 12px 14px;
    }
    .st-cart__item-brand { font-size: 10px; }
    .st-cart__item-name { font-size: 14px; line-height: 1.4; }

    /* Tags wrap nicely */
    .st-cart__item-tags { gap: 4px; margin-bottom: 10px; }
    .st-cart__item-tag { font-size: 10px; padding: 3px 8px; }

    /* Bottom row: qty + remove + price — spread out */
    .st-cart__item-row {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }
    .st-cart__qty-wrap { gap: 0; }
    .st-cart__qty-btn { width: 30px; height: 30px; font-size: 14px; }
    .st-cart__qty-input { width: 36px; font-size: 14px; }
    .st-cart__remove { font-size: 12px; }

    /* Price */
    .st-cart__item-subtotal,
    .st-cart__item-subtotal .woocommerce-Price-amount { font-size: 17px; }
    .st-cart__item-unit,
    .st-cart__item-unit .woocommerce-Price-amount { font-size: 12px; }

    /* Coupon: stack vertically */
    .st-cart__coupon-form { flex-direction: column; gap: 10px; }
    .st-cart__coupon-input { width: 100%; }
    .st-cart__coupon-btn { width: 100%; justify-content: center; }

    /* Summary card */
    .st-cart__summary { padding: 20px 18px; border-radius: 16px; }
    .st-cart__summary-title { font-size: 18px; }
    .st-cart__summary-rows { gap: 12px; }
    .st-cart__summary-row { font-size: 13px; }

    /* Total row */
    .st-cart__summary-total-label { font-size: 15px; }
    .st-cart__summary-total-val,
    .st-cart__summary-total-val .woocommerce-Price-amount { font-size: 24px; }

    /* Checkout btn */
    .st-cart__checkout-btn { font-size: 13px; height: 52px; border-radius: 99px; }
    .st-cart__or-divider { margin: 14px 0; }
    .st-cart__guest-btn { font-size: 13px; height: 46px; }
}

/* Very small (≤380px) */
@media ( max-width: 380px ) {
    .st-cart { padding: 80px 12px 50px; }
    .st-cart__title { font-size: 22px; }
    .st-cart__item-img { width: 68px; height: 68px; }
    .st-cart__item-subtotal,
    .st-cart__item-subtotal .woocommerce-Price-amount { font-size: 15px; }
    .st-cart__checkout-btn { font-size: 12px; height: 48px; letter-spacing: 0.04em; }
}

/* ── Cart grid ordering on mobile — coupon to bottom ── */
@media ( max-width: 900px ) {
    .st-cart {
        display: flex !important;
        flex-direction: column;
    }
    .st-cart__main    { order: 1; width: 100%; }
    .st-cart__sidebar { order: 2; width: 100%; }
    .st-cart__coupon-wrap { order: 3; width: 100%; margin-top: 0; }
    .st-cart__summary { width: 100%; box-sizing: border-box; }
    .st-cart__checkout-btn,
    .st-cart__guest-btn { width: 100%; box-sizing: border-box; }
}

/* ── Cart item grid fix on mobile ── */
@media ( max-width: 640px ) {
    .st-cart__item {
        grid-template-columns: 80px 1fr;
        gap: 8px 14px;
        align-items: start;
        padding: 16px 0;
    }
    /* img spans 2 rows so price sits beside it, not under it */
    .st-cart__item-img     { grid-column: 1; grid-row: 1 / 3; width: 80px; height: 80px; }
    .st-cart__item-details { grid-column: 2; grid-row: 1; }
    .st-cart__item-price   { grid-column: 2; grid-row: 2; text-align: left; padding-top: 0; min-width: unset; }

    /* Fix qty value visibility — wider input */
    .st-cart__qty-wrap  { height: 36px; border-radius: 8px; }
    .st-cart__qty-btn   { width: 32px; height: 36px; font-size: 16px; }
    .st-cart__qty-input { width: 46px; font-size: 14px; min-width: 46px; }

    /* Coupon full-width stacked */
    .st-cart__coupon-form {
        flex-direction: column;
        height: auto;
        border-radius: 14px;
        padding: 12px;
        gap: 10px;
        overflow: visible;
    }
    .st-cart__coupon-input {
        width: 100%;
        height: 48px;
        border: 1.5px solid #e5e7eb;
        border-radius: 10px;
        padding: 0 16px;
        font-size: 14px;
        background: #fff;
    }
    .st-cart__coupon-btn {
        width: 100%;
        height: 46px;
        justify-content: center;
        border-radius: 10px;
    }
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
:root { --co-teal: #14b8a6; --co-teal-light: rgba(20,184,166,0.12); }

.woocommerce-checkout .site-main,
.woocommerce-checkout .site-content,
.woocommerce-checkout #primary,
.woocommerce-checkout .content-area,
.woocommerce-checkout .inside-article,
.woocommerce-checkout .entry-content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; display: block !important; }
.woocommerce-checkout .hentry { margin: 0 !important; }
/* WC shortcode wrapper uses display:grid (2-col layout) — kill it so our .st-co fills full width */
.woocommerce-checkout .woocommerce { display: block !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* Outer wrapper */
.st-co {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 110px 40px 100px;
    display: block;
}

/* WC form — full width inside the left column */
.st-co .woocommerce-checkout { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; }
/* WC sets #order_review to width/float — reset since it's our sidebar now */
#order_review { float: none !important; width: 100% !important; }

/* 2-col grid wrapper */
.st-co__grid {
    display: grid !important;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
    width: 100%;
}
.st-co__main  { min-width: 0; width: 100%; }
.st-co__sidebar { min-width: 0; width: 100%; }

/* Cards */
.st-co__card {
    background: #fff;
    border: 1.5px solid #ebebeb;
    border-radius: 18px;
    padding: 26px 24px;
    margin-bottom: 16px;
}

/* ── Tabs (Guest / Sign-in) ── */
.st-co__tabs-card { padding: 0; overflow: hidden; border: none !important; box-shadow: none !important; background: transparent !important; }

/* Checkout signin form — card border, no shadow */
.st-co__signin-wrap .woocommerce-form-login,
.st-co__signin-wrap form {
    border: 1.5px solid #ebebeb !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    background: #fff !important;
}
/* Hide WC default eye in checkout signin — we inject our own via JS */
.st-co__signin-wrap .show-password-input { display: none !important; }
.st-co__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid #e5e7eb;
}
.st-co__tab {
    padding: 20px 16px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.15s, border-color 0.15s, background 0.2s;
    text-align: center;
    width: 100%;
}
.st-co__tab:hover {
    background: linear-gradient(180deg, rgba(115,220,207,0.15) 0%, rgba(115,220,207,0.04) 100%);
    color: #555;
}
.st-co__tab.is-active {
    color: #111;
    border-bottom-color: var(--co-teal);
    background: linear-gradient(180deg, rgba(115,220,207,0.18) 0%, rgba(115,220,207,0.05) 100%);
}

.st-co__tab-panel { display: none; padding: 22px 24px; }
.st-co__tab-panel.is-active { display: block; }
.st-co__guest-note { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.6; }
.st-co__link { color: var(--co-teal); text-decoration: none; font-weight: 600; }
.st-co__link:hover { text-decoration: underline; }

.st-co__signup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
    color: #6b7280;
}
.st-co__signup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    background: #111;
    color: #fff;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.st-co__signup-btn:hover,
.st-co__signup-btn:active {
    background: var(--gradient-hero-section);
    color: #fff;
}

/* ── Section headers (standalone, outside cards) ── */
.st-co__section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 28px 0 12px;
}
.st-co__section-title {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #344857;
    margin: 28px 0 12px;
}
.st-co__section-hd .st-co__section-title { margin: 0; }

/* ── Form fields ── */
.st-co__fields-grid { display: grid; gap: 16px; align-items: start; }
.st-co__fields-grid--2 { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
/* Grid items must not have top margin from the sibling rule */
.st-co__fields-grid--2 .form-row { margin-top: 0 !important; }
.st-co .st-co__card .st-co__fields-grid { margin-bottom: 18px; }
.st-co .st-co__card .st-co__fields-grid:last-child { margin-bottom: 0; }

/* WooCommerce field overrides */
.st-co .form-row { margin: 0; padding: 0; }
.st-co .form-row + .form-row { margin-top: 18px; }
.st-co .form-row label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #9ca3af; display: block; margin-bottom: 8px; }
.st-co .form-row label .required { display: none; }
.st-co .form-row label .optional { display: none; }
/* Hide WC "(optional)" suffix appended to label text */
.st-co .form-row > label > .woocommerce-input-wrapper { display: block; }
.st-co .form-row input[type="text"],
.st-co .form-row input[type="email"],
.st-co .form-row input[type="tel"],
.st-co .form-row input[type="password"],
.st-co .form-row textarea,
.st-co .form-row select,
.st-co .woocommerce-input-wrapper input,
.st-co .woocommerce-input-wrapper select,
.st-co .woocommerce-input-wrapper textarea {
    width: 100% !important;
    height: 52px !important;
    border: 1.5px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #374151 !important;
    background: #f8f9fb !important;
    outline: none !important;
    transition: border-color 0.15s, background 0.15s !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.st-co .form-row input:focus,
.st-co .form-row select:focus,
.st-co .form-row textarea:focus,
.st-co .woocommerce-input-wrapper input:focus,
.st-co .woocommerce-input-wrapper select:focus { border-color: var(--co-teal) !important; background: #fff !important; outline: none !important; box-shadow: none !important; }
.st-co .form-row textarea { height: 90px; padding: 12px 14px; resize: none; }
.st-co .form-row select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 14px) center; padding-right: 38px; }
.st-co .form-row.woocommerce-invalid input { border-color: #ef4444; }
.st-co .form-row.woocommerce-validated input { border-color: var(--co-teal); }
.st-co .woocommerce-error { list-style: none; margin: 0; padding: 0; }
.st-co .woocommerce-error li { font-size: 12px; color: #ef4444; margin-top: 4px; }

/* ── Saved address cards ── */
/* addr-cards wrapper: no card styling, just flex column with gap */
.st-co__addr-cards.st-co__card,
.st-co__addr-cards {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each addr card: standalone rounded card */
.st-co__addr-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    transition: border-color 0.2s, background 0.2s;
}
.st-co__addr-card.is-selected {
    border-color: var(--co-teal);
    background: rgba(115, 220, 207, 0.05);
}
.st-co__addr-radio { display: none; }
.st-co__addr-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: border-color 0.2s;
    background: #fff;
}
.st-co__addr-card.is-selected .st-co__addr-dot {
    border-color: var(--co-teal);
    background: var(--co-teal);
}
.st-co__addr-card.is-selected .st-co__addr-dot::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}
.st-co__addr-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.st-co__addr-name { font-size: 15px; font-weight: 700; color: #111; display: flex; align-items: center; gap: 8px; }
.st-co__addr-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: #7a8c2a;
    border-radius: 20px;
    padding: 2px 10px;
    text-transform: uppercase;
}
.st-co__addr-line { font-size: 13px; color: #6b7280; line-height: 1.5; }
.st-co__add-addr-link {
    display: inline-block;
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--co-teal);
    text-decoration: none;
}
.st-co__add-addr-link:hover { text-decoration: underline; }

/* ── Shipping method cards ── */
.st-co__shipping-methods { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.st-co__ship-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.st-co__ship-card.is-selected {
    border-color: var(--co-teal);
    background: rgba(115, 220, 207, 0.05);
}
.st-co__ship-radio { display: none; }
.st-co__ship-radio-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}
.st-co__ship-card.is-selected .st-co__ship-radio-dot {
    border-color: var(--co-teal);
    background: var(--co-teal);
}
.st-co__ship-card.is-selected .st-co__ship-radio-dot::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}
.st-co__ship-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.st-co__ship-name { font-size: 15px; font-weight: 700; color: #344857; }
.st-co__ship-desc { font-size: 13px; color: #6b7280; line-height: 1.4; }
.st-co__ship-cost { font-size: 17px; font-weight: 700; color: #344857; white-space: nowrap; }
.st-co__free { color: var(--co-teal) !important; font-size: 17px; font-weight: 700; }

/* ── Payment — WC native #payment styled ── */
.st-co #payment { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; }

/* Gateway list: single row, equal-width tabs */
.st-co #payment .wc_payment_methods {
    list-style: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}
.st-co #payment .wc_payment_method {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: 1 1 0 !important;
    display: block !important;
    min-width: 0 !important;
}

/* Radio hidden — label is the full clickable pill */
.st-co #payment .wc_payment_method > input[type="radio"] { display: none !important; }
.st-co #payment .wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 14px 10px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s, color 0.2s !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}
.st-co #payment .wc_payment_method > label img {
    height: 18px !important;
    width: auto !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Selected tab */
.st-co #payment .wc_payment_method.payment_method_selected > label,
.st-co #payment .wc_payment_method input[type="radio"]:checked + label {
    border-color: var(--co-teal) !important;
    background: rgba(115,220,207,0.07) !important;
    color: #111 !important;
}

/* Payment box (gateway fields) */
.st-co #payment .payment_box {
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin: 0 0 20px !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.st-co #payment .payment_box::before { display: none !important; }
.st-co #payment .payment_box p { margin: 0 0 16px !important; }
.st-co #payment .payment_box p:last-child { margin-bottom: 0 !important; }

/* Field labels inside payment box */
.st-co #payment .payment_box label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* Inputs inside payment box — light gray bg like PNG */
.st-co #payment .payment_box input[type="text"],
.st-co #payment .payment_box input[type="tel"],
.st-co #payment .payment_box input[type="email"],
.st-co #payment .payment_box input[type="number"],
.st-co #payment .payment_box input[type="password"] {
    width: 100% !important;
    height: 52px !important;
    border: 1.5px solid #e8eaed !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #374151 !important;
    outline: none !important;
    box-sizing: border-box !important;
    background: #f8f9fb !important;
    transition: border-color 0.15s !important;
}
.st-co #payment .payment_box input:focus { border-color: var(--co-teal) !important; outline: none !important; }

/* Place-order area */
.st-co #payment .place-order {
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    margin-top: 20px !important;
}
.st-co #payment #place_order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 60px !important;
    background: #111 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 99px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
    margin-bottom: 14px !important;
    box-shadow: none !important;
}
.st-co #payment #place_order:hover { opacity: 0.88 !important; background: #111 !important; }

/* WC terms notice */
.st-co #payment .woocommerce-terms-and-conditions-wrapper { font-size: 12px; color: #9ca3af; text-align: center; margin: 0 0 10px; }
.st-co__secure-note { font-size: 12px; color: #9ca3af; text-align: center; margin: 8px 0 0; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* ── Sidebar: Your Order ── */
.st-co__sidebar { position: sticky; top: 100px; }
.st-co__order-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 24px 20px; }
.st-co__order-title { font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 20px; }

/* Order items */
.st-co__order-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.st-co__order-item { display: flex; align-items: center; gap: 12px; }
.st-co__order-item-img { position: relative; flex-shrink: 0; }
.st-co__order-item-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; display: block; background: #f3f4f6; }
.st-co__order-item-qty {
    position: absolute;
    top: -6px; right: -6px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #374151;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.st-co__order-item-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-co__order-item-name { font-size: 13px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-co__order-item-var { font-size: 12px; color: #9ca3af; }
.st-co__order-item-price { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; }
.st-co__order-item-price .woocommerce-Price-amount { font-size: 14px; font-weight: 700; }

/* Summary rows */
.st-co__order-rows { display: flex; flex-direction: column; gap: 10px; }
.st-co__order-row { display: flex; justify-content: space-between; font-size: 14px; color: #374151; }
.st-co__order-row span:last-child { font-weight: 600; color: #111; }
.st-co__val--free { color: var(--co-teal) !important; font-weight: 700 !important; }
.st-co__val--fee { color: #d4a017 !important; font-weight: 700 !important; }
.st-co__val--discount { color: #22c55e !important; font-weight: 700 !important; }

.st-co__order-divider { height: 1px; background: #f0f0f0; margin: 16px 0; }

.st-co__order-total-row { display: flex; justify-content: space-between; align-items: center; }
.st-co__order-total-label { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.st-co__order-total-val {
    font-size: 26px; font-weight: 900;
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.st-co__order-total-val .woocommerce-Price-amount {
    font-size: 26px; font-weight: 900;
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* WC notices on checkout */
.woocommerce-checkout .woocommerce-NoticeGroup { max-width: 1200px; margin: 0 auto; padding: 16px 40px 0; }

/* Place Order button — hover gradient (site gradient: teal top → gold bottom) */
.st-co #payment #place_order:hover {
    background: var(--gradient-hero-section) !important;
    opacity: 1 !important;
}


/* ── Responsive ── */
@media ( max-width: 900px ) {
    .st-co { padding: 90px 20px 60px; }

    /* Stack grid — sidebar (Your Order) on TOP */
    .st-co__grid {
        grid-template-columns: 1fr;
        display: flex !important;
        flex-direction: column;
    }
    .st-co__sidebar {
        order: -1;          /* Your Order first on mobile */
        position: static;
    }
    .st-co__main { order: 1; }

    /* 2-col field grids → single col on mobile */
    .st-co__fields-grid--2 { grid-template-columns: 1fr; }

    /* Payment tabs — wrap on small screens */
    .st-co #payment .wc_payment_methods { flex-wrap: wrap !important; }
    .st-co #payment .wc_payment_method { flex: 1 1 calc(50% - 5px) !important; }

    /* Place Order btn — smaller text on mobile */
    .st-co #payment #place_order {
        font-size: 13px !important;
        height: 54px !important;
        letter-spacing: 0.06em !important;
    }

    /* Section titles slightly smaller on mobile */
    .st-co__section-title { font-size: 13px !important; }

    /* Addr + ship cards full width */
    .st-co__addr-card,
    .st-co__ship-card { padding: 16px 18px; }
}

@media ( max-width: 480px ) {
    .st-co { padding: 80px 16px 50px; }

    /* Tabs stack on very small screens */
    .st-co__tabs { grid-template-columns: 1fr; }
    .st-co__tab { padding: 14px 12px; border-bottom: none; border-right: 3px solid transparent; }
    .st-co__tab.is-active { border-bottom: none; border-right-color: var(--co-teal); }

    /* Payment gateway pills — 1 per row on tiny screens */
    .st-co #payment .wc_payment_method { flex: 1 1 100% !important; }

    /* Place Order btn */
    .st-co #payment #place_order {
        font-size: 12px !important;
        height: 50px !important;
    }

    /* Your Order card padding */
    .st-co__order-card { padding: 18px 16px; }
}

.st-favs-page { width: 100vw; margin-left: calc(50% - 50vw); background: #fff; padding-bottom: 80px; }

.st-favs-hero {
    background: var(--gradient-hero-section);
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    padding: 0 90px 40px;
}
.st-favs-hero__title { font-size: 42px; font-weight: 800; color: #fff; margin: 0; }
.st-favs-hero__sub   { font-size: 16px; color: rgba(255,255,255,0.75); margin: 6px 0 0; }

.st-favs-body { max-width: 1400px; margin: 0 auto; padding: 60px 90px; }

/* Empty state */
.st-favs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 80px 20px;
    text-align: center;
}
.st-favs-empty__title { font-size: 24px; font-weight: 700; margin: 0; }
.st-favs-empty__sub   { font-size: 15px; color: #6b7280; margin: 0; }
.st-favs-login-btn {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 28px;
    background: #000;
    color: #fff;
    border-radius: 99px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.18s;
}
.st-favs-login-btn:hover { opacity: 0.8; color: #fff; }

/* Grid */
.st-favs-grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 28px;
}
.st-favs-card { display: flex; flex-direction: column; }
.st-favs-card__img-wrap {
    display: block;
    aspect-ratio: 4/5;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
}
.st-favs-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.st-favs-card__img-wrap:hover .st-favs-card__img { transform: scale(1.04); }
.st-favs-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
}
.st-favs-card__body   { padding: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.st-favs-card__name   { font-size: 16px; font-weight: 600; color: #111; text-decoration: none; }
.st-favs-card__name:hover { text-decoration: underline; }
.st-favs-card__attrs  { font-size: 12px; color: #6b7280; margin: 0; }
.st-favs-card__prices { display: flex; align-items: center; gap: 8px; }
.st-favs-card__sale   { font-size: 18px; font-weight: 700; color: #111; }
.st-favs-card__reg    { font-size: 14px; color: #9ca3af; text-decoration: line-through; }
.st-favs-card__actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.st-favs-card__view-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    background: #000;
    color: #fff;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.18s;
}
.st-favs-card__view-btn:hover { opacity: 0.8; color: #fff; }
.st-favs-card__remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 14px;
    background: none;
    border: 1.5px solid #e5e5e5;
    border-radius: 99px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.st-favs-card__remove-btn:hover { border-color: #ef4444; color: #ef4444; }

/* ── Outer wrapper (full-bleed container for hero + body) ── */
.st-shop-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* ── Hero — exact same as .st-faq-hero ── */
.st-shop-hero {
    width: 100%;
    background: var(--gradient-hero-section);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 580px;
    position: relative;
    padding-top: 104px;
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
}

.st-shop-hero__inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}

.st-shop-hero__title {
    font-family: var(--font-decorative);
    font-weight: 400;
    color: var(--color-white);
    font-size: 100px;
    line-height: 1;
    margin: 0;
    text-align: center;
    letter-spacing: 0.02em;
}

.st-shop-hero__breadcrumbs-wrap {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 18px 24px;
    margin-top: 40px;
}

.st-shop-hero__breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-white);
}

.st-shop-hero__bc-link {
    color: var(--color-white);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.st-shop-hero__bc-link:hover { opacity: 1; text-decoration: underline; }

.st-shop-hero__bc-sep { opacity: 0.7; font-size: 16px; }

.st-shop-hero__bc-bold { font-weight: 700; color: var(--color-white); }

/* ── Shop body: sidebar + products ── */
.st-shop-body {
    width: 100%;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 0;
    align-items: start;
    min-height: 60vh;
}

/* ── Sidebar ── */
.st-shop-sidebar {
    padding: 60px 28px 60px 90px;
    border-right: 1px solid #eeeeee;
    min-height: 100%;
    background: #fff;
}

.st-shop-sidebar__heading {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #252525;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #252525;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Category group */
.st-shop-sidebar__group {
    border-bottom: 1px solid #eeeeee;
}

.st-shop-sidebar__cat-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 14px 10px;
    cursor: pointer;
    gap: 8px;
    border-radius: 6px;
    transition: padding 0.2s ease, background 0.2s ease;
}
.st-shop-sidebar__cat-toggle:hover {
    padding: 16px 14px;
}

.st-shop-sidebar__cat-link {
    font-size: 15px;
    font-weight: 600;
    color: #252525;
    text-decoration: none;
    text-align: left;
    flex: 1;
    transition: color 0.2s;
}
.st-shop-sidebar__group.is-open .st-shop-sidebar__cat-toggle {
    background: linear-gradient(to bottom, rgba(115,220,207,0.25) 0%, rgba(210,156,8,0.18) 100%);
    padding: 16px 14px;
}

.st-shop-sidebar__cat-link.is-active {
    color: #252525;
}
.st-shop-sidebar__cat-toggle:hover {
    background: linear-gradient(to bottom, rgba(115,220,207,0.25) 0%, rgba(210,156,8,0.18) 100%);
}

.st-shop-sidebar__chevron {
    flex-shrink: 0;
    color: #909090;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}
.st-shop-sidebar__group.is-open .st-shop-sidebar__chevron {
    transform: rotate(180deg);
}

/* Sub-list */
.st-shop-sidebar__sub-list {
    list-style: none;
    margin: 0;
    padding: 0 0 14px 0;
    display: none;
}
.st-shop-sidebar__group.is-open .st-shop-sidebar__sub-list {
    display: block;
}

.st-shop-sidebar__sub-item { margin: 0; }

.st-shop-sidebar__sub-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 8px 4px;
    font-size: 16px;
    color: #616161;
    text-decoration: none;
    position: relative;
}
.st-shop-sidebar__sub-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 20px;
    right: 0;
    height: 1.5px;
    background: linear-gradient(to right, #73dccf, #d29c08);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.st-shop-sidebar__sub-link:hover::after {
    transform: scaleX(1);
}
.st-shop-sidebar__sub-link.is-active {
    color: #252525;
    font-weight: 600;
}

.st-shop-sidebar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d29c08;
    flex-shrink: 0;
}

/* ── Products area ── */
.st-shop-products {
    padding: 60px 90px 60px 90px;
    background: #fff;
    min-width: 0;
}

/* WooCommerce pagination override */
.st-shop-products .woocommerce-pagination {
    margin-top: 48px;
}

/* Product grid */
.st-shop-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 28px;
}

/* Product card */
.st-shop-card {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.st-shop-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image with glassmorphism overlay */
.st-shop-card__img-wrap {
    width: 100%;
    aspect-ratio: 4/4;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
}

.st-shop-card__img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,0.18) 100%
    );
    backdrop-filter: blur(0px);
    pointer-events: none;
    border-radius: 10px;
}

.st-shop-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-shop-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(115,220,207,0.25), rgba(210,156,8,0.18));
    backdrop-filter: blur(8px);
    border-radius: 10px;
}

.st-shop-card__info { padding: 0 2px; }

.st-shop-card__title {
    font-size: 28px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 6px;
    line-height: 1.25;
}

.st-shop-card__price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-shop-card__price-sale {
    font-size: 32px;
    font-weight: 700;
    color: #252525;
}
.st-shop-card__price-sale .woocommerce-Price-amount { color: inherit; }

.st-shop-card__price-reg {
    font-size: 24px;
    font-weight: 400;
    color: #bdbdbd;
    text-decoration: line-through;
}
.st-shop-card__price-reg .woocommerce-Price-amount { color: inherit; }

.st-shop-empty {
    text-align: center;
    color: #909090;
    font-size: 15px;
    padding: 60px 0;
}

/* ── GP wrappers override for shop ── */
.woocommerce-page .site-content,
.woocommerce-page #primary,
.woocommerce-page .content-area,
.woocommerce-page .inside-article,
.woocommerce-page .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .st-shop-hero {
        min-height: 400px;
        padding-top: 104px;
    }
    .st-shop-hero__title {
        font-size: 64px !important;
    }
    .st-shop-products {
        padding: 24px 20px 60px;
    }
    .st-shop-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .st-shop-card__title {
        font-size: 18px !important;
        width: 100%;
    }
    .st-shop-card__price-sale {
        font-size: 18px !important;
    }
    .st-shop-card__price-reg {
        font-size: 14px !important;
    }
}

@media (max-width: 900px) {
    .st-shop-body {
        grid-template-columns: 1fr;
    }
    .st-shop-sidebar {
        border-right: none;
        border-bottom: 1px solid #eeeeee;
        padding: 28px 20px;
    }
    .st-shop-products {
        padding: 28px 20px 60px;
    }
    .st-shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }
}

@media (max-width: 768px) {
    .st-shop-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .st-shop-hero__title {
        font-size: 48px !important;
    }
    .st-shop-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
}

/* ============================================================
   ORDER CONFIRMATION — Thank You Page  (.st-ty)
   ============================================================ */

/* Reset WC wrappers */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details { display: none; }

.st-ty {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 40px 100px;
}

/* ── Hero ── */
.st-ty__hero {
    text-align: center;
    margin-bottom: 60px;
}
.st-ty__check-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.st-ty__check-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand-teal) 0%, var(--color-accent-gold-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-ty__confirmed-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-confirmed-green);
    margin: 0 0 12px;
}
.st-ty__headline {
    font-family: var(--font-decorative);
    font-size: 72px;
    font-weight: 400;
    color: var(--color-brand-navy);
    line-height: 1.1;
    margin: 0 0 20px;
}
.st-ty__sub {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 28px;
}
.st-ty__sub strong { color: #111; font-weight: 600; }
.st-ty__order-id-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 99px;
    padding: 10px 24px;
    background: #fff;
}
.st-ty__order-id-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
}
.st-ty__order-id-val {
    font-size: 16px;
    font-weight: 800;
    color: #111;
}

/* ── Body grid ── */
.st-ty__grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
    margin-bottom: 36px;
}

/* ── Cards ── */
.st-ty__card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
}
.st-ty__right { display: flex; flex-direction: column; gap: 20px; }

/* Items card header */
.st-ty__card-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.st-ty__card-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand-navy);
    margin: 0;
}
.st-ty__card-title--standalone {
    padding: 20px 24px 0;
    display: block;
    margin-bottom: 16px;
}

/* Items list */
.st-ty__items-list { padding: 0 24px 24px; display: flex; flex-direction: column; }
.st-ty__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
}
.st-ty__item:last-child { border-bottom: none; }
.st-ty__item-img { flex-shrink: 0; }
.st-ty__item-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    background: #f3f4f6;
}
.st-ty__item-thumb--placeholder { width: 56px; height: 56px; border-radius: 10px; background: #f3f4f6; }
.st-ty__item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.st-ty__item-name { font-size: 15px; font-weight: 700; color: #111; }
.st-ty__item-meta { font-size: 12px; color: #9ca3af; }
.st-ty__item-price { font-size: 16px; font-weight: 700; color: #111; white-space: nowrap; }

/* Summary card */
.st-ty__summary-card { padding: 0 24px 24px; }
.st-ty__summary-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.st-ty__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #374151;
}
.st-ty__val--free { color: var(--color-brand-teal); font-weight: 600; }
.st-ty__val--fee  { color: var(--color-accent-gold-dark); font-weight: 600; }
.st-ty__summary-divider { height: 1px; background: #f0f0f0; margin: 4px 0 16px; }
.st-ty__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.st-ty__total-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brand-navy);
}
.st-ty__total-val {
    font-size: 32px;
    font-weight: 900;
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.st-ty__total-val .woocommerce-Price-amount { font-size: 32px; font-weight: 900; }

/* Delivery card */
.st-ty__delivery-card { padding: 0 24px 24px; }
.st-ty__detail-group { margin-bottom: 18px; display: flex; flex-direction: column; gap: 2px; }
.st-ty__detail-group:last-child { margin-bottom: 0; }
.st-ty__detail-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 4px;
}
.st-ty__detail-val { font-size: 14px; color: #374151; line-height: 1.5; }

/* ── Action buttons ── */
.st-ty__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
}
.st-ty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 32px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: opacity 0.2s;
    cursor: pointer;
}
.st-ty__btn--dark {
    background: #111;
    color: #fff;
    border: none;
}
.st-ty__btn--dark:hover { opacity: 0.85; color: #fff; }
.st-ty__btn--outline {
    background: #fff;
    color: #111;
    border: 1.5px solid #e5e7eb;
}
.st-ty__btn--outline:hover { border-color: #111; color: #111; }

/* Failed order */
.st-ty__failed { text-align: center; padding: 80px 40px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .st-ty { padding: 60px 24px 80px; }
    .st-ty__headline { font-size: 52px; }
    .st-ty__grid { grid-template-columns: 1fr; }
    .st-ty__right { order: -1; } /* Summary on top on tablet */
}
@media (max-width: 480px) {
    .st-ty { padding: 50px 16px 60px; }
    .st-ty__headline { font-size: 38px; }
    .st-ty__sub { font-size: 14px; }
    .st-ty__check-circle { width: 60px; height: 60px; }
    .st-ty__actions { flex-direction: column; }
    .st-ty__btn { justify-content: center; width: 100%; }
    .st-ty__total-val,
    .st-ty__total-val .woocommerce-Price-amount { font-size: 26px; }
}

/* ============================================================
   LOGIN PAGE  (.st-login)
   ============================================================ */

/* Kill WC/GP wrappers so our full-bleed layout works */
.woocommerce-account:not(.logged-in) .site-main,
.woocommerce-account:not(.logged-in) .site-content,
.woocommerce-account:not(.logged-in) #primary,
.woocommerce-account:not(.logged-in) .content-area,
.woocommerce-account:not(.logged-in) .inside-article,
.woocommerce-account:not(.logged-in) .entry-content,
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-lost-password .site-main,
.woocommerce-lost-password .site-content,
.woocommerce-lost-password #primary,
.woocommerce-lost-password .content-area,
.woocommerce-lost-password .inside-article,
.woocommerce-lost-password .entry-content,
.woocommerce-lost-password .woocommerce {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
.woocommerce-account:not(.logged-in) .hentry,
.woocommerce-lost-password .hentry { margin: 0 !important; }

/* Login/forgot pages — header stays visible, form panel accounts for it */

/* WC notices on login/forgot — place inside form flow */
.woocommerce-account:not(.logged-in) .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-info,
.woocommerce-lost-password .woocommerce-error,
.woocommerce-lost-password .woocommerce-message,
.woocommerce-lost-password .woocommerce-info {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 320px;
    max-width: 480px;
    border-radius: 12px;
    font-size: 14px;
    padding: 12px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    list-style: none;
    margin: 0;
}

/* Hide WC default eye icon — we use our own */
.st-login__pw-wrap .show-password-input { display: none !important; }

/* Single-col centered (no image) */
.st-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-top: 104px;
    padding-bottom: 60px;
    box-sizing: border-box;
    background: #fff;
}

/* Two-col when image is present */
.st-login--has-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 0;
    padding-bottom: 0;
    align-items: stretch;
    min-height: 100vh;
    margin-top: calc(-1 * var(--st-header-h, 104px));
}

/* Left image panel (only when image exists) */
.st-login__image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-self: stretch;
    min-height: 100vh;
    position: sticky;
    top: 0;
}

/* Form wrap — single col */
.st-login__form-wrap {
    width: 100%;
    max-width: 520px;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Form wrap — two col (with image) */
.st-login--has-image .st-login__form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--st-header-h, 104px) 50px 80px;
    min-height: calc(100vh + 340px);
    max-width: 100%;
    box-sizing: border-box;
}

.st-login__form-inner {
    width: 100%;
    max-width: 370px;
    margin: 0 auto;
}

/* Wave icon inline with heading */
.st-login__wave {
    font-size: 0.85em;
    line-height: 1;
    vertical-align: middle;
    margin-left: 8px;
}

/* Heading */
.st-login__heading {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 900;
    color: #111;
    margin: 0 0 6px;
    line-height: 1.1;
}

.st-login__sub {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 0 22px;
}

/* Field group */
.st-login__field-group {
    margin-bottom: 14px;
}

.st-login__label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.st-login__input:not(.st-otp__box),
.st-login__input:not([type="submit"]):not(.st-otp__box) {
    width: 100% !important;
    height: 48px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 99px !important;
    padding: 0 22px !important;
    font-size: 15px !important;
    color: #111 !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    transition: border-color 0.2s;
    box-sizing: border-box !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.st-login__input:focus,
.st-login__input:focus-visible {
    border-color: #111 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.st-login__input::placeholder { color: #c4c4c4; }

/* Password wrap with eye icon */
.st-login__pw-wrap {
    position: relative;
}
.st-login__pw-wrap .st-login__input {
    padding-right: 50px;
}
.st-login__eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 99px;
    transition: background 0.2s, color 0.2s;
}
.st-login__eye:hover {
    background: var(--gradient-hero-section);
    color: #fff;
}

/* Remember + Forgot row */
.st-login__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
}

.st-login__remember {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.st-login__checkbox { display: none; }

.st-login__checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.st-login__checkbox:checked + .st-login__checkmark {
    background: var(--gradient-hero-section);
    border-color: transparent;
}
.st-login__checkbox:checked + .st-login__checkmark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
    display: block;
}

.st-login__forgot {
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.st-login__forgot:hover {
    color: transparent;
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Submit button */
.st-login__submit {
    width: 100%;
    height: 50px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 99px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 20px;
}
.st-login__submit:hover {
    background: var(--gradient-hero-section);
}

/* Or divider */
.st-login__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: #9ca3af;
    font-size: 13px;
}
.st-login__divider::before,
.st-login__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Remove any box/card WC adds to the form */
.st-login__form,
.st-login .woocommerce-form-login {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force WC default input styles to be overridden — exclude OTP boxes */
.st-login .woocommerce-Input:not(.st-otp__box),
.st-login .input-text:not(.st-otp__box),
.st-login input[type="text"]:not(.st-otp__box),
.st-login input[type="email"]:not(.st-otp__box),
.st-login input[type="password"]:not(.st-otp__box) {
    background: transparent !important;
    background-color: transparent !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 99px !important;
    box-shadow: none !important;
    height: 48px !important;
    padding: 0 22px !important;
    color: #111 !important;
}

/* Social buttons area */
.st-login__social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Google button */
.st-login__google-btn {
    width: 100%;
    height: 52px;
    border: 1.5px solid #e5e7eb;
    border-radius: 99px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    cursor: pointer;
}
.st-login__google-btn:hover { border-color: #9ca3af; color: #111; }

/* Style any real social login plugin buttons to match */
.st-login__social a,
.st-login__social .nextend-social-login-button,
.st-login__social .wpgsi-login-button {
    width: 100% !important;
    height: 52px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 99px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
}

/* WC success/error message inside st-login form area */
.st-login .woocommerce-message,
.st-login .woocommerce-error,
.st-login .woocommerce-info,
.st-login .woocommerce-notices-wrapper .woocommerce-message,
.st-login .woocommerce-notices-wrapper .woocommerce-error,
.st-login .woocommerce-notices-wrapper .woocommerce-info {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    border-radius: 12px !important;
    color: #166534 !important;
    padding: 14px 18px !important;
    margin: 0 0 20px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.st-login .woocommerce-error,
.st-login .woocommerce-notices-wrapper .woocommerce-error {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

/* ── OTP Boxes ── */
.st-otp__boxes {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.st-otp__boxes .st-otp__box {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    border: 2px solid transparent !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #2dd4bf, #f59e0b) border-box !important;
    text-align: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111 !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    caret-color: transparent !important;
    padding: 0 !important;
    max-width: unset !important;
    flex: none !important;
}

/* Gradient border wrapper for lost password input */
.st-lostpw__input-wrap {
    position: relative;
    border-radius: 99px;
}
.st-lostpw__input-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 99px;
    padding: 2px;
    background: linear-gradient(135deg, #2dd4bf, #f59e0b);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.st-lostpw__input-wrap .st-login__input {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.st-lostpw__input-wrap .st-login__input:focus {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Back link */
.st-login__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}
.st-login__back:hover {
    color: transparent;
    background: var(--gradient-hero-section);
    -webkit-background-clip: text;
    background-clip: text;
}
.st-login__back svg { flex-shrink: 0; stroke: currentColor; }

/* Signup row on login page */
.st-login__signup-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 14px;
    color: #6b7280;
}
.st-login__signup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 24px;
    background: #111;
    color: #fff;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.st-login__signup-btn:hover,
.st-login__signup-btn:active {
    background: var(--gradient-hero-section);
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .st-login--has-image {
        grid-template-columns: 1fr;
        margin-top: 0;
        padding-top: 0;
        min-height: unset;
    }
    .st-login__image {
        position: relative;
        top: 0;
        align-self: auto;
        min-height: 75vw;
        margin-top: calc(-1 * var(--st-header-h, 104px));
        padding-top: var(--st-header-h, 104px);
        background-position: center top;
    }
    .st-login--has-image .st-login__form-wrap {
        padding: 56px 36px 60px;
        min-height: unset;
        max-width: 100%;
    }
    .st-login__heading { font-size: 30px; }
}
@media (max-width: 480px) {
    .st-login { padding-top: 80px; }
    .st-login--has-image { padding-top: 0; margin-top: 0; }
    .st-login__image {
        min-height: 115vw;
        margin-top: calc(-1 * var(--st-header-h, 104px));
        padding-top: var(--st-header-h, 104px);
    }
    .st-login--has-image .st-login__form-wrap { padding: 48px 24px 50px; }
    .st-login__form-wrap { padding: 0 20px; }
    .st-login__form-inner { max-width: 100%; }
    .st-login__heading { font-size: 26px; }
    .st-login__sub { font-size: 14px; margin-bottom: 24px; }
    .st-login__input { height: 50px; font-size: 14px; }
    .st-login__submit { height: 50px; font-size: 15px; margin-bottom: 22px; }
    .st-login__meta-row { margin-bottom: 22px; }
    .st-login__google-btn { height: 48px; font-size: 14px; }
}

/* ═══════════════════════════════════════════
   DASHBOARD — sidebar + content layout
═══════════════════════════════════════════ */
.woocommerce-account.logged-in .site-main,
.woocommerce-account.logged-in #primary,
.woocommerce-account.logged-in #content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #f7f8fa;
}
.woocommerce-account.logged-in .site-main > .woocommerce {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
}

.st-dashboard {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--st-header-h, 104px));
}

/* Sidebar */
.st-dashboard__sidebar {
    flex: 0 0 260px;
    width: 260px;
    background: #fff;
    border-right: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    height: calc(100vh - var(--st-header-h, 104px));
    overflow-y: auto;
    box-shadow: 1px 0 4px rgba(0,0,0,.04);
}

/* Nav fills full sidebar height, logout pinned to bottom */
.st-dash-nav {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--st-header-h, 104px));
}

/* Content area — min-width:0 is the key fix for flex text overflow */
.st-dashboard__content {
    flex: 1;
    min-width: 0;
    padding: 40px 48px;
    background: #f7f8fa;
}
.st-dashboard__content .woocommerce-MyAccount-content {
    min-width: 0;
    width: 100%;
}

/* Nav list */
.st-dash-nav__list {
    list-style: none;
    margin: 0;
    padding: 48px 0 12px;
    flex: 1;
}
.st-dash-nav__item { margin: 0; }

/* Nav link */
.st-dash-nav__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0 13px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.st-dash-nav__link:hover {
    background: #f0fdfa;
    color: #0d9488;
    text-decoration: none;
}

/* Active state */
.st-dash-nav__item.is-active .st-dash-nav__link,
.st-dash-nav__item.woocommerce-MyAccount-navigation-link--is-active .st-dash-nav__link {
    background: #f0fdfa;
    color: #0d9488;
    border-left-color: #2dd4bf;
}

/* Icon wrapper */
.st-dash-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}

/* ACF uploaded image icons */
.st-dash-nav__img-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

/* SVG fallback tinting */
.st-dash-nav__item.is-active .st-dash-nav__icon svg,
.st-dash-nav__item.woocommerce-MyAccount-navigation-link--is-active .st-dash-nav__icon svg {
    stroke: #0d9488;
}
.st-dash-nav__link--logout .st-dash-nav__icon svg { stroke: #9ca3af; }

/* Wishlist heart fill */
.woocommerce-MyAccount-navigation-link--wishlist .st-dash-nav__icon svg { fill: #d1d5db; stroke: none; }
.woocommerce-MyAccount-navigation-link--wishlist.is-active .st-dash-nav__icon svg { fill: #0d9488; }

/* Logout — pinned at bottom */
.st-dash-nav__logout-wrap {
    border-top: 1px solid #f3f4f6;
    padding: 8px 0 12px;
    margin-top: auto;
}
.st-dash-nav__link--logout { color: #9ca3af; font-weight: 500; }
.st-dash-nav__link--logout:hover { color: #ef4444; background: #fff5f5; border-left-color: #ef4444; }

/* Hide default WC nav if it renders elsewhere */
.woocommerce-MyAccount-navigation { display: none; }

/* Dashboard responsive */
@media (max-width: 860px) {
    .st-dashboard { flex-direction: column; }
    .st-dashboard__sidebar { flex: none; width: 100%; position: static; height: auto; border-right: none; border-bottom: 1px solid #f0f0f0; }
    .st-dashboard__content { padding: 24px 16px; }
    .st-dash-nav { min-height: unset; }
    .st-dash-nav__list { display: flex; flex-wrap: wrap; padding: 8px; gap: 4px; }
    .st-dash-nav__item { margin: 0; }
    .st-dash-nav__link {
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 13px;
        gap: 8px;
    }
    .st-dash-nav__item.is-active .st-dash-nav__link,
    .st-dash-nav__item.woocommerce-MyAccount-navigation-link--is-active .st-dash-nav__link {
        border-left: none;
        border-bottom-color: #2dd4bf;
    }
    .st-dash-nav__logout-wrap { border-top: 1px solid #f3f4f6; border-left: none; padding: 8px; margin-top: 0; }
}

/* ═══════════════════════════════════════════
   DASHBOARD — Header avatar circle + full-width pill
═══════════════════════════════════════════ */

/* Avatar circle — always in header for logged-in users */
.st-nav__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2dd4bf 0%, #f59e0b 100%);
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity .2s, transform .2s;
}
.st-nav__avatar:hover { opacity: .88; transform: scale(1.06); }
.st-nav__avatar-letter {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
}

/* Dashboard: full-width header pill */
body.st-is-dashboard .st-nav { justify-content: stretch; padding: 0 32px; }
body.st-is-dashboard .st-nav__pill {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
    height: var(--st-header-h, 104px);
}
body.st-is-dashboard .st-nav__logo-text { color: #111; }
body.st-is-dashboard .st-nav__link { color: #4b5563; }
body.st-is-dashboard .st-nav__link:hover { background: #f3f4f6; color: #111; }
body.st-is-dashboard .st-nav__link--active { background: #111; color: #fff; }
/* Dashboard header: show cart, hide hamburger */
body.st-is-dashboard .st-nav__cart { display: flex !important; }
body.st-is-dashboard .st-nav__hamburger { display: none !important; }
body.st-is-dashboard .st-nav__hamburger-line { background: #111; }
body.st-is-dashboard .st-nav__cart svg { stroke: #111; }
body.st-is-dashboard .st-nav__cart-count { background: #111; color: #fff; }

/* Dashboard mobile header: logo left, cart + avatar right */
@media (max-width: 768px) {
    body.st-is-dashboard .st-nav { padding: 0 16px !important; }
    body.st-is-dashboard .st-nav__pill {
        height: 60px !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }
    body.st-is-dashboard .st-nav__logo { flex-shrink: 0; }
    body.st-is-dashboard .st-nav__logo-img { width: 64px !important; height: auto !important; }
    body.st-is-dashboard .st-nav__links { display: none !important; }
    body.st-is-dashboard .st-nav__actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: auto !important;
    }
}

/* On dashboard, header is not fixed — flows normally, z-index lowered so mini cart appears above it */
body.st-is-dashboard .st-header { z-index: 10 !important; }
body.st-is-dashboard .st-mini-cart { z-index: 1100 !important; }

/* Dark glass header — cart, login/register/forgot-pass, checkout, order confirmation, single product, 404 */
body.woocommerce-cart .st-nav__pill,
body.woocommerce-checkout .st-nav__pill,
body.woocommerce-order-received .st-nav__pill,
body.woocommerce-account:not(.st-is-dashboard) .st-nav__pill,
body.single-product .st-nav__pill,
body.error404 .st-nav__pill {
    background-color: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Fix: container pointer-events none so header clicks pass through; children handle their own events */
body.st-is-dashboard .st-mini-cart.is-open { pointer-events: none !important; }
body.st-is-dashboard .st-mini-cart.is-open .st-mini-cart__overlay { pointer-events: auto !important; }
body.st-is-dashboard .st-mini-cart.is-open .st-mini-cart__panel { pointer-events: auto !important; }

body.st-is-dashboard .st-header {
    position: relative;
    top: auto;
    background: #fff;
}

.woocommerce-account .woocommerce { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; }

/* ═══════════════════════════════════════════
   MY DASHBOARD PAGE
═══════════════════════════════════════════ */
.st-mydb { display: flex; flex-direction: column; gap: 28px; }

/* Page header */
.st-mydb__header { margin-bottom: 4px; }
.st-mydb__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 0 0 8px;
}
.st-mydb__title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: #111;
    margin: 0 0 10px;
    line-height: 1.1;
}
.st-mydb__sub { font-size: 15px; color: #6b7280; margin: 0; }

/* Cards */
.st-mydb__card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.st-mydb__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.st-mydb__card-title {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #111;
    margin: 0;
}
.st-mydb__view-all {
    font-size: 13px;
    font-weight: 600;
    color: #0d9488;
    text-decoration: none;
    white-space: nowrap;
}
.st-mydb__view-all:hover { text-decoration: underline; }

/* Orders table */
.st-mydb__orders-wrap { overflow-x: auto; }
.st-mydb__orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.st-mydb__orders-table thead tr {
    border-bottom: 1px solid #f3f4f6;
}
.st-mydb__orders-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 0 12px 12px 0;
    white-space: nowrap;
    text-align: left;
}
.st-mydb__order-row {
    border-bottom: 1px solid #f9fafb;
}
.st-mydb__order-row td { padding: 16px 12px 16px 0; vertical-align: middle; }
.st-mydb__order-id { font-weight: 700; color: #111; white-space: nowrap; }
.st-mydb__order-date { color: #6b7280; white-space: nowrap; }
.st-mydb__order-items { color: #374151; }
.st-mydb__order-total { font-weight: 700; color: #111; white-space: nowrap; }

/* Status badges */
.st-mydb__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.st-mydb__badge--delivered  { background: #f0fdfa; color: #0d9488; }
.st-mydb__badge--shipped    { background: #fff7ed; color: #c2410c; }
.st-mydb__badge--processing { background: #eff6ff; color: #2563eb; }
.st-mydb__badge--onhold     { background: #fefce8; color: #a16207; }
.st-mydb__badge--cancelled  { background: #fef2f2; color: #dc2626; }
.st-mydb__badge--refunded   { background: #f5f3ff; color: #7c3aed; }
.st-mydb__badge--default    { background: #f3f4f6; color: #374151; }

.st-mydb__action-link { font-size: 13px; font-weight: 600; color: #0d9488; text-decoration: none; white-space: nowrap; }
.st-mydb__action-link:hover { text-decoration: underline; }

.st-mydb__empty { color: #6b7280; font-size: 14px; margin: 0; }
.st-mydb__empty a { color: #0d9488; font-weight: 600; }

/* Bottom row */
.st-mydb__bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* Wishlist grid */
.st-mydb__wishlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.st-mydb__wish-item { display: flex; flex-direction: column; gap: 6px; }
.st-mydb__wish-thumb { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: #f3f4f6; }
.st-mydb__wish-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-mydb__wish-placeholder { width: 100%; aspect-ratio: 1; background: #e5e7eb; border-radius: 12px; }
.st-mydb__wish-name { font-size: 13px; font-weight: 600; color: #111; margin: 0; }
.st-mydb__wish-name--placeholder { color: #d1d5db; }
.st-mydb__wish-price { font-size: 13px; color: #6b7280; margin: 0; }

/* Address box */
.st-mydb__address-box {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.st-mydb__addr-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 99px;
    background: linear-gradient(135deg, #2dd4bf, #f59e0b);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
    width: fit-content;
}
.st-mydb__addr-name { font-size: 15px; font-weight: 700; color: #111; margin: 0 0 2px; }
.st-mydb__addr-line { font-size: 14px; color: #6b7280; margin: 0; }
.st-mydb__addr-empty { font-size: 14px; color: #9ca3af; margin: 0; }
.st-mydb__addr-empty a { color: #0d9488; font-weight: 600; }

/* Responsive */
@media (max-width: 900px) {
    .st-mydb__bottom-row { grid-template-columns: 1fr; }
    .st-mydb__card { padding: 20px; }
}
@media (max-width: 600px) {
    .st-mydb__wishlist-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .st-mydb__orders-table th, .st-mydb__order-row td { padding: 10px 8px 10px 0; }
}

/* ═══════════════════════════════════════════
   DASHBOARD — COMPREHENSIVE FIX
═══════════════════════════════════════════ */

/* Zero out ALL GeneratePress inner wrappers for logged-in account */
body.st-is-dashboard .inside-article,
body.st-is-dashboard .entry-content,
body.st-is-dashboard .entry-header,
body.st-is-dashboard #primary,
body.st-is-dashboard .content-area,
body.st-is-dashboard .site-main,
body.st-is-dashboard .site-main > .woocommerce {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.st-is-dashboard .woocommerce-MyAccount-content {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

/* ── Fix heading sizes inside dashboard cards ── */
body.st-is-dashboard .st-mydb__card-title,
body.st-is-dashboard .st-mydb h2 {
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #111 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--font-body, sans-serif) !important;
}

body.st-is-dashboard .st-mydb__title {
    font-size: clamp(28px, 4vw, 42px) !important;
    font-family: var(--font-heading, sans-serif) !important;
    line-height: 1.1 !important;
}

/* ── Fix card-head flex layout ── */
body.st-is-dashboard .st-mydb__card-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

/* ═══════════════════════════════════════════
   DASHBOARD LAYOUT — NUCLEAR FIX
═══════════════════════════════════════════ */

/* Force every GP/WC wrapper to full width */
body.st-is-dashboard #content,
body.st-is-dashboard #primary,
body.st-is-dashboard .content-area,
body.st-is-dashboard .inside-article,
body.st-is-dashboard .entry-header,
body.st-is-dashboard .entry-content,
body.st-is-dashboard .site-main,
body.st-is-dashboard .woocommerce,
body.st-is-dashboard .woocommerce-page,
body.st-is-dashboard .site-content,
body.st-is-dashboard .grid-container,
body.st-is-dashboard .inside-site-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
}

/* Remove WC default float layout */
body.st-is-dashboard .woocommerce-MyAccount-navigation,
body.st-is-dashboard .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
}

/* The actual dashboard grid */
body.st-is-dashboard .st-dashboard {
    display: grid !important;
    grid-template-columns: 260px 1fr !important;
    grid-template-rows: 1fr !important;
    width: 100% !important;
    min-height: calc(100vh - var(--st-header-h, 104px)) !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.st-is-dashboard .st-dashboard__sidebar {
    grid-column: 1 !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    position: sticky !important;
    top: 0 !important;
    height: calc(100vh - var(--st-header-h, 104px)) !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-right: 1px solid #f0f0f0 !important;
    align-self: start !important;
}

body.st-is-dashboard .st-dashboard__content {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 40px 40px !important;
    background: #f7f8fa !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Fix heading font sizes in dashboard cards */
body.st-is-dashboard .st-mydb .st-mydb__card-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: #111 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

body.st-is-dashboard .st-mydb .st-mydb__card-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Responsive */
@media (max-width: 860px) {
    body.st-is-dashboard .st-dashboard {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
    }
    body.st-is-dashboard .st-dashboard__sidebar {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    body.st-is-dashboard .st-dashboard__content {
        padding: 24px 20px !important;
    }
}

/* ═══════════════════════════════════════════
   DASHBOARD — COLOR & FINAL POLISH
═══════════════════════════════════════════ */

/* White page background like PNG */
body.st-is-dashboard .st-dashboard__content,
body.st-is-dashboard .woocommerce-account.logged-in .site-main {
    background: #fff !important;
}

/* Cards — clean white, subtle border, soft shadow like PNG */
body.st-is-dashboard .st-mydb__card {
    background: #fff !important;
    border: 1px solid #f0f1f3 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    padding: 28px 32px !important;
}

/* Wishlist product cards — white card per item */
body.st-is-dashboard .st-mydb__wish-item {
    background: #fff !important;
    border: 1px solid #f0f1f3 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
    padding: 8px !important;
    gap: 8px !important;
}

/* Wishlist thumb fills card */
body.st-is-dashboard .st-mydb__wish-thumb {
    border-radius: 8px !important;
    overflow: hidden !important;
}
body.st-is-dashboard .st-mydb__wish-placeholder {
    background: #d1d5db !important;
    border-radius: 8px !important;
}
body.st-is-dashboard .st-mydb__wish-name {
    padding: 0 4px !important;
    font-size: 13px !important;
    color: #111 !important;
}
body.st-is-dashboard .st-mydb__wish-price {
    padding: 0 4px 4px !important;
    font-size: 13px !important;
    color: #6b7280 !important;
}

/* Address box — light grey inner box */
body.st-is-dashboard .st-mydb__address-box {
    background: #f9fafb !important;
    border-radius: 12px !important;
    border: 1px solid #f0f1f3 !important;
}

/* Table rows — cleaner borders */
body.st-is-dashboard .st-mydb__order-row {
    border-bottom: 1px solid #f3f4f6 !important;
}
body.st-is-dashboard .st-mydb__orders-table thead tr {
    border-bottom: 2px solid #f3f4f6 !important;
}

/* Eyebrow & title match PNG */
body.st-is-dashboard .st-mydb__eyebrow {
    color: #9ca3af !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    font-weight: 700 !important;
}
body.st-is-dashboard .st-mydb__title {
    color: #0f172a !important;
}
body.st-is-dashboard .st-mydb__sub {
    color: #94a3b8 !important;
}

/* Sidebar white background */
body.st-is-dashboard .st-dashboard__sidebar {
    background: #fff !important;
}
body.st-is-dashboard .woocommerce-account.logged-in .site-main {
    background: #fff !important;
}

/* ═══════════════════════════════════════════
   DASHBOARD — SIDEBAR + BG + ORDERS FINAL FIX
═══════════════════════════════════════════ */

/* Background #F7F7F5 */
body.st-is-dashboard .st-dashboard__content,
body.st-is-dashboard .site-main,
body.st-is-dashboard .woocommerce-account.logged-in .site-main {
    background: #F7F7F5 !important;
}

/* Sidebar — stretch with content, logout stays at bottom */
body.st-is-dashboard .st-dashboard__sidebar {
    height: auto !important;
    min-height: 100% !important;
    align-self: stretch !important;
    position: sticky !important;
    top: 0 !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
}

body.st-is-dashboard .st-dash-nav {
    min-height: 100% !important;
    height: 100% !important;
}

/* ── Recent Orders table — exact PNG match ── */
body.st-is-dashboard .st-mydb__card--orders {
    padding: 32px 36px !important;
}

body.st-is-dashboard .st-mydb__orders-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
}

/* Header row — light grey bg */
body.st-is-dashboard .st-mydb__orders-table thead tr {
    background: #f8f9fa !important;
    border-bottom: none !important;
}
body.st-is-dashboard .st-mydb__orders-table th {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: #9ca3af !important;
    padding: 14px 16px !important;
    white-space: nowrap !important;
    text-align: left !important;
    border-bottom: 1px solid #f0f1f3 !important;
}
body.st-is-dashboard .st-mydb__orders-table th:first-child { border-radius: 8px 0 0 8px !important; }
body.st-is-dashboard .st-mydb__orders-table th:last-child  { border-radius: 0 8px 8px 0 !important; }

/* Data rows — more breathing room */
body.st-is-dashboard .st-mydb__order-row {
    border-bottom: 1px solid #f3f4f6 !important;
}
body.st-is-dashboard .st-mydb__order-row:last-child {
    border-bottom: none !important;
}
body.st-is-dashboard .st-mydb__order-row td {
    padding: 20px 16px !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    color: #374151 !important;
}

body.st-is-dashboard .st-mydb__order-id {
    font-weight: 700 !important;
    color: #111 !important;
    font-size: 15px !important;
}
body.st-is-dashboard .st-mydb__order-date { color: #6b7280 !important; }
body.st-is-dashboard .st-mydb__order-total {
    font-weight: 700 !important;
    color: #111 !important;
    font-size: 15px !important;
}

/* Status badges — match PNG */
body.st-is-dashboard .st-mydb__badge {
    padding: 6px 14px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
body.st-is-dashboard .st-mydb__badge--delivered  { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #d1fae5 !important; }
body.st-is-dashboard .st-mydb__badge--shipped    { background: #fff7ed !important; color: #d97706 !important; border: 1px solid #fed7aa !important; }
body.st-is-dashboard .st-mydb__badge--processing { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #bfdbfe !important; }
body.st-is-dashboard .st-mydb__badge--onhold     { background: #fefce8 !important; color: #ca8a04 !important; border: 1px solid #fde68a !important; }
body.st-is-dashboard .st-mydb__badge--cancelled  { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }

body.st-is-dashboard .st-mydb__action-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0d9488 !important;
    white-space: nowrap !important;
}

/* Card head title spacing */
body.st-is-dashboard .st-mydb__card-head {
    margin-bottom: 20px !important;
}

/* ============================================================
   ACCOUNT SETTINGS  — .st-accsettings
   ============================================================ */

body.st-is-dashboard .st-accsettings {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

/* Page header */
body.st-is-dashboard .st-accsettings__header {
    margin-bottom: 4px !important;
}
body.st-is-dashboard .st-accsettings__eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #0d9488 !important;
    margin: 0 0 6px !important;
}
body.st-is-dashboard .st-accsettings__title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.5px !important;
}
body.st-is-dashboard .st-accsettings__sub {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Form wrapper */
body.st-is-dashboard .st-accsettings__form {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

/* Card */
body.st-is-dashboard .st-accsettings__card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 32px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

/* Card header row */
body.st-is-dashboard .st-accsettings__card-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}
body.st-is-dashboard .st-accsettings__card-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: #f3f4f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #374151 !important;
}
body.st-is-dashboard .st-accsettings__card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 2px !important;
}
body.st-is-dashboard .st-accsettings__card-sub {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Divider */
body.st-is-dashboard .st-accsettings__divider {
    height: 1px !important;
    background: #f3f4f6 !important;
    margin: 0 0 24px !important;
}

/* Avatar row */
body.st-is-dashboard .st-accsettings__avatar-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}
body.st-is-dashboard .st-accsettings__avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2dd4bf, #f59e0b) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
body.st-is-dashboard .st-accsettings__avatar-letter {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1 !important;
}
body.st-is-dashboard .st-accsettings__avatar-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 4px !important;
    letter-spacing: 0.03em !important;
}
body.st-is-dashboard .st-accsettings__avatar-email {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* 2-column grid row */
body.st-is-dashboard .st-accsettings__row-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

/* Field */
body.st-is-dashboard .st-accsettings__field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
}
body.st-is-dashboard .st-accsettings__row-2col .st-accsettings__field {
    margin-bottom: 0 !important;
}
body.st-is-dashboard .st-accsettings__label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
body.st-is-dashboard .st-accsettings__input {
    height: 48px !important;
    padding: 0 16px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #111 !important;
    background: #fafafa !important;
    width: 100% !important;
    outline: none !important;
    transition: border-color .15s !important;
    box-sizing: border-box !important;
}
body.st-is-dashboard .st-accsettings__input:focus {
    border-color: #0d9488 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,.1) !important;
}
body.st-is-dashboard .st-accsettings__input::placeholder {
    color: #9ca3af !important;
}

/* Password field with eye toggle */
body.st-is-dashboard .st-accsettings__pw-wrap {
    position: relative !important;
}
body.st-is-dashboard .st-accsettings__pw-wrap .st-accsettings__input {
    padding-right: 48px !important;
}
body.st-is-dashboard .st-accsettings__eye {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
}
body.st-is-dashboard .st-accsettings__eye:hover {
    color: #374151 !important;
}

/* Button row */
body.st-is-dashboard .st-accsettings__btn-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 8px !important;
}
body.st-is-dashboard .st-accsettings__btn-primary {
    height: 48px !important;
    padding: 0 32px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 99px !important;
    cursor: pointer !important;
    transition: background .15s !important;
}
body.st-is-dashboard .st-accsettings__btn-primary:hover {
    background: #333 !important;
}
body.st-is-dashboard .st-accsettings__btn-cancel {
    height: 48px !important;
    padding: 0 28px !important;
    background: transparent !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 99px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: border-color .15s, color .15s !important;
}
body.st-is-dashboard .st-accsettings__btn-cancel:hover {
    border-color: #9ca3af !important;
    color: #111 !important;
}

/* ============================================================
   SAVED ADDRESSES  — .st-savedaddr
   ============================================================ */

body.st-is-dashboard .st-savedaddr {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

/* Page header */
body.st-is-dashboard .st-savedaddr__header { margin-bottom: 4px !important; }
body.st-is-dashboard .st-savedaddr__eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #0d9488 !important;
    margin: 0 0 6px !important;
}
body.st-is-dashboard .st-savedaddr__title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.5px !important;
}
body.st-is-dashboard .st-savedaddr__sub {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Grid */
body.st-is-dashboard .st-savedaddr__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

/* Card base */
body.st-is-dashboard .st-savedaddr__card {
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 260px !important;
    position: relative !important;
    transition: box-shadow .2s !important;
}
body.st-is-dashboard .st-savedaddr__card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
}

/* Default card — teal border */
body.st-is-dashboard .st-savedaddr__card--default {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 0 1px #2dd4bf !important;
}

/* DEFAULT badge */
body.st-is-dashboard .st-savedaddr__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: linear-gradient(135deg, #2dd4bf, #10b981) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    margin-bottom: 14px !important;
    width: fit-content !important;
}

/* Type label (🏠 HOME) */
body.st-is-dashboard .st-savedaddr__type-label {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #111 !important;
    margin: 0 0 10px !important;
}

/* Name */
body.st-is-dashboard .st-savedaddr__name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 8px !important;
}

/* Address lines */
body.st-is-dashboard .st-savedaddr__lines p {
    font-size: 14px !important;
    color: #374151 !important;
    margin: 0 0 2px !important;
    line-height: 1.5 !important;
}

/* Phone */
body.st-is-dashboard .st-savedaddr__phone {
    font-size: 13px !important;
    color: #9ca3af !important;
    margin: 10px 0 0 !important;
}

/* Empty msg */
body.st-is-dashboard .st-savedaddr__empty-msg {
    font-size: 14px !important;
    color: #9ca3af !important;
    margin: 8px 0 !important;
}

/* Divider */
body.st-is-dashboard .st-savedaddr__divider {
    height: 1px !important;
    background: #f3f4f6 !important;
    margin: 16px 0 !important;
    flex-shrink: 0 !important;
}

/* Action buttons row */
body.st-is-dashboard .st-savedaddr__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: auto !important;
}
body.st-is-dashboard .st-savedaddr__btn {
    height: 36px !important;
    padding: 0 18px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    background: #fff !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: border-color .15s, color .15s !important;
    cursor: pointer !important;
}
body.st-is-dashboard .st-savedaddr__btn:hover {
    border-color: #9ca3af !important;
    color: #111 !important;
}
body.st-is-dashboard .st-savedaddr__btn--delete {
    color: #ef4444 !important;
    border-color: #fecaca !important;
}
body.st-is-dashboard .st-savedaddr__btn--delete:hover {
    background: #fef2f2 !important;
    border-color: #f87171 !important;
}

/* Add new card */
body.st-is-dashboard .st-savedaddr__card--add {
    border: 2px dashed #d1d5db !important;
    background: #fafafa !important;
    box-shadow: none !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    min-height: 260px !important;
    gap: 12px !important;
    flex-direction: column !important;
}
body.st-is-dashboard .st-savedaddr__card--add:hover {
    border-color: #2dd4bf !important;
    background: #f0fdfa !important;
    box-shadow: none !important;
}
body.st-is-dashboard .st-savedaddr__add-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #f0fdfa !important;
    border: 1.5px solid #99f6e4 !important;
    color: #0d9488 !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.st-is-dashboard .st-savedaddr__add-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #9ca3af !important;
    margin: 0 !important;
}
body.st-is-dashboard .st-savedaddr__card--add:hover .st-savedaddr__add-label {
    color: #0d9488 !important;
}

/* Active default indicator button */
body.st-is-dashboard .st-savedaddr__btn--active {
    color: #0d9488 !important;
    border-color: #99f6e4 !important;
    background: #f0fdfa !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* WooCommerce notices inside dashboard */
body.st-is-dashboard .woocommerce-message,
body.st-is-dashboard .woocommerce-error,
body.st-is-dashboard .woocommerce-info,
body.st-is-dashboard ul.woocommerce-message,
body.st-is-dashboard ul.woocommerce-error,
body.st-is-dashboard ul.woocommerce-info {
    border-radius: 10px !important;
    border-left: 4px solid #2dd4bf !important;
    background: #f0fdfa !important;
    color: #065f46 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 14px 18px !important;
    margin: 0 0 20px !important;
    list-style: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body.st-is-dashboard .woocommerce-error {
    border-left-color: #ef4444 !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
}
body.st-is-dashboard .woocommerce-info {
    border-left-color: #3b82f6 !important;
    background: #eff6ff !important;
    color: #1e40af !important;
}
body.st-is-dashboard .woocommerce-message::before,
body.st-is-dashboard .woocommerce-error::before,
body.st-is-dashboard .woocommerce-info::before {
    display: none !important;
}

/* ============================================================
   ADDRESS BOOK FORM — .st-addrform
   ============================================================ */

body.st-is-dashboard .st-addrform {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 720px !important;
}
body.st-is-dashboard .st-addrform__back { margin-bottom: 20px !important; }
body.st-is-dashboard .st-addrform__back-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0d9488 !important;
    text-decoration: none !important;
}
body.st-is-dashboard .st-addrform__back-link:hover { text-decoration: underline !important; }

body.st-is-dashboard .st-addrform__header { margin-bottom: 28px !important; }
body.st-is-dashboard .st-addrform__eyebrow {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.12em !important; text-transform: uppercase !important;
    color: #0d9488 !important; margin: 0 0 6px !important;
}
body.st-is-dashboard .st-addrform__title {
    font-size: 26px !important; font-weight: 800 !important;
    color: #111 !important; margin: 0 0 6px !important;
}
body.st-is-dashboard .st-addrform__sub {
    font-size: 14px !important; color: #6b7280 !important; margin: 0 !important;
}

body.st-is-dashboard .st-addrform__form {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 32px !important;
    border: 1px solid #e5e7eb !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* Field */
body.st-is-dashboard .st-addrform__field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
body.st-is-dashboard .st-addrform__field--highlight {
    background: #f0fdfa !important;
    border-radius: 12px !important;
    padding: 16px !important;
    border: 1.5px solid #99f6e4 !important;
}
body.st-is-dashboard .st-addrform__label {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.08em !important; text-transform: uppercase !important;
    color: #374151 !important;
}
body.st-is-dashboard .st-addrform__req { color: #ef4444 !important; font-weight: 700 !important; }
body.st-is-dashboard .st-addrform__opt { color: #9ca3af !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }
body.st-is-dashboard .st-addrform__field--highlight .st-addrform__label {
    color: #0d9488 !important;
}
body.st-is-dashboard .st-addrform__input,
body.st-is-dashboard .st-addrform__input select {
    height: 48px !important; padding: 0 16px !important;
    border: 1.5px solid #e5e7eb !important; border-radius: 10px !important;
    font-size: 14px !important; color: #111 !important;
    background: #fafafa !important; width: 100% !important;
    outline: none !important; box-sizing: border-box !important;
    transition: border-color .15s !important;
}
body.st-is-dashboard select.st-addrform__input {
    padding: 0 16px !important; cursor: pointer !important;
}
body.st-is-dashboard .st-addrform__input:focus {
    border-color: #0d9488 !important; background: #fff !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,.1) !important;
}
body.st-is-dashboard .st-addrform__input::placeholder { color: #9ca3af !important; }

/* Quick-label hint buttons */
body.st-is-dashboard .st-addrform__label-hints {
    display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}
body.st-is-dashboard .st-addrform__hint-btn {
    padding: 4px 14px !important; border-radius: 99px !important;
    border: 1.5px solid #99f6e4 !important; background: #fff !important;
    font-size: 12px !important; font-weight: 600 !important;
    color: #0d9488 !important; cursor: pointer !important;
    transition: background .15s !important;
}
body.st-is-dashboard .st-addrform__hint-btn:hover {
    background: #0d9488 !important; color: #fff !important;
    border-color: #0d9488 !important;
}

/* Grid rows */
body.st-is-dashboard .st-addrform__row-2col {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important;
}
body.st-is-dashboard .st-addrform__row-3col {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 16px !important;
}

/* Buttons */
body.st-is-dashboard .st-addrform__btn-row {
    display: flex !important; gap: 14px !important; align-items: center !important;
    margin-top: 8px !important;
}
body.st-is-dashboard .st-addrform__btn-primary {
    height: 48px !important; padding: 0 36px !important;
    background: #111 !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: 0.08em !important; text-transform: uppercase !important;
    border: none !important; border-radius: 99px !important;
    cursor: pointer !important; transition: background .15s !important;
}
body.st-is-dashboard .st-addrform__btn-primary:hover { background: #333 !important; }
body.st-is-dashboard .st-addrform__btn-cancel {
    height: 48px !important; padding: 0 28px !important;
    background: transparent !important; color: #374151 !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: 0.06em !important; text-transform: uppercase !important;
    border: 1.5px solid #d1d5db !important; border-radius: 99px !important;
    display: inline-flex !important; align-items: center !important;
    text-decoration: none !important; transition: border-color .15s !important;
}
body.st-is-dashboard .st-addrform__btn-cancel:hover {
    border-color: #9ca3af !important; color: #111 !important;
}

/* Mobile form */
@media (max-width: 768px) {
    body.st-is-dashboard .st-addrform__row-2col,
    body.st-is-dashboard .st-addrform__row-3col {
        grid-template-columns: 1fr !important;
    }
    body.st-is-dashboard .st-addrform__form {
        padding: 20px !important;
    }
    body.st-is-dashboard .st-addrform__btn-row {
        flex-direction: column !important;
    }
    body.st-is-dashboard .st-addrform__btn-primary,
    body.st-is-dashboard .st-addrform__btn-cancel {
        width: 80% !important; justify-content: center !important;
    }
}

   WISHLIST PAGE — .st-wishlist
   ============================================================ */

body.st-is-dashboard .st-wishlist {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
body.st-is-dashboard .st-wishlist__header { margin-bottom: 4px !important; }
body.st-is-dashboard .st-wishlist__eyebrow {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: .12em !important; text-transform: uppercase !important;
    color: #0d9488 !important; margin: 0 0 6px !important;
}
body.st-is-dashboard .st-wishlist__title {
    font-size: 28px !important; font-weight: 800 !important;
    color: #111 !important; margin: 0 0 8px !important; letter-spacing: -.5px !important;
}
body.st-is-dashboard .st-wishlist__sub {
    font-size: 14px !important; color: #6b7280 !important; margin: 0 !important;
}
body.st-is-dashboard .st-wishlist__meta-bar {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
}
body.st-is-dashboard .st-wishlist__count {
    font-size: 14px !important; color: #6b7280 !important; font-weight: 500 !important;
}
body.st-is-dashboard .st-wishlist__add-all-form { margin: 0 !important; }
body.st-is-dashboard .st-wishlist__add-all-btn {
    height: 44px !important; padding: 0 28px !important;
    background: #111 !important; color: #fff !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .1em !important; text-transform: uppercase !important;
    border: none !important; border-radius: 99px !important;
    cursor: pointer !important; transition: background .15s !important;
}
body.st-is-dashboard .st-wishlist__add-all-btn:hover { background: #333 !important; }
body.st-is-dashboard .st-wishlist__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}
body.st-is-dashboard .st-wishlist__card {
    background: #fff !important; border-radius: 16px !important;
    overflow: hidden !important; border: 1px solid #f0f0ef !important;
    display: flex !important; flex-direction: column !important;
    transition: box-shadow .2s !important;
}
body.st-is-dashboard .st-wishlist__card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.09) !important; }
body.st-is-dashboard .st-wishlist__img-wrap {
    position: relative !important; aspect-ratio: 1/1 !important;
    background: #f3f4f6 !important; overflow: hidden !important;
}
body.st-is-dashboard .st-wishlist__img {
    width: 80% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    transition: transform .3s !important;
}
body.st-is-dashboard .st-wishlist__card:hover .st-wishlist__img { transform: scale(1.04) !important; }
body.st-is-dashboard .st-wishlist__badge {
    position: absolute !important; top: 12px !important; left: 12px !important;
    background: #0d9488 !important; color: #fff !important;
    font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: .08em !important; padding: 4px 10px !important;
    border-radius: 99px !important; z-index: 2 !important;
}
body.st-is-dashboard .st-wishlist__remove {
    position: absolute !important; top: 10px !important; right: 10px !important;
    width: 30px !important; height: 30px !important;
    background: rgba(255,255,255,.88) !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #374151 !important; text-decoration: none !important; z-index: 2 !important;
    transition: background .15s, color .15s !important;
}
body.st-is-dashboard .st-wishlist__remove:hover { background: #111 !important; color: #fff !important; }
body.st-is-dashboard .st-wishlist__body {
    padding: 14px 16px 18px !important;
    display: flex !important; flex-direction: column !important; gap: 6px !important; flex: 1 !important;
}
body.st-is-dashboard .st-wishlist__name {
    font-size: 13px !important; font-weight: 800 !important;
    color: #111 !important; text-decoration: none !important;
    letter-spacing: .04em !important; line-height: 1.3 !important; display: block !important;
    word-break: break-word !important; overflow-wrap: break-word !important;
    hyphens: auto !important;
}
body.st-is-dashboard .st-wishlist__name:hover { color: #0d9488 !important; }
body.st-is-dashboard .st-wishlist__attrs {
    font-size: 12px !important; color: #6b7280 !important; margin: 0 !important;
}
body.st-is-dashboard .st-wishlist__price-row {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; margin-top: 4px !important;
}
body.st-is-dashboard .st-wishlist__price {
    font-size: 18px !important; font-weight: 700 !important; color: #111 !important;
}
body.st-is-dashboard .st-wishlist__price del { color: #9ca3af !important; font-size: 14px !important; }
body.st-is-dashboard .st-wishlist__price ins { text-decoration: none !important; color: #0d9488 !important; }
body.st-is-dashboard .st-wishlist__stock {
    font-size: 11px !important; font-weight: 700 !important;
    padding: 3px 10px !important; border-radius: 99px !important;
}
body.st-is-dashboard .st-wishlist__stock--in  { background: #ecfdf5 !important; color: #059669 !important; }
body.st-is-dashboard .st-wishlist__stock--low { background: #fff7ed !important; color: #d97706 !important; }
body.st-is-dashboard .st-wishlist__stock--out { background: #f3f4f6 !important; color: #9ca3af !important; }
body.st-is-dashboard .st-wishlist__atc-btn {
    display: block !important; width: 80% !important;
    height: 44px !important; line-height: 44px !important; text-align: center !important;
    background: #111 !important; color: #fff !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .1em !important; text-transform: uppercase !important;
    border-radius: 99px !important; text-decoration: none !important;
    margin-top: auto !important; transition: background .15s !important;
    border: none !important; cursor: pointer !important; box-sizing: border-box !important;
}
body.st-is-dashboard .st-wishlist__atc-btn:hover { background: #333 !important; color: #fff !important; }
body.st-is-dashboard .st-wishlist__atc-btn--disabled {
    background: #f3f4f6 !important; color: #9ca3af !important; cursor: not-allowed !important;
}
body.st-is-dashboard .st-wishlist__empty {
    text-align: center !important; padding: 80px 20px !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 16px !important;
}
body.st-is-dashboard .st-wishlist__empty-msg { font-size: 16px !important; color: #9ca3af !important; margin: 0 !important; }
body.st-is-dashboard .st-wishlist__shop-btn {
    height: 48px !important; padding: 0 32px !important;
    background: #111 !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
    border-radius: 99px !important; text-decoration: none !important;
    display: inline-flex !important; align-items: center !important;
}

/* ============================================================
   ORDER HISTORY — .st-orders
   ============================================================ */

body.st-is-dashboard .st-orders {
    display: flex !important; flex-direction: column !important; gap: 24px !important;
}

/* Header */
body.st-is-dashboard .st-orders__header { margin-bottom: 4px !important; }
body.st-is-dashboard .st-orders__eyebrow {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: .12em !important; text-transform: uppercase !important;
    color: #0d9488 !important; margin: 0 0 6px !important;
}
body.st-is-dashboard .st-orders__title {
    font-size: 28px !important; font-weight: 800 !important;
    color: #111 !important; margin: 0 0 8px !important; letter-spacing: -.5px !important;
}
body.st-is-dashboard .st-orders__sub {
    font-size: 14px !important; color: #6b7280 !important; margin: 0 !important;
}

/* Filter bar */
body.st-is-dashboard .st-orders__filter-bar {
    display: flex !important; align-items: center !important;
    gap: 10px !important; flex-wrap: wrap !important;
}
body.st-is-dashboard .st-orders__filter-pills {
    display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
}
body.st-is-dashboard .st-orders__pill {
    height: 40px !important; padding: 0 20px !important;
    border-radius: 99px !important; border: 1.5px solid #e5e7eb !important;
    background: #fff !important; color: #374151 !important;
    font-size: 13px !important; font-weight: 600 !important;
    text-decoration: none !important; display: inline-flex !important;
    align-items: center !important; transition: all .15s !important; white-space: nowrap !important;
}
body.st-is-dashboard .st-orders__pill:hover {
    border-color: #111 !important; color: #111 !important;
}
body.st-is-dashboard .st-orders__pill--active {
    background: #111 !important; color: #fff !important;
    border-color: #111 !important;
}

/* Search */
body.st-is-dashboard .st-orders__search-form {
    display: flex !important; align-items: center !important;
    background: #fff !important; border: 1.5px solid #e5e7eb !important;
    border-radius: 99px !important; padding: 0 18px !important;
    height: 40px !important; gap: 8px !important; flex: 1 !important;
    min-width: 200px !important; max-width: 320px !important;
    transition: border-color .15s !important;
}
body.st-is-dashboard .st-orders__search-form:focus-within {
    border-color: #0d9488 !important;
}
body.st-is-dashboard .st-orders__search-icon { color: #9ca3af !important; display: flex !important; }
body.st-is-dashboard .st-orders__search-input {
    border: none !important; background: transparent !important;
    font-size: 13px !important; color: #111 !important;
    outline: none !important; width: 100% !important; padding: 0 !important; height: auto !important;
}
body.st-is-dashboard .st-orders__search-input::placeholder { color: #9ca3af !important; }

/* Orders list */
body.st-is-dashboard .st-orders__list {
    display: flex !important; flex-direction: column !important; gap: 16px !important;
}

/* Order card */
body.st-is-dashboard .st-orders__card {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #e8e8e6 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}

/* Card head — light warm gray like PNG */
body.st-is-dashboard .st-orders__card-head {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 28px !important;
    background: #f5f5f3 !important;
    border-bottom: 1px solid #eaeae8 !important;
}
body.st-is-dashboard .st-orders__card-info {
    display: flex !important; flex-direction: column !important; gap: 4px !important;
}
body.st-is-dashboard .st-orders__order-num {
    font-size: 18px !important; font-weight: 800 !important; color: #1a1a2e !important;
    letter-spacing: -.2px !important;
}
body.st-is-dashboard .st-orders__order-meta {
    font-size: 13px !important; color: #8a8a8a !important; font-weight: 400 !important;
}
body.st-is-dashboard .st-orders__card-right {
    display: flex !important; align-items: center !important; gap: 20px !important;
}
body.st-is-dashboard .st-orders__total {
    font-size: 22px !important; font-weight: 800 !important; color: #111 !important;
    letter-spacing: -.3px !important;
}

/* Status badges */
body.st-is-dashboard .st-orders__badge {
    font-size: 12px !important; font-weight: 700 !important;
    padding: 5px 14px !important; border-radius: 99px !important;
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    white-space: nowrap !important;
}
body.st-is-dashboard .st-orders__badge--delivered  { background: #f0fdf4 !important; color: #16a34a !important; border: 1.5px solid #bbf7d0 !important; }
body.st-is-dashboard .st-orders__badge--shipped    { background: #fff8f0 !important; color: #c2550a !important; border: 1.5px solid #fcd9b6 !important; }
body.st-is-dashboard .st-orders__badge--processing { background: #eff6ff !important; color: #1d4ed8 !important; border: 1.5px solid #bfdbfe !important; }
body.st-is-dashboard .st-orders__badge--transit    { background: #f0f9ff !important; color: #0369a1 !important; border: 1.5px solid #bae6fd !important; }
body.st-is-dashboard .st-orders__badge--cancelled  { background: #fef2f2 !important; color: #dc2626 !important; border: 1.5px solid #fecaca !important; }
body.st-is-dashboard .st-orders__badge--refunded   { background: #f5f3ff !important; color: #7c3aed !important; border: 1.5px solid #ddd6fe !important; }
body.st-is-dashboard .st-orders__badge--pending    { background: #fefce8 !important; color: #a16207 !important; border: 1.5px solid #fde68a !important; }
body.st-is-dashboard .st-orders__badge--default    { background: #f3f4f6 !important; color: #6b7280 !important; border: 1.5px solid #e5e7eb !important; }

/* Product items */
body.st-is-dashboard .st-orders__items {
    padding: 0 28px !important;
    background: #fff !important;
}
body.st-is-dashboard .st-orders__item-row {
    display: flex !important; align-items: center !important; gap: 18px !important;
    padding: 18px 0 !important; border-bottom: 1px solid #f3f3f1 !important;
}
body.st-is-dashboard .st-orders__item-row:last-child { border-bottom: none !important; }
body.st-is-dashboard .st-orders__item-thumb {
    width: 72px !important; height: 72px !important; flex-shrink: 0 !important;
    background: #ebebea !important; border-radius: 12px !important; overflow: hidden !important;
}
body.st-is-dashboard .st-orders__item-thumb img {
    width: 80% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
body.st-is-dashboard .st-orders__item-info {
    flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 5px !important;
    min-width: 0 !important;
}
body.st-is-dashboard .st-orders__item-name {
    font-size: 15px !important; font-weight: 700 !important; color: #1a1a2e !important;
}
body.st-is-dashboard .st-orders__item-meta {
    font-size: 13px !important; color: #8a8a8a !important; font-weight: 400 !important;
}
body.st-is-dashboard .st-orders__item-price {
    font-size: 16px !important; font-weight: 700 !important; color: #111 !important;
    white-space: nowrap !important; flex-shrink: 0 !important;
}

/* Tracking row — subtle inset gray like PNG */
body.st-is-dashboard .st-orders__tracking-row {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    margin: 0 16px 16px !important;
    padding: 14px 20px !important;
    background: #f5f5f3 !important;
    border-radius: 10px !important;
    border: none !important;
}
body.st-is-dashboard .st-orders__tracking-label {
    font-size: 13px !important; font-weight: 800 !important;
    color: #1a1a2e !important; letter-spacing: .06em !important;
    text-transform: uppercase !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
}
body.st-is-dashboard .st-orders__track-btn {
    height: 40px !important; padding: 0 24px !important;
    background: #fff !important; border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important; color: #111 !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
    text-decoration: none !important; display: inline-flex !important;
    align-items: center !important; transition: border-color .15s, background .15s !important;
    white-space: nowrap !important; flex-shrink: 0 !important;
}
body.st-is-dashboard .st-orders__track-btn:hover {
    border-color: #111 !important; background: #f9f9f9 !important;
}

/* View/actions row */
body.st-is-dashboard .st-orders__actions-row {
    padding: 12px 24px !important; border-top: 1px solid #f3f4f6 !important;
    display: flex !important; gap: 10px !important;
}
body.st-is-dashboard .st-orders__view-btn {
    height: 36px !important; padding: 0 20px !important;
    border: 1.5px solid #e5e7eb !important; border-radius: 99px !important;
    font-size: 12px !important; font-weight: 600 !important; color: #374151 !important;
    text-decoration: none !important; display: inline-flex !important;
    align-items: center !important; background: #fff !important;
    transition: border-color .15s !important;
}
body.st-is-dashboard .st-orders__view-btn:hover { border-color: #111 !important; color: #111 !important; }

/* Empty state */
body.st-is-dashboard .st-orders__empty {
    text-align: center !important; padding: 80px 20px !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 16px !important;
}
body.st-is-dashboard .st-orders__empty-msg { font-size: 16px !important; color: #9ca3af !important; margin: 0 !important; }
body.st-is-dashboard .st-orders__shop-btn {
    height: 48px !important; padding: 0 32px !important;
    background: #111 !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
    border-radius: 99px !important; text-decoration: none !important;
    display: inline-flex !important; align-items: center !important;
}


/* ============================================================
   DASHBOARD RESPONSIVENESS — Comprehensive
   Breakpoints: 1024 (tablet) | 768 (mobile) | 480 (small mobile)
   ============================================================ */

/* ── TABLET 1024px ───────────────────────────── */
@media (max-width: 1024px) {

    /* Layout */
    body.st-is-dashboard .st-dashboard {
        grid-template-columns: 220px 1fr !important;
    }
    body.st-is-dashboard .st-dashboard__sidebar {
        flex: 0 0 220px !important;
        width: 220px !important;
    }
    body.st-is-dashboard .st-dashboard__content {
        padding: 28px 20px !important;
    }

    /* Dashboard — bottom row stack */
    body.st-is-dashboard .st-mydb__bottom-row {
        grid-template-columns: 1fr !important;
    }

    /* Orders */
    body.st-is-dashboard .st-mydb__orders-wrap {
        overflow-x: auto !important;
    }
    body.st-is-dashboard .st-mydb__orders-table {
        min-width: 560px !important;
    }

    /* Saved addresses — 2 col */
    body.st-is-dashboard .st-savedaddr__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Account settings — single col */
    body.st-is-dashboard .st-accsettings__row-2col {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    body.st-is-dashboard .st-accsettings__row-2col .st-accsettings__field {
        margin-bottom: 20px !important;
    }

    /* Address book form — 2col stays, 3col becomes 2col */
    body.st-is-dashboard .st-addrform__row-3col {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Wishlist — 2 col on tablet */
    body.st-is-dashboard .st-wishlist__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Orders filter */
    body.st-is-dashboard .st-orders__filter-bar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    body.st-is-dashboard .st-orders__search-form {
        max-width: 100% !important;
        width: 100% !important;
        flex: 0 0 44px !important;
        height: 44px !important;
    }
}

/* ── MOBILE 768px ────────────────────────────── */
@media (max-width: 768px) {

    /* ── SIDEBAR → horizontal icon bar ── */
    body.st-is-dashboard .st-dashboard {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
        min-height: 100dvh !important;
    }
    body.st-is-dashboard .st-dashboard__sidebar {
        width: 100% !important;
        flex: none !important;
        min-height: auto !important;
        max-height: none !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: #fff !important;
    }
    /* Nav = column: icon row on top, logout below */
    body.st-is-dashboard .st-dash-nav {
        flex-direction: column !important;
        overflow-x: visible !important;
        gap: 0 !important;
        padding: 0 !important;
        min-height: auto !important;
    }
    body.st-is-dashboard .st-dash-nav__list {
        flex-direction: row !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 6px 12px !important;
        width: 100% !important;
    }
    body.st-is-dashboard .st-dash-nav__list::-webkit-scrollbar { display: none !important; }
    body.st-is-dashboard .st-dash-nav__logout-wrap {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        border-top: 1px solid #f3f4f6 !important;
        padding: 4px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.st-is-dashboard .st-dash-nav__link--logout {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 10px 16px !important;
        border-bottom: none !important;
        border-left: none !important;
        border-radius: 8px !important;
    }
    body.st-is-dashboard .st-dash-nav__link {
        padding: 10px 14px !important;
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 8px 8px 0 0 !important;
        white-space: nowrap !important;
        flex-direction: column !important;
        gap: 3px !important;
    }
    body.st-is-dashboard .st-dash-nav__item.is-active .st-dash-nav__link,
    body.st-is-dashboard .st-dash-nav__link[aria-current="page"] {
        border-left: none !important;
        border-bottom: 3px solid #2dd4bf !important;
        background: #f0fdfa !important;
        border-radius: 0 !important;
    }
    body.st-is-dashboard .st-dash-nav__label {
        font-size: 9px !important;
        display: block !important;
        text-align: center !important;
        letter-spacing: .04em !important;
        color: #6b7280 !important;
    }
    body.st-is-dashboard .st-dash-nav__item.is-active .st-dash-nav__label { color: #0d9488 !important; }
    body.st-is-dashboard .st-dash-nav__icon { margin: 0 !important; }
    body.st-is-dashboard .st-dash-nav__icon svg { width: 18px !important; height: 18px !important; }

    /* Content area */
    body.st-is-dashboard .st-dashboard__content {
        grid-column: 1 !important;
        padding: 20px 16px !important;
    }

    /* Header nav */
    body.st-is-dashboard .st-nav__pill { padding: 0 14px !important; }

    /* ── DASHBOARD PAGE ── */
    body.st-is-dashboard .st-mydb__title,
    body.st-is-dashboard .st-accsettings__title,
    body.st-is-dashboard .st-savedaddr__title,
    body.st-is-dashboard .st-wishlist__title,
    body.st-is-dashboard .st-orders__title,
    body.st-is-dashboard .st-addrform__title {
        font-size: 22px !important;
    }
    body.st-is-dashboard .st-mydb__bottom-row {
        grid-template-columns: 1fr !important;
    }
    body.st-is-dashboard .st-mydb__orders-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body.st-is-dashboard .st-mydb__orders-table {
        min-width: 560px !important;
    }
    body.st-is-dashboard .st-mydb__wishlist-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.st-is-dashboard .st-mydb__card {
        padding: 16px !important;
    }

    /* ── SAVED ADDRESSES ── */
    body.st-is-dashboard .st-savedaddr__grid {
        grid-template-columns: 1fr !important;
    }
    body.st-is-dashboard .st-savedaddr__card {
        min-height: auto !important;
    }
    body.st-is-dashboard .st-savedaddr__card--add {
        min-height: 120px !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    /* ── ACCOUNT SETTINGS ── */
    body.st-is-dashboard .st-accsettings__card { padding: 20px !important; }
    body.st-is-dashboard .st-accsettings__row-2col {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    body.st-is-dashboard .st-accsettings__row-2col .st-accsettings__field {
        margin-bottom: 20px !important;
    }
    body.st-is-dashboard .st-accsettings__avatar-row { flex-wrap: wrap !important; }
    body.st-is-dashboard .st-accsettings__btn-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body.st-is-dashboard .st-accsettings__btn-primary,
    body.st-is-dashboard .st-accsettings__btn-cancel {
        width: 80% !important; justify-content: center !important;
    }

    /* ── ADDRESS BOOK FORM ── */
    body.st-is-dashboard .st-addrform__row-2col,
    body.st-is-dashboard .st-addrform__row-3col {
        grid-template-columns: 1fr !important;
    }
    body.st-is-dashboard .st-addrform__form { padding: 20px !important; }
    body.st-is-dashboard .st-addrform__btn-row {
        flex-direction: column !important;
    }
    body.st-is-dashboard .st-addrform__btn-primary,
    body.st-is-dashboard .st-addrform__btn-cancel {
        width: 80% !important; justify-content: center !important;
    }

    /* ── WISHLIST ── */
    body.st-is-dashboard .st-wishlist__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    body.st-is-dashboard .st-wishlist__meta-bar {
        flex-wrap: wrap !important; gap: 10px !important;
    }
    body.st-is-dashboard .st-wishlist__add-all-form { width: 100% !important; }
    body.st-is-dashboard .st-wishlist__add-all-btn { width: 100% !important; }
    body.st-is-dashboard .st-wishlist__name { font-size: 12px !important; }
    body.st-is-dashboard .st-wishlist__attrs { font-size: 11px !important; }
    body.st-is-dashboard .st-wishlist__body { padding: 10px 12px 14px !important; }

    /* ── ORDER HISTORY ── */
    body.st-is-dashboard .st-orders__filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body.st-is-dashboard .st-orders__filter-pills {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        padding-bottom: 4px !important;
    }
    body.st-is-dashboard .st-orders__search-form {
        max-width: 100% !important; width: 100% !important;
        height: 44px !important; flex: 0 0 44px !important;
    }
    body.st-is-dashboard .st-orders__card-head {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 14px 16px !important;
    }
    body.st-is-dashboard .st-orders__card-right {
        width: 80% !important;
        justify-content: space-between !important;
    }
    body.st-is-dashboard .st-orders__items { padding: 0 16px !important; }
    body.st-is-dashboard .st-orders__item-thumb {
        width: 56px !important; height: 56px !important;
    }
    body.st-is-dashboard .st-orders__item-name { font-size: 13px !important; }
    body.st-is-dashboard .st-orders__tracking-row {
        margin: 0 10px 12px !important;
        padding: 12px 14px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    body.st-is-dashboard .st-orders__track-btn { width: 80% !important; justify-content: center !important; }
    body.st-is-dashboard .st-orders__tracking-label { font-size: 12px !important; }
    body.st-is-dashboard .st-orders__total { font-size: 18px !important; }
    body.st-is-dashboard .st-orders__order-num { font-size: 15px !important; }
}

/* ── SMALL MOBILE 480px ─────────────────────── */
@media (max-width: 480px) {

    body.st-is-dashboard .st-dashboard__content {
        padding: 16px 12px !important;
    }

    /* Sidebar labels completely hide on very small screens */
    body.st-is-dashboard .st-dash-nav__label {
        display: none !important;
    }
    body.st-is-dashboard .st-dash-nav__link {
        padding: 10px 10px !important;
    }

    /* Dashboard */
    body.st-is-dashboard .st-mydb__title,
    body.st-is-dashboard .st-accsettings__title,
    body.st-is-dashboard .st-savedaddr__title,
    body.st-is-dashboard .st-wishlist__title,
    body.st-is-dashboard .st-orders__title {
        font-size: 20px !important;
    }
    body.st-is-dashboard .st-mydb__card { padding: 14px !important; }
    body.st-is-dashboard .st-mydb__wishlist-grid {
        grid-template-columns: 1fr !important;
    }

    /* Wishlist single col */
    body.st-is-dashboard .st-wishlist__grid {
        grid-template-columns: 1fr !important;
    }
    body.st-is-dashboard .st-wishlist__card {
        display: flex !important;
        flex-direction: row !important;
    }
    body.st-is-dashboard .st-wishlist__img-wrap {
        width: 110px !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 !important;
        border-radius: 12px 0 0 12px !important;
    }
    body.st-is-dashboard .st-wishlist__img {
        border-radius: 12px 0 0 12px !important;
    }
    body.st-is-dashboard .st-wishlist__body {
        padding: 12px !important;
        flex: 1 !important;
    }
    body.st-is-dashboard .st-wishlist__name { font-size: 13px !important; }
    body.st-is-dashboard .st-wishlist__atc-btn {
        padding: 0 16px !important; font-size: 11px !important; width: 100% !important;
    }
    body.st-is-dashboard .st-wishlist__img { width: 100% !important; }
    body.st-is-dashboard .st-wishlist__add-all-form { width: 100% !important; }
    body.st-is-dashboard .st-wishlist__add-all-btn { width: 100% !important; }
    body.st-is-dashboard .st-wishlist__meta-bar { margin-bottom: 4px !important; }

    /* Search bar fix */
    body.st-is-dashboard .st-orders__search-form {
        width: 100% !important; max-width: 100% !important;
        border-radius: 12px !important;
        height: 44px !important;
        min-height: unset !important;
        flex: 0 0 44px !important;
    }
    body.st-is-dashboard .st-orders__search-input { width: 100% !important; }

    /* Orders */
    body.st-is-dashboard .st-orders__card-head {
        padding: 12px !important;
    }
    body.st-is-dashboard .st-orders__items { padding: 0 12px !important; }
    body.st-is-dashboard .st-orders__item-row { gap: 12px !important; }
    body.st-is-dashboard .st-orders__item-thumb {
        width: 48px !important; height: 48px !important;
    }

    /* Addresses */
    body.st-is-dashboard .st-savedaddr__actions { flex-wrap: wrap !important; }
    body.st-is-dashboard .st-savedaddr__btn { flex: 1 !important; justify-content: center !important; text-align: center !important; }

    /* Account settings */
    body.st-is-dashboard .st-accsettings__card { padding: 16px !important; }
    body.st-is-dashboard .st-accsettings__avatar { width: 52px !important; height: 52px !important; }
    body.st-is-dashboard .st-accsettings__avatar-letter { font-size: 20px !important; }
}

/* ── Dashboard mini cart: start below 60px header on mobile ── */
@media (max-width: 768px) {
    body.st-is-dashboard .st-mini-cart__panel {
        top: 104px !important;
        width: 100vw !important;
        border-radius: 0 !important;
    }
    body.st-is-dashboard .st-mini-cart__overlay {
        top: 104px !important;
    }
}

/* ============================================================
   BLOCK: st-collections-split — MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    /* Container becomes flex column — children can be ordered freely */
    .st-csplit .st-container {
        display: flex;
        flex-direction: column;
    }

    /* Header becomes display:contents so heading + view-all participate
       directly in the container flex flow and can be ordered independently */
    .st-csplit__header {
        display: contents;
    }

    /* Heading: first, full width, smaller font */
    .st-csplit__heading {
        order: 1;
        font-size: 28px !important;
        line-height: 1.15 !important;
        width: 100%;
        margin-bottom: 0;
    }

    /* Grid: slider, order 2 */
    .st-csplit__grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0 !important;
        padding: 20px 0 8px !important;
        grid-template-columns: unset !important;
        order: 2;
        list-style: none;
        margin: 0;
    }
    .st-csplit__grid::-webkit-scrollbar { display: none; }

    /* Each item: full-width slide */
    .st-csplit__item {
        flex: 0 0 100% !important;
        scroll-snap-align: center;
        padding: 0 4px;
    }

    /* Dots injected by JS — order 3, between grid and view-all */
    .st-csplit__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 12px 0 0;
        order: 3;
    }
    .st-csplit__dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #d1d5db;
        transition: all .3s;
        cursor: pointer;
        border: none;
        padding: 0;
        flex-shrink: 0;
    }
    .st-csplit__dot.is-active {
        width: 32px;
        border-radius: 99px;
        background: #111;
    }

    /* View all btn: order 4 — below slider + dots */
    .st-csplit__view-all {
        order: 4;
        margin-top: 20px;
        align-self: flex-end;
    }

    /* Card overlay label */
    .st-csplit__card-label { font-size: 18px; }

    /* Collection name + description below card */
    .st-csplit__card-name { font-size: 18px; }
    .st-csplit__card-desc { font-size: 13px; }
}

/* ============================================================
   BLOCK: st-featured-split — MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    /* Section: reduce top spacing */
    .st-fsplit { padding-top: 0 !important; }

    /* Header: single column, tighter */
    .st-fsplit__header {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 24px;
    }

    /* Heading: smaller, full width */
    .st-fsplit__heading {
        font-size: 24px !important;
        line-height: 1.1 !important;
        width: 100%;
    }

    /* Description: smaller */
    .st-fsplit__desc {
        font-size: 14px;
    }

    /* Rows: tighter gap */
    .st-fsplit__rows { gap: 16px; }

    /* Each row: single column, image on top, gap between image & content */
    .st-fsplit__row,
    .st-fsplit__row--img-right {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 12px;
        border-radius: 0;
        overflow: visible;
    }

    /* Always image first, content second */
    .st-fsplit__row--img-right .st-fsplit__img-wrap { order: 1; }
    .st-fsplit__row--img-right .st-fsplit__content   { order: 2; }

    /* Image: fixed aspect, keep its own radius */
    .st-fsplit__img-wrap {
        border-radius: 16px;
        aspect-ratio: 4 / 3;
    }

    /* Content box: light site gradient, taller, content pushed to bottom */
    .st-fsplit__content {
        border-radius: 16px;
        background: linear-gradient(135deg, #e4f5f3 0%, #f5f0e4 100%);
        padding: 24px 18px 28px;
        gap: 10px;
        min-height: 200px;
        justify-content: flex-end;
    }

    /* Collection name */
    .st-fsplit__name {
        font-size: 22px;
        line-height: 1.15;
    }

    /* Description text */
    .st-fsplit__text { font-size: 13px; }

    /* Button: smaller height */
    .st-fsplit__btn {
        font-size: 13px;
        padding: 6px 6px 6px 16px;
        gap: 8px;
    }
    .st-fsplit__btn-arrow {
        width: 30px;
        height: 30px;
    }
}

/* ============================================================