/*
Theme Name: Ange Bae
Theme URI: https://angebae.com
Description: Premium boutique theme for Ange Bae — editorial minimal lingerie & activewear
Version: 6.1.1
Template: storefront
*/

/* ============================================
   ANGE BAE — LUXURY MINIMAL DESIGN v6
   
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
    /* Colors — Warm palette */
    --black: #171717;
    --dark: #333333;
    --gray: #5c5c5c;
    --gray-light: #999999;
    --light-gray: #e8e4e0;
    --off-white: #f7f4f1;
    --white: #ffffff;
    --cream: #f7f1f0;
    --warm-bg: #faf6f4;
    --accent: #c16452;
    --accent-dark: #a85443;
    --accent-light: #de9d9a;
    --red: #c20000;
    --teal: #09728c;

    /* Typography */
    --font-heading: 'EB Garamond', Georgia, serif;
    --font-body: 'Jost', -apple-system, sans-serif;

    /* Spacing */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;
    --space-2xl: 120px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-mid: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --container-max: 1320px;
    --container-narrow: 800px;
}

/* ============================================
   BASE
   ============================================ */
* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark);
    background: var(--warm-bg);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--black);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

a {
    color: var(--black);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--accent); }

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

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

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal="fade"] { transform: none; }

[data-reveal="slide-left"] { transform: translateX(-40px); }
[data-reveal="slide-left"].is-visible { transform: translateX(0); }

[data-reveal="slide-right"] { transform: translateX(40px); }
[data-reveal="slide-right"].is-visible { transform: translateX(0); }

[data-reveal="scale"] { transform: scale(0.95); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Stagger children */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.15s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.2s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.25s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.3s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.35s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.4s; }
[data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 16px 38px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

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

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

.btn-white {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}
.btn-white:hover {
    background: transparent;
    color: var(--white);
}

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
.announcement-bar {
    background: var(--black);
    color: var(--white);
    padding: 10px 20px;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    overflow: hidden;
}

.announcement-bar__content {
    position: relative;
    min-height: 14px;
    display: block;
}

.announcement-bar__text {
    display: inline-block;
}

/* Single message: show statically */
.announcement-bar--rotate-1 .announcement-bar__text { opacity: 1; }

/* Two messages: fade-rotate every 5s */
.announcement-bar--rotate-2 .announcement-bar__text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    animation: announce-rotate 10s infinite;
}
.announcement-bar--rotate-2 .announcement-bar__text:nth-child(1) { animation-delay: 0s; }
.announcement-bar--rotate-2 .announcement-bar__text:nth-child(2) { animation-delay: 5s; }

@keyframes announce-rotate {
    0%, 45%  { opacity: 1; transform: translateY(0); }
    50%, 95% { opacity: 0; transform: translateY(-4px); }
    100%     { opacity: 1; transform: translateY(0); }
}

/* ============================================
   HEADER — Centered Stacked Layout
   ============================================ */
.site-header {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 10000;
    border-bottom: 1px solid var(--light-gray);
    transition: box-shadow 0.3s, background 0.3s;
}

.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.98);
}

/* Top row: hamburger | logo | actions */
.header-top {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.header-top__left {
    flex: 1;
    display: flex;
    align-items: center;
}

.site-branding {
    flex: 1;
    text-align: center;
}

@media (min-width: 768px) {
    .site-header .site-branding img {
      max-width: 190px !important;
	  text-align: center;
	  display: initial;

    }
}

/* Override Storefront's `.site-logo-link { display: block; }` which
   would stretch the link to the full flex column width and push the
   SVG to the left edge instead of letting it center. */
.site-header .site-logo-link {
    display: inline-block;
    line-height: 0;
    color: var(--black);
}
.site-logo-link svg {
    display: block;
    height: 56px;
    width: auto;
}
@media (min-width: 768px) {
    .site-logo-link svg { height: 80px; }
}
.site-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--black);
    text-decoration: none;
    display: inline-block;
}

.site-title .title-main { display: block; line-height: 1.1; }
.site-title .title-sub {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gray-light);
    margin-top: 2px;
}

/* Bottom row: centered navigation */
.primary-navigation {
    border-top: 1px solid var(--light-gray);
    text-align: center;
}

.primary-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 36px;
}

.primary-navigation a {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark);
    padding: 14px 0;
    position: relative;
    transition: color var(--transition-fast);
}

.primary-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width var(--transition-mid);
}

.primary-navigation a:hover { color: var(--accent); }
.primary-navigation a:hover::after { width: 100%; }

.header-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.header-action-btn {
    background: none;
    border: none;
    color: var(--dark);
    cursor: pointer;
    padding: 8px;
    position: relative;
    transition: color var(--transition-fast);
}

.header-action-btn:hover { color: var(--accent); }
.header-action-btn svg { width: 22px; height: 22px; }

.cart-count {
    position: absolute;
    top: 0;
    right: -2px;
    background: var(--accent);
    color: var(--white);
    font-size: 9px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--dark);
    transition: all 0.3s var(--ease-out);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile navigation overlay */
.primary-navigation.is-open {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    background: var(--white);
    z-index: 9998;
    padding: 80px var(--space-md) var(--space-lg);
    border-top: none;
    text-align: left;
    animation: menuSlideDown 0.4s var(--ease-out);
    overflow-y: auto;
}

.primary-navigation.is-open ul {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.primary-navigation.is-open li {
    border-bottom: 1px solid var(--light-gray);
}

.primary-navigation.is-open a {
    display: block;
    padding: 18px 0;
    font-size: 16px;
    letter-spacing: 0.04em;
}

.primary-navigation.is-open a::after { display: none; }

body.menu-open { overflow: hidden; }

@keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 993px) {
    .mobile-menu-toggle { display: none !important; }
    .header-top__left { visibility: hidden; }

    .primary-navigation.is-open {
        display: block !important;
        position: static;
        background: none;
        padding: 0;
        animation: none;
        text-align: center;
        border-top: 1px solid var(--light-gray);
    }
    .primary-navigation.is-open ul {
        display: inline-flex;
        flex-direction: row;
        gap: 36px;
    }
    .primary-navigation.is-open li { border: none; }
    .primary-navigation.is-open a {
        padding: 14px 0;
        font-size: 13px;
        letter-spacing: 0.06em;
    }
    .primary-navigation.is-open a::after { display: block; }
}

/* ============================================
   HERO — SPLIT SCREEN
   ============================================ */
/* ---- HERO SLIDER ---- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 500px;
    max-height: 800px;
    overflow: hidden;
    background: var(--black);
}

.hero-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 1;
}

.hero-slider__slide.is-active {
    opacity: 1;
    z-index: 2;
}

.hero-slider__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 6s ease-out;
}

.hero-slider__slide.is-active .hero-slider__bg {
    transform: scale(1.04);
}

.hero-slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.45) 100%
    );
    z-index: 3;
}

.hero-slider__content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: var(--space-xl) var(--space-md);
    max-width: 700px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.hero-slider__slide.is-active .hero-slider__content {
    opacity: 1;
    transform: translateY(0);
}

.hero-slider__subtitle {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-sm);
}

.hero-slider__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--white);
    margin-bottom: var(--space-md);
}

.hero-slider__desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    max-width: 480px;
}

.hero-slider__btn.btn-primary {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}
.hero-slider__btn.btn-primary:hover {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

/* Arrows */
.hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
}
.hero-slider__arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}
.hero-slider__arrow--prev { left: 24px; }
.hero-slider__arrow--next { right: 24px; }

/* Dots */
.hero-slider__dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}

.hero-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
}
.hero-slider__dot:hover { border-color: var(--white); }
.hero-slider__dot.is-active {
    background: var(--white);
    border-color: var(--white);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   CATEGORY SHOWCASE
   ============================================ */
.categories-showcase {
    padding: var(--space-xl) 0;
}

.categories-showcase__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.category-card {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--off-white);
}

.category-card__image {
    width: 100%;
    height: 100%;
}

.category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out);
}

.category-card:hover .category-card__image img {
    transform: scale(1.05);
}

.category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-lg) var(--space-md);
    color: var(--white);
}

.category-card__title {
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 400;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.category-card__count {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    font-weight: 300;
}

.category-card__cta {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.category-card:hover .category-card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.section-subtitle {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
}

/* ============================================
   PRODUCTS SECTION
   ============================================ */
.products-section {
    padding: var(--space-xl) 0;
}

/* Product Grid */
.products, ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ============================================
   PRODUCT CARDS (V3)
   ============================================ */
.product-card,
.product {
    position: relative;
}

.product-card__image-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--off-white);
    aspect-ratio: 3 / 4;
}

.product-card__link {
    display: block;
    text-decoration: none;
}

.product-card__image img,
.product img,
.product .attachment-woocommerce_thumbnail {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--off-white);
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

/* Image swap on hover */
.product-card__image--secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
}

/* Only fade primary when secondary image exists */
.product-card:hover .has-secondary .product-card__image--primary img {
    opacity: 0;
}
.product-card:hover .product-card__image--secondary {
    opacity: 1;
}
.product-card:hover .product-card__image--secondary img {
    transform: scale(1.03);
}

/* Fallback hover for non-card products */
.product:hover img { transform: scale(1.03); }
.product > a:first-child {
    display: block;
    overflow: hidden;
}

/* Product Badge */
.product-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    pointer-events: none;
    border-radius: 2px;
}

.product-card__badge--new {
    background: var(--teal);
    color: var(--white);
}
.product-card__badge--sale {
    background: var(--red);
    color: var(--white);
}

/* Legacy badge styles */
.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: var(--white);
    color: var(--black);
}
.badge--sale { background: var(--red); color: var(--white); }

.woocommerce span.onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--red);
    color: white;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 0;
    min-height: auto;
    min-width: auto;
    line-height: 1;
    margin: 0;
}

/* Quick Add Button */
.product-card__quick-add,
a.product-card__quick-add {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(17, 17, 17, 0.92);
    color: var(--white) !important;
    border: none;
    padding: 14px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transform: translateY(100%);
    transition: transform 0.35s var(--ease-out), background 0.2s;
    z-index: 3;
    display: block;
    text-decoration: none;
}

.product-card:hover .product-card__quick-add {
    transform: translateY(0);
}

.product-card__quick-add:hover,
a.product-card__quick-add:hover {
    background: var(--accent);
    color: var(--white) !important;
}

.product-card__quick-add.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Touch devices: always show quick add */
@media (hover: none) {
    .product-card__quick-add {
        transform: translateY(0);
        position: relative;
        background: var(--off-white);
        color: var(--black);
    }
    .product-card__quick-add:hover {
        background: var(--black);
        color: var(--white);
    }
}

/* Product Info */
.product-card__info {
    padding: 14px 0 0;
    text-align: center;
}

.product-card__title,
.woocommerce-loop-product__title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--dark);
    margin: 0 0 6px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Legacy product title in loop */
.woocommerce-loop-product__title {
    margin: 14px 0 6px;
}

.product-card__price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-card__price,
.price, .woocommerce .price {
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
}

.product-card__sale-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--red);
    letter-spacing: 0.02em;
}

.price del {
    color: var(--gray-light);
    font-weight: 400;
    margin-right: 4px;
    font-size: 12px;
}

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

/* Hide default WooCommerce add-to-cart in loop */
.woocommerce ul.products li.product .button {
    display: none;
}

/* ============================================
   BRAND / ABOUT SECTION
   ============================================ */
.brand-section {
    padding: var(--space-xl) 0;
    background: var(--white);
}

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

.brand-image {
    overflow: hidden;
}

.brand-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.brand-content {
    max-width: 480px;
}

.brand-subtitle {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-subtitle::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--accent);
}

.brand-title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    line-height: 1.15;
}

.brand-text {
    font-size: 15px;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 32px;
}

/* Centered fallback */
.brand-section .brand-content:only-child {
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================
   VALUE PROPOSITIONS
   ============================================ */
.value-props {
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
}

.value-props__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    text-align: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.value-prop__icon {
    margin-bottom: 12px;
}

.value-prop__icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
}

.value-prop__title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.value-prop__text {
    font-size: 13px;
    color: var(--gray);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
    padding: var(--space-xl) 0;
    background: var(--off-white);
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.testimonial-card {
    background: var(--white);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    border: 1px solid var(--light-gray);
    transition: box-shadow 0.3s var(--ease-out);
}

.testimonial-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.testimonial-card__stars {
    color: var(--accent);
    margin-bottom: var(--space-sm);
    font-size: 14px;
    letter-spacing: 3px;
}

.testimonial-card__text {
    font-family: var(--font-heading);
    font-size: 17px;
    font-style: italic;
    line-height: 1.65;
    color: var(--dark);
    margin-bottom: var(--space-md);
}

.testimonial-card__author {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray);
}

/* ============================================
   LIFESTYLE / INSTAGRAM GRID
   ============================================ */
.lifestyle-grid {
    padding: var(--space-xl) 0 0;
}

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

.lifestyle-grid__images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.lifestyle-grid__item {
    overflow: hidden;
    position: relative;
}

.lifestyle-grid__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out);
}

.lifestyle-grid__item:hover img {
    transform: scale(1.05);
}

.lifestyle-grid__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s;
}

.lifestyle-grid__item:hover::after {
    background: rgba(0, 0, 0, 0.1);
}

/* ============================================
   FOOTER — NEWSLETTER (standalone section)
   ============================================ */
.footer-newsletter {
    background: var(--off-white);
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--light-gray);
}

.footer-newsletter__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.footer-newsletter__title {
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--black);
    line-height: 1.2;
}

.footer-newsletter__description {
    color: var(--gray);
    margin: 0;
    font-size: 14px;
}

.newsletter-form__field {
    display: flex;
    gap: 0;
}

.newsletter-form__field input[type="email"] {
    background: transparent;
    border: 1px solid var(--light-gray);
    border-right: none;
    color: var(--dark);
    padding: 14px 18px;
    font-size: 14px;
    font-family: var(--font-body);
    min-width: 260px;
    transition: border-color var(--transition-fast);
}

.newsletter-form__field input::placeholder {
    color: var(--gray-light);
}

.newsletter-form__field input:focus {
    outline: none;
    border-color: var(--accent);
}

.newsletter-form__field button {
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.newsletter-form__field button:hover {
    background: var(--accent-dark);
}

.newsletter-form__disclaimer {
    font-size: 11px;
    color: var(--gray-light);
    margin: 10px 0 0;
}

/* ============================================
   FOOTER — Warm beige style
   ============================================ */
.site-footer {
    background: var(--cream);
    color: var(--dark);
}

/* --- Brand Section --- */
.footer-brand {
    text-align: center;
    padding: 48px var(--space-md) 32px;
    border-bottom: 1px solid var(--light-gray);
}

.footer-brand__inner {
    max-width: 480px;
    margin: 0 auto;
}

a.footer-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    margin-bottom: 16px;
}

