/* ═══════════════════════════════════════════════════════════
   SI MARES — Obsidian & Ivory Editorial
   0px border-radius · high contrast · Serif (Cormorant Garamond + Frank Ruhl Libre) · Premium
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ───────────────────────────────────────── */
:root {
    /* Obsidian & Ivory Palette */
    --color-obsidian:    #000000;
    --color-ivory:       #F9F9F9;
    --color-warm-gray:   #6E6E6E; /* darkened for WCAG AA contrast (≥4.5:1 on the #F9F9F9 ivory bg) */
    --color-light-gray:  #E5E5E5;
    --color-accent:      #C9A96E;       /* decorative only (borders, badges) — too light for text */
    --color-accent-text: #8A6D3B;       /* darker bronze for accent-colored TEXT (≥4.5:1 on ivory) */

    /* Colors — Featured section */
    --color-sand:        #F0EDE9;
    --color-text-dark:   #1A1A1A;

    /* Typography — Serif (Cormorant Garamond headings, Frank Ruhl Libre body) */
    --font-heading: 'Cormorant Garamond', 'Frank Ruhl Libre', serif;
    --font-body:    'Frank Ruhl Libre', 'Cormorant Garamond', serif;

    /* Spacing */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;
    --space-2xl: 8rem;

    /* Layout */
    --container-max: 1280px;
    --header-height: 72px;

    /* Easing — buttery 0.6s global */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 0.6s;
}

/* ── Reset & Base ────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0; /* 0px globally enforced */
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Root-level guard against any horizontal drift on mobile (esp. RTL).
       `clip` clips without creating a scroll container, so it does NOT
       break the desktop sticky product gallery (unlike overflow:hidden). */
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--color-obsidian);
    background-color: var(--color-ivory);
    direction: ltr;
    text-align: left;
    overflow-x: hidden;
}

html[dir="rtl"] body,
body.translatepress-he_IL {
    direction: rtl;
    text-align: right;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--duration) var(--ease-out);
}

a:hover {
    opacity: 0.7;
}

img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.005em;
}

/* Serif on ALL interactive elements — global enforcement */
button,
input,
select,
textarea,
.button,
[type="submit"] {
    font-family: var(--font-body);
}

/* ── Utility Container ───────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL LAYOUT FIX — Header overlap on inner pages
   ═══════════════════════════════════════════════════════════ */
body:not(.home) {
    padding-top: var(--header-height);
}

body:not(.home) .wc-main,
body:not(.home) .site-main {
    padding-top: var(--space-md);
}

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATIONS — fade + zoom-out + GPU acceleration
   ═══════════════════════════════════════════════════════════ */
.fade-in-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children reveal with zoom-out */
.reveal-item {
    opacity: 0;
    transform: translateY(30px) scale(1.04);
    transition: opacity 0.8s var(--ease-out),
                transform 0.8s var(--ease-out);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.is-visible .reveal-item,
.reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger delay for children */
.is-visible .reveal-item:nth-child(1) { transition-delay: 0s; }
.is-visible .reveal-item:nth-child(2) { transition-delay: 0.12s; }
.is-visible .reveal-item:nth-child(3) { transition-delay: 0.24s; }
.is-visible .reveal-item:nth-child(4) { transition-delay: 0.36s; }

/* ═══════════════════════════════════════════════════════════
   HIGH-FASHION HOVER — scale + desaturation overlay
   ═══════════════════════════════════════════════════════════ */
.editorial-grid__image,
.product-card__image,
.brand-strip__image {
    position: relative;
    overflow: hidden;
    background: var(--color-light-gray);
}

.editorial-grid__image::after,
.product-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--duration) var(--ease-out);
    pointer-events: none;
    z-index: 1;
}

.editorial-grid__item:hover .editorial-grid__image::after,
.product-card:hover .product-card__image::after {
    background: rgba(0, 0, 0, 0.08);
}

.editorial-grid__image img,
.product-card__image img,
.brand-strip__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease-out),
                filter var(--duration) var(--ease-out);
}

.editorial-grid__item:hover .editorial-grid__image img {
    transform: scale(1.05);
    filter: saturate(0.85);
}

.product-card:hover .product-card__image img {
    transform: scale(1.06);
    filter: saturate(0.8);
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    height: var(--header-height);
    transition: background-color var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
}

.header--transparent {
    background-color: transparent;
    color: var(--color-ivory);
}

.header--transparent.header--scrolled {
    background-color: rgba(0, 0, 0, 0.95);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.header--solid {
    background-color: var(--color-obsidian);
    color: var(--color-ivory);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Logo — shared base */
.site-logo {
    display: block;
    height: auto;
    max-width: 400px; /* מקסימום רוחב מוחלט - שחררנו לגמרי */
    width: 100%;
    transition: filter var(--duration) var(--ease-out);
}

.header__logo {
    flex-shrink: 0;
}

/* Logo height — proportional per context */
.header-logo {
    max-height: 120px; /* הגדלנו משמעותית את הגובה הבסיסי */
    width: auto;
    max-width: 350px; /* הגדלנו משמעותית את הרוחב הבסיסי */
    transition: filter var(--duration) var(--ease-out),
                max-height var(--duration) var(--ease-out),
                max-width var(--duration) var(--ease-out);
}

/* Home page — before scroll (עמוד הבית - הכי גדול שאפשר) */
.header--transparent .header-logo {
    max-height: 120px; /* גובה ענק מעל הוידאו */
    max-width: 350px;
    filter: invert(1) brightness(2);
}

/* Home page - Scrolled (עמוד הבית - אחרי גלילה) */
.header--transparent.header--scrolled .header-logo {
    max-height: 85px; /* נשאר גדול גם כשגוללים מטה */
    max-width: 260px;
    filter: invert(1) brightness(2);
}

/* Inner pages — solid header (עמודי פנים כמו חנות או מוצר) */
.header--solid .header-logo {
    max-height: 95px; /* הגדלנו מאוד לעמודי הפנים */
    max-width: 300px;
    filter: invert(1) brightness(2);
}

/* Footer logo: white on obsidian */
.footer-logo {
    filter: invert(1) brightness(2);
    max-width: 280px; /* סוגר את האתר למטה בצורה בולטת */
}

/* Mobile bottom nav symbol (נשאר קטן כדי לא להרוס את סרגל הניווט בנייד) */
.mobile-bottom-nav__symbol {
    display: block;
    height: 24px;
    width: auto;
    max-width: 30px;
    filter: invert(1) brightness(2);
    transition: filter 0.2s ease;
}
/* Navigation */
.header__nav {
    display: none;
}

.header__menu {
    display: flex;
    gap: var(--space-md);
    list-style: none;
}

/* RTL (Hebrew) reads the menu right-to-left; LTR (English) keeps natural order. */
html[dir="rtl"] .header__menu {
    flex-direction: row-reverse;
}

.header__menu li a {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: currentColor;
    position: relative;
    padding-bottom: 2px;
    transition: opacity var(--duration) var(--ease-out);
}

.header__menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width var(--duration) var(--ease-out);
}

.header__menu li a:hover::after {
    width: 100%;
}

.header__menu li a:hover {
    opacity: 1;
}

/* Header Actions */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header__cart {
    position: relative;
    color: currentColor;
    display: flex;
    align-items: center;
    transition: opacity var(--duration) var(--ease-out);
}

.header__cart:hover {
    opacity: 0.7;
}

.header__cart-count {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 18px;
    height: 18px;
    background: var(--color-ivory);
    color: var(--color-obsidian);
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hamburger */
.header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.header__hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--duration) var(--ease-out),
                opacity var(--duration) var(--ease-out);
}

.header__hamburger.is-active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.header__hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.header__hamburger.is-active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE MENU
   ═══════════════════════════════════════════════════════════ */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    visibility: hidden;
}

.mobile-menu.is-open {
    pointer-events: auto;
    visibility: visible;
}

.mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
}

.mobile-menu.is-open .mobile-menu__overlay {
    opacity: 1;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    padding: var(--space-lg) var(--space-md);
    transform: translateX(100%);
    transition: transform var(--duration) var(--ease-out);
    overflow-y: auto;
}

.mobile-menu.is-open .mobile-menu__panel {
    transform: translateX(0);
}

.mobile-menu__close {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    background: none;
    border: none;
    color: var(--color-ivory);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.mobile-menu__list {
    list-style: none;
    margin-top: var(--space-lg);
}

.mobile-menu__list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu__list li a {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: var(--color-ivory);
    transition: opacity var(--duration) var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* dynamic viewport — no jump when mobile address bar shows/hides */
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-obsidian);
    margin-bottom: 0;
    contain: paint;
}

.hero__media {
    position: absolute;
    inset: 0;
}

/* Vertical video wall — 3 columns on desktop */
.hero__wall {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.hero__video-col {
    position: relative;
    overflow: hidden;
}

.hero__video-col + .hero__video-col {
    border-inline-start: 1px solid rgba(249, 249, 249, 0.08);
}

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

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-ivory);
    padding: 0 var(--space-md);
}

.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.08;
    margin-bottom: var(--space-xs);
    letter-spacing: 0.01em;
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 1.2vw, 0.9375rem);
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
    opacity: 0.75;
}

.hero__cta {
    display: inline-block;
    padding: 1rem 3rem;
    border: 1px solid var(--color-ivory);
    color: var(--color-ivory);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out);
}

.hero__cta:hover {
    background-color: var(--color-ivory);
    color: var(--color-obsidian);
    opacity: 1;
}

/* Scroll Indicator */
.hero__scroll {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.hero__scroll span {
    display: block;
    width: 1px;
    height: 48px;
    background: var(--color-ivory);
    opacity: 0.4;
    animation: scrollPulse 2.5s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: scaleY(1); opacity: 0.4; }
    50%      { transform: scaleY(0.4); opacity: 0.15; }
}

/* Mobile hero video — hidden on desktop, shown on mobile */
.hero__mobile-video {
    display: none;
    position: absolute;
    inset: 0;
}