a.footer-logo:hover {
    text-decoration: none;
}

.footer-logo__main {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 500;
    color: var(--dark);
    letter-spacing: 0.02em;
}

.footer-logo__sub {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--accent);
}

.footer-tagline {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray);
    margin: 0 0 20px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--light-gray);
    color: var(--gray);
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    color: var(--white);
    background: var(--dark);
    border-color: var(--dark);
}

/* --- Bottom Bar --- */
.footer-bottom {
    padding: 24px 0;
}

.footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.footer-bottom__left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-social--bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.footer-social--bottom a {
    width: 30px;
    height: 30px;
    border: 1px solid var(--light-gray);
    color: var(--gray);
}

.footer-social--bottom a svg {
    width: 14px;
    height: 14px;
}

.footer-copyright {
    font-size: 12px;
    color: var(--gray-light);
    margin: 0;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    font-size: 12px;
    color: var(--gray);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-payments {
    text-align: center;
    padding: 24px var(--space-md);
    border-top: 1px solid var(--light-gray);
}

.footer-payments__icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: var(--container-max);
    margin: 0 auto;
}

.payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.payment-icon svg {
    display: block;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.afrobae-breadcrumbs {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md);
}

.afrobae-breadcrumbs__inner {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 12px;
    color: var(--gray-light);
}

.afrobae-breadcrumbs a {
    color: var(--gray-light);
    transition: color var(--transition-fast);
}

.afrobae-breadcrumbs a:hover {
    color: var(--accent);
}

.afrobae-breadcrumbs__sep {
    margin: 0 8px;
    color: var(--light-gray);
}

.afrobae-breadcrumbs span:last-child {
    color: var(--dark);
}

/* ============================================
   SHOP PAGE — Collection Banner
   ============================================ */
.collection-banner {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    background: var(--white);
    border-bottom: 1px solid var(--light-gray);
}

.collection-banner__inner {
    max-width: 640px;
    margin: 0 auto;
}

.collection-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--black);
    line-height: 1.1;
}

.collection-banner__desc,
.collection-banner__desc p {
    font-size: 15px;
    color: var(--gray);
    line-height: 1.7;
    margin: 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Category Filter Pills */
.category-pills {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: var(--space-md) var(--space-md) 0;
    margin-bottom: var(--space-md);
}

.category-pill {
    display: inline-block;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray);
    border: 1px solid var(--light-gray);
    background: var(--white);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.category-pill:hover {
    color: var(--black);
    border-color: var(--black);
}

.category-pill--active,
a.category-pill--active {
    background: var(--black);
    color: var(--white) !important;
    border-color: var(--black);
}

.category-pill--active:hover,
a.category-pill--active:hover {
    color: var(--white) !important;
}

/* Shop Toolbar */
.woocommerce-products-header {
    display: none;
}

.woocommerce-result-count {
    font-size: 13px;
    color: var(--gray);
}

.woocommerce-ordering select {
    border: 1px solid var(--light-gray);
    padding: 10px 16px;
    font-size: 13px;
    font-family: var(--font-body);
    background: var(--white);
    cursor: pointer;
}

/* ============================================
   SINGLE PRODUCT PAGE
   ============================================ */
.single-product .site-content {
    padding: 0;
    background: var(--white);
}

.single-product .product {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md) var(--space-xl);
}

.single-product .product > .woocommerce-product-gallery,
.single-product .product > .summary {
    float: none !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .single-product .product {
        display: grid;
        grid-template-columns: 55% 1fr;
        column-gap: 60px;
        row-gap: 0;
        align-items: start;
    }

    .single-product .product > .woocommerce-product-gallery {
        grid-column: 1;
        grid-row: 1;
    }

    .single-product .product > .summary {
        grid-column: 2;
        grid-row: 1;
        padding-top: var(--space-md);
        align-self: start;
    }

    .single-product .product > .woocommerce-tabs,
    .single-product .product > .related {
        grid-column: 1 / -1;
    }
}

/* Product Gallery — Clean minimal style */
.woocommerce-product-gallery {
    position: relative;
    background: var(--white);
    border-radius: 2px;
    overflow: visible;
}

.woocommerce-product-gallery .flex-viewport {
    background: var(--white);
    border-radius: 2px;
    overflow: hidden;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    background: var(--white);
    display: block;
}

/* Zoom icon */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 40px;
    height: 40px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 0.3s;
}

.woocommerce-product-gallery:hover .woocommerce-product-gallery__trigger {
    opacity: 1;
}

.woocommerce-product-gallery .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 8px;
    margin: 10px 0 0;
    list-style: none;
    padding: 0;
    max-width: 100%;
}

@media (min-width: 768px) {
    .woocommerce-product-gallery .flex-control-thumbs {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
    }
}

.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; }

.woocommerce-product-gallery .flex-control-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.3s, border-color 0.3s;
    border: 2px solid transparent;
    background: var(--white);
    border-radius: 2px;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover {
    opacity: 0.85;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: var(--black);
}

/* Product Summary */
.single-product .storefront-wc-brands-single-product {
    float: left;
    margin: 6px 12px 0 0;
    line-height: 0;
    background: transparent;
}

.single-product .storefront-wc-brands-single-product a {
    display: inline-block;
    border-bottom: 0;
    background: transparent;
}

.single-product .storefront-wc-brands-single-product img {
    width: auto;
    height: 26px;
    max-width: 60px;
    object-fit: contain;
    display: block;
    background: transparent;
    mix-blend-mode: multiply;
}

.single-product .product_title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    line-height: 1.15;
    color: var(--black);
    overflow: hidden;
}

.single-product .price {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--light-gray);
    color: var(--black);
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}

.single-product .price del {
    color: var(--gray-light);
    font-weight: 400;
    font-size: 15px;
}

.single-product .price ins {
    text-decoration: none;
    color: var(--accent);
    font-weight: 500;
}

.single-product .price .woocommerce-Price-amount {
    font-family: var(--font-body);
}

/* Star rating on single product */
.single-product .woocommerce-product-rating {
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-product .star-rating {
    font-size: 13px;
    color: var(--accent);
}

.single-product .woocommerce-review-link {
    font-size: 12px;
    color: var(--gray-light);
}

/* Short description */
.single-product .woocommerce-product-details__short-description {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--light-gray);
}

/* Variations */
.single-product .variations {
    width: 100%;
    margin-bottom: var(--space-sm);
    border: none;
    border-collapse: collapse;
}

.single-product .variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-sm);
}

.single-product .variations th,
.single-product .variations td {
    padding: 0;
    text-align: left;
}

.single-product .variations th label,
.single-product .variations .label label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
    color: var(--dark);
}

.single-product .variations select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--light-gray);
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--white);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5c5c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.single-product .variations select:focus {
    outline: none;
    border-color: var(--black);
}

.single-product .reset_variations {
    font-size: 12px;
    color: var(--gray);
    margin-top: 4px;
    display: inline-block;
}

/* Quantity & Add to Cart */
.single-product .quantity-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.single-product .quantity-wrapper::before {
    content: 'Quantity';
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark);
}

.single-product .quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--light-gray);
    height: 56px;
}

.single-product .quantity .qty {
    width: 56px;
    height: 100%;
    padding: 0;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    background: var(--white);
    -moz-appearance: textfield;
}

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

/* Quantity stepper buttons (added via JS) */
.qty-btn {
    width: 40px;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
    padding: 0;
    line-height: 1;
    user-select: none;
}

.qty-btn:hover {
    color: var(--accent);
}

.single-product .single_add_to_cart_button {
    width: 100%;
    background: var(--black);
    color: var(--white);
    border: none;
    padding: 18px 32px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-out);
    position: relative;
    overflow: hidden;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-product .single_add_to_cart_button:hover {
    background: var(--accent);
    color: var(--white);
}

.single-product form.cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--space-md);
    padding-top: var(--space-sm);
}

.single-product form.cart .variations { width: 100%; }
.single-product form.cart .single_variation_wrap { width: 100%; }

.single-product form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
}

/* Simple product: quantity on its own row */
.single-product form.cart > .quantity-wrapper {
    width: 140px;
}

.single-product form.cart > .single_add_to_cart_button {
    width: 100%;
}

/* Product Trust Signals */
.product-trust-signals {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--light-gray);
    margin-top: var(--space-sm);
}

.trust-signal {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--gray);
}

.trust-signal svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
    flex-shrink: 0;
    color: var(--dark);
}

/* Product Share */
.product-share {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: var(--space-md);
    border-top: 1px solid var(--light-gray);
    margin-top: var(--space-sm);
}

.product-share__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
}

.product-share__links {
    display: flex;
    gap: 10px;
}

.product-share__links a {
    width: 32px;
    height: 32px;
    border: 1px solid var(--light-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    transition: all var(--transition-fast);
}

.product-share__links a:hover {
    border-color: var(--black);
    color: var(--black);
}

/* Product Meta */
.single-product .product_meta {
    display: none;
}

/* Tabs / accordion removed from PDP — keep hidden as belt-and-suspenders */
.woocommerce-tabs,
.product-accordion {
    display: none !important;
}

.woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--black);
}

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

.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 14px 28px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.woocommerce-tabs ul.tabs li a:hover { color: var(--dark); }

.woocommerce-tabs ul.tabs li.active a {
    color: var(--white);
    background: var(--accent);
    border-bottom-color: var(--accent);
}

.woocommerce-tabs .panel { padding: var(--space-md) 0; }

.woocommerce-tabs .panel h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    margin-bottom: var(--space-sm);
}

.woocommerce-tabs .panel p {
    color: var(--dark);
    line-height: 1.8;
}

/* ============================================
   RELATED PRODUCTS — editorial, matches homepage .collection
   ============================================ */
.single-product .related.products {
    display: block;
    clear: both;
    float: none;
    width: auto;
    margin: var(--space-lg) 0 0;
    padding: var(--space-lg) 0 var(--space-lg);
    border-top: 1px solid var(--light-gray);
    background: transparent;
}

.single-product .related.products > .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Hide WC default <h2> only when our editorial header is present */
.single-product .related.products > h2 { display: none; }

.single-product .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
}

@media (max-width: 900px) {
    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
    }
}

.single-product .related.products ul.products li.product {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
    text-align: center;
}

.single-product .related.products ul.products li.product .button,
.single-product .related.products ul.products li.product .add_to_cart_button {
    display: none;
}

/* ============================================
   STICKY ADD-TO-CART BAR
   ============================================ */
.sticky-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--light-gray);
    z-index: 998;
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-out);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.sticky-cart-bar.is-visible {
    transform: translateY(0);
}

.sticky-cart-bar__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 12px var(--space-md);
    display: flex;
    align-items: center;
    gap: 16px;
}

.sticky-cart-bar__img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.sticky-cart-bar__info {
    flex: 1;
    min-width: 0;
}

.sticky-cart-bar__title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-cart-bar__price {
    font-size: 13px;
    color: var(--gray);
}

.sticky-cart-bar__price del {
    color: var(--gray-light);
    margin-right: 6px;
}

.sticky-cart-bar__price ins {
    text-decoration: none;
    color: var(--accent);
}

.sticky-cart-bar__btn,
a.sticky-cart-bar__btn {
    background: var(--black);
    color: var(--white) !important;
    border: none;
    padding: 14px 36px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sticky-cart-bar__btn:hover,
a.sticky-cart-bar__btn:hover {
    background: var(--accent);
    color: var(--white) !important;
}

@media (max-width: 768px) {
    .sticky-cart-bar__img { display: none; }
    .sticky-cart-bar__inner { gap: 12px; }
    .sticky-cart-bar__btn { padding: 12px 20px; font-size: 10px; }
}

/* ============================================
   CART & CHECKOUT
   ============================================ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    max-width: var(--container-max);
    margin: 0 auto !important;
    padding: 0 var(--space-md) var(--space-lg) !important;
}
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce-cart .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:empty {
    display: none !important;
}

.woocommerce table.shop_table {
    border: none;
    border-collapse: collapse;
}

.woocommerce table.shop_table th {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: none;
    padding: var(--space-sm) 0;
    border-bottom: 2px solid var(--black);
}

.woocommerce table.shop_table td {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--light-gray);
    vertical-align: middle;
}

.woocommerce table.shop_table td.product-thumbnail img {
    width: 80px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Cart totals */
.woocommerce .cart_totals {
    padding: var(--space-lg);
    border: 1px solid var(--light-gray);
}

.woocommerce .cart_totals h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
}

/* Coupon */
.woocommerce .coupon .input-text {
    border: 1px solid var(--light-gray);
    padding: 14px 16px;
    font-size: 14px;
    font-family: var(--font-body);
}

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: var(--black);
    color: var(--white);
    border: none;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: all var(--transition-fast);
    border-radius: 0;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: var(--accent);
    color: var(--black);
}

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

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

/* Place order */
#place_order {
    width: 100%;
    padding: 18px;
    font-size: 12px;
    letter-spacing: 0.15em;
    background: var(--accent) !important;
    color: var(--white) !important;
}
#place_order:hover {
    background: var(--accent-dark) !important;
}

/* Checkout form */
.woocommerce-checkout .form-row label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    border: 1px solid var(--light-gray);
    padding: 14px 16px;
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--white);
    transition: border-color var(--transition-fast);
    border-radius: 0;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--black);
    outline: none;
}

/* Messages — cart added / info / error */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error,
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    position: relative !important;
    padding: 16px 20px 16px 56px !important;
    margin: 0 0 var(--space-md) !important;
    border: none !important;
    background: var(--off-white) !important;
    color: var(--dark) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.woocommerce-message { border-left: 3px solid #4caf50; }
.woocommerce-info    { border-left: 3px solid var(--accent); }
.woocommerce-error   { border-left: 3px solid var(--red); background: #fdf1f1; }

/* Icon: replace Storefront/WC default char icon with a clean dot/check */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    font-family: inherit;
    color: var(--white) !important;
    text-indent: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
}
.woocommerce-message::before,
.woocommerce .woocommerce-message::before {
    background-color: #4caf50;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.woocommerce-info::before,
.woocommerce .woocommerce-info::before {
    background-color: var(--accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}
.woocommerce-error::before,
.woocommerce .woocommerce-error::before {
    background-color: var(--red);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

/* Error list (multiple validation errors) */
.woocommerce-error {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 14px;
}
.woocommerce-error li {
    display: block;
    margin: 2px 0;
    color: var(--dark);
    font-size: 14px;
}
.woocommerce-error li::before { display: none; }

/* Inline "View cart" / "Continue" buttons on messages — push to the right, minimal */
.woocommerce-message .button,
.woocommerce-message a.button.wc-forward,
.woocommerce-info .button,
.woocommerce-info a.button.wc-forward {
    margin-left: auto;
    padding: 8px 16px !important;
    font-size: 10px !important;
    background: var(--black) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    flex-shrink: 0;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    background: var(--accent) !important;
}

/* ============================================
   SEARCH OVERLAY
   ============================================ */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(17, 17, 17, 0.97);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

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

.search-overlay__content {
    width: 100%;
    max-width: 550px;
    padding: var(--space-md);
}

.search-overlay__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}
.search-overlay__close:hover { opacity: 1; }

.search-overlay .search-form {
    display: flex;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.search-overlay .search-field {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: var(--white) !important;
    font-family: var(--font-heading);
    font-size: 28px;
    padding: 16px 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-text-fill-color: var(--white);
}

.search-overlay .search-field::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
}

.search-overlay .search-field:focus {
    background: transparent !important;
    border: none !important;
    color: var(--white) !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-text-fill-color: var(--white);
}

/* ============================================
   CART NOTIFICATION
   ============================================ */
.cart-notification {
    position: fixed;
    bottom: var(--space-md);
    right: var(--space-md);
    background: var(--black);
    color: var(--white);
    padding: 14px 24px;
    font-size: 13px;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s var(--ease-out);
}

.cart-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-to-top {
    position: fixed;
    bottom: 92px; /* Sits above the WhatsApp float (56px + 24px + 12px gap) */
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s var(--ease-out);
    z-index: 900;
}
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 78px; /* Above the 50px WhatsApp button with 16px bottom */
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--accent-dark);
    color: var(--white);
}

/* Hide any inline SVG — we render the arrow via background-image for reliability */
.scroll-to-top svg,
.scroll-to-top .scroll-to-top__icon {
    display: none !important;
}
.scroll-to-top {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='19' x2='12' y2='5'/><polyline points='5 12 12 5 19 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 992px) {
    .primary-navigation { display: none; }
    .mobile-menu-toggle { display: flex; }
    .header-top__left { visibility: visible; }

    .hero-slider {
        height: 70vh;
        min-height: 400px;
    }
    .hero-slider__arrow {
        width: 40px;
        height: 40px;
    }
    .hero-slider__arrow--prev { left: 16px; }
    .hero-slider__arrow--next { right: 16px; }

    .products, ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
    }

    .categories-showcase__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .value-props__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

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

    .footer-newsletter__content {
        flex-direction: column;
        text-align: center;
    }

    .brand-split {
        grid-template-columns: 1fr;
    }

    .brand-content {
        max-width: none;
        text-align: center;
    }

    .related.products ul.products,
    .woocommerce div.product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 var(--space-md) !important;
    }

    .collection-banner {
        padding: var(--space-md) var(--space-md) var(--space-lg);
    }

    .collection-banner__title {
        font-size: 36px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-slider {
        height: 65vh;
        min-height: 380px;
    }
    .hero-slider__arrow { display: none; }
    .hero-slider__title { font-size: clamp(28px, 7vw, 42px); }

    .products-section, .brand-section { padding: var(--space-xl) 0; }

    .products, ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }

    .categories-showcase__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .category-card {
        aspect-ratio: 16 / 9;
    }

    .testimonials__grid {
        grid-template-columns: 1fr;
    }

    .lifestyle-grid__images {
        grid-template-columns: repeat(2, 1fr);
    }

    .newsletter-form__field {
        flex-direction: column;
        width: 100%;
    }

    .newsletter-form__field input { min-width: 100%; }

    .footer-brand {
        padding: 36px var(--space-sm) 24px;
    }

    .footer-logo__main {
        font-size: 24px;
    }

    .footer-tagline {
        font-size: 12px;
    }

    .footer-bottom__inner {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    /* Single Product — Mobile */
    .single-product .product { display: block; }
    .single-product .product > .summary {
        margin-top: var(--space-md);
        padding-top: 0;
    }

    .single-product .product_title {
        font-size: 26px;
    }

    .woocommerce-product-gallery .flex-control-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-accordion {
        max-width: 100%;
    }

    /* Collection banner mobile */
    .collection-banner {
        padding: var(--space-md) var(--space-sm) var(--space-lg);
    }

    .collection-banner__title {
        font-size: 28px;
    }

    .category-pills {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: var(--space-sm);
        gap: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-pills::-webkit-scrollbar { display: none; }

    .category-pill {
        flex-shrink: 0;
        padding: 7px 16px;
        font-size: 11px;
    }

    .related.products ul.products,
    .woocommerce div.product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 0 var(--space-sm) !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .value-props__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .hero-slider { height: 60vh; min-height: 340px; }
    .hero-slider__desc { font-size: 13px; }
    .hero-slider__dots { bottom: 20px; }
}

/* ============================================
   STOREFRONT OVERRIDES — COMPREHENSIVE RESET
   Kill Storefront's float layout, purple accent,
   huge margins, and centered text defaults.
   ============================================ */

/* --- Global Storefront Layout Reset --- */
/* Storefront uses .col-full with max-width ~1064px, content-box sizing, and margins.
   We override everything to use our container width and consistent padding. */
.col-full,
#page > .col-full,
.site-content > .col-full,
.woocommerce .col-full,
.woocommerce-page .col-full {
    max-width: var(--container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 var(--space-md) !important;
    box-sizing: border-box !important;
}

/* Shop archive wrapper needs proper spacing */
.woocommerce .site-main > .col-full,
.woocommerce-page .site-main > .col-full {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-xl) !important;
}

.woocommerce .content-area .site-main {
    padding-top: 0;
}

#primary,
.woocommerce #primary {
    float: none !important;
    width: 100% !important;
}

#secondary {
    display: none;
}

/* --- Nuke Storefront's purple accent color --- */
a,
.woocommerce a,
.woocommerce-page a {
    color: var(--black);
}

a:hover,
.woocommerce a:hover {
    color: var(--accent);
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: var(--accent) !important;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    background-color: var(--accent) !important;
}

p.stars a,
p.stars a:hover,
p.stars a::before {
    color: var(--accent) !important;
}

/* --- Storefront's floated product grid → CSS Grid --- */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce .site-main ul.products,
#main ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px 20px !important;
    list-style: none !important;
}

/* Kill ALL Storefront float-based widths on product items */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
ul.products li.product.type-product,
ul.products li.product {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

/* Kill Storefront's :first-child/:last-child/:nth-child margin rules */
.woocommerce ul.products li.product:first-child,
.woocommerce ul.products li.product:last-child,
.woocommerce ul.products li.product:nth-child(n) {
    margin: 0 !important;
    margin-right: 0 !important;
    clear: none !important;
}

/* Kill clearfix pseudo-elements that break grid */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
    display: none !important;
}

/* --- Product card styling overrides --- */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--off-white);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--dark) !important;
    padding: 0 !important;
    margin: 14px 0 6px !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
}

.woocommerce ul.products li.product .price {
    color: var(--black) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
    display: block !important;
    text-align: center !important;
}

.woocommerce ul.products li.product .star-rating {
    margin: 6px 0 !important;
    font-size: 12px;
}

/* Hide default WooCommerce/Storefront add-to-cart button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    background: var(--red) !important;
    color: var(--white) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 5px 10px !important;
    border-radius: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
}

/* --- WooCommerce Buttons — Override Storefront defaults --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background-color: var(--accent) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 28px !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: all var(--transition-fast) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
    background-color: var(--accent-dark) !important;
    color: var(--white) !important;
}

/* --- Shop page layout & header --- */
.post-type-archive-product .site-content,
.tax-product_cat .site-content,
.tax-product_tag .site-content {
    padding-top: 0 !important;
    background: var(--white);
}

/* Hide default WooCommerce header (replaced by our collection-banner) */
.woocommerce-products-header {
    display: none !important;
}

.woocommerce-products-header__title,
.page-title {
    font-family: var(--font-heading) !important;
    font-size: 42px !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    color: var(--black) !important;
}

/* --- Sorting & Result Count Bar --- */
.storefront-sorting,
.woocommerce .storefront-sorting {
    margin-bottom: var(--space-md) !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
/* Keep pagination visually centered inside the sorting bar */
.woocommerce .storefront-sorting nav.woocommerce-pagination {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-result-count {
    font-size: 12px !important;
    color: var(--gray-light) !important;
    margin: 0 !important;
    float: none !important;
    letter-spacing: 0.02em;
}

.woocommerce-ordering {
    margin: 0 !important;
    float: none !important;
}

.woocommerce-ordering select {
    border: 1px solid var(--light-gray) !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
    font-family: var(--font-body) !important;
    border-radius: 0 !important;
    background-color: var(--white) !important;
    color: var(--dark) !important;
    letter-spacing: 0.02em;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5c5c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
    cursor: pointer;
}

/* --- Pagination --- */
.woocommerce nav.woocommerce-pagination {
    text-align: center;
    margin-top: var(--space-xl);
    padding-bottom: var(--space-md);
}

.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
    display: inline-flex;
    gap: 4px;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border: 1px solid var(--light-gray) !important;
    background: var(--white) !important;
    color: var(--dark) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    min-width: 44px;
    text-align: center;
    transition: all var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--black) !important;
    color: var(--white) !important;
    border-color: var(--black) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--black) !important;
    color: var(--white) !important;
    border-color: var(--black) !important;
}

/* --- Hide Storefront's elements we don't need --- */
.storefront-product-pagination,
.storefront-breadcrumb,
.woocommerce-breadcrumb {
    display: none !important;
}

.storefront-recent-products,
.woocommerce .storefront-recent-products {
    display: none !important;
}

/* Hide default Storefront page header on shop (we have collection-banner) */
.woocommerce-products-header {
    display: none !important;
}

/* --- Single Product Storefront Reset --- */
.single-product #primary {
    width: 100% !important;
    float: none !important;
}

.single-product .site-content {
    background: var(--white);
}

.single-product .col-full {
    max-width: var(--container-max);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.single-product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--red) !important;
    color: white !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    z-index: 10;
    border-radius: 0 !important;
    min-height: auto;
    min-width: auto;
    line-height: 1;
}

.single-product .related.products {
    grid-column: 1 / -1;
    width: 100% !important;
}

.single-product .product-accordion {
    grid-column: 1 / -1;
}

/* Single product add to cart button */
.single-product .single_add_to_cart_button,
.woocommerce .single-product .single_add_to_cart_button {
    background: var(--black) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 18px 32px !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    width: 100% !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: 56px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce .single-product .single_add_to_cart_button:hover {
    background: var(--accent) !important;
    color: var(--white) !important;
}

/* Single product — hide Storefront breadcrumbs (we have our own) */
.single-product .storefront-breadcrumb,
.single-product .woocommerce-breadcrumb {
    display: none !important;
}

/* Single product quantity input */
.single-product .quantity .qty {
    border-radius: 0 !important;
    height: 100% !important;
    border: none !important;
}

.single-product .quantity {
    border: 1px solid var(--light-gray) !important;
    border-radius: 0 !important;
    height: 56px !important;
}

/* --- Storefront typography resets --- */
.woocommerce .content-area h1,
.woocommerce .content-area h2,
.woocommerce .content-area h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

/* --- Override any Storefront form styling --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid var(--light-gray) !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--black) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Responsive Grid Overrides for Storefront --- */
/* Never allow 3 columns — go straight from 4 to 2 */
@media (max-width: 992px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .site-main ul.products,
    #main ul.products,
    .products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .related.products ul.products,
    .woocommerce div.product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .site-main ul.products,
    #main ul.products,
    .products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 12px !important;
    }

    .storefront-sorting,
    .woocommerce .storefront-sorting {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        margin-bottom: var(--space-sm) !important;
    }

    .afrobae-breadcrumbs {
        padding: var(--space-xs) var(--space-sm);
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 8px !important;
    }
}

/* --- Storefront's WooCommerce message colors --- */
.woocommerce-message,
.woocommerce-info {
    background-color: var(--off-white) !important;
    border-top: none !important;
    color: var(--dark) !important;
}

.woocommerce-message a,
.woocommerce-info a {
    color: var(--accent) !important;
}

.woocommerce-message::before {
    color: #4caf50 !important;
}

.woocommerce-info::before {
    color: var(--accent) !important;
}

.woocommerce-error li {
    color: var(--red) !important;
}

/* --- Cart page Storefront resets --- */
.woocommerce-cart .site-content > .col-full,
.woocommerce-checkout .site-content > .col-full {
    max-width: var(--container-max);
    padding: 0 var(--space-md);
    margin: 0 auto;
}

.woocommerce table.shop_table {
    border-radius: 0 !important;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-color: var(--light-gray) !important;
}

/* --- Storefront footer widget area reset --- */
.footer-widgets {
    display: none !important;
}

/* --- Override Storefront's handheld footer bar on mobile --- */
.storefront-handheld-footer-bar {
    display: none !important;
}

/* --- Storefront header reset --- */
.storefront-primary-navigation,
.woocommerce-active .site-header .site-header-cart,
.site-header-cart {
    display: none !important;
}

/* --- Hide Storefront's entire navigation (we use our own) --- */
#site-navigation.main-navigation,
.handheld-navigation,
.storefront-handheld-footer-bar .menu-toggle,
button.menu-toggle,
#site-navigation-menu-toggle,
.main-navigation .handheld-navigation,
.main-navigation .primary-navigation {
    display: none !important;
}

/* Override any Storefront header/branding */
.custom-logo-link img {
    max-height: 60px;
}

/* ============================================
   WOOCOMMERCE PAGES — LUXURY MODERNIZATION
   Cart, Checkout, My Account, Orders, Login, Thank You
   ============================================ */

/* ----- CART PAGE ----- */

.woocommerce-cart .page-title,
.woocommerce-checkout .page-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 400;
    text-align: center;
    margin-bottom: var(--space-lg);
    letter-spacing: 0.02em;
}

/* Cart table */
.woocommerce-cart table.shop_table {
    width: 100%;
    border: none !important;
    border-collapse: collapse;
}

.woocommerce-cart table.shop_table thead {
    border-bottom: 2px solid var(--black) !important;
}

.woocommerce-cart table.shop_table th {
    font-family: var(--font-body);
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    padding: 12px 0 !important;
    background: none !important;
    color: var(--gray) !important;
}

.woocommerce-cart table.shop_table td {
    padding: 24px 12px 24px 0 !important;
    border-bottom: 1px solid var(--light-gray) !important;
    border-top: none !important;
    vertical-align: middle !important;
    font-size: 14px;
}

/* Cart product thumbnail */
.woocommerce-cart table.shop_table td.product-thumbnail {
    width: 100px;
    padding-right: 20px !important;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
    width: 100px !important;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
}

/* Cart product name */
.woocommerce-cart table.shop_table td.product-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
}

.woocommerce-cart table.shop_table td.product-name a {
    color: var(--dark) !important;
    text-decoration: none;
}

.woocommerce-cart table.shop_table td.product-name a:hover {
    color: var(--accent) !important;
}

.woocommerce-cart table.shop_table td.product-name .variation {
    font-size: 12px;
    color: var(--gray);
    margin-top: 4px;
}