.hero__mobile-video .hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile — show dedicated video, hide 3-column wall */
@media (max-width: 768px) {
    .hero__wall {
        display: none;
    }
    .hero__mobile-video {
        display: block;
    }
}

/* ═══════════════════════════════════════════════════════════
   EDITORIAL INTRO
   ═══════════════════════════════════════════════════════════ */
/* Seamless hero-to-content — absolutely no gap */
.hero + .editorial-intro {
    margin-top: -2px;
    position: relative;
    z-index: 1;
}

.editorial-intro {
    padding: var(--space-2xl) 0;
    background: var(--color-ivory);
}

.editorial-intro__inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--space-md);
}

.editorial-intro__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    margin-bottom: var(--space-sm);
}

.editorial-intro__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: var(--color-obsidian);
}

.editorial-intro__line {
    width: 50px;
    height: 1px;
    background: var(--color-obsidian);
    margin: var(--space-md) auto 0;
    opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════
   ASYMMETRICAL EDITORIAL GRID
   ═══════════════════════════════════════════════════════════ */
.editorial-grid {
    padding: 0 0 var(--space-2xl);
    background: var(--color-ivory);
    contain: paint;
}

.editorial-grid__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.editorial-grid__image {
    aspect-ratio: 3 / 4;
}

.editorial-grid__stack {
    display: grid;
    gap: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════
   FEATURED PRODUCTS
   ═══════════════════════════════════════════════════════════ */
.featured-products {
    padding: var(--space-xl) 0;
    background: var(--color-sand);
    color: var(--color-text-dark);
}

.featured-products__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.featured-products__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.featured-products__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.featured-products__link {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-dark);
    border-bottom: 1px solid rgba(26, 26, 26, 0.25);
    padding-bottom: 2px;
    transition: border-color var(--duration) var(--ease-out);
}

.featured-products__link:hover {
    border-color: var(--color-text-dark);
    opacity: 1;
}

.featured-products__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.featured-products__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-warm-gray);
    font-size: 1.125rem;
    font-style: italic;
    padding: var(--space-lg) 0;
    letter-spacing: 0.02em;
}

/* Product Card */
.product-card {
    display: block;
    transition: transform var(--duration) var(--ease-out);
}

.product-card__image {
    aspect-ratio: 3 / 4;
    margin-bottom: var(--space-sm);
}

.product-card__badge {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: var(--color-obsidian);
    color: var(--color-ivory);
    font-size: 0.6875rem; /* 11px — legible on mobile, still a fine label */
    font-weight: 700;
    letter-spacing: 0.18em;
    padding: 5px 12px;
    z-index: 2;
}

.product-card__info {
    text-align: start;
}

.product-card__name {
    font-family: var(--font-heading);
    font-size: clamp(1.1875rem, 0.8vw + 0.95rem, 1.375rem); /* ~19px mobile → 22px desktop */
    font-weight: 600;              /* semibold — a touch heavier, true 600 now loaded for both fonts */
    margin-bottom: 6px;
    color: var(--color-obsidian);  /* deepen for crisp, high-contrast names */
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.product-card__price {
    font-family: var(--font-body);
    font-size: 1rem;               /* 13px → 16px */
    font-weight: 500;
    color: var(--color-text-dark); /* darker than warm-gray for readability */
    letter-spacing: 0.02em;
}

.product-card__price del {
    opacity: 0.5;
    margin-inline-start: 0.5em;
}

.product-card__price ins {
    text-decoration: none;
    color: var(--color-accent-text);
}

/* ═══════════════════════════════════════════════════════════
   BRAND STORY STRIP — with CSS parallax
   ═══════════════════════════════════════════════════════════ */
.brand-strip {
    background: var(--color-ivory);
    padding: var(--space-xl) 0;
    overflow: hidden;
}

.brand-strip__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
    align-items: center;
}

.brand-strip__label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    margin-bottom: var(--space-sm);
}

.brand-strip__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.01em;
    margin-bottom: var(--space-md);
}

.brand-strip__link {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-obsidian);
    padding-bottom: 2px;
    transition: opacity var(--duration) var(--ease-out);
}

/* Parallax container */
.brand-strip__parallax {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.brand-strip__parallax img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center 30%;
    transform: translateY(-10%);
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════
   INSTAGRAM FEED — Smash Balloon
   ═══════════════════════════════════════════════════════════ */
.instagram-section {
    background: var(--color-ivory);
    padding: var(--space-2xl) 0 var(--space-xl);
}

.instagram-section__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.instagram-section__header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.instagram-section__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    margin-bottom: var(--space-sm);
}

.instagram-section__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-obsidian);
    margin-bottom: var(--space-xs);
}

.instagram-section__handle {
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-accent-text);
    text-decoration: none;
    transition: opacity var(--duration) var(--ease-out);
}

.instagram-section__handle:hover {
    opacity: 0.6;
}

.instagram-section__placeholder {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    border: 1px dashed var(--color-light-gray);
    color: var(--color-warm-gray);
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
}

/* Smash Balloon container — strip its chrome, match editorial grid */
.instagram-section__feed #sb_instagram {
    padding: 0 !important;
}

.instagram-section__feed #sb_instagram .sbi_item,
.instagram-section__feed #sb_instagram .sbi_photo {
    border-radius: 0 !important;
}

.instagram-section__feed #sb_instagram .sbi_photo {
    transition: opacity var(--duration) var(--ease-out);
}

.instagram-section__feed #sb_instagram .sbi_item:hover .sbi_photo {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--color-obsidian, #1a1a1a);
    color: var(--color-ivory, #faf9f6);
    padding: 2.5rem 0 1.5rem;
    font-family: var(--font-body, sans-serif);
    text-align: center;
}

.footer__inner {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 var(--space-md, 1.5rem);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%; /* a single 1fr track can collapse to min-content (and overflow
                    in LTR) without an explicit width — pin it to the container */
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__logo {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.footer__logo .site-logo {
    width: 140px;
    height: auto;
}

.footer__tagline {
    font-size: 0.9rem;
    color: var(--color-warm-gray, #999);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 280px;
}

.footer__socials {
    display: flex;
    gap: 1rem;
}

.footer__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: var(--color-ivory, #fff);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer__socials a:hover {
    background: var(--color-ivory, #fff);
    color: var(--color-obsidian, #1a1a1a);
    transform: translateY(-3px);
}

.footer__heading {
    font-family: var(--font-heading, serif);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-ivory, #fff);
    margin-bottom: 1.5rem;
}

.footer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__menu li {
    margin-bottom: 0.8rem;
}

.footer__menu a {
    font-size: 0.9rem;
    color: var(--color-warm-gray, #aaa);
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
}

.footer__menu a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-ivory, #fff);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.footer__menu a:hover {
    color: var(--color-ivory, #fff);
}

.footer__menu a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.footer__text {
    font-size: 0.9rem;
    color: var(--color-warm-gray, #aaa);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Elegant Newsletter */
.footer__newsletter {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.footer__newsletter-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.5rem;
    transition: border-color 0.3s ease;
}

.footer__newsletter-wrapper:focus-within {
    border-color: var(--color-ivory, #fff);
}

.footer__newsletter input[type="email"] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-ivory, #fff);
    font-size: 0.95rem;
    padding: 0.5rem 0;
    outline: none;
}

.footer__newsletter input[type="email"]::placeholder {
    color: var(--color-warm-gray, #777);
    font-weight: 300;
}

.footer__newsletter button {
    background: transparent;
    border: none;
    color: var(--color-ivory, #fff);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.footer__newsletter button:hover {
    transform: translateX(4px);
}

/* Footer Bottom */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.footer__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .footer__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: start;
    }
}

.footer__bottom p {
    font-size: 0.8rem;
    color: var(--color-warm-gray, #888);
    letter-spacing: 0.05em;
    margin: 0;
}



/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV BAR
   ═══════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 900;
    background: var(--color-obsidian);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.5rem 0;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    justify-content: space-around;
}

.mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--color-ivory);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    opacity: 0.6;
    transition: opacity var(--duration) var(--ease-out);
}

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item.is-active {
    opacity: 1;
}

body {
    padding-bottom: 70px;
}

/* ── Logo mobile sizing ───────────────────────────────────── */
@media (max-width: 767px) {
    .site-logo {
        max-width: 120px;
    }
    .header-logo {
        max-height: 40px;
        max-width: 120px;
    }
    .header--transparent .header-logo {
        max-height: 50px;
        max-width: 140px;
    }
    .footer-logo {
        max-width: 110px;
    }
}

/* ═══════════════════════════════════════════════════════════
   SHOP ARCHIVE — Category Filter + Editorial Product Grid
   ═══════════════════════════════════════════════════════════
   Products now render as <a class="product-card"> via PHP
   (the same markup used on the home page). No more fighting
   WooCommerce's <ul class="products"> HTML.
   ═══════════════════════════════════════════════════════════ */

/* ── Shop Toolbar (+ FILTER  + SORT) ─────────────────────── */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
}

.shop-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--color-warm-gray);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 0;
    transition: color 0.3s ease;
}

.shop-toolbar__btn:hover {
    color: var(--color-obsidian);
}

.shop-toolbar__plus {
    font-weight: 300;
    font-size: 1rem;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ── Drawer Panel ────────────────────────────────────────── */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;
    width: 340px;
    max-width: 90vw;
    height: 100vh;
    height: 100dvh;
    background: var(--color-ivory);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease-out);
    overflow: hidden;
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    flex-shrink: 0;
}

.drawer__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.drawer__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-obsidian);
    padding: 4px;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.drawer__close:hover {
    opacity: 0.5;
}

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.drawer__footer {
    flex-shrink: 0;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    border-top: 1px solid var(--color-light-gray);
}

.drawer__clear {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    cursor: pointer;
    padding: 8px 0;
    text-align: center;
    transition: color 0.2s ease;
}

.drawer__clear:hover {
    color: var(--color-obsidian);
}

.drawer__apply {
    display: block;
    width: 100%;
    padding: 14px 0;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s ease;
}

.drawer__apply:hover {
    opacity: 0.85;
}

/* ── Drawer Accordion ────────────────────────────────────── */
.drawer-accordion {
    border-bottom: 1px solid var(--color-light-gray);
}

.drawer-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px var(--space-md);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-obsidian);
    text-align: start;
    transition: background-color 0.2s ease;
}