.woocommerce-cart table.shop_table td.product-name dl.variation dt,
.woocommerce-cart table.shop_table td.product-name dl.variation dd {
    font-size: 12px;
    margin: 0;
    padding: 0;
}

/* Cart remove button */
.woocommerce-cart table.shop_table td.product-remove {
    width: 40px;
    text-align: center !important;
    padding: 24px 8px !important;
}

.woocommerce-cart table.shop_table .product-remove a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    background: var(--off-white) !important;
    color: var(--gray) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.woocommerce-cart table.shop_table .product-remove a.remove:hover {
    background: var(--red) !important;
    color: var(--white) !important;
}

/* Cart quantity stepper */
.woocommerce-cart .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--light-gray);
}

.woocommerce-cart .quantity .qty {
    width: 48px !important;
    text-align: center;
    border: none !important;
    padding: 8px 4px !important;
    font-size: 14px !important;
    font-family: var(--font-body) !important;
    -moz-appearance: textfield;
    background: transparent !important;
    box-shadow: none !important;
}

.woocommerce-cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce-cart .qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--dark);
    transition: color var(--transition-fast);
    padding: 0;
    line-height: 1;
}

.woocommerce-cart .qty-btn:hover {
    color: var(--accent);
}

/* Cart price columns */
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-subtotal {
    font-weight: 500;
    font-size: 14px;
}

/* Cart totals */
.woocommerce-cart .cart_totals {
    background: var(--white) !important;
    border: 1px solid var(--light-gray) !important;
    padding: 32px !important;
    max-width: 420px;
    margin-left: auto !important;
}

.woocommerce-cart .cart_totals h2 {
    font-family: var(--font-heading) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--light-gray);
    letter-spacing: 0.02em;
}

.woocommerce-cart .cart_totals table {
    border: none !important;
}

.woocommerce-cart .cart_totals table th {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray) !important;
    padding: 12px 0 !important;
    background: none !important;
    border: none !important;
}

.woocommerce-cart .cart_totals table td {
    font-size: 14px !important;
    font-weight: 500;
    padding: 12px 0 !important;
    text-align: right !important;
    border: none !important;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding-top: 16px !important;
    border-top: 2px solid var(--black) !important;
    color: var(--black) !important;
}

/* Proceed to checkout button */
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0 !important;
    margin-top: 24px;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:visited {
    display: block !important;
    width: 100% !important;
    background: var(--accent) !important;
    color: var(--white) !important;
    text-align: center;
    padding: 16px 24px !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    border-radius: 0 !important;
    transition: background var(--transition-fast) !important;
    margin-bottom: 0 !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--accent-dark) !important;
    color: var(--white) !important;
}

/* Hide legacy coupon form inside cart table actions — moved to cart_totals panel */
.woocommerce-cart .woocommerce-cart-form td.actions .coupon {
    display: none !important;
}

/* New coupon form inside cart totals panel */
.ab-cart-coupon {
    margin: 0 0 20px 0;
}

.ab-cart-coupon__row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.ab-cart-coupon__input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--light-gray) !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    font-family: var(--font-body) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background: var(--white) !important;
}

.ab-cart-coupon__input:focus {
    border-color: var(--accent) !important;
    outline: none !important;
}

.ab-cart-coupon__btn {
    white-space: nowrap;
    padding: 0 18px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background: var(--black) !important;
    color: var(--white) !important;
    border: 1px solid var(--black) !important;
    border-radius: 4px !important;
    transition: background var(--transition-fast) !important;
    cursor: pointer;
}

.ab-cart-coupon__btn:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Discount row in cart totals — emphasize the saved amount */
.woocommerce-cart .cart_totals .cart-discount th,
.woocommerce-cart .cart_totals .cart-discount td {
    color: var(--accent) !important;
}
.woocommerce-cart .cart_totals .cart-discount td .woocommerce-remove-coupon {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    color: var(--gray) !important;
    text-decoration: underline;
}

/* Update cart button — hidden because quantity/remove changes apply via AJAX.
   Also hide the entire .actions table row: the coupon form is already rendered
   in the cart-totals sidebar (see woocommerce_before_cart_totals hook), and the
   update-cart button inside is the only other thing the default actions TD holds. */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart table.cart td.actions,
.woocommerce-cart table.shop_table td.actions {
    display: none !important;
}

/* Hide WooCommerce Cart Block's built-in empty state — our custom
   cart-empty.php provides the empty-cart UI, so the block's version
   would duplicate on pages that have both the block and the shortcode. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block,
.woocommerce-cart .wc-block-cart__empty-cart__title {
    display: none !important;
}

/* Cart actions row */
.woocommerce-cart .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px !important;
    border-top: none !important;
}

/* Empty cart */
.woocommerce-cart .cart-empty {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    color: var(--gray);
}

.woocommerce-cart .return-to-shop {
    text-align: center;
    margin-top: var(--space-md);
}

.woocommerce-cart .return-to-shop a.button {
    background: var(--black) !important;
    color: var(--white) !important;
    padding: 16px 40px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
}

.woocommerce-cart .return-to-shop a.button:hover {
    background: var(--accent) !important;
    color: var(--white) !important;
}

/* Cross-sells */
.woocommerce-cart .cross-sells {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--light-gray);
}

.woocommerce-cart .cross-sells h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* ----- CHECKOUT PAGE ----- */

/* Main two-column layout: addresses left, order/payment right */
/* ============================================
   CHECKOUT PAGE — MODERN DESIGN
   ============================================ */

/* Outer wrapper */
.woocommerce-checkout .woocommerce {
    padding-top: var(--space-md) !important;
}

/* Coupon toggle & notices */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: var(--space-md);
}

/* Checkout form — two-column grid */
.woocommerce-checkout form.checkout {
    display: grid !important;
    grid-template-columns: 1fr 460px;
    gap: 40px 60px;
    align-items: start;
}

/* Reset Storefront floats — grid handles layout */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    float: none !important;
    clear: none !important;
    width: 100% !important;
}

/* Left column: customer details */
.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.woocommerce-checkout .col2-set {
    display: block;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

.woocommerce-checkout .col2-set .col-2 {
    margin-top: var(--space-lg);
}

/* Right column: order review heading */
.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-heading) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    margin: 0 0 -20px 0 !important;
}

/* Right column: order review (sticky) */
.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 20px;
    background: var(--off-white);
    padding: 28px;
    border-radius: 8px;
}

/* Page title */
.woocommerce-checkout .page-title {
    grid-column: 1 / -1;
}

/* Section headings */
.woocommerce-checkout h3,
.woocommerce-checkout h3#ship-to-different-address {
    font-family: var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-md) !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--light-gray);
}

/* Additional notes — stays in left column */
.woocommerce-checkout .woocommerce-additional-fields {
    grid-column: 1;
}

/* Order review table */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    border: none !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
    background: none !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: var(--gray) !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--light-gray) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 12px 0 !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--light-gray) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td.product-name {
    font-size: 13px !important;
    color: var(--dark);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-quantity {
    color: var(--gray);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    font-size: 16px !important;
    font-weight: 600 !important;
    border-top: 2px solid var(--black) !important;
    padding-top: 16px !important;
    color: var(--black) !important;
}

/* Payment section */
.woocommerce-checkout #payment {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: var(--space-md);
}

.woocommerce-checkout #payment ul.payment_methods {
    padding: 0 !important;
    margin: 0 0 var(--space-md) !important;
    border: none !important;
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 14px 16px !important;
    margin-bottom: 8px;
    background: var(--white) !important;
    border: 1px solid var(--light-gray) !important;
    border-radius: 6px !important;
    list-style: none;
    transition: border-color var(--transition-fast);
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
    border-color: var(--dark) !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    font-size: 14px !important;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.woocommerce-checkout #payment ul.payment_methods li img {
    max-height: 24px;
    margin-left: auto;
}

.woocommerce-checkout #payment .payment_box {
    background: var(--white) !important;
    color: var(--gray) !important;
    padding: 14px !important;
    margin-top: 10px;
    font-size: 13px;
    border-radius: 6px !important;
    border: 1px solid var(--light-gray);
}

.woocommerce-checkout #payment .payment_box::before {
    display: none !important;
}

/* KPay payment widget — prevent overflow in right column */
.woocommerce-checkout #payment .kpay-payment-options,
.woocommerce-checkout #payment .payment_box iframe,
.woocommerce-checkout #payment .payment_box > div {
    max-width: 100% !important;
    overflow: hidden;
}

/* Place order button */
.woocommerce-checkout #payment .place-order {
    padding: 0 !important;
    margin-top: var(--space-md);
}

.woocommerce-checkout #place_order {
    width: 100%;
    background: var(--black) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 16px 32px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    border-radius: 6px !important;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.woocommerce-checkout #place_order:hover {
    background: var(--accent) !important;
}

/* Checkout terms */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: var(--space-sm);
    font-size: 13px;
    color: var(--gray);
}

/* Form field refinements */
.woocommerce-checkout .form-row {
    margin-bottom: 16px !important;
}

.woocommerce-checkout .form-row label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--gray) !important;
    margin-bottom: 6px !important;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    border: 1px solid var(--light-gray) !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    transition: border-color var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--dark) !important;
    outline: none;
}

/* =====================================================================
   MY ACCOUNT PAGE — redesigned dashboard + sidebar
   ===================================================================== */

.woocommerce-account .woocommerce {
    padding: var(--space-xl) var(--space-md) !important;
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
}

.woocommerce-account.logged-in .woocommerce {
    display: grid !important;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    align-items: start;
}

/* ---------- Sidebar nav ---------- */
.woocommerce-MyAccount-navigation {
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    padding: 8px !important;
    background: var(--white);
    position: sticky;
    top: 20px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
    border: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 11px 14px !important;
    font-family: var(--font-body);
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none !important;
    color: var(--dark) !important;
    text-decoration: none;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce-MyAccount-navigation ul li a .ab-nav-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--gray);
    flex-shrink: 0;
}

.woocommerce-MyAccount-navigation ul li a .ab-nav-icon svg {
    width: 18px;
    height: 18px;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--off-white);
    color: var(--black) !important;
}

.woocommerce-MyAccount-navigation ul li a:hover .ab-nav-icon {
    color: var(--accent);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.is-active a:hover {
    background: var(--off-white) !important;
    color: var(--black) !important;
    border-left-color: var(--accent);
    font-weight: 600;
}

.woocommerce-MyAccount-navigation ul li.is-active a .ab-nav-icon {
    color: var(--accent);
}

/* ---------- Content area ---------- */
.woocommerce-MyAccount-content {
    min-height: 300px;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-md);
}

.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child {
    font-size: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--light-gray);
}

.woocommerce-MyAccount-content a {
    color: var(--accent);
    text-decoration: none;
}

.woocommerce-MyAccount-content a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

/* ---------- Dashboard: welcome banner ---------- */
.ab-account-dashboard {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ab-account-welcome {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: linear-gradient(135deg, var(--off-white) 0%, #fff 100%);
    border: 1px solid var(--light-gray);
    border-radius: 10px;
}

.ab-account-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.ab-account-welcome-text {
    flex: 1;
    min-width: 0;
}

.ab-account-welcome-text h2 {
    font-family: var(--font-heading);
    font-size: 24px !important;
    font-weight: 400;
    margin: 0 0 4px 0 !important;
    letter-spacing: 0.01em;
    padding: 0 !important;
    border: none !important;
}

.ab-account-welcome-text p {
    margin: 0;
    font-size: 13px;
    color: var(--gray);
    line-height: 1.5;
}

.ab-account-logout {
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark) !important;
    padding: 8px 14px;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.ab-account-logout:hover {
    background: var(--dark);
    color: var(--white) !important;
    border-color: var(--dark);
}

/* ---------- Dashboard: stat cards ---------- */
.ab-account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.ab-stat-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 10px;
    color: var(--dark) !important;
    text-decoration: none !important;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ab-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    text-decoration: none !important;
}

.ab-stat-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--off-white);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-stat-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ab-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
}

.ab-stat-value {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--black);
    line-height: 1.2;
}

.ab-stat-meta {
    font-size: 12px;
    color: var(--gray);
    line-height: 1.4;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ab-stat-arrow {
    position: absolute;
    top: 18px;
    right: 18px;
    color: var(--gray);
    font-size: 16px;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.ab-stat-card:hover .ab-stat-arrow {
    color: var(--accent);
    transform: translateX(4px);
}

/* ---------- Dashboard: recent order block ---------- */
.ab-recent-order-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ab-recent-order-header h3 {
    font-family: var(--font-heading);
    font-size: 20px !important;
    font-weight: 400;
    margin: 0 !important;
}

.ab-link-arrow {
    font-size: 12px !important;
    letter-spacing: 0.04em;
    color: var(--accent) !important;
    text-decoration: none !important;
}

.ab-link-arrow:hover {
    color: var(--accent-dark) !important;
    text-decoration: underline !important;
}

.ab-recent-order-card {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 10px;
}

.ab-recent-order-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ab-recent-order-number {
    font-weight: 600;
    font-size: 14px;
    color: var(--black);
}

.ab-recent-order-date {
    font-size: 12px;
    color: var(--gray);
}

.ab-recent-order-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--off-white);
    color: var(--dark);
    white-space: nowrap;
}