.drawer-accordion__trigger:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.drawer-accordion__icon {
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.drawer-accordion__trigger[aria-expanded="true"] .drawer-accordion__icon {
    transform: rotate(45deg);
}

.drawer-accordion__panel {
    padding: 0 var(--space-md) var(--space-sm);
}

.drawer-accordion__panel[hidden] {
    display: none;
}

/* ── Filter Checkbox List ────────────────────────────────── */
.drawer-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-filter-list li {
    margin-bottom: 2px;
}

.drawer-filter-list__sub {
    padding-inline-start: var(--space-sm);
}

.drawer-filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 0;
    transition: opacity 0.2s ease;
}

.drawer-filter-check:hover {
    opacity: 0.7;
}

.drawer-filter-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.drawer-filter-check__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-warm-gray);
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.drawer-filter-check input:checked + .drawer-filter-check__box {
    background: var(--color-obsidian);
    border-color: var(--color-obsidian);
}

.drawer-filter-check input:checked + .drawer-filter-check__box::after {
    content: '✓';
    color: var(--color-ivory);
    font-size: 0.6875rem;
    font-weight: 700;
}

.drawer-filter-check__label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--color-obsidian);
}

/* ── Sort Options ────────────────────────────────────────── */
.sort-options {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sort-options li {
    border-bottom: 1px solid var(--color-light-gray);
}

.sort-options__btn {
    display: block;
    width: 100%;
    padding: 16px var(--space-md);
    background: none;
    border: none;
    text-align: start;
    font-family: var(--font-body);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--color-warm-gray);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.sort-options__btn:hover {
    color: var(--color-obsidian);
    background: rgba(0, 0, 0, 0.02);
}

.sort-options__btn.is-active {
    color: var(--color-obsidian);
    font-weight: 600;
}

/* ── Shop Page Title ─────────────────────────────────────── */
.wc-main .woocommerce-products-header__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    margin-bottom: var(--space-xs);
}

/* ── Shop Product Grid (uses .product-card from home page) ─ */
.wc-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Ensure product-card inside shop grid matches home page */
.wc-products-grid .product-card {
    display: block;
}

/* ── Strip ALL WooCommerce default ugliness ──────────────── */
.wc-main .products,
.wc-main ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wc-main .products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 !important;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: start;
    float: none !important;
    width: 100% !important;
}

/* Kill any leftover default WooCommerce elements */
.wc-main .products li.product .star-rating,
.wc-main .products li.product .button.add_to_cart_button {
    display: none;
}

/* Hide result count & ordering — our filter bar handles UX */
.wc-main .woocommerce-result-count,
.wc-main .woocommerce-ordering {
    display: none;
}

/* NEW badge variant */
.product-card__badge--new {
    background: var(--color-ivory);
    color: var(--color-obsidian);
    border: 1px solid var(--color-obsidian);
}

/* ═══════════════════════════════════════════════════════════
   SHOP — Editorial product grid (bananhot-style, large images)
   ═══════════════════════════════════════════════════════════ */
.wc-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto !important;
    padding: 0;
    list-style: none;
    justify-items: stretch;
}

/* Tablet — 3 across */
@media (min-width: 768px) {
    .wc-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

/* Desktop — 4 across, large images, light breathing gap */
@media (min-width: 1024px) {
    .wc-products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Shop archive — widen the container so the 4-up grid feels large & full */
@media (min-width: 1024px) {
    body.shop-archive-editorial .wc-main .container {
        max-width: 1680px;
        padding-inline: var(--space-sm);
    }
}

/* CRITICAL: WooCommerce wraps each product in <li class="product"> with
   a default float + ~22% width from woocommerce-layout.css. As grid items
   that explicit width stops them filling the 1fr track (small images, huge
   gaps). Force every grid item to fill its column. */
.wc-products-grid > li.product,
.wc-products-grid > .product,
.wc-products-grid > li {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

/* The card itself must fill the full list item width */
.wc-products-grid .product-card {
    width: 100% !important;
    max-width: none !important;
}

.wc-products-grid .product-card__media {
    width: 100%;
}

.wc-products-grid .product-card {
    width: 100%;
    max-width: none;
    display: block;
    margin: 0;
    text-align: center;
}

/* ── Media / gallery ─────────────────────────────────────── */
.product-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-light-gray);
    margin-bottom: var(--space-sm);
}

.product-card__link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card__gallery {
    position: absolute;
    inset: 0;
}

.product-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
}

.product-card__img.is-active {
    opacity: 1;
}

/* ── Nav arrows ──────────────────────────────────────────── */
.product-card__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 249, 249, 0.85);
    color: var(--color-obsidian);
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 3;
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out),
                background-color var(--duration) var(--ease-out);
}

.product-card__nav--prev { inset-inline-start: 10px; }
.product-card__nav--next { inset-inline-end: 10px; }

.product-card__nav:hover { background: var(--color-ivory); }

.product-card__media:hover .product-card__nav { opacity: 1; }

/* ── Dots ────────────────────────────────────────────────── */
.product-card__dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 3;
}

.product-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(249, 249, 249, 0.55);
    cursor: pointer;
    transition: background-color var(--duration) var(--ease-out);
}

.product-card__dot.is-active { background: var(--color-ivory); }

/* ── Add-to-cart — hidden inside the image, reveal on hover ─ */
.product-card__cart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    z-index: 4;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--duration) var(--ease-out),
                transform var(--duration) var(--ease-out);
}

.product-card__media:hover .product-card__cart {
    opacity: 1;
    transform: translateY(0);
}

.product-card__cart-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1.15rem 1rem;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
    transition: background-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out);
}

.product-card__cart-btn:hover {
    background: var(--color-accent);
    color: var(--color-obsidian);
}

/* ── Info ────────────────────────────────────────────────── */
.wc-products-grid .product-card__info {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

/* ── Touch devices — no hover, so reveal controls ────────── */
@media (hover: none) {
    .product-card__nav {
        opacity: 1;
        background: rgba(249, 249, 249, 0.7);
    }
    .product-card__cart {
        opacity: 1;
        transform: translateY(0);
    }
    .product-card__dots {
        bottom: 60px;
    }
}

/* ═══════════════════════════════════════════════════════════
   COLLECTION — MOBILE (≤767px): refined 2-up editorial grid
   (bananhot-style). Tight centre gutter, full-bleed edge-to-edge,
   large images, minimal name + price beneath. All JS logic
   (gallery swipe / dots / add-to-cart) preserved — styling only.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Two columns, tight gutter, broken out of the container's
       horizontal padding so the grid runs edge-to-edge. */
    .wc-products-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2px;
        row-gap: var(--space-md);
        width: auto;
        margin-inline: calc(-1 * var(--space-md)) !important;
    }

    /* Bigger, taller images for a stronger editorial presence. */
    .wc-products-grid .product-card__media {
        aspect-ratio: 2 / 3;
        margin-bottom: 0.65rem;
    }
    .wc-products-grid .product-card__info {
        padding-inline: 0.5rem;
    }

    /* Card gallery → native horizontal swipe carousel: slide between the
       product's photos with the finger (snap), instead of the desktop
       cross-fade. JS keeps the dots in sync with the scroll position. */
    .wc-products-grid .product-card__gallery {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        overscroll-behavior-x: contain; /* don't chain to the page/history */
    }
    .wc-products-grid .product-card__gallery::-webkit-scrollbar { display: none; }
    .wc-products-grid .product-card__img {
        position: relative;   /* in-flow side-by-side (was absolute) */
        inset: auto;
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        opacity: 1;           /* all visible; scrolling reveals them */
        scroll-snap-align: start;
        transition: none;
    }
    .wc-products-grid .product-card__name {
        font-size: 0.9375rem;
        line-height: 1.3;
        margin-bottom: 2px;
    }
    .wc-products-grid .product-card__price {
        font-size: 0.875rem;
    }

    /* Swipe + dots are the control on touch; hide the side arrows. */
    .wc-products-grid .product-card__nav {
        display: none;
    }

    /* Cleaner add-to-cart: a slim, refined translucent bar pinned to the
       bottom of the image (no heavy black slab). Logic unchanged. */
    .product-card__cart {
        left: 0;
        right: 0;
        bottom: 0;
    }
    .product-card__cart-btn {
        padding: 0.7rem 0.5rem;
        font-size: 0.625rem;
        letter-spacing: 0.14em;
        background: rgba(10, 10, 10, 0.78);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    /* Lift the dots clear of the slim cart bar. */
    .product-card__dots {
        bottom: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════
   SINGLE PRODUCT — Editorial Split Layout
   ═══════════════════════════════════════════════════════════ */

/* Main wrapper */
.wc-main .product.type-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* min-width:0 so the full-bleed
        100vw gallery can't inflate the single-column track and drag the
        info block to full width (desktop ≥1024 overrides to flex 50/50) */
    gap: 0;
    max-width: 100%;
}

/* Product images — stacked, full-bleed */
.wc-main .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0;
    padding: 0;
    opacity: 1 !important; /* Override WC JS fade */
}

.wc-main .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wc-main .woocommerce-product-gallery .woocommerce-product-gallery__image {
    width: 100%;
}

.wc-main .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.wc-main .woocommerce-product-gallery .woocommerce-product-gallery__image a img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0;
}

/* Product summary */
.wc-main .product .summary.entry-summary {
    width: 100% !important;
    float: none !important;
    padding: var(--space-lg) var(--space-md);
}

/* Product Title — Large editorial */
.wc-main .product .summary .product_title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.005em;
    margin-bottom: var(--space-sm);
    color: var(--color-obsidian);
}

/* Price — large & clear */
.wc-main .product .summary .price {
    font-family: var(--font-body);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--color-obsidian);
    margin-bottom: var(--space-md);
}

.wc-main .product .summary .price del {
    opacity: 0.4;
    font-size: 1rem;
}

.wc-main .product .summary .price ins {
    text-decoration: none;
    color: var(--color-obsidian);
}

/* Short description */
.wc-main .product .summary .woocommerce-product-details__short-description {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-dark);  /* was warm-gray: body copy now readable */
    margin-bottom: var(--space-md);
    letter-spacing: 0.01em;
}

/* Hide SKU, Categories, Tags — keep it clean like a magazine */
.wc-main .product .summary .product_meta {
    display: none;
}

/* Variations / Form */
.wc-main .product .summary .variations {
    width: 100%;
    margin-bottom: var(--space-md);
}

.wc-main .product .summary .variations td {
    padding: var(--space-xs) 0;
}

.wc-main .product .summary .variations label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-obsidian);
}

.wc-main .product .summary .variations select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-obsidian);
    background: var(--color-ivory);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease-out);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.wc-main .product .summary .variations select:focus {
    border-color: var(--color-obsidian);
    outline: none;
}

/* Quantity input */
.wc-main .product .summary .quantity {
    margin-left: 0;
    margin-bottom: var(--space-sm);
}

.wc-main .product .summary .quantity .qty {
    width: 80px;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    text-align: center;
    color: var(--color-obsidian);
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

/* ADD TO CART — The Hero Button */
.wc-main .product .summary .single_add_to_cart_button {
    display: block;
    width: 100%;
    padding: 1.125rem 2rem;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border: 2px solid var(--color-obsidian);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out);
}

.wc-main .product .summary .single_add_to_cart_button:hover {
    background: var(--color-ivory);
    color: var(--color-obsidian);
}

/* Tabs — editorial restyle */
.wc-main .product .woocommerce-tabs {
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    clear: both;
}

.wc-main .product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    border-bottom: 1px solid var(--color-light-gray);
}

.wc-main .product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: none !important;
    border: none !important;
}

.wc-main .product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    padding: var(--space-sm) 0;
    border-bottom: 2px solid transparent;
    transition: color var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
}

.wc-main .product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-obsidian);
    border-bottom-color: var(--color-obsidian);
}

.wc-main .product .woocommerce-tabs .panel {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-dark);
    letter-spacing: 0.01em;
}

/* Related products — editorial grid */
.wc-main .product .related.products {
    padding: var(--space-xl) var(--space-md);
    clear: both;
}

.wc-main .product .related.products > h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: var(--space-xl);
    text-align: center;
}

.wc-main .product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (min-width: 768px) {
    .wc-main .product .related.products ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   WOOCOMMERCE GLOBAL OVERRIDES — Editorial Style
   ═══════════════════════════════════════════════════════════ */

/* Breadcrumbs */
.woocommerce-breadcrumb {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    margin-bottom: var(--space-md);
}

.woocommerce-breadcrumb a {
    color: var(--color-warm-gray);
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-obsidian);
    opacity: 1;
}

/* Sale badge */
.woocommerce .onsale {
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border-radius: 0;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    min-height: auto;
    min-width: auto;
    line-height: 1.5;
}

/* All buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border: 1px solid var(--color-obsidian);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.875rem 2rem;
    transition: background-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: transparent;
    color: var(--color-obsidian);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--color-obsidian);
    border-color: var(--color-obsidian);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--color-ivory);
    color: var(--color-obsidian);
}

/* Form inputs — Checkout, My Account */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    border: 1px solid var(--color-light-gray);
    border-radius: 0;
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-obsidian);
    transition: border-color var(--duration) var(--ease-out);
    width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--color-obsidian);
    box-shadow: none;
    outline: none;
}

/* Cart page — clean table */
.woocommerce table.shop_table {
    border: 1px solid var(--color-light-gray);
    border-radius: 0;
}

.woocommerce table.shop_table th {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    border-bottom: 1px solid var(--color-light-gray);
}

.woocommerce table.shop_table td {
    border-top: 1px solid var(--color-light-gray);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    vertical-align: middle;
}

.woocommerce table.shop_table img {
    width: 80px;
    border-radius: 0;
}

/* Notices */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    border-top-color: var(--color-obsidian);
    background: var(--color-ivory);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    border-radius: 0;
}

.woocommerce .woocommerce-message::before {
    color: var(--color-obsidian);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    padding-top: var(--space-lg);
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 0;
    color: var(--color-obsidian);
    background: transparent;
    transition: all var(--duration) var(--ease-out);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border-color: var(--color-obsidian);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border-color: var(--color-obsidian);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .mobile-bottom-nav {
        display: none;
    }

    body {
        padding-bottom: 0;
    }

    .header__nav {
        display: block;
    }

    .header__hamburger {
        display: none;
    }

    /* Editorial Grid — asymmetrical, oversized, caption-free */
    .editorial-grid {
        padding: var(--space-lg) 0 var(--space-2xl);
    }

    .editorial-grid__inner {
        grid-template-columns: 1.55fr 1fr;
        gap: var(--space-lg);
        align-items: start;
    }

    /* Dominant hero image — tall portrait */
    .editorial-grid__item--large .editorial-grid__image {
        aspect-ratio: 4 / 5;
    }

    /* Right column drops down for a staggered, off-balance composition */
    .editorial-grid__stack {
        gap: var(--space-lg);
        margin-top: var(--space-2xl);
    }

    .editorial-grid__item--small .editorial-grid__image {
        aspect-ratio: 1 / 1;
    }

    /* Products — 4 columns */
    .featured-products__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }

    /* Brand strip — side by side */
    .brand-strip__inner {
        grid-template-columns: 1fr 1fr;
    }

    .brand-strip__parallax {
        aspect-ratio: auto;
        min-height: 400px;
    }

    /* Footer — 3 columns (Brand · Shop · Customer Care) */
    .site-footer {
        text-align: start;
    }
    .footer__grid {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 3rem 4rem;
        align-items: start;
    }
    .footer__brand {
        align-items: flex-start;
    }
    .footer__newsletter {
        margin: 0;
    }

    /* Shop grid — 3 columns on tablet+ */
    .wc-main .products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-md);
    }

    /* Single Product — Split screen layout (NO sticky) */
    .wc-main .product.type-product {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 0;
        align-items: start;
    }

    .wc-main .woocommerce-product-gallery {
        position: relative;
    }

    .wc-main .product .summary.entry-summary {
        position: relative;
        align-self: start;
        padding: var(--space-xl) var(--space-lg);
        z-index: 1;
    }

    /* Tabs & Related — full width below the split */
    .wc-main .product .woocommerce-tabs,
    .wc-main .product .related.products {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-height: 80px;
    }

    .header__menu {
        gap: var(--space-lg);
    }

    .brand-strip__parallax {
        min-height: 500px;
    }

    /* Single product — more breathing room on wide screens */
    .wc-main .product .summary.entry-summary {
        padding: var(--space-2xl) var(--space-xl);
    }

    /* Shop grid — 3 columns with generous spacing */
    .wc-main .products {
        gap: var(--space-lg) var(--space-md);
    }
}

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

    .hero__video {
        display: none;
    }

    .fade-in-section,
    .reveal-item {
        opacity: 1 !important;
        transform: none !important;
    }

    .brand-strip__parallax img {
        transform: none;
        height: 100%;
    }
}

:focus-visible {
    outline: 2px solid var(--color-obsidian);
    outline-offset: 2px;
}

.header--transparent :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--color-ivory);
}

/* ═══════════════════════════════════════════════════════════
   SHOP ARCHIVE — FINAL EDITORIAL POLISH
   ═══════════════════════════════════════════════════════════ */

/* Compact page spacing — no giant gaps */
.shop-archive-editorial .wc-main {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-lg);
}

/* ═══════════════════════════════════════════════════════════
   SINGLE PRODUCT — Bananho Editorial Split Layout
   ═══════════════════════════════════════════════════════════ */

/* Expanded container limit for single product to allow larger image without full-bleed */
body.single-product-editorial .wc-main .container {
    max-width: 96% !important; /* Huge but not touching the edges */
    width: 100% !important;
    margin: 0 auto !important;
}

.sp-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (min-width: 1024px) {
    /* High specificity + explicit display:flex so this beats the default
       `.wc-main .product.type-product { display:grid }` rules — the .sp-layout
       element also carries the product/type-product classes, so without this
       it was laid out as a 55/45 grid while .sp-gallery/.sp-info were still
       capped at max-width:50% of their column. That left each panel filling
       only half its column and produced a large dead gap between image & text. */
    body.single-product-editorial .wc-main .sp-layout {
        display: flex !important;
        flex-direction: row !important; /* gallery (first child) leads; mirrors per text direction */
        align-items: flex-start;
        gap: 0;
        position: relative;
    }
}

/* ── Gallery (Sticky on desktop) ── */
.sp-gallery {
    width: 100%;
    position: relative;
}

@media (min-width: 1024px) {
    .sp-gallery {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        box-sizing: border-box !important;
        position: sticky;
        top: 0;
    }
}

.sp-gallery__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sp-gallery__track {
    display: grid;
    width: 100%;
}

.sp-gallery__slide {
    grid-area: 1 / 1;
    width: 100%;
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
    z-index: 1;
}

.sp-gallery__slide.is-active {
    opacity: 1;
    z-index: 2;
}

.sp-gallery__img {
    width: 100%;
    height: auto;
    display: block;
}

/* Gallery Arrows */
.sp-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: var(--color-obsidian);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: background-color var(--duration) var(--ease-out);
}

.sp-gallery__arrow:hover {
    background: var(--color-ivory);
}

.sp-gallery__arrow--prev {
    inset-inline-start: 1rem; /* start side: right in RTL, left in LTR */
}

.sp-gallery__arrow--next {
    inset-inline-end: 1rem;   /* end side: left in RTL, right in LTR */
}

/* Gallery Dots */
.sp-gallery__dots {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.sp-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease-out);
}

.sp-gallery__dot.is-active {
    background: var(--color-obsidian);
}

.sp-gallery__badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.5rem 1rem;
    z-index: 10;
}