.ab-recent-order-status.status-completed   { background: #e7f6ea; color: #256c33; }
.ab-recent-order-status.status-processing  { background: #fff4e0; color: #8a5a00; }
.ab-recent-order-status.status-on-hold     { background: #eef1f5; color: #3b4759; }
.ab-recent-order-status.status-cancelled,
.ab-recent-order-status.status-failed      { background: #fdecec; color: #992424; }
.ab-recent-order-status.status-refunded    { background: #f3ecfb; color: #5a2fa5; }

.ab-recent-order-total {
    font-weight: 600;
    font-size: 15px;
    color: var(--black);
    white-space: nowrap;
}

.ab-recent-order-total .woocommerce-Price-amount {
    font-family: inherit;
}

.ab-recent-order-view {
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 9px 16px;
    background: var(--black);
    color: var(--white) !important;
    border-radius: 4px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.ab-recent-order-view:hover {
    background: var(--accent) !important;
    color: var(--white) !important;
    text-decoration: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .woocommerce-account.logged-in .woocommerce {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .woocommerce-MyAccount-navigation {
        position: static;
    }
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .woocommerce-MyAccount-navigation ul li a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 600px) {
    .ab-account-welcome {
        flex-wrap: wrap;
    }
    .ab-account-logout {
        margin-left: auto;
    }
    .ab-recent-order-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ab-recent-order-status,
    .ab-recent-order-total,
    .ab-recent-order-view {
        justify-self: start;
    }
}

/* ----- ORDERS TABLE ----- */

.woocommerce-orders-table,
.woocommerce-MyAccount-content table.woocommerce-table {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse;
}

.woocommerce-orders-table thead th,
.woocommerce-MyAccount-content table.woocommerce-table thead th {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    background: none !important;
    color: var(--gray) !important;
    padding: 12px 12px 12px 0 !important;
    border-bottom: 2px solid var(--black) !important;
}

.woocommerce-orders-table tbody td,
.woocommerce-MyAccount-content table.woocommerce-table tbody td {
    padding: 16px 12px 16px 0 !important;
    border-bottom: 1px solid var(--light-gray) !important;
    font-size: 14px;
    vertical-align: middle;
}

/* Order status badges */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
    font-size: 0;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-status::after {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}

/* Status badge colors — use attribute selectors on the status text */
td[data-title="Status"]:has(> *) {
    font-size: 0 !important;
}

/* Fallback: direct styling for common status marks via text content */
.woocommerce-orders-table mark.order-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 5px 14px;
    border-radius: 20px;
    display: inline-block;
    background: var(--off-white) !important;
    color: var(--dark);
}

.woocommerce-orders-table mark.order-status.status-processing {
    background: rgba(9, 114, 140, 0.12) !important;
    color: var(--teal);
}

.woocommerce-orders-table mark.order-status.status-completed {
    background: rgba(76, 175, 80, 0.12) !important;
    color: #2e7d32;
}

.woocommerce-orders-table mark.order-status.status-on-hold {
    background: rgba(255, 152, 0, 0.12) !important;
    color: #e65100;
}

.woocommerce-orders-table mark.order-status.status-cancelled,
.woocommerce-orders-table mark.order-status.status-failed,
.woocommerce-orders-table mark.order-status.status-refunded {
    background: rgba(194, 0, 0, 0.1) !important;
    color: var(--red);
}

.woocommerce-orders-table mark.order-status.status-pending {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #b8860b;
}

/* View order button */
.woocommerce-orders-table .woocommerce-button.view,
.woocommerce-orders-table a.button.view {
    background: transparent !important;
    color: var(--dark) !important;
    border: 1px solid var(--light-gray) !important;
    padding: 8px 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    border-radius: 0 !important;
    transition: all var(--transition-fast) !important;
}

.woocommerce-orders-table .woocommerce-button.view:hover,
.woocommerce-orders-table a.button.view:hover {
    background: var(--black) !important;
    color: var(--white) !important;
    border-color: var(--black) !important;
}

/* Order details page */
.woocommerce-order-details {
    margin-bottom: var(--space-lg);
}

.woocommerce-order-details h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-md);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--light-gray);
}

.woocommerce-order-details table.shop_table {
    border: none !important;
}

/* Customer details on order page */
.woocommerce-customer-details {
    margin-top: var(--space-lg);
}

.woocommerce-customer-details h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    margin-bottom: var(--space-md);
}

.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.woocommerce-columns--addresses .woocommerce-column {
    width: 100% !important;
    float: none !important;
}

.woocommerce-columns--addresses .woocommerce-column h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--light-gray);
}

.woocommerce-columns--addresses address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray);
}

/* ----- LOGIN / REGISTER ----- */

/* Not logged in — center the forms */
.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: var(--space-xl) var(--space-md) !important;
}

/* Login + Register side by side */
.woocommerce-account:not(.logged-in) #customer_login {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.woocommerce-account:not(.logged-in) #customer_login > div {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Login/Register form cards */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login,
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register {
    border: 1px solid var(--light-gray);
    padding: 40px 32px;
}

.woocommerce-account:not(.logged-in) #customer_login h2 {
    font-family: var(--font-heading) !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-md) !important;
    text-align: center;
}

/* Form fields in login/register */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    margin-bottom: 16px;
}

.woocommerce-form-login .form-row label,
.woocommerce-form-register .form-row label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px !important;
    display: block;
}

.woocommerce-form-login .form-row input.input-text,
.woocommerce-form-register .form-row input.input-text {
    width: 100% !important;
    border: 1px solid var(--light-gray) !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-family: var(--font-body) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.woocommerce-form-login .form-row input.input-text:focus,
.woocommerce-form-register .form-row input.input-text:focus {
    border-color: var(--black) !important;
    outline: none !important;
}

/* Login/Register submit button */
.woocommerce-form-login button.woocommerce-button,
.woocommerce-form-register button.woocommerce-button {
    width: 100% !important;
    background: var(--black) !important;
    color: var(--white) !important;
    padding: 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background var(--transition-fast) !important;
    margin-top: 8px;
}

.woocommerce-form-login button.woocommerce-button:hover,
.woocommerce-form-register button.woocommerce-button:hover {
    background: var(--accent) !important;
    color: var(--white) !important;
}

/* Remember me */
.woocommerce-form-login .woocommerce-form-login__rememberme {
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 16px;
}

/* Lost password link */
.woocommerce-form-login .woocommerce-LostPassword {
    text-align: center;
    margin-top: 16px;
}

.woocommerce-form-login .woocommerce-LostPassword a {
    font-size: 13px;
    color: var(--gray);
    text-decoration: none;
}

.woocommerce-form-login .woocommerce-LostPassword a:hover {
    color: var(--accent);
}

/* Lost password page */
.woocommerce-account .woocommerce-ResetPassword {
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid var(--light-gray);
    padding: 40px 32px;
}

/* Edit account form */
.woocommerce-EditAccountForm fieldset {
    border: 1px solid var(--light-gray);
    padding: 24px;
    margin: var(--space-md) 0;
}

.woocommerce-EditAccountForm fieldset legend {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 8px;
}

/* Save account button */
.woocommerce-EditAccountForm button[name="save_account_details"] {
    width: 100% !important;
    background: var(--black) !important;
    color: var(--white) !important;
    padding: 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    border: none !important;
    border-radius: 0 !important;
    transition: background var(--transition-fast) !important;
}

.woocommerce-EditAccountForm button[name="save_account_details"]:hover {
    background: var(--accent) !important;
}

/* Address cards */
.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    width: 100% !important;
    float: none !important;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    margin: 0;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent) !important;
    text-decoration: none;
}

.woocommerce-account .woocommerce-Addresses address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray);
}

/* ----- THANK YOU / ORDER RECEIVED ----- */

.woocommerce-order-received .woocommerce {
    max-width: var(--container-narrow) !important;
    margin: 0 auto !important;
    text-align: center;
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 400;
    color: var(--dark);
    margin-bottom: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--light-gray);
}

/* Order overview */
.woocommerce-order-received .woocommerce-order-overview {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: 0;
    margin: 0 0 var(--space-lg);
}

.woocommerce-order-received .woocommerce-order-overview li {
    text-align: center;
    padding: 0;
    border: none;
}

.woocommerce-order-received .woocommerce-order-overview li:not(:last-child) {
    padding-right: var(--space-lg);
    border-right: 1px solid var(--light-gray);
}

.woocommerce-order-received .woocommerce-order-overview li strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-top: 4px;
    color: var(--black);
}

/* Thank you page — left-align table sections */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
    text-align: left;
}

/* ----- RESPONSIVE: WOOCOMMERCE PAGES ----- */

@media (max-width: 992px) {
    /* Checkout → single column stacked */
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr !important;
    }

    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .woocommerce-additional-fields {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .woocommerce-checkout #order_review {
        position: static;
    }
}

@media (max-width: 768px) {
    /* Cart page heading */
    .woocommerce-cart .page-title,
    .woocommerce-checkout .page-title {
        font-size: 26px;
        margin-bottom: var(--space-md);
    }

    /* Cart table responsive */
    .woocommerce-cart table.shop_table thead {
        display: none;
    }

    .woocommerce-cart table.shop_table,
    .woocommerce-cart table.shop_table tbody,
    .woocommerce-cart table.shop_table tr,
    .woocommerce-cart table.shop_table td {
        display: block !important;
        width: 100% !important;
    }

    .woocommerce-cart table.shop_table tr {
        padding: 16px 0 !important;
        border-bottom: 1px solid var(--light-gray) !important;
        position: relative;
    }

    .woocommerce-cart table.shop_table td {
        border-bottom: none !important;
        padding: 4px 0 !important;
    }

    .woocommerce-cart table.shop_table td.product-thumbnail {
        width: 80px !important;
        margin-bottom: 8px;
    }

    .woocommerce-cart table.shop_table td.product-thumbnail img {
        width: 80px !important;
    }

    .woocommerce-cart table.shop_table td.product-remove {
        position: absolute;
        top: 16px;
        right: 0;
        width: auto !important;
        padding: 0 !important;
    }

    .woocommerce-cart table.shop_table td::before {
        content: attr(data-title);
        display: block;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--gray);
        margin-bottom: 4px;
    }

    .woocommerce-cart table.shop_table td.product-remove::before,
    .woocommerce-cart table.shop_table td.product-thumbnail::before {
        display: none;
    }

    /* Cart actions */
    .woocommerce-cart .actions {
        flex-direction: column;
    }

    .woocommerce-cart .coupon {
        width: 100%;
    }

    .woocommerce-cart button[name="update_cart"] {
        width: 100%;
    }

    /* Cart totals full width */
    .woocommerce-cart .cart_totals {
        max-width: 100% !important;
        margin: var(--space-md) 0 !important;
    }

    /* My Account → stacked */
    .woocommerce-account.logged-in .woocommerce {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }

    .woocommerce-MyAccount-navigation {
        border: none;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        overflow-x: auto;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
        flex-shrink: 0;
    }

    .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 16px;
        white-space: nowrap;
        font-size: 11px !important;
        border: 1px solid var(--light-gray);
    }

    .woocommerce-MyAccount-navigation ul li.is-active a {
        border-color: var(--black);
    }

    /* Login/Register → stacked */
    .woocommerce-account:not(.logged-in) #customer_login {
        grid-template-columns: 1fr !important;
    }

    /* Address columns */
    .woocommerce-columns--addresses,
    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr !important;
    }

    /* Order overview stack */
    .woocommerce-order-received .woocommerce-order-overview {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .woocommerce-order-received .woocommerce-order-overview li:not(:last-child) {
        padding-right: 0;
        padding-bottom: var(--space-sm);
        border-right: none;
        border-bottom: 1px solid var(--light-gray);
    }
}

@media (max-width: 480px) {
    .woocommerce-cart .woocommerce,
    .woocommerce-checkout .woocommerce,
    .woocommerce-account .woocommerce {
        padding: var(--space-lg) var(--space-sm) !important;
    }

    .woocommerce-cart .cart_totals {
        padding: 24px !important;
    }

    .woocommerce-checkout #order_review {
        padding: 20px;
    }

    .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login,
    .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register {
        padding: 28px 20px;
    }
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-float svg {
    display: block;
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
    }

    .whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
}

/* =========================================================
   HOMEPAGE v6 — Editorial minimal
   ========================================================= */

/* ---- Hero (single editorial slide) ---- */
.hero-editorial {
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 560px;
    max-height: 820px;
    overflow: hidden;
    background: var(--black);
}
.hero-editorial__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    animation: heroZoom 14s ease-out forwards;
}
@keyframes heroZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1.0); }
}
.hero-editorial__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.10) 0%,
        rgba(0,0,0,0.45) 100%
    );
}
.hero-editorial__content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    animation: heroFade 1s var(--ease-out) 0.2s both;
}
@keyframes heroFade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-editorial__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: var(--space-md);
}
.hero-editorial__title {
    font-family: var(--font-heading);
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--white);
    margin: 0 0 var(--space-md);
    max-width: 12ch;
}
.hero-editorial__desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    max-width: 480px;
    margin: 0 0 var(--space-lg);
}
.hero-editorial__btn {
    margin-top: var(--space-xs);
}

/* ---- Category split (Lingerie | Activewear) ---- */
.category-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--warm-bg);
    padding: 2px 0 0;
}
.category-tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--light-gray);
    text-decoration: none;
    color: var(--white);
}
.category-tile__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
}
.category-tile:hover .category-tile__bg { transform: scale(1.06); }
.category-tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
    transition: background 0.5s var(--ease-out);
}
.category-tile:hover .category-tile__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 100%);
}
.category-tile__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-lg);
}
.category-tile__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: var(--space-sm);
}
.category-tile__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--white);
    margin: 0 0 var(--space-md);
}
.category-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white);
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding-bottom: 4px;
    transition: gap 0.3s var(--ease-out), border-color 0.3s;
}
.category-tile:hover .category-tile__cta {
    gap: 14px;
    border-color: var(--white);
}

/* ---- Collection block (per-category grid on homepage) ---- */
.collection {
    padding: var(--space-2xl) 0 var(--space-xl);
}
/* Enforce grid counts for homepage collection product lists:
   4 columns on desktop, 2 on tablet & mobile (never collapses to 1). */
.collection ul.products,
.collection .products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px 20px !important;
}
@media (max-width: 992px) {
    .collection ul.products,
    .collection .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 14px !important;
    }
}
@media (max-width: 480px) {
    .collection ul.products,
    .collection .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 10px !important;
    }
}
/* Mobile: show only first N products per collection.
   Exact N is output inline via wp_head based on the Customizer setting
   `afrobae_homepage_items_mobile` (default 2). See afrobae_homepage_inline_css(). */
/* Tighten spacing when two collection blocks sit next to each other */
.collection + .collection {
    padding-top: 0;
}
.collection__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: var(--space-md);
}
.collection__eyebrow {
    grid-column: 1;
    grid-row: 1;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 4px;
}
.collection__title {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--black);
    margin: 0;
}
.collection__link {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dark);
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    transition: gap 0.3s var(--ease-out), color 0.3s;
}
.collection__link:hover {
    color: var(--accent);
    gap: 12px;
}

/* ---- Editorial brand story ---- */
.editorial-story {
    padding: var(--space-2xl) 0;
    background: var(--cream);
}
.editorial-story__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}
.editorial-story__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--light-gray);
}
.editorial-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out);
}
.editorial-story:hover .editorial-story__media img { transform: scale(1.04); }
.editorial-story__text {
    max-width: 460px;
}
.editorial-story__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: var(--space-md);
}
.editorial-story__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--black);
    margin: 0 0 var(--space-md);
}
.editorial-story__body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray);
    margin: 0 0 var(--space-lg);
}