/* ── Info Container ── */
.sp-info {
    width: 100%;
    padding: var(--space-lg) var(--space-sm);
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    body.single-product-editorial .sp-info {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        box-sizing: border-box !important;
        /* Logical padding mirrors per language: the comfortable gutter stays on
           the gallery (inline-start) side, the slim padding on the outer edge —
           RTL gallery on the right, LTR gallery on the left, both handled. */
        padding-block: var(--space-xl) !important;
        padding-inline: 2.5rem 0.5rem !important;
        min-height: 100vh;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* reading-start side (start = gallery side) */
        text-align: start !important;
    }
    body.single-product-editorial .sp-info > * {
        max-width: none !important;
        width: 100% !important;
        margin-inline: 0 !important;
    }
    body.single-product-editorial .sp-info * {
        text-align: start !important;
    }
}

/* Breadcrumbs */
.sp-breadcrumb {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    margin-bottom: var(--space-md);
}

.sp-breadcrumb a {
    color: var(--color-warm-gray);
    text-decoration: none;
    transition: color var(--duration) var(--ease-out);
}

.sp-breadcrumb a:hover {
    color: var(--color-obsidian);
}

.sp-breadcrumb__sep {
    margin: 0 0.5rem;
    opacity: 0.5;
}

/* Title & Price */
.sp-title {
    font-family: var(--font-heading);
    font-size: clamp(2.125rem, 3.2vw, 3rem);
    font-weight: 500;              /* 400 → 500: keeps the elegant title from going thin */
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin-bottom: var(--space-xs);
    color: var(--color-obsidian);
}

.sp-price {
    font-family: var(--font-body);
    font-size: 1.375rem;           /* 20px → 22px */
    font-weight: 500;
    color: var(--color-obsidian);  /* was warm-gray: price now reads clearly */
    letter-spacing: 0.01em;
    margin-bottom: var(--space-md);
}

.sp-price del {
    opacity: 0.5;
    font-size: 1rem;
    margin-inline-start: 0.5rem;
}

.sp-price ins {
    text-decoration: none;
    color: var(--color-obsidian);
}

.sp-short-desc {
    font-size: 1rem;               /* 15px → 16px for comfortable reading */
    line-height: 1.75;
    color: var(--color-text-dark);
    margin-bottom: var(--space-lg);
}

/* Size Guide & Shipping Note */
.sp-size-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-obsidian);
    cursor: pointer;
    padding: 0;
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
    transition: opacity var(--duration) var(--ease-out);
}

.sp-size-guide-link:hover {
    opacity: 0.7;
}

.sp-shipping-note {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg);
    text-align: center;
}

@media (min-width: 1024px) {
    .sp-shipping-note {
        text-align: start;
    }
}

/* ── WooCommerce Form Adjustments ── */
.sp-form-wrap .cart {
    margin-bottom: 0;
}

.sp-form-wrap .variations {
    width: 100%;
    margin-bottom: var(--space-md);
}

.sp-form-wrap .variations th {
    display: block;
    text-align: start;
    padding: 0 0 0.5rem 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-obsidian);
}

.sp-form-wrap .variations td {
    display: block;
    padding: 0 0 1.5rem 0;
}

/* Add to cart row */
.sp-form-wrap .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.sp-form-wrap .quantity {
    display: none !important; /* Hide quantity */
}

.sp-form-wrap .single_add_to_cart_button {
    flex: 1;
    min-width: 200px;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border: 1px solid var(--color-obsidian);
    padding: 1.25rem 2rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.sp-form-wrap .single_add_to_cart_button:hover {
    background: transparent;
    color: var(--color-obsidian);
}

.sp-form-wrap .single_add_to_cart_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Branded Size Selector (pills) ── */
.sm-variation { position: relative; }

/* Progressive enhancement: native <select> stays visible until JS is ready;
   then the select is visually hidden and the pills take over. */
.sm-size-pills { display: none; }
.sm-variation.is-ready .sm-size-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.25rem;
}
.sm-variation.is-ready > select {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sm-size-pill {
    min-width: 3.25rem;
    height: 3.25rem;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-text-dark);
    border: 1px solid var(--color-light-gray);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    position: relative;
    transition: color var(--duration) var(--ease-out),
                background-color var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
}
.sm-size-pill:hover { border-color: var(--color-obsidian); }
.sm-size-pill.is-active {
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border-color: var(--color-obsidian);
}
.sm-size-pill:focus-visible {
    outline: 2px solid var(--color-accent-text);
    outline-offset: 2px;
}
.sm-size-pill.is-unavailable {
    color: var(--color-light-gray);
    border-style: dashed;
    cursor: not-allowed;
    pointer-events: none;
}
.sm-size-pill.is-unavailable::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent 46%, var(--color-light-gray) 47%, var(--color-light-gray) 53%, transparent 54%);
}

/* "Clear selection" link rendered by WooCommerce after a size is chosen */
.sp-form-wrap .reset_variations {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--duration) var(--ease-out);
}
.sp-form-wrap .reset_variations:hover { color: var(--color-obsidian); }

.sp-form-wrap .single_add_to_cart_button.loading { opacity: 0.7; cursor: wait; }

/* ── "Complete the set" — bikini counterpart quick-add block ──────────────
   A compact, editorial card beside the size selector: thumbnail + name +
   inline size pills + quick add. Logical properties keep it correct in both
   RTL (Hebrew) and LTR (English). */
.complete-set {
    margin-block: var(--space-md) var(--space-lg);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-light-gray);
}

.complete-set__title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-obsidian);
    text-align: start;
    margin-block-end: var(--space-sm);
}

.complete-set__form {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
    padding: 0.75rem;
    background: var(--color-sand);
    border: 1px solid var(--color-light-gray);
}

.complete-set__media {
    flex: 0 0 84px;
    width: 84px;
    align-self: flex-start;
    display: block;
    overflow: hidden;
    background: var(--color-ivory);
}
.complete-set__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform var(--duration) var(--ease-out);
}
.complete-set__form:hover .complete-set__media img { transform: scale(1.04); }

.complete-set__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: start;
}

.complete-set__name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-obsidian);
    text-decoration: none;
    transition: color var(--duration) var(--ease-out);
}
.complete-set__name:hover { color: var(--color-accent-text); }

.complete-set__sizes { display: flex; flex-direction: column; gap: 0.35rem; }
.complete-set__size-label {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
}
.complete-set__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Compact variant of the branded size pills for the tight card. */
.complete-set__pill {
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.6rem;
    font-size: 0.8rem;
}

.complete-set__add {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-block-start: 0.15rem;
    padding: 0.7rem 1.6rem;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border: 1px solid var(--color-obsidian);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out),
                opacity var(--duration) var(--ease-out);
}
.complete-set__add:hover:not(:disabled) {
    background: transparent;
    color: var(--color-obsidian);
}
.complete-set__add:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.complete-set__add.loading { opacity: 0.7; cursor: wait; }

/* ── Add-to-cart toast (small, clean, auto-dismiss — no layout shift) ── */
.sm-toast {
    position: fixed;
    inset-block-end: 1.75rem;
    inset-inline-start: 50%;
    transform: translate(-50%, 12px);
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 1.1rem;
    background: var(--color-ivory);
    color: var(--color-obsidian);
    border: 1px solid var(--color-light-gray);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.sm-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.sm-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-obsidian);
    color: var(--color-ivory);
}
.sm-toast__msg {
    font-weight: 600;
    white-space: nowrap;
}
.sm-toast__link {
    margin-inline-start: 0.35rem;
    padding-inline-start: 0.7rem;
    border-inline-start: 1px solid var(--color-light-gray);
    color: var(--color-accent-text);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.sm-toast__link:hover {
    color: var(--color-obsidian);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .sm-toast { transition: opacity 0.3s ease; transform: translate(-50%, 0); }
}

/* ── Accordions ── */
.sp-accordions {
    border-top: 1px solid var(--color-light-gray);
    margin-top: var(--space-lg);
}

.sp-accordion {
    border-bottom: 1px solid var(--color-light-gray);
}

.sp-accordion__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5rem 0;
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-obsidian);
    cursor: pointer;
    text-align: start;
}

.sp-accordion__icon {
    font-size: 1.25rem;
    font-weight: 300;
    transition: transform var(--duration) var(--ease-out);
}

.sp-accordion__trigger[aria-expanded="true"] .sp-accordion__icon {
    transform: rotate(45deg); /* Turns + into x */
}

.sp-accordion__panel {
    padding-bottom: 1.5rem;
}

.sp-accordion__content {
    font-size: 1rem;               /* 15px → 16px */
    line-height: 1.75;
    color: var(--color-text-dark);
}

.sp-details-table {
    width: 100%;
    border-collapse: collapse;
}

.sp-details-table th {
    text-align: start;
    padding-block: 0.5rem;
    padding-inline-end: 1rem;
    font-weight: 600;
    width: 40%;
}

.sp-details-table td {
    padding: 0.5rem 0;
}

/* ── Size Modal ── */
.sp-size-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s var(--duration), opacity var(--duration) var(--ease-out);
}

.sp-size-modal.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--duration) var(--ease-out);
}

.sp-size-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.sp-size-modal__dialog {
    position: relative;
    background: var(--color-ivory);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    padding: var(--space-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(20px);
    transition: transform var(--duration) var(--ease-out);
}

.sp-size-modal.is-open .sp-size-modal__dialog {
    transform: translateY(0);
}

.sp-size-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.sp-size-modal__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
}

.sp-size-modal__close {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-warm-gray);
    transition: color var(--duration) var(--ease-out);
}

.sp-size-modal__close:hover {
    color: var(--color-obsidian);
}

.sp-size-modal__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-md);
}

.sp-size-modal__table th,
.sp-size-modal__table td {
    padding: 0.75rem;
    text-align: center;
    border: 1px solid var(--color-light-gray);
    font-size: 0.9375rem;
}

.sp-size-modal__table th {
    background: rgba(0, 0, 0, 0.03);
    font-weight: 600;
}

/* Related Products for single product page.
   NOTE: the <section class="related products"> carries the "products" class, so
   it otherwise matches `.wc-main .products { display:grid; grid-template-columns:
   repeat(3,1fr) !important }` and the whole section (heading + product grid) is
   crammed into one grid cell, shrinking the cards to ~84px. Force it back to a
   normal block so the inner .wc-products-grid can lay the cards out full-width. */