/* ---- Newsletter band ---- */
.newsletter-band {
    background: var(--black);
    color: var(--white);
    padding: var(--space-2xl) var(--space-md);
}
.newsletter-band__inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.newsletter-band__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: var(--space-md);
}
.newsletter-band__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--white);
    margin: 0 0 var(--space-md);
}
.newsletter-band__desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    margin: 0 0 var(--space-lg);
}
.newsletter-band__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto;
}
.newsletter-band__status {
    flex: 1 0 100%;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--white);
    opacity: 0.85;
    text-align: center;
    min-height: 1em;
}
.newsletter-band__status:empty { display: none; }
.newsletter-band__input {
    flex: 1;
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color 0.3s;
}
.newsletter-band__input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-band__input:focus {
    outline: none;
    border-color: var(--white);
}
.newsletter-band__btn {
    background: var(--white);
   /* color: var(--black); */
    border-color: var(--white);
    padding: 14px 26px;
}
.newsletter-band__btn:hover {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

/* ---- Trust strip (slim) ---- */
.trust-strip {
    background: var(--off-white);
    border-top: 1px solid var(--light-gray);
    padding: var(--space-md) var(--space-md);
}
.trust-strip__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}
.trust-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 0.02em;
}
.trust-strip__item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--accent);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .editorial-story__inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .editorial-story__text { max-width: none; text-align: center; margin: 0 auto; }
}
@media (max-width: 768px) {
    .hero-editorial { height: 78vh; min-height: 460px; }
    .category-split { grid-template-columns: 1fr; }
    .category-tile { aspect-ratio: 5 / 6; }
    .collection { padding: 28px 0 32px !important; }
    .collection + .collection { padding-top: 0 !important; }
    .collection__header {
        grid-template-columns: 1fr;
        text-align: left;
        margin-bottom: 20px !important;
        padding-bottom: 14px !important;
    }
    .collection__link {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin-top: var(--space-xs);
    }
    .newsletter-band { padding: var(--space-xl) var(--space-md); }
    .newsletter-band__form {
        flex-direction: column;
    }
    .trust-strip__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm) var(--space-md);
    }
    .trust-strip__item {
        justify-content: flex-start;
        font-size: 11px;
    }
}

/* =========================================================
   PDP v6.1 — Editorial additions
   ========================================================= */

/* ---- Category eyebrow above product title ---- */
.single-product .product-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 12px;
    text-decoration: none;
    transition: color 0.2s;
}
.single-product .product-eyebrow:hover { color: var(--accent); }

/* ---- Variable product "From" label ---- */
.single-product .price .from-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray);
    margin-right: 8px;
    vertical-align: 2px;
}

/* ---- Variation pills (replace <select>) ---- */
.single-product .variations select.variation-pills-replaced {
    display: none !important;
}
.single-product .variation-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.single-product .variation-pill {
    background: var(--white);
    border: 1px solid var(--light-gray);
    color: var(--dark);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 10px 18px;
    min-width: 48px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    border-radius: 0;
}
.single-product .variation-pill:hover {
    border-color: var(--dark);
}
.single-product .variation-pill:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}
.single-product .variation-pill.is-active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
/* Disabled / out-of-stock pill (reserved for future WC-variation wiring) */
.single-product .variation-pill[aria-disabled="true"] {
    color: var(--gray-light);
    border-color: var(--light-gray);
    cursor: not-allowed;
    position: relative;
}
.single-product .variation-pill[aria-disabled="true"]::after {
    content: '';
    position: absolute;
    inset: 50% 6px auto 6px;
    height: 1px;
    background: var(--light-gray);
}

/* ---- Related products section (matches homepage .collection) ---- */
.related-products-section {
    padding: var(--space-2xl) 0 var(--space-xl);
    border-top: 1px solid var(--light-gray);
    margin-top: var(--space-2xl);
    background: var(--warm-bg);
}
.related-products-section.related > h2 { display: none; } /* Belt-and-suspenders: kill any default h2 */
.related-products-section .products {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- Summary polish ---- */
.single-product .summary > * + * { margin-top: 0; }
.single-product .summary .product_title { margin-top: 4px; }
.single-product .summary .stock {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray);
    margin: 8px 0 0;
}
.single-product .summary .stock.in-stock { color: #2d7a4a; }
.single-product .summary .stock.out-of-stock { color: var(--red); }

/* Mobile: tighten PDP spacing */
@media (max-width: 767px) {
    .single-product .product {
        padding: var(--space-md) var(--space-md) var(--space-xl);
    }
    .single-product .product_title {
        font-size: 26px;
    }
    .single-product form.cart > .single_add_to_cart_button {
        height: 52px;
    }
}

/* =====================================================================
   PHASE 3 — CART (two-column + free-shipping progress bar)
   ===================================================================== */
.woocommerce-cart .woocommerce-cart-form__contents {
    margin: 0;
}

.cart-progress {
    max-width: 560px;
    margin: 0 auto var(--space-md);
    padding: 14px 18px;
    background: var(--off-white);
    border-radius: 2px;
}
.cart-progress__msg {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--dark);
    text-align: center;
    letter-spacing: 0.02em;
}
.cart-progress__msg strong {
    font-weight: 600;
    color: var(--black);
}
.cart-progress__track {
    height: 4px;
    background: var(--light-gray);
    border-radius: 999px;
    overflow: hidden;
}
.cart-progress__fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.5s var(--ease-out);
}
.cart-progress.is-qualified .cart-progress__fill {
    background: #2d7a4a;
}

@media (min-width: 900px) {
    .woocommerce-cart .woocommerce {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
        gap: var(--space-lg);
        align-items: start;
    }
    .woocommerce-cart .cart-progress,
    .woocommerce-cart .woocommerce-notices-wrapper {
        grid-column: 1 / -1;
    }
    .woocommerce-cart form.woocommerce-cart-form { grid-column: 1; }
    .woocommerce-cart .cart-collaterals {
        grid-column: 2;
        position: sticky;
        top: 120px;
    }
}

.woocommerce-cart .cart-collaterals {
    width: 100% !important;
    float: none !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
    background: var(--off-white);
    border: none;
    border-radius: 2px;
    padding: var(--space-lg);
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 var(--space-md);
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
    background: transparent;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
    border: none;
    padding: 10px 0;
    font-size: 14px;
}
.woocommerce-cart .cart-collaterals .cart_totals .order-total td,
.woocommerce-cart .cart-collaterals .cart_totals .order-total th {
    border-top: 1px solid var(--light-gray);
    padding-top: 16px;
    font-size: 15px;
    font-weight: 600;
}
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
    padding: 0;
    margin-top: var(--space-md);
}
.woocommerce-cart .cart-collaterals .checkout-button {
    width: 100%;
    padding: 18px !important;
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
    background: var(--black) !important;
    color: var(--white) !important;
}
.woocommerce-cart .cart-collaterals .checkout-button:hover {
    background: var(--accent) !important;
}

/* Cart line items */
.woocommerce-cart table.cart {
    border: none;
    margin: 0;
}
.woocommerce-cart table.cart th {
    padding: 14px 0;
}
.woocommerce-cart table.cart td.product-thumbnail img {
    width: 90px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
.woocommerce-cart table.cart td.product-name a {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--black);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--accent); }
.woocommerce-cart table.cart td.product-name .variation {
    font-size: 12px;
    color: var(--gray);
    margin-top: 4px;
}
.woocommerce-cart table.cart td.product-name .variation dt,
.woocommerce-cart table.cart td.product-name .variation dd {
    display: inline;
    margin: 0 2px 0 0;
}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
    font-weight: 500;
}
.woocommerce-cart table.cart td.product-remove a.remove {
    color: var(--gray-light) !important;
    font-size: 20px;
    font-weight: 300 !important;
    width: 24px;
    height: 24px;
}
.woocommerce-cart table.cart td.product-remove a.remove:hover {
    color: var(--red) !important;
    background: transparent !important;
}

/* Cart quantity stepper — match PDP */
.woocommerce-cart table.cart .quantity {
    display: inline-flex;
    border: 1px solid var(--light-gray);
    border-radius: 0;
}
.woocommerce-cart table.cart .quantity .qty {
    width: 52px;
    height: 40px;
    border: none !important;
    text-align: center;
    font-size: 14px;
    background: transparent;
}

/* Cart actions row — update button + coupon */
.woocommerce-cart table.cart td.actions {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--light-gray);
    border-bottom: none;
}
.woocommerce-cart table.cart td.actions .coupon {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.woocommerce-cart table.cart td.actions .coupon label { display: none; }
.woocommerce-cart table.cart td.actions .coupon .input-text {
    height: 42px;
    min-width: 200px;
}
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
    display: none !important;
}

/* =====================================================================
   EMPTY CART — style WC's default output into a centered, friendly layout
   Works with both [woocommerce_cart] shortcode AND the Cart block.
   ===================================================================== */

/* When cart is empty, force the .woocommerce wrapper out of grid mode */
.woocommerce-cart .woocommerce:has(> .cart-empty),
.woocommerce-cart .woocommerce:has(> .wc-empty-cart-message),
.woocommerce-cart .woocommerce:has(> .wp-block-woocommerce-empty-cart-block),
.woocommerce-cart .woocommerce:has(> .ab-cart-empty),
.woocommerce-cart .woocommerce:has(.ab-cart-empty) {
    display: block !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 10px 24px 0 !important;
    text-align: center !important;
    grid-template-columns: none !important;
}

/* Tighten the cart page's outer site-content padding when empty */
.woocommerce-cart:has(.ab-cart-empty) .site-content,
.woocommerce-cart:has(.cart-empty) .site-content {
    padding-bottom: 0 !important;
}

/* The default WC "Your cart is currently empty" notice → big friendly headline */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .wc-empty-cart-message .cart-empty {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    margin: 0 auto 14px !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(28px, 3.2vw, 40px) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: var(--black) !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

/* Kill the orange "!" icon on the notice */
.woocommerce-cart .cart-empty.woocommerce-info::before,
.woocommerce-cart .wc-empty-cart-message .cart-empty::before {
    display: none !important;
    content: none !important;
}

/* Insert a subtle bag icon above the WC default .cart-empty notice.
   NOTE: our custom cart-empty.php already renders its own .ab-cart-empty__icon,
   so we must NOT target .wc-empty-cart-message here or the icon doubles up. */
.woocommerce-cart .woocommerce:has(> .cart-empty)::before {
    content: "";
    display: block;
    width: 96px;
    height: 96px;
    margin: 40px auto 20px;
    border-radius: 50%;
    background-color: var(--off-white);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23c16452' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 22h32l-3 30a4 4 0 01-4 3.6H23a4 4 0 01-4-3.6L16 22z'/><path d='M24 22v-5a8 8 0 0116 0v5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44px 44px;
}

/* Return to shop button → proper CTA */
.woocommerce-cart p.return-to-shop {
    margin: 22px 0 0 !important;
    text-align: center !important;
}

.woocommerce-cart p.return-to-shop a.button,
.woocommerce-cart p.return-to-shop a.wc-backward {
    display: inline-block !important;
    padding: 14px 32px !important;
    background: var(--black) !important;
    color: var(--white) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 4px !important;
    transition: background var(--transition-fast) !important;
}

.woocommerce-cart p.return-to-shop a.button:hover,
.woocommerce-cart p.return-to-shop a.wc-backward:hover {
    background: var(--accent) !important;
    color: var(--white) !important;
}

/* Inject a subtitle under the main message */
.woocommerce-cart .cart-empty.woocommerce-info::after {
    content: "Nothing here yet — let's find something you'll love.";
    display: block;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gray);
    letter-spacing: 0;
}

/* Block-based empty cart (Cart block) container */
.wp-block-woocommerce-empty-cart-block,
.wc-block-cart__empty-cart__wrapper {
    text-align: center !important;
    padding: 20px 16px 40px !important;
    max-width: 640px;
    margin: 0 auto;
}

/* Hide any stray cart collaterals when cart is empty (just in case) */
.woocommerce-cart .woocommerce:has(.cart-empty) .cart-collaterals,
.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) .cart-collaterals,
.woocommerce-cart .woocommerce:has(.ab-cart-empty) .cart-collaterals,
.woocommerce-cart .woocommerce:has(.cart-empty) .ab-cart-coupon,
.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) .ab-cart-coupon,
.woocommerce-cart .woocommerce:has(.ab-cart-empty) .ab-cart-coupon,
.woocommerce-cart .woocommerce:has(.cart-empty) .cart_totals,
.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) .cart_totals,
.woocommerce-cart .woocommerce:has(.ab-cart-empty) .cart_totals {
    display: none !important;
}

/* =====================================================================
   EMPTY CART — .ab-cart-empty template classes (from theme override)
   ===================================================================== */
.ab-cart-empty {
    display: block;
    max-width: 640px;
    margin: 0 auto;
    padding: 10px 0 20px;
    text-align: center;
}

.ab-cart-empty__icon {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px;
    max-height: 96px;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--off-white) !important;
    color: var(--accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.ab-cart-empty__icon svg {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    display: block !important;
    flex: 0 0 auto !important;
}

.ab-cart-empty__title {
    font-family: var(--font-heading) !important;
    font-size: clamp(28px, 3.2vw, 40px) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    color: var(--black) !important;
    margin: 0 0 10px !important;
    line-height: 1.15 !important;
    padding: 0 !important;
    border: none !important;
}

.ab-cart-empty__subtitle {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--gray) !important;
    margin: 0 0 30px !important;
}

.ab-cart-empty__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}

.ab-cart-empty__cta {
    display: inline-block !important;
    padding: 14px 32px !important;
    background: var(--black) !important;
    color: var(--white) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: background var(--transition-fast) !important;
    border: none !important;
}

.ab-cart-empty__cta:hover {
    background: var(--accent) !important;
    color: var(--white) !important;
    text-decoration: none !important;
}

.ab-cart-empty__links {
    font-size: 13px;
    color: var(--gray);
}

.ab-cart-empty__links a {
    color: var(--dark) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.ab-cart-empty__links a:hover {
    color: var(--accent) !important;
}

.ab-cart-empty__sep {
    margin: 0 10px;
    color: var(--light-gray);
}

/* Suggestions grid below the empty state — full-width breakout */
.ab-cart-empty-suggestions {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 20px 0 24px !important;
    text-align: left;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .ab-cart-empty-suggestions {
        padding: 16px 0 20px !important;
    }
    .ab-cart-empty-suggestions__header {
        padding-bottom: 10px !important;
        margin-bottom: 16px !important;
    }
}

.ab-cart-empty-suggestions__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.ab-cart-empty-suggestions__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--light-gray);
}

.ab-cart-empty-suggestions__header h3 {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 400;
    margin: 0;
    color: var(--black);
}

.ab-cart-empty-suggestions__header a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent) !important;
    text-decoration: none !important;
}

.ab-cart-empty-suggestions ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .ab-cart-empty-suggestions ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =====================================================================
   EMPTY CART — additional polish: hide page title + any empty buttons
   ===================================================================== */

/* Hide the "Cart" page title on the cart page */
.woocommerce-cart .page-title,
.woocommerce-cart .entry-header,
.woocommerce-cart h1.entry-title,
.woocommerce-cart .wp-block-post-title {
    display: none !important;
}

/* Hide any empty buttons/links that render as a black rectangle
   (Cart block leftovers, empty Return-to-shop, etc.) */
.woocommerce-cart .wp-block-button:has(> .wp-block-button__link:empty),
.woocommerce-cart .wp-block-button:has(> a:empty),
.woocommerce-cart a.wp-block-button__link:empty,
.woocommerce-cart a.button:empty,
.woocommerce-cart button:empty:not(.ab-cart-empty__cta):not(.scroll-to-top),
.woocommerce-cart .wc-block-components-button:empty {
    display: none !important;
}

/* Nuke ANY previous sibling of our empty-cart section inside the
   .woocommerce wrapper — this catches the stray "black rectangle"
   that some Cart-block variants leave behind. */
.woocommerce-cart .woocommerce > *:has(~ .ab-cart-empty) {
    display: none !important;
}

/* =====================================================================
   PHASE 4 — CHECKOUT (step indicator + sticky order summary + form polish)
   ===================================================================== */
.checkout-steps {
    max-width: var(--container-max);
    margin: 0 auto var(--space-md);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    list-style: none;
}
.checkout-steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    position: relative;
}
.checkout-steps__item:not(:last-child)::after {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--light-gray);
    display: inline-block;
    margin-left: 16px;
}
.checkout-steps__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.checkout-steps__item.is-complete,
.checkout-steps__item.is-current { color: var(--black); }
.checkout-steps__item.is-current .checkout-steps__num {
    background: var(--black);
    color: var(--white);
}

.woocommerce-checkout .woocommerce {
    max-width: var(--container-max);
}
.woocommerce-checkout form.checkout {
    display: block;
}
@media (min-width: 900px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
        column-gap: var(--space-lg);
        align-items: start;
    }
    .woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
    .woocommerce-checkout form.checkout .woocommerce-additional-fields { grid-column: 1; }
    .woocommerce-checkout form.checkout h3#order_review_heading,
    .woocommerce-checkout form.checkout #order_review {
        grid-column: 2;
    }
    .woocommerce-checkout form.checkout #order_review {
        position: sticky;
        top: 120px;
        background: var(--off-white);
        padding: var(--space-lg);
        border-radius: 2px;
    }
    .woocommerce-checkout form.checkout h3#order_review_heading {
        font-family: var(--font-heading);
        font-size: 20px;
        font-weight: 400;
        margin: 0 0 var(--space-sm);
    }
}

/* Customer details columns */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    float: none;
}
.woocommerce-checkout #customer_details h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--light-gray);
}
.woocommerce-checkout .form-row {
    margin-bottom: 14px;
}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    height: 48px;
    border-radius: 2px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 48px;
    border: 1px solid var(--light-gray);
    border-radius: 2px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px;
    padding-left: 16px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
}

/* Order review table */
.woocommerce-checkout #order_review table.shop_table {
    background: transparent;
}
.woocommerce-checkout #order_review td,
.woocommerce-checkout #order_review th {
    border: none;
    padding: 10px 0;
    font-size: 14px;
}
.woocommerce-checkout #order_review .cart_item td.product-name {
    color: var(--dark);
}
.woocommerce-checkout #order_review .cart_item td.product-name .product-quantity {
    color: var(--gray-light);
    font-weight: 400;
    margin-left: 4px;
}
.woocommerce-checkout #order_review tfoot .order-total {
    border-top: 1px solid var(--light-gray);
}
.woocommerce-checkout #order_review tfoot .order-total td,
.woocommerce-checkout #order_review tfoot .order-total th {
    padding-top: 14px;
    font-size: 15px;
    font-weight: 600;
}

/* Payment box */
.woocommerce-checkout #payment {
    background: transparent;
    margin-top: var(--space-md);
}
.woocommerce-checkout #payment ul.payment_methods {
    padding: 0;
    border: none;
    margin: 0 0 var(--space-md);
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
    border: 1px solid var(--light-gray);
    border-radius: 2px;
    padding: 12px 14px;
    margin: 0 0 10px;
    background: var(--white);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    font-weight: 500;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.woocommerce-checkout #payment ul.payment_methods li img {
    max-height: 24px;
    margin-left: 6px;
    vertical-align: middle;
}
.woocommerce-checkout #payment div.payment_box {
    background: transparent !important;
    padding: 10px 0 0 !important;
    margin: 10px 0 0 !important;
    border-top: 1px dashed var(--light-gray);
    color: var(--gray);
    font-size: 13px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order {
    margin-top: var(--space-md);
    background: var(--black) !important;
    color: var(--white) !important;
}
.woocommerce-checkout #place_order:hover {
    background: var(--accent) !important;
}

/* Trust strip under place order */
.woocommerce-checkout #order_review::after {
    content: '🔒 Secure checkout  •  7-day returns  •  Free Kigali delivery over 50,000 RWF';
    display: block;
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--gray-light);
    text-align: center;
}

/* Thank you page polish */
.woocommerce-order .woocommerce-notice--success {
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.4vw, 32px);
    text-align: center;
    margin: var(--space-lg) 0 var(--space-md);
}

/* =====================================================================
   PHASE 5 — MY ACCOUNT (sidebar + order cards + address cards)
   ===================================================================== */
.woocommerce-account .woocommerce {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
}
@media (min-width: 900px) {
    .woocommerce-account .woocommerce {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: var(--space-lg);
        align-items: start;
    }
    .woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        position: sticky;
        top: 120px;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--light-gray);
    border-radius: 2px;
    overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    border-bottom: 1px solid var(--light-gray);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 18px;
    color: var(--dark);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.04em;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--off-white); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    background: var(--black);
    color: var(--white);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--gray-light);
    font-size: 12px;
}

/* Login/register forms */
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
    background: var(--off-white);
    padding: var(--space-lg);
    border-radius: 2px;
}
.woocommerce-account:not(.logged-in) .u-columns .col-1,
.woocommerce-account:not(.logged-in) .u-columns .col-2 {
    width: 48%;
}
.woocommerce-account form.login h2,
.woocommerce-account form.register h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 var(--space-sm);
}

/* Orders table → card-like rows */
.woocommerce-account .woocommerce-orders-table {
    border: 1px solid var(--light-gray);
    border-collapse: separate;
    border-spacing: 0;
}
.woocommerce-account .woocommerce-orders-table th {
    background: var(--off-white);
    padding: 14px 16px;
    font-size: 11px;
}
.woocommerce-account .woocommerce-orders-table td {
    padding: 18px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--light-gray);
}
.woocommerce-account .woocommerce-orders-table tr:last-child td { border-bottom: none; }
.woocommerce-account .woocommerce-orders-table__cell-order-status mark {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--off-white) !important;
    color: var(--dark) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    padding: 8px 14px !important;
    font-size: 10px !important;
}

/* Addresses as cards */
.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
@media (min-width: 700px) {
    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr 1fr;
    }
}
.woocommerce-account .woocommerce-Address {
    background: var(--off-white);
    padding: var(--space-md);
    border-radius: 2px;
    width: 100% !important;
    float: none !important;
}
.woocommerce-account .woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    margin: 0;
}
.woocommerce-account .woocommerce-Address address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
    color: var(--dark);
}

/* Dashboard welcome */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    font-size: 15px;
    color: var(--dark);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--light-gray);
    margin-bottom: var(--space-md);
}

/* =====================================================================
   PHASE 6 — SHOP / CATEGORY (bigger banner + sort dropdown)
   ===================================================================== */
.collection-banner {
    padding: var(--space-lg) var(--space-md) var(--space-md);
    text-align: center;
    border-bottom: 1px solid var(--light-gray);
    margin-bottom: var(--space-md);
}
.collection-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
.collection-banner__desc {
    font-size: 14px;
    color: var(--gray);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Hide category pills entirely (kept for future use but disabled) */
.category-pills { display: none !important; }

/* Result count + sort dropdown + pagination all live in .storefront-sorting.
   Rule: show them together when pagination exists; hide the count + sort when
   there's only a single page of results (no pagination rendered). */
.woocommerce .storefront-sorting:not(:has(.woocommerce-pagination)) .woocommerce-result-count,
.woocommerce .storefront-sorting:not(:has(.woocommerce-pagination)) .woocommerce-ordering,
.woocommerce-page .storefront-sorting:not(:has(.woocommerce-pagination)) .woocommerce-result-count,
.woocommerce-page .storefront-sorting:not(:has(.woocommerce-pagination)) .woocommerce-ordering {
    display: none !important;
}
/* When the sorting block has no visible content at all (no pagination either),
   collapse its spacing so it doesn't leave an empty gap above the product grid. */
.woocommerce .storefront-sorting:not(:has(.woocommerce-pagination)),
.woocommerce-page .storefront-sorting:not(:has(.woocommerce-pagination)) {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Result count + sort on shop */
.woocommerce-shop .woocommerce-result-count,
.tax-product_cat .woocommerce-result-count {
    float: none;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray);
}
.woocommerce-shop .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering {
    float: none;
    margin: 0;
}
.woocommerce-shop .woocommerce-ordering select,
.tax-product_cat .woocommerce-ordering select {
    border: 1px solid var(--light-gray);
    padding: 10px 36px 10px 14px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--white);
    border-radius: 2px;
}

/* Row: "12 pieces" left | sort right */
.woocommerce-shop .woocommerce-notices-wrapper + .woocommerce-result-count,
.tax-product_cat .woocommerce-notices-wrapper + .woocommerce-result-count {
    display: inline-block;
}
/* Shop toolbar — center all three element groups (sort / count / pagination) */
.woocommerce .before-shop-loop,
.woocommerce-shop .before-shop-loop,
.tax-product_cat .before-shop-loop,
.woocommerce .shop-toolbar {
    max-width: var(--container-max);
    margin: 0 auto var(--space-md);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}
.woocommerce .before-shop-loop > *,
.woocommerce-shop .before-shop-loop > *,
.tax-product_cat .before-shop-loop > * {
    margin: 0;
    float: none;
}

/* Shop/category product grid — 4 cols desktop, 2 mobile */
body.woocommerce-shop #main ul.products,
body.tax-product_cat #main ul.products,
body.tax-product_tag #main ul.products,
body.woocommerce-shop .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products,
body.tax-product_tag .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px 20px !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 var(--space-md) !important;
    max-width: var(--container-max) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
@media (max-width: 900px) {
    body.woocommerce-shop #main ul.products,
    body.tax-product_cat #main ul.products,
    body.tax-product_tag #main ul.products,
    body.woocommerce-shop .woocommerce ul.products,
    body.tax-product_cat .woocommerce ul.products,
    body.tax-product_tag .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px 14px !important;
    }
}
.woocommerce-shop ul.products li.product,
.tax-product_cat ul.products li.product,
.tax-product_tag ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* =====================================================================
   PHASE 7 — POLISH (mobile menu overlay, footer slim, misc)
   ===================================================================== */

/* Mobile menu — full-screen overlay */
@media (max-width: 900px) {
    .primary-navigation {
        position: fixed;
        inset: 0;
        background: var(--white);
        z-index: 9999;
        padding: 80px var(--space-md) var(--space-md);
        transform: translateX(-100%);
        transition: transform 0.35s var(--ease-out);
        overflow-y: auto;
    }
    .primary-navigation.is-open {
        transform: translateX(0);
    }
    .primary-navigation ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .primary-navigation ul li {
        border-bottom: 1px solid var(--light-gray);
    }
    .primary-navigation ul li a {
        display: block;
        padding: 18px 4px;
        font-family: var(--font-heading);
        font-size: 24px;
        font-weight: 400;
        letter-spacing: -0.01em;
        color: var(--black);
    }
    body.menu-open {
        overflow: hidden;
    }
}

/* Footer bottom: slim single-row since payment icons block is gone */
.site-footer .footer-brand {
    padding: 40px var(--space-md) 28px;
}
.site-footer .footer-bottom {
    border-top: 1px solid var(--light-gray);
}

/* Checkout trust line — keep it visible even if sticky column is short */
@media (max-width: 899px) {
    .woocommerce-checkout form.checkout #order_review::after {
        margin-top: 8px;
    }
}

/* =====================================================================
   CART BLOCK (wc-block-cart-*) — polish to match brand
   The cart page uses the Gutenberg Cart Block, not the classic shortcode.
   ===================================================================== */
body.woocommerce-cart {
    background: var(--white);
}
.wp-block-woocommerce-cart,
.wc-block-cart {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) var(--space-xl);
    font-family: var(--font-body);
    color: var(--dark);
    background: var(--white);
}

/* Force two-column layout on desktop — WC's native flex sometimes collapses */
@media (min-width: 900px) {
    .wc-block-cart {
        display: grid !important;
        grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr) !important;
        column-gap: var(--space-lg) !important;
        row-gap: var(--space-md) !important;
        align-items: start !important;
    }
    .wc-block-cart__main {
        grid-column: 1 !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .wc-block-cart__sidebar {
        grid-column: 2 !important;
        width: 100% !important;
        padding: 0 !important;
        position: sticky;
        top: 120px;
    }
    .wc-block-cart > .wc-block-components-notices,
    .wc-block-cart > .cart-progress {
        grid-column: 1 / -1 !important;
    }
}
@media (max-width: 899px) {
    .wc-block-cart {
        display: block;
    }
    .wc-block-cart__main,
    .wc-block-cart__sidebar { padding: 0; }
    .wc-block-cart__sidebar { margin-top: var(--space-md); }
}

/* Column headers: PRODUCT / TOTAL */
.wc-block-cart-items thead th,
.wc-block-cart__main > .wc-block-components-header,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper + .wc-block-components-panel--coupon-code + *,
.wc-block-cart__main .wc-block-cart-items__header,
.wc-block-cart-items__header {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 14px;
}

/* Cart items — each line */
.wc-block-cart-items {
    border-bottom: 1px solid var(--light-gray);
}
.wc-block-cart-items__row,
.wc-block-cart-item,
tr.wc-block-cart-items__row {
    border-bottom: 1px solid var(--light-gray);
    padding: var(--space-md) 0;
}
.wc-block-cart-items__row:last-child { border-bottom: none; }