.sp-layout + .related.products {
    display: block !important;
    padding: var(--space-xl) var(--space-sm);
    max-width: 1400px;
    margin: 0 auto;
}

.sp-layout + .related.products > h2 {
    text-align: center;
}

@media (min-width: 1024px) {
    .sp-layout + .related.products {
        padding: var(--space-2xl) var(--space-md);
    }
}

/* ═══════════════════════════════════════════════════════════
   TranslatePress Language Switcher Custom Styling
   ═══════════════════════════════════════════════════════════ */
.trp-language-switcher {
    display: inline-block;
    position: relative;
    margin: 0 10px;
}

/* Float logic for header desktop menu */
.header__actions .trp-language-switcher {
    order: -1; /* Place before cart */
}

/* Minimalist look */
.trp-language-switcher > div > a {
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: currentColor !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 1px solid currentColor !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    transition: opacity var(--duration) var(--ease-out) !important;
}

.trp-language-switcher > div > a:hover {
    opacity: 0.7 !important;
    background: transparent !important;
}

/* Dropdown styling */
.trp-language-switcher .trp-ls-shortcode-language {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border: 1px solid var(--color-ivory);
    min-width: 120px;
    z-index: 1000;
}

html[dir="rtl"] .trp-language-switcher .trp-ls-shortcode-language {
    left: 0;
    right: auto;
}

.trp-language-switcher:hover .trp-ls-shortcode-language {
    display: block;
}

.trp-language-switcher .trp-ls-shortcode-language a {
    display: block !important;
    padding: 8px 12px !important;
    border: none !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.14em !important;
    color: var(--color-ivory) !important;
    background: transparent !important;
    text-transform: uppercase !important;
}

.trp-language-switcher .trp-ls-shortcode-language a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    opacity: 1 !important;
}

/* Mobile Menu TP */
.mobile-menu__list .trp-language-switcher {
    margin: var(--space-sm) 0;
    display: block;
}
.mobile-menu__list .trp-language-switcher > div > a {
    border-color: rgba(255,255,255,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION (2026)
   Bottom nav rework · language bottom-sheet · full-bleed
   product image · larger tap targets · safe-area handling
   ═══════════════════════════════════════════════════════════ */

/* ── Bottom nav: button reset + comfortable tap targets ──────
   One item is now a <button> (language). Normalise it against
   the <a> items and guarantee a 48px+ touch target (WCAG). */
.mobile-bottom-nav__item {
    position: relative;
    min-height: 48px;
    justify-content: center;
    padding: 4px 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-ivory);
    font-family: var(--font-body);
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav__item span {
    line-height: 1.2;
}

/* Active page indicator */
.mobile-bottom-nav__item.is-active {
    opacity: 1;
}
.mobile-bottom-nav__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    background: var(--color-ivory);
}

/* Cart count badge — square, matches the header cart badge */
.mobile-bottom-nav__badge {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    background: var(--color-ivory);
    color: var(--color-obsidian);
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* Keep the content clear of the fixed bar, including the
   home-indicator safe area on notched phones. */
@media (max-width: 767px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
    /* The inline header language switcher is redundant on mobile —
       language now lives in the always-visible bottom bar. */
    .header__lang-switcher {
        display: none;
    }
}

/* ── Language Bottom Sheet ───────────────────────────────────
   Slides up from the bottom, above the nav bar. Renders the
   TranslatePress switcher as a full-width, tappable list. */
.mobile-lang-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
}
.mobile-lang-sheet.is-open {
    pointer-events: auto;
    visibility: visible;
}
.mobile-lang-sheet__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
}
.mobile-lang-sheet.is-open .mobile-lang-sheet__overlay {
    opacity: 1;
}
.mobile-lang-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform var(--duration) var(--ease-out);
}
.mobile-lang-sheet.is-open .mobile-lang-sheet__panel {
    transform: translateY(0);
}
.mobile-lang-sheet__close {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: var(--space-sm);
    background: none;
    border: none;
    color: var(--color-ivory);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}
.mobile-lang-sheet__title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-warm-gray);
    margin-bottom: var(--space-sm);
}

/* ─────────────────────────────────────────────────────────────
   TranslatePress switcher — NEW dropdown markup
   ─────────────────────────────────────────────────────────────
   The installed TP version renders .trp-ls-dropdown with
   .trp-language-item / .trp-current-language-item__wrapper, NOT
   the old .trp-ls-shortcode-language. At rest the container has a
   solid black background + fixed height with overflow:hidden (the
   other languages sit clipped below the current one and are
   revealed on hover). These rules target that real markup. */

/* DESKTOP — transparent hero header: the black switcher box floats
   over the video. Make the container blend in at rest, and restore
   a dark panel on hover so the opened options stay readable. The
   scrolled / solid-header states keep TP's filled look untouched. */
.header--transparent:not(.header--scrolled) .header__lang-switcher .trp-language-switcher {
    background-color: transparent !important;
    border-color: transparent !important;
}
.header--transparent:not(.header--scrolled) .header__lang-switcher .trp-language-switcher:hover,
.header--transparent:not(.header--scrolled) .header__lang-switcher .trp-language-switcher:hover .trp-language-item {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* MOBILE — bottom-sheet & slide-out menu: force the switcher fully
   open (no hover on touch) and lay every language out as a stacked,
   full-width tappable row. */
.mobile-lang-sheet__options .trp-shortcode-switcher__wrapper,
.mobile-lang-sheet__options .trp-language-switcher,
.mobile-lang-sheet__options .trp-current-language-item__wrapper,
.mobile-menu__lang-switcher .trp-shortcode-switcher__wrapper,
.mobile-menu__lang-switcher .trp-language-switcher,
.mobile-menu__lang-switcher .trp-current-language-item__wrapper {
    display: block !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.mobile-menu__lang-switcher {
    margin: var(--space-md) 0 !important;
}
/* Hide the dropdown chevron and the duplicate (visibility:hidden)
   current-language link TP keeps for its open animation. */
.mobile-lang-sheet__options .trp-language-switcher svg,
.mobile-menu__lang-switcher .trp-language-switcher svg,
.mobile-lang-sheet__options a.trp-language-item__current,
.mobile-menu__lang-switcher a.trp-language-item__current {
    display: none !important;
}
/* Each language = a full-width row. */
.mobile-lang-sheet__options .trp-language-item,
.mobile-menu__lang-switcher .trp-language-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    margin: 0 0 0.6rem !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    color: var(--color-ivory) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: center !important;
}
.mobile-menu__lang-switcher .trp-language-item {
    font-size: 0.9375rem !important;
}
/* Current language = highlighted, non-interactive row. */
.mobile-lang-sheet__options div.trp-language-item__current,
.mobile-menu__lang-switcher div.trp-language-item__current {
    border-color: var(--color-ivory) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.mobile-lang-sheet__options .trp-language-item:last-child,
.mobile-menu__lang-switcher .trp-language-item:last-child {
    margin-bottom: 0 !important;
}

/* ── Single Product — Full-bleed image on mobile/tablet ──────
   Break the gallery out of the centred container so the photo
   spans the full viewport edge-to-edge for a clean, premium feel.
   (Desktop ≥1024 keeps its sticky split layout, untouched.) */
@media (max-width: 1023px) {
    /* Full-bleed gallery WITHOUT horizontal overflow.
       The old `left:50%; transform:translateX(-50%); width:100vw` shifts the
       box via relative positioning, which on iOS Safari leaves a draggable
       horizontal overflow (the reported RTL "page can be moved" bug). The
       negative-margin break-out keeps the box exactly edge-to-edge (0..100vw)
       in both layout and paint, so nothing overflows. */
    body.single-product-editorial .sp-gallery {
        position: relative;
        width: auto;
        max-width: none;
        margin-inline: calc(50% - 50vw);
    }
    /* On a full-bleed image, swipe + dots are the natural control;
       the side arrows clutter the edges, so hide them. */
    body.single-product-editorial .sp-gallery__arrow {
        display: none;
    }
    /* Tighten the gap between the image and the title block. */
    body.single-product-editorial .sp-info {
        padding-top: var(--space-md);
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE FORM CONTROLS (≤767px) — prevent iOS Safari's auto-zoom
   on focus. Any control < 16px makes Safari zoom the whole page
   when the field is tapped, which shifts the layout. 16px keeps
   the page perfectly steady. Desktop keeps its finer 15px sizing.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .wc-main .product .summary .variations select,
    .sp-form-wrap select,
    .woocommerce form .form-row input.input-text,
    .woocommerce form .form-row textarea,
    .woocommerce form .form-row select,
    .woocommerce-checkout .form-row input,
    .woocommerce-checkout .form-row textarea,
    .woocommerce-checkout .form-row select,
    .footer__newsletter input[type="email"] {
        font-size: 16px;
    }

    /* Roomy tap targets on the product page. */
    .wc-main .product .summary .variations select {
        min-height: 52px;
    }
    /* Full-width, tall add-to-cart (simple products aren't in a flex row). */
    .sp-form-wrap .single_add_to_cart_button {
        width: 100%;
        min-height: 52px;
    }
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY READABILITY REFINEMENTS
   ───────────────────────────────────────────────────────────
   Goal: keep the premium serif identity (Cormorant Garamond +
   Frank Ruhl Libre) while making product names, the product
   page, and body copy comfortable to read — heavier display
   weight, gentler tracking on Hebrew, crisper rendering.
   ═══════════════════════════════════════════════════════════ */

/* Crisper serif edges (the thin Cormorant strokes benefit most). */
html {
    text-rendering: optimizeLegibility;
}

/* Lift the size-guide modal heading off Cormorant's hairline 400. */
.sp-size-modal__title {
    font-weight: 500;
}

/* ── Hebrew (RTL) ─────────────────────────────────────────────
   The editorial design uses wide Latin letter-spacing for an airy,
   fashion-magazine feel. Hebrew letters must NOT be tracked apart —
   it breaks word shapes and hurts readability — so reset spacing on
   Hebrew reading surfaces and give the serif a little more leading. */
html[dir="rtl"] .product-card__name,
html[dir="rtl"] .product-card__price,
html[dir="rtl"] .sp-title,
html[dir="rtl"] .sp-price,
html[dir="rtl"] .sp-short-desc,
html[dir="rtl"] .sp-accordion__content,
html[dir="rtl"] .editorial-intro__heading,
html[dir="rtl"] .brand-strip__heading,
html[dir="rtl"] .wc-main .product .summary .woocommerce-product-details__short-description,
html[dir="rtl"] .wc-main .product .woocommerce-tabs .panel {
    letter-spacing: 0;
}

/* Roomier leading for longer Hebrew body copy. */
html[dir="rtl"] .sp-short-desc,
html[dir="rtl"] .sp-accordion__content,
html[dir="rtl"] .wc-main .product .woocommerce-tabs .panel,
html[dir="rtl"] .wc-main .product .summary .woocommerce-product-details__short-description {
    line-height: 1.85;
}

/* ═══════════════════════════════════════════════════════════
   CART — Drawer · Live AJAX cart · Cart page (SI MARES)
   0px radius · obsidian/ivory · gold accent · RTL-aware
   ═══════════════════════════════════════════════════════════ */

/* Live counters hide themselves when the cart is empty. */
.header__cart-count:empty,
.mobile-bottom-nav__badge:empty { display: none; }

/* Lock scroll behind the open drawer. */
body.cart-drawer-open { overflow: hidden; }

/* ── Overlay ─────────────────────────────────────────────── */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease-out), visibility 0.45s var(--ease-out);
    z-index: 1200;
}
.cart-drawer-overlay.is-open { opacity: 1; visibility: visible; }

/* ── Drawer shell — slides from the inline end ───────────── */
.cart-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--color-ivory);
    color: var(--color-obsidian);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease-out);
    box-shadow: -1px 0 0 var(--color-light-gray);
    z-index: 1300;
    will-change: transform;
}
.cart-drawer.is-open { transform: translateX(0); }