/* Product image */
.wc-block-cart-item__image img,
.wc-block-cart-items .wc-block-cart-item__image img {
    width: 96px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

/* Product name + variation */
.wc-block-cart-item__product a,
.wc-block-components-product-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    color: var(--black) !important;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.wc-block-cart-item__product a:hover { color: var(--accent) !important; }

.wc-block-components-product-details,
.wc-block-components-product-metadata {
    font-size: 12px;
    color: var(--gray);
    margin-top: 4px;
}

/* Sale badge "Save X" — force readable contrast regardless of block variant */
.wc-block-components-sale-badge,
.wc-block-components-product-sale-badge,
.wc-block-cart-item__total .wc-block-components-sale-badge,
.wc-block-cart-item .wc-block-components-sale-badge,
span.wc-block-components-sale-badge {
    background: var(--accent) !important;
    background-color: var(--accent) !important;
    color: var(--white) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Price: regular + sale */
.wc-block-components-product-price__regular {
    color: var(--gray-light);
    font-size: 13px;
}
.wc-block-components-product-price__value {
    font-weight: 500;
    color: var(--black);
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
    border: 1px solid var(--light-gray);
    border-radius: 0;
    background: var(--white);
    padding: 0;
    min-width: 110px;
}
.wc-block-components-quantity-selector__input {
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--black);
    min-width: 44px;
}
.wc-block-components-quantity-selector__button {
    color: var(--dark);
    font-size: 16px;
    width: 36px;
    height: 36px;
}
.wc-block-components-quantity-selector__button:hover {
    color: var(--accent);
    background: transparent;
}

/* Remove (trash) link */
.wc-block-cart-item__remove-link,
.wc-block-components-product-name + .wc-block-cart-item__remove-link {
    color: var(--gray-light) !important;
    font-size: 12px;
    text-decoration: none;
}
.wc-block-cart-item__remove-link:hover { color: var(--red) !important; }

/* Sidebar totals card — background on the summary block only, NOT the wrapper */
.wc-block-cart__sidebar {
    background: transparent !important;
}
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart__sidebar > .wc-block-components-sidebar,
.wc-block-cart__sidebar > .wp-block-group,
.wc-block-cart__sidebar .wp-block-woocommerce-proceed-to-checkout-block {
    background: var(--off-white);
    border-radius: 2px;
    padding: var(--space-md) var(--space-lg);
}
.wc-block-cart__sidebar .wp-block-woocommerce-proceed-to-checkout-block {
    background: transparent;
    padding: 0;
    margin-top: var(--space-md);
}

.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper h2,
.wp-block-woocommerce-cart-order-summary-heading-block {
    font-family: var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    margin: 0 0 var(--space-md) !important;
    color: var(--black) !important;
}

.wc-block-components-totals-item {
    padding: 10px 0;
    font-size: 14px;
    color: var(--dark);
    border: none;
}
.wc-block-components-totals-item__label {
    color: var(--gray);
    font-weight: 400;
}
.wc-block-components-totals-item__value {
    color: var(--black);
    font-weight: 500;
}

/* Totals footer (estimated total) */
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item-tax {
    border-top: 1px solid var(--light-gray);
    padding-top: 16px;
    margin-top: 8px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-heading);
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--black) !important;
    letter-spacing: 0.01em;
}

/* Coupon accordion */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon .wc-block-components-panel__button {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--dark) !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.wc-block-components-panel__button svg { fill: var(--dark); }
.wc-block-components-totals-coupon__form input {
    border: 1px solid var(--light-gray);
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 2px;
}

/* Proceed to Checkout button — brand black, not terracotta */
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-cart__submit-container a.wc-block-components-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
a.wc-block-components-button.wp-block-button__link.contained,
.wc-block-components-button.wc-block-components-button--style-fill {
    background: var(--black) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 18px !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background var(--transition-fast) !important;
    width: 100%;
    display: block;
    text-align: center;
}
.wc-block-cart__submit-container .wc-block-components-button:hover,
a.wc-block-components-button.wp-block-button__link.contained:hover,
.wc-block-components-button.wc-block-components-button--style-fill:hover {
    background: var(--accent) !important;
    color: var(--white) !important;
}

/* Cart & Checkout page titles — tighten the Storefront/block-theme page-title banner */
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-account h1.entry-title,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 400 !important;
    text-align: center !important;
    padding: var(--space-md) var(--space-md) 0 !important;
    margin: 0 auto !important;
    max-width: var(--container-max) !important;
    background: transparent !important;
    line-height: 1.1 !important;
}
/* Kill Storefront's heavy .entry-header bottom padding + any beige background */
.storefront-full-width-content.woocommerce-cart .entry-header,
.storefront-full-width-content.woocommerce-checkout .entry-header,
.storefront-full-width-content.woocommerce-account .entry-header,
.storefront-full-width-content .woocommerce-products-header,
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header,
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header {
    padding: var(--space-sm) var(--space-md) 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    text-align: center !important;
}
/* Storefront sometimes tints the article/content wrapper on cart/checkout */
.woocommerce-cart .hentry,
.woocommerce-checkout .hentry,
.woocommerce-account .hentry,
.woocommerce-cart .type-page,
.woocommerce-checkout .type-page,
.woocommerce-account .type-page,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main,
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content {
    background: var(--white) !important;
    padding-top: 0 !important;
    padding-bottom: var(--space-lg) !important;
    margin: 0 !important;
}
/* Space directly between the title and whatever is below it */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
    margin: 0 0 var(--space-sm) !important;
    padding: 0 !important;
}
/* Compress .entry-content wrapper too */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-cart #primary,
.woocommerce-checkout #primary,
.woocommerce-account #primary,
.woocommerce-cart #content,
.woocommerce-checkout #content,
.woocommerce-account #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Kill block-theme's default group padding around the title/content area */
body.woocommerce-cart .wp-block-group:has(> .wp-block-post-title),
body.woocommerce-checkout .wp-block-group:has(> .wp-block-post-title),
body.woocommerce-cart .wp-block-cover,
body.woocommerce-checkout .wp-block-cover {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
}
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-cart .wp-site-blocks > .wp-block-group,
body.woocommerce-checkout .wp-site-blocks > .wp-block-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.woocommerce-cart .wp-block-post-content,
body.woocommerce-checkout .wp-block-post-content {
    padding: 0 !important;
    margin: 0 !important;
}
body.woocommerce-cart .wp-block-post-content > *:first-child,
body.woocommerce-checkout .wp-block-post-content > *:first-child {
    margin-top: 0 !important;
}
/* Kill any pre-title hero banner the block theme might inject */
body.woocommerce-cart .wp-block-template-part,
body.woocommerce-checkout .wp-block-template-part {
    margin: 0 !important;
}
/* Space directly between title and first content block (notice, progress bar, form) */
body.woocommerce-cart .wp-block-post-title + *,
body.woocommerce-checkout .wp-block-post-title + *,
body.woocommerce-cart .entry-title + *,
body.woocommerce-checkout .entry-title + * {
    margin-top: var(--space-sm) !important;
}
/* Kill theme.json block-gap between children of post-content on cart/checkout */
body.woocommerce-cart .wp-block-post-content > *,
body.woocommerce-checkout .wp-block-post-content > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
body.woocommerce-cart .wp-block-post-content,
body.woocommerce-checkout .wp-block-post-content {
    --wp--style--block-gap: 0 !important;
    row-gap: 0 !important;
}
/* Cart progress bar: no top margin so it hugs title */
.woocommerce-cart .cart-progress {
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-md) !important;
}
/* Tighten space between notices / toggles and the form */
.woocommerce-checkout form.checkout {
    margin-top: var(--space-md) !important;
}
.woocommerce-checkout .checkout-steps {
    margin: 0 auto var(--space-sm) !important;
    padding: var(--space-sm) var(--space-md) !important;
}
.woocommerce-checkout .checkout-steps + .woocommerce-form-login-toggle,
.woocommerce-checkout .checkout-steps + .woocommerce-notices-wrapper {
    margin-top: var(--space-sm) !important;
}

/* ---------------------------------------------------------------------
   Checkout login / coupon toggles — redesigned as subtle inline rows
   (not bulky red-alert boxes).
   --------------------------------------------------------------------- */
/* Outer toggle wrappers — float side-by-side */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    float: left !important;
    width: calc(50% - 6px) !important;
    margin: 0 0 var(--space-sm) 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
}
.woocommerce-checkout .woocommerce-form-login-toggle {
    margin-right: 12px !important;
}
/* Kill pseudo on outer toggle (leave only inner .woocommerce-info's icon) */
.woocommerce-checkout .woocommerce-form-login-toggle::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle::before {
    display: none !important;
    content: none !important;
}
/* Inner info card — compact, side-by-side ready */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle.woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle.woocommerce-info {
    background-color: var(--off-white) !important;
    border: 1px solid var(--light-gray) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 4px !important;
    padding: 10px 14px 10px 40px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: var(--dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.01em !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
}
/* Shrink the ! icon inside the notices */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-login-toggle.woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle.woocommerce-info::before {
    left: 12px !important;
    width: 16px !important;
    height: 16px !important;
    background-size: 9px 9px !important;
}
/* Clear the floats so the form below doesn't ride up */
.woocommerce-checkout form.checkout,
.woocommerce-checkout #customer_details {
    clear: both !important;
}
@media (max-width: 600px) {
    .woocommerce-checkout .woocommerce-form-login-toggle,
    .woocommerce-checkout .woocommerce-form-coupon-toggle {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
}
/* Kill the big alert-style circular icon on these specific toggles */
.woocommerce-checkout .woocommerce-form-login-toggle::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle::before {
    content: '' !important;
    position: static !important;
    transform: none !important;
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    border: none !important;
    border-radius: 0 !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    color: var(--gray) !important;
    box-shadow: none !important;
}
/* Link styling inside the toggles */
.woocommerce-checkout .woocommerce-form-login-toggle a,
.woocommerce-checkout .woocommerce-form-coupon-toggle a,
.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin,
.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon {
    margin-left: 6px;
    color: var(--black) !important;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.woocommerce-checkout .woocommerce-form-login-toggle a:hover,
.woocommerce-checkout .woocommerce-form-coupon-toggle a:hover {
    color: var(--accent) !important;
}

/* Absolutely force the checkout page background to white + kill beige wrappers */
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-checkout #page,
body.woocommerce-cart #page,
body.woocommerce-checkout #content,
body.woocommerce-cart #content {
    background: var(--white) !important;
    background-color: var(--white) !important;
}
body.woocommerce-checkout .entry-header > *,
body.woocommerce-cart .entry-header > *,
body.woocommerce-account .entry-header > * {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Free shipping progress bar inside block cart (JS-injected or future use) */
.wc-block-components-shipping-rates-control__no-results-notice,
.wc-block-cart .cart-progress {
    grid-column: 1 / -1;
    margin-bottom: var(--space-md);
}

/* Trim residual whitespace if the block cart still renders (hide empty blocks) */
.wp-block-woocommerce-cart-accepted-payment-methods-block:empty,
.wp-block-woocommerce-cart-express-payment-block:empty,
.wp-block-woocommerce-filled-cart-block > .wp-block-group:empty {
    display: none !important;
}
body.woocommerce-cart main,
body.woocommerce-cart .wp-block-post-content {
    min-height: 0 !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart {
    padding-bottom: var(--space-lg);
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .wc-block-cart__main { padding-right: 0; }
    .wc-block-cart__sidebar { padding-left: 0; margin-top: var(--space-md); }
    .wc-block-cart-item__image img { width: 72px; }
}

/* =====================================================================
   CHECKOUT BLOCK (wc-block-checkout-*) — same brand polish
   ===================================================================== */
.wc-block-checkout,
.wp-block-woocommerce-checkout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) var(--space-xl);
}
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading {
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--black) !important;
    letter-spacing: 0.01em;
    margin: 0 0 var(--space-sm) !important;
}
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
    border: 1px solid var(--light-gray) !important;
    height: 48px;
    border-radius: 2px !important;
    font-family: var(--font-body) !important;
}
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button {
    background: var(--black) !important;
    color: var(--white) !important;
    border-radius: 0 !important;
    padding: 18px !important;
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}
.wc-block-components-checkout-place-order-button:hover {
    background: var(--accent) !important;
}

/* Empty cart notice (block) */
.wp-block-woocommerce-empty-cart-block,
.wc-block-cart__empty-cart__wrapper {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
}

/* =====================================================================
   LEGAL / LONG-FORM PAGE LAYOUT — page-legal.php
   Shared layout for Terms, Privacy, Shipping, Returns, FAQ, etc.
   ===================================================================== */
.ab-legal-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
}

.ab-legal-header {
    margin-bottom: var(--space-xl);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-gray);
}

.ab-legal-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0 0 10px 0;
    color: var(--black);
    line-height: 1.1;
}

.ab-legal-updated {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
    background: var(--off-white);
    padding: 6px 14px;
    border-radius: 20px;
}

/* Two-column layout: TOC sidebar + content */
.ab-legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 64px;
    align-items: start;
}

/* Sticky TOC sidebar */
.ab-legal-toc {
    position: sticky;
    top: 24px;
    font-size: 14px;
}

.ab-legal-toc__label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-gray);
}

.ab-legal-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ab-legal-toc li {
    margin: 0;
}

.ab-legal-toc a {
    display: block;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dark) !important;
    text-decoration: none !important;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: all var(--transition-fast);
}

.ab-legal-toc a:hover {
    background: var(--off-white);
    color: var(--accent) !important;
    border-left-color: var(--accent);
}

.ab-legal-toc a.is-active {
    background: var(--off-white);
    color: var(--accent) !important;
    border-left-color: var(--accent);
    font-weight: 600;
}

/* Content column — typography for long-form reading */
.ab-legal-content {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--dark);
}

.ab-legal-content > *:first-child {
    margin-top: 0;
}

.ab-legal-content p {
    margin: 0 0 18px 0;
}

.ab-legal-content p em:only-child,
.ab-legal-content > p:first-of-type em {
    font-style: italic;
    color: var(--gray);
    font-size: 17px;
    line-height: 1.6;
}

.ab-legal-content h2 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--black);
    margin: 44px 0 16px 0;
    padding-top: 24px;
    border-top: 1px solid var(--light-gray);
    scroll-margin-top: 20px;
}

.ab-legal-content h2:first-of-type {
    padding-top: 0;
    border-top: none;
    margin-top: 8px;
}

.ab-legal-content h3 {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 500;
    margin: 28px 0 10px 0;
    color: var(--black);
}

.ab-legal-content ul,
.ab-legal-content ol {
    margin: 0 0 20px 0;
    padding-left: 22px;
}

.ab-legal-content li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.ab-legal-content li::marker {
    color: var(--accent);
}

.ab-legal-content strong {
    color: var(--black);
    font-weight: 600;
}

.ab-legal-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.ab-legal-content a:hover {
    color: var(--accent-dark);
}

.ab-legal-content blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--accent);
    background: var(--off-white);
    font-style: italic;
    color: var(--dark);
}

/* Responsive — TOC collapses to a horizontal pill bar */
@media (max-width: 900px) {
    .ab-legal-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ab-legal-toc {
        position: static;
        border: 1px solid var(--light-gray);
        border-radius: 8px;
        padding: 16px;
        background: var(--off-white);
    }
    .ab-legal-toc__label {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    .ab-legal-toc ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
    .ab-legal-toc a {
        padding: 6px 10px;
        border: 1px solid var(--light-gray);
        border-radius: 20px;
        background: var(--white);
        font-size: 12px;
    }
    .ab-legal-toc a:hover,
    .ab-legal-toc a.is-active {
        border-color: var(--accent);
        background: var(--white);
    }
    .ab-legal-content h2 {
        font-size: 22px;
        margin-top: 32px;
    }
    .ab-legal-title {
        font-size: clamp(28px, 7vw, 36px);
    }
}