/* RTL / Hebrew — slide from the left edge. */
html[dir="rtl"] .cart-drawer,
body.translatepress-he_IL .cart-drawer {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 1px 0 0 var(--color-light-gray);
}
html[dir="rtl"] .cart-drawer.is-open,
body.translatepress-he_IL .cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-light-gray);
}
.cart-drawer__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cart-drawer__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-obsidian);
    transition: opacity var(--duration) var(--ease-out);
}
.cart-drawer__close:hover { opacity: 0.6; }

.cart-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-sm) var(--space-md);
}

.cart-drawer__footer {
    flex: 0 0 auto;
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-light-gray);
    background: var(--color-ivory);
}
.cart-drawer.is-empty .cart-drawer__footer { display: none; }
.cart-drawer__footer .button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--color-obsidian);
    transition: opacity var(--duration) var(--ease-out),
                background-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out);
}
.cart-drawer__view { background: transparent; color: var(--color-obsidian); }
.cart-drawer__view:hover { background: var(--color-sand); opacity: 1; }
.cart-drawer__checkout { background: var(--color-obsidian); color: var(--color-ivory); }
.cart-drawer__checkout:hover { opacity: 0.85; }

/* Loading veil during AJAX. */
.cart-drawer.is-loading .cart-drawer__body,
.cart-page.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ── Free-shipping progress bar ──────────────────────────── */
.freeship-bar { margin-bottom: var(--space-sm); }
.freeship-bar__msg {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.freeship-bar__icon { display: inline-flex; color: var(--color-accent); }
.freeship-bar__track {
    display: block;
    position: relative;
    height: 3px;
    background: var(--color-light-gray);
    overflow: hidden;
}
.freeship-bar__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    height: 100%;
    background: var(--color-accent);
    transition: width 0.5s var(--ease-out);
}
.freeship-bar.is-qualified .freeship-bar__fill { background: var(--color-obsidian); }

/* ── Line items (shared: drawer + cart page) ─────────────── */
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-light-gray);
}
.cart-line.is-removing { opacity: 0.4; }
.cart-line__media { flex: 0 0 84px; }
.cart-line__thumb { display: block; }
.cart-line__thumb img { width: 84px; height: 112px; object-fit: cover; }
.cart-line__detail {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cart-line__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.cart-line__name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
}
.cart-line__name a:hover { opacity: 0.6; }
.cart-line__remove {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-warm-gray);
    transition: color var(--duration) var(--ease-out);
}
.cart-line__remove:hover { color: var(--color-obsidian); }
.cart-line__meta { font-size: 0.78rem; color: var(--color-warm-gray); }
.cart-line__meta p,
.cart-line__meta dl { margin: 0; }
.cart-line__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}
.cart-line__price { font-size: 0.95rem; letter-spacing: 0.02em; }

/* ── Quantity stepper ────────────────────────────────────── */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-light-gray);
    background: #fff;
}
.qty-stepper__btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-obsidian);
    transition: background-color var(--duration) var(--ease-out);
}
.qty-stepper__btn:hover { background: var(--color-sand); }
.qty-stepper__input {
    width: 46px;
    height: 42px;
    text-align: center;
    border: 0;
    border-inline: 1px solid var(--color-light-gray);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-obsidian);
    -moz-appearance: textfield;
    appearance: textfield;
}
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Single-product page: make the stepper override the legacy .qty width. */
.wc-main .product .summary .quantity.qty-stepper { width: auto; }
.wc-main .product .summary .quantity.qty-stepper .qty-stepper__input {
    width: 52px;
    height: 46px;
    padding: 0;
    border: 0;
    border-inline: 1px solid var(--color-light-gray);
}
.wc-main .product .summary .quantity.qty-stepper .qty-stepper__btn { width: 46px; height: 46px; }

/* ── Coupon ──────────────────────────────────────────────── */
.cart-coupon { margin: var(--space-sm) 0; }
.cart-coupon__toggle {
    padding: 0.3rem 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cart-coupon__toggle:hover { color: var(--color-obsidian); }
.cart-coupon__panel { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.cart-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-light-gray);
    background: #fff;
    font-size: 0.85rem;
}
.cart-coupon__input:focus { outline: none; border-color: var(--color-obsidian); }
.cart-coupon__apply {
    flex: 0 0 auto;
    width: auto !important; /* a generic WC button width:100% was stretching it
        full-width, squishing the code input to ~0 and overflowing in RTL */
    white-space: nowrap;
    padding: 0.7rem 1.1rem;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    border: 0;
    cursor: pointer;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: opacity var(--duration) var(--ease-out);
}
.cart-coupon__apply:hover { opacity: 0.8; }
.cart-coupon__applied { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: 0.8rem; }
.cart-coupon__applied li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--color-warm-gray);
}
.cart-coupon__remove { background: none; border: 0; cursor: pointer; font-size: 1rem; color: var(--color-warm-gray); }
.cart-coupon__remove:hover { color: var(--color-obsidian); }

/* ── Drawer subtotal ─────────────────────────────────────── */
.cart-drawer__subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-light-gray);
}
.cart-drawer__subtotal-label {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
}
.cart-drawer__subtotal-value { font-family: var(--font-heading); font-size: 1.3rem; }

/* ── Notices (coupon feedback) ───────────────────────────── */
.cart-drawer__notices { margin-bottom: var(--space-sm); }
.cart-drawer__notices ul { list-style: none; margin: 0; padding: 0; }
.cart-drawer__notices .woocommerce-error,
.cart-drawer__notices .woocommerce-message,
.cart-drawer__notices .woocommerce-info {
    margin: 0 0 0.5rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.8rem;
    background: var(--color-sand);
    border-inline-start: 2px solid var(--color-accent);
}
.cart-drawer__notices .woocommerce-error { border-inline-start-color: #b00020; }

/* ── Cross-sell "You may also like" ──────────────────────── */
.cart-upsell {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-light-gray);
}
.cart-upsell__title {
    margin-bottom: 0.8rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cart-upsell__card { position: relative; }
.cart-upsell__link { display: block; }
.cart-upsell__link img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 0.4rem; }
.cart-upsell__name { display: block; font-family: var(--font-heading); font-size: 0.9rem; line-height: 1.2; }
.cart-upsell__price { display: block; font-size: 0.8rem; color: var(--color-warm-gray); }
.cart-upsell__add {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.45rem 0.8rem;
    background: transparent;
    border: 1px solid var(--color-obsidian);
    color: var(--color-obsidian);
    cursor: pointer;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.cart-upsell__add:hover { background: var(--color-obsidian); color: var(--color-ivory); opacity: 1; }
.cart-upsell--drawer .cart-upsell__track {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
}
.cart-upsell--drawer .cart-upsell__card { flex: 0 0 132px; scroll-snap-align: start; }
.cart-upsell--page .cart-upsell__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* ── Drawer empty state ──────────────────────────────────── */
.cart-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-sm);
    text-align: center;
}
.cart-drawer__empty-icon { color: var(--color-light-gray); }
.cart-drawer__empty-msg { font-family: var(--font-heading); font-size: 1.3rem; }
.cart-drawer__empty-cta {
    padding: 0.9rem 1.6rem;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.cart-drawer__empty-cta:hover { opacity: 0.85; }

/* ═══ Full cart page ═════════════════════════════════════ */
.cart-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-md) 0 var(--space-xl);
}
.cart-page__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.cart-page .cart-line__media { flex: 0 0 110px; }
.cart-page .cart-line__thumb img { width: 110px; height: 147px; }
.cart-page .freeship-bar { margin-bottom: var(--space-md); }
.cart-page .cart-coupon {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-light-gray);
}

.cart-summary {
    padding: var(--space-md);
    background: #fff;
    border: 1px solid var(--color-light-gray);
}
.cart-summary__title {
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cart-summary__table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-sm); }
.cart-summary__table th,
.cart-summary__table td {
    padding: 0.7rem 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-light-gray);
}
.cart-summary__table th {
    text-align: start;
    color: var(--color-warm-gray);
    letter-spacing: 0.02em;
}
.cart-summary__table td {
    text-align: end;
    color: var(--color-obsidian);
    /* clean, uniform-width figures — serif old-style numerals look off on prices */
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
/* the shipping cell is a note, not a price */
.cart-summary__table .shipping td {
    color: var(--color-warm-gray);
    font-size: 0.82rem;
}
/* total stands out by weight + size, not a decorative display font */
.cart-summary__table .order-total th,
.cart-summary__table .order-total td {
    padding-top: var(--space-sm);
    padding-bottom: 0;
    border-bottom: 0;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-obsidian);
}
.cart-summary__table .order-total th {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cart-summary__table .order-total td {
    font-size: 1.35rem;
}
/* keep WC's price span consistent with the cell (uniform figures) */
.cart-summary .woocommerce-Price-amount {
    font-family: inherit;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    white-space: nowrap;
}
/* the "shipping to <address>" line is noise on the cart — the rate is
   subtotal-based and the address is collected at checkout. */
.cart-summary .woocommerce-shipping-destination { display: none; }
.cart-summary__table .shipping th,
.cart-summary__table .shipping td { font-size: 0.9rem; }
.cart-summary__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--color-warm-gray);
    text-align: center;
}
.cart-summary__note svg { flex: 0 0 auto; }
.wc-proceed-to-checkout { margin-top: var(--space-sm); }
.wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    padding: 1.1rem;
    text-align: center;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: opacity var(--duration) var(--ease-out);
}
.wc-proceed-to-checkout .checkout-button:hover { opacity: 0.85; }
.cart-summary__continue {
    display: block;
    margin-top: var(--space-sm);
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cart-summary__continue:hover { color: var(--color-obsidian); opacity: 1; }

/* Cart-page empty state */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-sm);
    text-align: center;
}
.cart-empty-state__icon { color: var(--color-light-gray); }
.cart-empty-state__title { font-family: var(--font-heading); font-size: 2rem; }
.cart-empty-state__text { max-width: 34ch; color: var(--color-warm-gray); }
.cart-empty-state__cta {
    margin-top: var(--space-sm);
    padding: 1rem 2rem;
    background: var(--color-obsidian);
    color: var(--color-ivory);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.cart-empty-state__cta:hover { opacity: 0.85; }

/* ── Desktop refinements ─────────────────────────────────── */
@media (min-width: 901px) {
    .cart-page__grid {
        grid-template-columns: 1.6fr 0.9fr;
        gap: var(--space-xl);
        align-items: start;
    }
    .cart-page__summary { position: sticky; top: calc(var(--header-height) + var(--space-md)); }
    .cart-upsell--page .cart-upsell__track { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   CART PAGE — layout polish & WooCommerce notices
   ═══════════════════════════════════════════════════════════ */

/* The fallback index.php template adds a large inline top padding on
   .site-main, on TOP of the body's header clearance — tighten it so the
   cart/checkout content doesn't start halfway down the page. */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
    padding-top: var(--space-lg) !important;
}

/* WooCommerce wraps the [woocommerce_cart] output in a flex `.woocommerce`
   div, which shrinks our block cart to its content width — make it fill. */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce { display: block; }

.cart-page { max-width: 1180px; }

/* Page title ("Cart" / "סל קניות") */
body.woocommerce-cart .site-main > article > h1,
body.woocommerce-checkout .site-main > article > h1 {
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: var(--space-md);
}

/* WooCommerce notices — a subtle editorial bar, not a raw black box */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    list-style: none;
    margin: 0 0 var(--space-sm);
    padding: 0.85rem 1.1rem;
    background: var(--color-sand);
    border: 0;
    border-inline-start: 2px solid var(--color-accent);
    font-size: 0.85rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.woocommerce-error { border-inline-start-color: #b00020; }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-obsidian);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.woocommerce-message .button:hover { opacity: 0.65; background: none; color: var(--color-obsidian); }

/* ── Mobile (cart page + drawer full parity) ─────────────── */
@media (max-width: 600px) {
    .cart-drawer { width: 100vw; max-width: 100vw; }

    body.woocommerce-cart .site-main,
    body.woocommerce-checkout .site-main { padding-top: var(--space-md) !important; }

    body.woocommerce-cart .site-main > article > h1,
    body.woocommerce-checkout .site-main > article > h1 { font-size: 1.75rem; }

    .cart-page__grid { gap: var(--space-md); }
    .cart-page__summary { position: static; }

    .cart-line { gap: var(--space-xs); }
    .cart-line__media { flex-basis: 80px; }
    .cart-line__thumb img { width: 80px; height: 107px; }
    .cart-line__name { font-size: 0.95rem; }

    .cart-upsell--page .cart-upsell__track { grid-template-columns: repeat(2, 1fr); }

    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* Kill the extra top padding the WC wrapper adds, so the cart isn't pushed down. */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce { padding-top: 0; }
body.woocommerce-cart .cart-page { padding-top: 0; }

/* When logged in, the fixed WP admin bar overlaps the drawer's top — offset it
   so the "Your Cart" header isn't hidden. Logged-out customers keep top:0. */
.admin-bar .cart-drawer { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .cart-drawer { top: 46px; }
}

/* ═══════════════════════════════════════════════════════════
   TRANSLATEPRESS SWITCHER — brand font
   The plugin ships its own -apple-system stack on the language
   name; force the SI MARES serif everywhere the switcher renders.
   ═══════════════════════════════════════════════════════════ */
.trp-language-switcher,
.trp-language-switcher *,
.trp-language-item,
.trp-language-item-name,
.trp-language-item__current,
.trp-current-language-item__wrapper,
.trp-shortcode-switcher__wrapper,
.trp-shortcode-switcher__wrapper * {
    font-family: var(--font-body) !important;
}

/* ═══════════════════════════════════════════════════════════
   MY ACCOUNT — WooCommerce ships this area unstyled (bullet nav,
   no layout). Bring it in line with the brand: dashboard, orders,
   downloads, addresses, account details, and the logged-out
   login / register forms. (The page falls back to index.php, so
   everything is scoped to body.woocommerce-account.)
   ═══════════════════════════════════════════════════════════ */

/* Page title */
.woocommerce-account .site-main > article > h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: var(--space-lg);
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    font-family: var(--font-body);
}

/* Two-column layout (nav + content) on desktop */
@media (min-width: 768px) {
    .woocommerce-account.logged-in .woocommerce {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-xl);
    }
    .woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper,
    .woocommerce-account.logged-in .woocommerce > .woocommerce-message,
    .woocommerce-account.logged-in .woocommerce > .woocommerce-info,
    .woocommerce-account.logged-in .woocommerce > .woocommerce-error {
        flex: 0 0 100%;
    }
    .woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
        flex: 0 0 210px;
    }
    .woocommerce-account.logged-in .woocommerce-MyAccount-content {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Navigation — clean links instead of the default bullet list */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-light-gray);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    transition: color var(--duration) var(--ease-out);
}
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--color-obsidian);
    opacity: 1;
}
.woocommerce-MyAccount-navigation li.is-active a {
    color: var(--color-obsidian);
    font-weight: 700;
}

/* Mobile: navigation becomes a horizontal, scrollable tab strip */
@media (max-width: 767px) {
    .woocommerce-MyAccount-navigation {
        margin-bottom: var(--space-md);
        border-bottom: 1px solid var(--color-light-gray);
    }
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        gap: var(--space-md);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
    .woocommerce-MyAccount-navigation li a {
        white-space: nowrap;
        padding: 0.6rem 0;
        border-bottom: 2px solid transparent;
    }
    .woocommerce-MyAccount-navigation li.is-active a {
        border-bottom-color: var(--color-obsidian);
    }
}

/* Content typography */
.woocommerce-MyAccount-content p { margin-bottom: var(--space-sm); line-height: 1.8; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--font-heading);
    margin: 0 0 var(--space-sm);
}
.woocommerce-MyAccount-content a:not(.button) {
    color: var(--color-obsidian);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Account tables (orders / downloads) */
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-light-gray);
    margin-bottom: var(--space-md);
    font-size: 0.85rem;
}
.woocommerce-account table.shop_table th {
    text-align: start;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-light-gray);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
}
.woocommerce-account table.shop_table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-light-gray);
    color: var(--color-obsidian);
}

/* Login / Register (logged-out account) */
@media (min-width: 768px) {
    .woocommerce-account:not(.logged-in) .u-columns {
        display: flex;
        gap: var(--space-xl);
        align-items: flex-start;
    }
    .woocommerce-account:not(.logged-in) .u-column1,
    .woocommerce-account:not(.logged-in) .u-column2 { flex: 1 1 0; }
}
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2,
.woocommerce-account .col-1 > h2,
.woocommerce-account .col-2 > h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}
.woocommerce-account form.login,
.woocommerce-account form.register {
    border: 1px solid var(--color-light-gray);
    padding: var(--space-md);
    margin-top: var(--space-sm);
}
.woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--color-warm-gray);
}
.woocommerce-LostPassword a {
    font-size: 0.85rem;
    color: var(--color-obsidian);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* show / hide password eye — seat it neatly inside the field */
.woocommerce .password-input { position: relative; display: block; }
.woocommerce .password-input .show-password-input {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.85rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--color-warm-gray);
}

/* Full-width form submit buttons on mobile for an easy tap */
@media (max-width: 767px) {
    .woocommerce-account form .woocommerce-Button,
    .woocommerce-account form button[type="submit"] {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   CART — numerals: lining + tabular figures.
   Frank Ruhl Libre defaults to old-style figures (digits that
   ride above / below the baseline), which made the cart's line
   prices, quantities and free-shipping numbers look uneven next
   to the summary's already-lining totals. Force lining figures on
   every price / number so they sit uniformly on the baseline.
   (.woocommerce-Price-amount is normalised site-wide so prices
   stay consistent across shop, product, drawer, cart & checkout.)
   ═══════════════════════════════════════════════════════════ */
.woocommerce-Price-amount,
.cart-page .cart-line__price,
.cart-page .cart-line__total,
.cart-page .qty-stepper__input,
.cart-page .freeship-bar,
.cart-drawer .freeship-bar,
.cart-drawer .cart-line__price {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}