/* =============================================================
   TRNK Athletics — theme.css
   Author: The Free Website Guys (thefreewebsiteguys.com)
   ============================================================= */

/* ---------------------------------------------------------------
   1. CSS VARIABLES (overridden by Customizer via inline style)
   --------------------------------------------------------------- */
:root {
    --color-background:          #0a0a0a;
    --color-foreground:          #f2f2f2;
    --color-card:                #111111;
    --color-primary:             #ffffff;
    --color-primary-foreground:  #0a0a0a;
    --color-secondary:           #1a1a1a;
    --color-muted-foreground:    #8a8a8a;
    --color-accent:              #d4282b;
    --color-accent-foreground:   #ffffff;
    --color-border:              #262626;

    /* Typography */
    --font-display:  'Inter', sans-serif;
    --font-body:     'Inter', sans-serif;

    /* Buttons */
    --btn-radius:           9999px;
    --btn-height:           48px;
    --btn-padding:          0 2rem;
    --btn-font-size:        0.9375rem;
    --btn-font-weight:      700;
    --btn-letter-spacing:   normal;
    --btn-text-transform:   none;
    --btn-icon-padding:     0.5rem;

    /* Cards */
    --card-radius:          0.5rem;
    --radius:               0.5rem;

    /* Layout */
    --container-max:        80rem;
    --header-height:        80px;
    --section-padding:      2rem;

    /* Shadows */
    --shadow-soft:          0 2px 12px -2px rgb(0 0 0 / 0.3);
    --shadow-md:            0 4px 6px -1px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-elevated:      0 8px 30px -6px rgb(0 0 0 / 0.5);

    /* Transitions */
    --transition-smooth:    cubic-bezier(0.4, 0, 0.2, 1);

    /* Logo */
    --logo-height:          60px;
}

/* ---------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    overflow-x: hidden;
}

body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    /* Inter — same stack as Lovable (tailwind: font-sans / Inter) */
    font-family: var(--font-body), 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
}

a {
    color: inherit;
    text-decoration: none;
}

img, video {
    max-width: 100%;
    display: block;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: 0.875rem;
}

ul, ol {
    list-style: none;
}

/* ---------------------------------------------------------------
   3. UTILITY CLASSES
   --------------------------------------------------------------- */
.container-wide {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 1024px) {
    .container-wide {
        padding-left: max(2rem, env(safe-area-inset-left, 0px));
        padding-right: max(2rem, env(safe-area-inset-right, 0px));
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes slideUp {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes accordionDown {
    from { height: 0; opacity: 0; }
    to   { height: var(--accordion-content-height, auto); opacity: 1; }
}
@keyframes accordionUp {
    from { height: var(--accordion-content-height, auto); opacity: 1; }
    to   { height: 0; opacity: 0; }
}

.animate-fade-in   { animation: fadeIn 0.5s var(--transition-smooth) forwards; }
.animate-slide-up  { animation: slideUp 0.4s var(--transition-smooth) forwards; }
.animate-fade-in-up{ animation: fadeInUp 0.7s var(--transition-smooth) forwards; }
.animate-scale-in  { animation: scaleIn 0.3s var(--transition-smooth) forwards; }

/* Scroll-triggered animations */
.fade-up-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s var(--transition-smooth), transform 0.7s var(--transition-smooth);
}
.fade-up-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Transition delays for staggered children */
.fade-up-item:nth-child(1) { transition-delay: 0s; }
.fade-up-item:nth-child(2) { transition-delay: 0.1s; }
.fade-up-item:nth-child(3) { transition-delay: 0.2s; }
.fade-up-item:nth-child(4) { transition-delay: 0.3s; }

/* ---------------------------------------------------------------
   4. BUTTONS (design system)
   --------------------------------------------------------------- */
.btn,
.theme-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    min-height: var(--btn-height);
    padding: var(--btn-padding);
    font-family: var(--font-body);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover,
.theme-btn-primary:hover { opacity: 0.85; }

.btn-outline,
.theme-btn-outline {
    background-color: transparent;
    color: var(--color-foreground);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--btn-radius);
    min-height: var(--btn-height);
    padding: var(--btn-padding);
    font-family: var(--font-body);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.btn-outline:hover,
.theme-btn-outline:hover { background-color: rgba(255,255,255,0.1); }

.btn-sm {
    min-height: 36px;
    padding: 0 1rem;
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------
   5. HEADER
   --------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Logged-in: admin bar is fixed; offset theme header so it does not sit under the bar */
body.admin-bar .site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

/* Main content offset when admin bar is present (header moved down; pad clears both) */
body.admin-bar.theme-no-hero .site-main,
body.admin-bar.woocommerce-checkout .site-main,
body.admin-bar .single-product .site-main {
    padding-top: calc(var(--header-height) + 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar.theme-no-hero .site-main,
    body.admin-bar.woocommerce-checkout .site-main,
    body.admin-bar .single-product .site-main {
        padding-top: calc(var(--header-height) + 46px);
    }
}

/* Split layout (home hero – not scrolled) */
.header-split {
    position: absolute;
    inset-inline: 0;
    top: 0;
    transition: opacity 0.5s ease, pointer-events 0.5s ease;
}
.site-header.is-solid .header-split,
.site-header.is-inner .header-split {
    opacity: 0;
    pointer-events: none;
}

.header-split-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 1rem;
}
@media (min-width: 768px) { .header-split-inner { padding-top: 1.5rem; } }

.header-split__logo img {
    height: 3rem;
    width: auto;
    object-fit: contain;
    transition: height 0.3s ease;
    border-radius: 0.25rem;
}
@media (min-width: 768px) { .header-split__logo img { height: 4rem; } }

/* Pill nav */
.header-pill-nav {
    display: none;
}
@media (min-width: 1024px) {
    .header-pill-nav {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        background: rgba(10,10,10,0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 9999px;
        padding: 0.375rem 0.5rem;
    }
}

.header-pill-nav__link,
.header-pill-nav button {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(242,242,242,0.8);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
.header-pill-nav__link:hover,
.header-pill-nav button:hover {
    color: var(--color-foreground);
    background-color: rgba(255,255,255,0.05);
}

.header-pill-nav__divider {
    width: 1px;
    height: 1.5rem;
    background: rgba(255,255,255,0.2);
    margin: 0 0.25rem;
}

/* Mobile split actions */
.header-split__mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 1024px) {
    .header-split__mobile-actions { display: none; }
}

/* ---- Collapsed bar ---- */
.header-bar {
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}
.site-header.is-solid .header-bar,
.site-header.is-inner .header-bar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Móvil + home sin scroll: la barra está oculta pero el menú vive ahí — al abrir, igual que Lovable (showSplit = false). */
@media (max-width: 1023px) {
    .site-header.trnk-mobile-menu-open .header-split {
        opacity: 0;
        pointer-events: none;
    }
    .site-header.trnk-mobile-menu-open .header-bar {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.header-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    position: relative;
}
@media (min-width: 1024px) { .header-bar-inner { height: 4rem; } }

/* Collapsed bar menu toggle: visible solo < lg (equiv. Tailwind lg:hidden) */
.header-bar__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .header-bar__menu-toggle {
        display: none !important;
    }
}

.header-bar__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 1024px) {
    .header-bar__logo {
        position: static;
        left: auto;
        transform: none;
    }
}

.header-bar__logo img {
    height: 2rem;
    width: auto;
    object-fit: contain;
    border-radius: 0.25rem;
    transition: height 0.3s ease;
}
@media (min-width: 1024px) { .header-bar__logo img { height: 2.5rem; } }

.header-bar__nav {
    display: none;
}
@media (min-width: 1024px) {
    .header-bar__nav {
        display: flex;
        align-items: center;
        gap: 2rem;
    }
}

.header-bar__nav a,
.header-bar__nav button {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
    transition: color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
.header-bar__nav a:hover,
.header-bar__nav button:hover { color: var(--color-foreground); }

/* Mobile menu */
.header-mobile-menu {
    display: none;
    padding: 1rem 0 1.25rem;
    border-top: 1px solid var(--color-border);
}
.header-mobile-menu.is-open {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 1024px) { .header-mobile-menu { display: none !important; } }

.header-mobile-menu button,
.header-mobile-menu a {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0;
    min-height: 44px;
    line-height: 1.3;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--color-foreground);
    transition: color 0.2s ease;
    box-sizing: border-box;
}
.header-mobile-menu button:hover,
.header-mobile-menu a:hover { color: var(--color-muted-foreground); }

/* Cart button */
.header-cart-btn {
    position: relative;
    padding: 0.5rem;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
}
.header-cart-btn:hover { background-color: rgba(255,255,255,0.05); }

.header-split .header-cart-btn { color: rgba(242,242,242,0.8); }

/* Cart/badge count */
.theme-cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    background: var(--color-accent);
    color: var(--color-accent-foreground);
    border-radius: 9999px;
}
.theme-cart-count:empty { display: none; }

/* Site logo */
.site-logo-img {
    height: var(--logo-height) !important;
    width: auto !important;
    display: block;
}
.site-logo-text {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    line-height: var(--logo-height);
    display: block;
}

/* Announcement popup */
.announcement-popup {
    position: fixed;
    z-index: 200;
    animation: fadeIn 0.5s var(--transition-smooth) forwards;
    /* Móvil: ancho fluido entre márgenes + hueco sobre home indicator */
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1.25rem, calc(0.75rem + env(safe-area-inset-bottom, 0px)));
    width: auto;
    max-width: none;
    transform: none;
}
@media (min-width: 640px) {
    .announcement-popup {
        left: 50%;
        right: auto;
        bottom: 1.5rem;
        width: max-content;
        max-width: min(36rem, calc(100vw - 2rem));
        transform: translateX(-50%);
    }
}
.announcement-popup__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-accent);
    color: var(--color-accent-foreground);
    padding: 0.875rem 0.75rem 0.875rem 1rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-elevated);
    max-width: 100%;
}
@media (min-width: 640px) {
    .announcement-popup__inner {
        align-items: center;
        padding: 0.75rem 0.75rem 0.75rem 1.5rem;
        border-radius: 9999px;
    }
}
.announcement-popup__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    hyphens: auto;
    overflow-wrap: anywhere;
}
@media (min-width: 640px) {
    .announcement-popup__text {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        line-height: 1.3;
        white-space: nowrap;
    }
}
.announcement-popup__close {
    padding: 0.25rem;
    margin-top: 0.05rem;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    .announcement-popup__close {
        margin-top: 0;
    }
}
.announcement-popup__close:hover { background-color: rgba(255,255,255,0.1); }

.announcement-popup__link {
    color: inherit;
    font: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.announcement-popup__link:hover {
    opacity: 0.92;
}

/* ---------------------------------------------------------------
   6. FOOTER
   --------------------------------------------------------------- */
.site-footer {
    background: var(--color-card);
    border-top: 1px solid var(--color-border);
}

/* Un poco más de aire lateral que el contenedor base en móvil (evita sensación “pegada” al borde). */
.site-footer .container-wide.site-footer__inner {
    padding-top: 3rem;
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    padding-left: max(1.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.75rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 1024px) {
    .site-footer .container-wide.site-footer__inner {
        padding-left: max(2rem, env(safe-area-inset-left, 0px));
        padding-right: max(2rem, env(safe-area-inset-right, 0px));
    }
}

.site-footer__top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media (max-width: 767px) {
    .site-footer__top {
        align-items: center;
        text-align: center;
    }
}
@media (min-width: 768px) {
    .site-footer__top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 767px) {
    .site-footer__brand {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    .site-footer__brand > a {
        display: inline-flex;
        justify-content: center;
    }
}

.site-footer__tagline {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .site-footer__tagline {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

.site-footer__links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
@media (max-width: 767px) {
    .site-footer__links {
        justify-content: center;
        gap: 1.75rem 2rem;
        padding-top: 1.75rem;
    }
}
@media (min-width: 768px) {
    .site-footer__links {
        padding-top: 0;
        border-top: none;
    }
}

.site-footer__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    transition: color 0.2s ease;
}
.site-footer__link:hover { color: var(--color-foreground); }

.site-footer__bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.site-footer__copyright,
.site-footer__credit {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
    margin-top: 0.5rem;
}

.site-footer__credit a {
    text-decoration: underline;
    transition: color 0.2s ease;
}
.site-footer__credit a:hover { color: var(--color-foreground); }

/* ---------------------------------------------------------------
   7. HERO SECTION
   --------------------------------------------------------------- */
.hero-section {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
@media (min-width: 768px) { .hero-section { min-height: 100vh; } }

.hero-bg {
    position: absolute;
    inset: 0;
}
.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-background) 0%, rgba(10,10,10,0.6) 40%, transparent 100%);
}

/* Lovable: relative z-10 px-6 md:px-10 lg:px-16 pb-16 md:pb-20 max-w-2xl — alineado a la izquierda (sin mx-auto). */
.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding-top: 0;
    animation: fadeInUp 0.8s 0.3s var(--transition-smooth) both;
}
/* Móvil: sin cambiar el layout acordado (safe-area + 1.25rem, centrado con auto). */
@media (max-width: 767px) {
    .hero-content {
        max-width: min(42rem, 100%);
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 4rem;
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
    }
}
/* md+ — parity Index.tsx hero inner */
@media (min-width: 768px) {
    .hero-content {
        max-width: 42rem;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 5rem;
        padding-left: max(2.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(2.5rem, env(safe-area-inset-right, 0px));
    }
}
@media (min-width: 1024px) {
    .hero-content {
        padding-left: max(4rem, env(safe-area-inset-left, 0px));
        padding-right: max(4rem, env(safe-area-inset-right, 0px));
    }
}

.hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 4.5rem; } }

.hero-subtitle {
    color: var(--color-muted-foreground);
    font-size: 1rem;
    margin-bottom: 2rem;
    max-width: 28rem;
}
@media (min-width: 768px) { .hero-subtitle { font-size: 1.125rem; } }

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ---------------------------------------------------------------
   8. CATEGORY CHIPS SECTION
   --------------------------------------------------------------- */
.category-chips-section {
    padding: 2.5rem 0;
    background: var(--color-secondary);
}
@media (min-width: 768px) { .category-chips-section { padding: 3.5rem 0; } }

.category-chips-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    margin-bottom: 1.5rem;
    text-align: center;
}

.category-chips-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (min-width: 768px) { .category-chips-row { gap: 1rem; } }

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 1.25rem 0.375rem 0.375rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    font-family: inherit;
    color: inherit;
}
a.category-chip {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.category-chip:hover {
    border-color: var(--color-foreground);
    background-color: rgba(255,255,255,0.05);
}

.category-chip__thumb {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
}
.category-chip__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-chip__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted-foreground);
    transition: color 0.3s ease;
}
.category-chip:hover .category-chip__label { color: var(--color-foreground); }

/* ---------------------------------------------------------------
   9. FEATURE BANNER
   --------------------------------------------------------------- */
.feature-banner {
    position: relative;
    height: 50vh;
    overflow: hidden;
}
@media (min-width: 768px) { .feature-banner { height: 60vh; } }

.feature-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.feature-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.feature-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Lovable: bg-gradient-to-r from-background/80 via-background/40 to-transparent */
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--color-background) 80%, transparent) 0%,
        color-mix(in srgb, var(--color-background) 40%, transparent) 50%,
        transparent 100%
    );
    pointer-events: none;
}

.feature-banner__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}
.feature-banner__content .feature-banner__copy {
    pointer-events: auto;
}
.feature-banner__copy {
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
    max-width: 32rem;
}
@media (min-width: 768px) {
    .feature-banner__copy {
        padding-left: max(2.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(2.5rem, env(safe-area-inset-right, 0px));
    }
}
@media (min-width: 1024px) {
    .feature-banner__copy {
        padding-left: max(4rem, env(safe-area-inset-left, 0px));
        padding-right: max(4rem, env(safe-area-inset-right, 0px));
    }
}

.feature-banner__title {
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
@media (min-width: 768px) { .feature-banner__title { font-size: 3rem; } }

.feature-banner__subtitle {
    color: var(--color-muted-foreground);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .feature-banner__subtitle { font-size: 1rem; } }

/* ---------------------------------------------------------------
   10. EDITORIAL CARDS
   --------------------------------------------------------------- */
.editorial-cards-section {
    padding: 4rem 0;
}
@media (min-width: 768px) { .editorial-cards-section { padding: 6rem 0; } }

.editorial-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .editorial-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.editorial-card {
    position: relative;
    height: 380px;
    overflow: hidden;
    cursor: pointer;
    display: block;
}
@media (min-width: 768px) { .editorial-card { height: 460px; } }

.editorial-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    display: block;
}
.editorial-card:hover img { transform: scale(1.05); }

.editorial-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.8) 0%, transparent 60%);
}

.editorial-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
}
@media (min-width: 768px) { .editorial-card__content { padding: 1.5rem; } }

.editorial-card__title {
    font-size: 1.0625rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--color-foreground);
}
@media (min-width: 768px) { .editorial-card__title { font-size: 1.25rem; } }

.editorial-card__desc {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
}

/* ---------------------------------------------------------------
   11. MEMBERSHIP BAR
   --------------------------------------------------------------- */
.membership-bar {
    background: var(--color-accent);
}
.membership-bar__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    transition: opacity 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
a.membership-bar__btn {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .membership-bar__btn { padding: 1.25rem 1.5rem; } }
.membership-bar__btn:hover { opacity: 0.9; }

.membership-bar__text {
    color: var(--color-accent-foreground);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
@media (min-width: 768px) { .membership-bar__text { font-size: 1rem; } }

/* ---------------------------------------------------------------
   12. ABOUT SECTION
   --------------------------------------------------------------- */
.about-section {
    padding: 5rem 0;
    scroll-margin-top: 5rem;
}
@media (min-width: 768px) { .about-section { padding: 7rem 0; } }

.about-inner {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.section-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    margin-bottom: 0.75rem;
}

.about-title {
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}
@media (min-width: 768px) { .about-title { font-size: 3rem; } }

.about-text {
    color: var(--color-muted-foreground);
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 40rem;
    margin: 0 auto;
}

/* ---------------------------------------------------------------
   13. SHOP / BESTSELLERS SECTION
   --------------------------------------------------------------- */
.shop-section {
    padding: 5rem 0;
    background: var(--color-secondary);
    scroll-margin-top: 5rem;
}
@media (min-width: 768px) { .shop-section { padding: 7rem 0; } }

.shop-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.shop-section__title {
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) { .shop-section__title { font-size: 3rem; } }

/* Search */
.shop-search-wrapper {
    position: relative;
    margin-bottom: 1rem;
}
.shop-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted-foreground);
    pointer-events: none;
    width: 1rem;
    height: 1rem;
}
.shop-search-input {
    width: 100%;
    height: 3rem;
    padding-left: 2.75rem;
    padding-right: 2.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    color: var(--color-foreground);
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}
.shop-search-input::placeholder { color: var(--color-muted-foreground); }
.shop-search-input:focus { outline: none; border-color: var(--color-foreground); }
.shop-search-clear {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted-foreground);
    transition: color 0.2s ease;
}
.shop-search-clear:hover { color: var(--color-foreground); }

/* Filters */
.shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    align-items: center;
}
.shop-filter-divider {
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
    margin: 0 0.25rem;
}
.shop-filter-btn {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-muted-foreground);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    font-family: inherit;
}
.shop-filter-btn:hover {
    border-color: var(--color-foreground);
    color: var(--color-foreground);
}
.shop-filter-btn.is-active {
    background: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
}

/* Product rail */
.shop-product-rail {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-left: calc(-1 * max(1rem, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(1rem, env(safe-area-inset-right, 0px)));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.shop-product-rail::-webkit-scrollbar { display: none; }
.shop-product-rail__item {
    flex-shrink: 0;
    width: 260px;
    scroll-snap-align: start;
}
@media (min-width: 768px) { .shop-product-rail__item { width: 280px; } }
@media (min-width: 1024px) { .shop-product-rail__item { width: 300px; } }

.shop-no-results {
    text-align: center;
    padding: 4rem 0;
}
.shop-no-results__title {
    color: var(--color-muted-foreground);
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
.shop-no-results__sub {
    color: var(--color-muted-foreground);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------
   14. PRODUCT CARDS
   --------------------------------------------------------------- */
.theme-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.theme-product-card__image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--color-secondary);
    margin-bottom: 0.75rem;
}

.theme-product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.theme-product-card__image-wrapper img,
.theme-product-card__image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-product-card:hover .theme-product-card__image-wrapper img,
.theme-product-card:hover .theme-product-card__image-link img {
    transform: scale(1.05);
}

.theme-product-card__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.theme-product-card__badge--sold-out {
    background: var(--color-foreground);
    color: var(--color-background);
}
.theme-product-card__badge--new {
    background: var(--color-accent);
    color: var(--color-accent-foreground);
}

.theme-product-card__quick-add {
    position: absolute;
    left: auto;
    top: auto;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    box-shadow: var(--shadow-md);
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    transition-property: opacity;
    transition-duration: 300ms;
    transition-timing-function: var(--transition-smooth);
}
.theme-product-card__quick-add svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .theme-product-card__quick-add {
        right: 0.75rem;
        bottom: 0.75rem;
        opacity: 0;
    }
    .theme-product-card.group:hover .theme-product-card__quick-add {
        opacity: 1;
    }
}

.theme-product-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.theme-product-card__category {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted-foreground);
    font-weight: 600;
    margin: 0;
}

.theme-product-card__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-foreground);
    transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    display: block;
}
.theme-product-card:hover .theme-product-card__title { color: var(--color-accent); }

.theme-product-card__price {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    font-weight: 600;
    margin: 0;
}

/* Sold out image opacity */
.theme-product-card--sold-out .theme-product-card__image-wrapper img { opacity: 0.6; }

/* ---------------------------------------------------------------
   15. REVIEWS SECTION
   --------------------------------------------------------------- */
.reviews-section {
    padding: 5rem 0;
    scroll-margin-top: 5rem;
}
@media (min-width: 768px) { .reviews-section { padding: 7rem 0; } }

.reviews-header { text-align: center; margin-bottom: 4rem; }

.reviews-title {
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .reviews-title { font-size: 3rem; } }

.reviews-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1rem;
}
.reviews-stars__average {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
}
.star-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--color-accent);
    color: var(--color-accent);
}
.star-icon-sm {
    width: 1rem;
    height: 1rem;
    fill: var(--color-accent);
    color: var(--color-accent);
}

.reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px)  { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(4, 1fr); } }

.review-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.review-card__stars { display: flex; gap: 0.125rem; margin-bottom: 0.75rem; }
.review-card__text {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 1rem;
}
.review-card__name { font-size: 0.875rem; font-weight: 600; }
.review-card__location { font-size: 0.75rem; color: var(--color-muted-foreground); }

/* ---------------------------------------------------------------
   16. FAQ SECTION
   --------------------------------------------------------------- */
.faq-section {
    padding: 5rem 0;
    background: var(--color-secondary);
    scroll-margin-top: 5rem;
}
@media (min-width: 768px) { .faq-section { padding: 7rem 0; } }

.faq-inner { max-width: 48rem; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 3rem; }
.faq-title {
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) { .faq-title { font-size: 2.25rem; } }

/* Accordion */
.faq-accordion-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-accordion-trigger {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-foreground);
    font-family: inherit;
    gap: 1rem;
}
.faq-accordion-trigger:hover { opacity: 0.8; }

.faq-accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.faq-accordion-item.is-open .faq-accordion-icon { transform: rotate(45deg); }

.faq-accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-accordion-item.is-open .faq-accordion-content {
    max-height: 500px;
}

.faq-accordion-body {
    padding-bottom: 1.25rem;
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
    line-height: 1.7;
}

/* FAQ info blocks */
.faq-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) { .faq-info-grid { grid-template-columns: repeat(2, 1fr); } }

.faq-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.faq-info-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.faq-info-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.faq-info-text { font-size: 0.875rem; color: var(--color-muted-foreground); line-height: 1.6; }

/* ---------------------------------------------------------------
   17. COMMUNITY CTA — parity con Lovable Index.tsx:
   section.relative py-20 md:py-28 overflow-hidden bg-accent
   + video absolute inset-0 w-full h-full object-cover
   + div.absolute inset-0 bg-accent/70
   + div.container-wide max-w-3xl mx-auto text-center relative z-10
   --------------------------------------------------------------- */
.community-section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-accent);
    /* py-20 md:py-28 */
    padding: 5rem 0;
}
@media (min-width: 768px) {
    .community-section { padding: 7rem 0; }
}

.community-section__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* bg-accent/70 */
.community-section__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(212, 40, 43, 0.7);
    background: color-mix(in srgb, var(--color-accent) 70%, transparent);
    pointer-events: none;
}

/* container-wide + max-w-3xl + mx-auto + text-center + relative z-10 */
.community-section__inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
    text-align: center;
}
@media (min-width: 1024px) {
    .community-section__inner {
        padding-left: max(2rem, env(safe-area-inset-left, 0px));
        padding-right: max(2rem, env(safe-area-inset-right, 0px));
    }
}

/* text-3xl md:text-5xl font-black tracking-tight text-accent-foreground mb-4 uppercase */
.community-section__title {
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-accent-foreground);
    margin: 0 0 1rem;
}
@media (min-width: 768px) {
    .community-section__title { font-size: 3rem; }
}

/* text-accent-foreground/80 text-base md:text-lg mb-8 max-w-lg mx-auto */
.community-section__subtitle {
    margin: 0 auto 2rem;
    max-width: 32rem;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    color: color-mix(in srgb, var(--color-accent-foreground) 80%, transparent);
}
@media (min-width: 768px) {
    .community-section__subtitle { font-size: 1.125rem; }
}

/* flex flex-col sm:flex-row gap-4 justify-center */
.community-section__buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
@media (min-width: 640px) {
    .community-section__buttons { flex-direction: row; }
}

/* Button lg: rounded-full px-8 font-bold — primary filled */
.community-btn-contact {
    min-height: 2.75rem;
    padding: 0.625rem 2rem;
    border: none;
    border-radius: 9999px;
    background: var(--color-accent-foreground);
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}
a.community-btn-contact {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.community-btn-contact:hover { opacity: 0.9; }

/*
 * Instagram = shadcn Button variant="outline" size="lg" sobre bg-accent:
 * h-11 rounded-full px-8 border border-accent-foreground/30 text-accent-foreground
 * bg-background hover:bg-accent-foreground/10 text-sm font-semibold gap-2
 */
.community-btn-instagram {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-color: color-mix(in srgb, var(--color-accent-foreground) 30%, transparent);
    background-color: var(--color-background);
    color: var(--color-accent-foreground);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.community-btn-instagram:hover {
    background-color: color-mix(in srgb, var(--color-accent-foreground) 10%, transparent);
    color: var(--color-accent-foreground);
}
.community-btn-instagram:focus-visible {
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
}
.community-btn-instagram svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------------
   18. FLOATING CONTACT BUTTON
   --------------------------------------------------------------- */
.floating-contact-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--color-accent);
    color: var(--color-accent-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-elevated);
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}
a.floating-contact-btn {
    -webkit-tap-highlight-color: transparent;
}
.floating-contact-btn:hover {
    box-shadow: 0 12px 40px -8px rgb(0 0 0 / 0.6);
    transform: scale(1.05);
}

/* ---------------------------------------------------------------
   19. CONTACT MODAL / DIALOG
   --------------------------------------------------------------- */
.trnk-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease forwards;
}

.trnk-modal {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 2rem;
    max-width: 32rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: scaleIn 0.25s ease forwards;
}

.trnk-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-foreground);
}
.trnk-modal__close:hover { opacity: 1; }

.trnk-modal__title {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}
.trnk-modal__description {
    color: var(--color-muted-foreground);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.trnk-modal__email-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin-bottom: 1.5rem;
}
.trnk-modal__email-row a { transition: color 0.2s ease; }
.trnk-modal__email-row a:hover { color: var(--color-foreground); }

/* Form */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 480px) { .form-row-2col { grid-template-columns: 1fr 1fr; } }

.form-group { margin-bottom: 1rem; }
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}
.form-input,
.form-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    color: var(--color-foreground);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-muted-foreground); }
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-foreground);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.form-textarea { resize: none; }

.form-submit-row { display: flex; justify-content: flex-end; }

.contact-success {
    text-align: center;
    padding: 2rem 0;
    animation: fadeIn 0.3s ease forwards;
}
.contact-success__icon {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--color-accent);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    animation: scaleIn 0.3s 0.15s ease both;
}
.contact-success__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.contact-success__text { font-size: 0.875rem; color: var(--color-muted-foreground); }

/* ---------------------------------------------------------------
   20. EMAIL POPUP
   --------------------------------------------------------------- */
.email-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 400;
    animation: fadeIn 0.3s ease forwards;
}

.email-popup-wrapper {
    position: fixed;
    inset: 0;
    z-index: 401;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.email-popup {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 2rem;
    max-width: 28rem;
    width: 100%;
    position: relative;
    box-shadow: var(--shadow-elevated);
    animation: scaleIn 0.35s var(--transition-smooth) forwards;
}

.email-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--color-muted-foreground);
    transition: color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    align-items: center;
}
.email-popup__close:hover { color: var(--color-foreground); }

.email-popup__header { text-align: center; margin-bottom: 1.5rem; }
.email-popup__title { font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem; }
.email-popup__subtitle { font-size: 0.875rem; color: var(--color-muted-foreground); }

.email-popup__input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    color: var(--color-foreground);
    font-size: 0.875rem;
    font-family: inherit;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease;
}
.email-popup__input::placeholder { color: var(--color-muted-foreground); }
.email-popup__input:focus { outline: none; border-color: var(--color-foreground); box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }

.email-popup__disclaimer {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
    text-align: center;
    margin-top: 1rem;
}

.email-popup-success {
    text-align: center;
    padding: 1rem 0;
    animation: fadeIn 0.3s ease forwards;
}
.email-popup-success__title { font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem; }
.email-popup-success__text { font-size: 0.875rem; color: var(--color-muted-foreground); }

/* ---------------------------------------------------------------
   21. CART DRAWER
   --------------------------------------------------------------- */
body.cart-open { overflow: hidden; }

#theme-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(242, 242, 242, 0.2);
    z-index: 149;
    display: none;
}
body.cart-open #theme-cart-overlay { display: block; animation: fadeIn 0.25s ease forwards; }

#theme-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 28rem;
    background: var(--color-background);
    z-index: 150;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-elevated);
    transform: translateX(100%);
    transition: transform 0.4s var(--transition-smooth);
}
body.cart-open #theme-cart-drawer { transform: translateX(0); }

#theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; }

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.cart-drawer__title { font-size: 1.0625rem; font-weight: 700; font-family: var(--font-display); }
.cart-drawer__close {
    padding: 0.25rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
}
.cart-drawer__close:hover { opacity: 1; }

/* Empty cart */
.cart-drawer__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}
.cart-drawer__empty-icon { margin-bottom: 1rem; color: var(--color-muted-foreground); }
.cart-drawer__empty-text { color: var(--color-muted-foreground); margin-bottom: 1.5rem; }

/* Cart items */
.cart-drawer__items {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}
.cart-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.cart-item__image-link {
    width: 5rem;
    height: 6rem;
    background: var(--color-secondary);
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}
.cart-item__image-link img { width: 100%; height: 100%; object-fit: cover; }

.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name {
    font-size: 0.875rem;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    margin-bottom: 0.125rem;
}
.cart-item__name:hover { opacity: 0.7; }
.cart-item__price { font-size: 0.875rem; color: var(--color-muted-foreground); }
.cart-item__variation { font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.125rem; }

.cart-item__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.cart-qty-btn {
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
}
.cart-qty-btn:hover { background: var(--color-secondary); }
.cart-qty-value {
    font-size: 0.875rem;
    width: 1.5rem;
    text-align: center;
}
.cart-item__remove {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    transition: color 0.2s ease;
}
.cart-item__remove:hover { color: var(--color-foreground); }

/* Footer */
.cart-drawer__footer {
    padding: 1.5rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}
.cart-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.cart-drawer__subtotal-label { color: var(--color-muted-foreground); }
.cart-drawer__free-shipping {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin-bottom: 1rem;
}

.cart-drawer__checkout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    padding: 0.875rem 1rem;
    border-radius: var(--btn-radius);
    font-weight: 700;
    font-size: 0.9375rem;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border: none;
    margin-bottom: 0.75rem;
    text-decoration: none;
}
.cart-drawer__checkout-btn:hover { opacity: 0.85; }

.cart-drawer__empty-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--color-border);
    padding: 0.5rem 1rem;
    border-radius: var(--btn-radius);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.cart-drawer__empty-btn:hover { border-color: var(--color-foreground); }

/* ---------------------------------------------------------------
   22. SINGLE PRODUCT PAGE
   --------------------------------------------------------------- */
.single-product .site-main { padding-top: var(--header-height); }

.single-product-page {
    padding-top: 6rem;
    padding-bottom: 5rem;
}
@media (min-width: 1024px) { .single-product-page { padding-top: 7rem; } }

.product-breadcrumb { padding: 1rem 0; }
.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}
.breadcrumb-list a { color: var(--color-muted-foreground); transition: color 0.2s ease; }
.breadcrumb-list a:hover { color: var(--color-foreground); }
.breadcrumb-separator { color: var(--color-muted-foreground); font-size: 0.75rem; }
.breadcrumb-current { color: var(--color-foreground); }

/* Product layout */
.theme-product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 5rem;
    min-width: 0;
}
@media (min-width: 1024px) {
    .theme-product-layout {
        grid-template-columns: 1.2fr 1fr;
        gap: 4rem;
    }
}

.theme-product-gallery,
.theme-product-info { min-width: 0; max-width: 100%; }

/* Gallery */
.product-main-image-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-secondary);
}
#product-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(10,10,10,0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    border: none;
    color: var(--color-foreground);
}
.product-main-image-wrap:hover .product-gallery-nav-btn { opacity: 1; }
.product-gallery-nav-btn--prev { left: 0.75rem; }
.product-gallery-nav-btn--next { right: 0.75rem; }

.product-image-counter {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(10,10,10,0.8);
    backdrop-filter: blur(4px);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.theme-product-thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.product-thumb-btn {
    width: 4rem;
    height: 5rem;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
    background: none;
    padding: 0;
    flex-shrink: 0;
}
.product-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb-btn.is-active { border-color: var(--color-foreground); }
.product-thumb-btn:hover { border-color: rgba(255,255,255,0.4); }

/* Product info */
.theme-product-info { padding-top: 0; }
@media (min-width: 1024px) { .theme-product-info { padding-top: 1.5rem; } }

.product-info__category-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.product-info__category {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
}
.product-info__badge {
    padding: 0.1875rem 0.5rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--color-accent);
    color: var(--color-accent-foreground);
    font-weight: 600;
    border-radius: 0.25rem;
}

.product-info__title {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
}
@media (min-width: 768px) { .product-info__title { font-size: 1.875rem; } }

.product-info__price {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.product-info__stock-sold-out {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-muted-foreground);
    color: var(--color-background);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

/* Size selector */
.product-size-section { margin-bottom: 2rem; }
.product-size-label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}
.product-size-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}
.product-size-btn {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-muted-foreground);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    font-family: inherit;
}
.product-size-btn:hover {
    border-color: var(--color-foreground);
    color: var(--color-foreground);
}
.product-size-btn.is-selected {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    border-color: var(--color-primary);
}
.product-size-hint { font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.5rem; }

/* Color swatches (variable product) */
.product-color-section { margin-bottom: 2rem; }
.product-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-start;
}
.product-color-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-color-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.product-color-swatch:hover .product-color-dot {
    transform: scale(1.06);
}
.product-color-dot {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    /* Color real vía inline style en el HTML; fallback si no hay hex */
    background-color: var(--color-secondary);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-color-swatch:not(.has-hex) .product-color-dot {
    background: var(--color-secondary);
    border: 1px dashed var(--color-border);
    box-shadow: none;
}
.product-color-swatch.is-selected .product-color-dot {
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-foreground),
        inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.product-color-swatch:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Quantity + Add to Cart */
.theme-add-to-cart-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
    align-items: center;
}
.theme-quantity-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    overflow: hidden;
    flex-shrink: 0;
}
.theme-qty-minus,
.theme-qty-plus {
    width: 2.5rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-foreground);
    cursor: pointer;
    font-size: 1.125rem;
    font-family: inherit;
    transition: background-color 0.2s ease;
}
.theme-qty-minus:hover,
.theme-qty-plus:hover { background: var(--color-secondary); }
.theme-qty-input {
    width: 3rem;
    height: 2.75rem;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    color: var(--color-foreground);
    font-size: 0.875rem;
    font-family: inherit;
    -moz-appearance: textfield;
}
.theme-qty-input::-webkit-outer-spin-button,
.theme-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.theme-qty-input:focus { outline: none; }

.single_add_to_cart_button.button,
.add_to_cart_button.button,
a.single_add_to_cart_button:not(.theme-product-card__quick-add),
a.add_to_cart_button:not(.theme-product-card__quick-add) {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-foreground) !important;
    border: none !important;
    border-radius: var(--btn-radius) !important;
    min-height: var(--btn-height) !important;
    padding: var(--btn-padding) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-body) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-transform: var(--btn-text-transform) !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    flex: 1 1 auto;
    min-width: 160px;
}
.single_add_to_cart_button.button:hover,
.add_to_cart_button.button:hover {
    opacity: 0.85 !important;
    background-color: var(--color-primary) !important;
    color: var(--color-primary-foreground) !important;
}
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled,
.add_to_cart_button.button.disabled {
    cursor: not-allowed !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
}
.single_add_to_cart_button.button:disabled:hover,
.single_add_to_cart_button.button.disabled:hover,
.add_to_cart_button.button:disabled:hover,
.add_to_cart_button.button.disabled:hover {
    opacity: 0.4 !important;
    background-color: var(--color-primary) !important;
}

/* Tarjeta tienda: botón circular (Lovable); no usar estilos de CTA ancho completo */
a.theme-product-card__quick-add.add_to_cart_button {
    min-height: 2.25rem !important;
    min-width: 2.25rem !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    flex: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
    box-shadow: var(--shadow-md) !important;
    transition-property: opacity !important;
    transition-duration: 300ms !important;
    transition-timing-function: var(--transition-smooth) !important;
}
a.theme-product-card__quick-add.add_to_cart_button:hover {
    opacity: 1 !important;
    background-color: var(--color-primary) !important;
    color: var(--color-primary-foreground) !important;
}
@media (min-width: 768px) {
    a.theme-product-card__quick-add.add_to_cart_button {
        opacity: 0 !important;
    }
    .theme-product-card.group:hover a.theme-product-card__quick-add.add_to_cart_button {
        opacity: 1 !important;
    }
}

/* "View Cart" link injected by WooCommerce */
.woocommerce-page a.added_to_cart.wc-forward,
.single-product a.added_to_cart.wc-forward,
body a.added_to_cart.wc-forward { display: none !important; }

/* Button loading state */
.ajax_add_to_cart.theme-btn-loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
    cursor: wait !important;
}
a.theme-product-card__quick-add.ajax_add_to_cart.theme-btn-loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
    cursor: wait !important;
}

/* Product description */
.product-description {
    color: var(--color-muted-foreground);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    overflow-wrap: break-word;
    word-break: break-word;
}
.product-details-section {
    border-top: 1px solid var(--color-border);
    padding-top: 2rem;
}
.product-details-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.product-details-list { list-style: none; }
.product-details-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin-bottom: 0.5rem;
}
.product-detail-check {
    width: 1rem;
    height: 1rem;
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Sold out overrides */
.single-product .posted_in { overflow-wrap: break-word; word-break: break-word; }

/* Responsive single product */
.single-product .theme-product-thumbnails { flex-wrap: wrap; max-width: 100%; }

/* Variable product */
.single-product .variations.shop_attributes tbody,
.single-product .variations tbody tr,
.single-product .variations tbody td { display: block; width: 100%; }
.single-product .variations tbody td.label { padding-bottom: 0.25rem; }
.single-product .variations tbody td.value { padding-top: 0; }
.theme-attr-select-hidden { display: none !important; }

/* ---------------------------------------------------------------
   23. RELATED PRODUCTS
   --------------------------------------------------------------- */
.related-products-section {
    padding: 4rem 0;
    background: var(--color-secondary);
}
.related-products-title {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .related-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------
   24. PRODUCT ARCHIVE / SHOP PAGE
   --------------------------------------------------------------- */
.shop-archive-page {
    padding-top: var(--header-height);
    min-height: 100vh;
}

.shop-archive-header {
    background: var(--color-secondary);
    padding: 3rem 0 2rem;
}
.shop-archive-title {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.shop-archive-products {
    padding: 2rem 0 4rem;
}
.theme-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
@media (min-width: 640px)  { .theme-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .theme-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.theme-product-card-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* No products */
.shop-no-products {
    text-align: center;
    padding: 4rem 0;
    color: var(--color-muted-foreground);
}

/* ---------------------------------------------------------------
   25. CHECKOUT PAGE
   --------------------------------------------------------------- */
body.woocommerce-checkout .site-main {
    padding-top: var(--header-height);
    padding-bottom: 4rem;
}

body.woocommerce-checkout .entry-content { max-width: 100%; }

body.woocommerce-checkout .wc-block-checkout {
    display: block;
}

@media (min-width: 768px) {
    body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 2rem;
        align-items: start;
    }
}

body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar {
    min-width: 0;
    width: 100%;
    max-width: none;
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-textarea textarea {
    width: 100% !important;
    max-width: none !important;
    background: var(--color-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.375rem !important;
    color: var(--color-foreground) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus {
    outline: none !important;
    border-color: var(--color-foreground) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1) !important;
}

body.woocommerce-checkout .wc-block-checkout__sidebar {
    background-color: var(--color-card);
    border-radius: var(--card-radius);
    padding: var(--section-padding);
    border: 1px solid var(--color-border);
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-foreground) !important;
    border: none !important;
    border-radius: var(--btn-radius) !important;
    font-weight: 700 !important;
    font-family: var(--font-body) !important;
    width: 100% !important;
    min-height: 3rem !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    opacity: 0.85 !important;
}

body.woocommerce-checkout h2,
body.woocommerce-checkout .wc-block-checkout__title,
body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    color: var(--color-foreground) !important;
    font-family: var(--font-display) !important;
}

.page-title {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 2rem;
    color: var(--color-foreground);
    font-family: var(--font-display);
}

/* ---------------------------------------------------------------
   26. THANK YOU PAGE
   --------------------------------------------------------------- */
body.theme-thankyou-page .woocommerce-order { max-width: 48rem; margin: 0 auto; }
body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title {
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    color: var(--color-foreground);
    font-family: var(--font-display);
}
body.theme-thankyou-page .woocommerce-order-overview {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--color-secondary);
    border-radius: var(--card-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--color-border);
}
body.theme-thankyou-page .woocommerce-order-overview li {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
}
body.theme-thankyou-page .woocommerce-order-overview strong {
    color: var(--color-foreground);
    display: block;
    font-size: 1rem;
    margin-top: 0.25rem;
}
body.theme-thankyou-page .woocommerce-order-details,
body.theme-thankyou-page .woocommerce-customer-details {
    margin-bottom: 2rem;
}
body.theme-thankyou-page .woocommerce-order-details table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
}
body.theme-thankyou-page .woocommerce-order-details table th,
body.theme-thankyou-page .woocommerce-order-details table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-foreground);
}
body.theme-thankyou-page .woocommerce-order-details tfoot th { text-align: left; }
body.theme-thankyou-page .woocommerce-order-details tfoot td { text-align: right; }
body.theme-thankyou-page .woocommerce-customer-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
body.theme-thankyou-page .woocommerce-customer-details address {
    max-width: 480px;
    overflow-wrap: break-word;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    line-height: 1.7;
}
body.theme-thankyou-page { overflow-x: hidden; }

/* ---------------------------------------------------------------
   27. WC NOTICES
   --------------------------------------------------------------- */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    color: var(--color-foreground);
    padding: 1rem 1.5rem;
    border-radius: var(--card-radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    list-style: none;
}

/* Scoped: hide on single product (drawer provides feedback) */
.single-product .woocommerce-message,
.single-product .woocommerce-info { display: none; }
#theme-cart-drawer .woocommerce-message { display: none; }

/* ---------------------------------------------------------------
   28. WOOCOMMERCE GLOBAL OVERRIDES
   --------------------------------------------------------------- */
.woocommerce-loop-product__title { color: var(--color-foreground) !important; }
.price { color: var(--color-foreground) !important; }
.woocommerce-Price-amount { color: inherit; }
.woocommerce ul.products li.product { margin: 0 !important; }
.woocommerce .quantity .qty {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
}

/* ---------------------------------------------------------------
   29. PAGE.PHP  (generic pages, WC checkout wrapper)
   --------------------------------------------------------------- */
.theme-no-hero .site-main {
    padding-top: var(--header-height);
    min-height: 60vh;
}

.entry-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 2rem max(1.25rem, env(safe-area-inset-left, 0px)) 4rem max(1.25rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 1024px) {
    .entry-content {
        padding-left: max(2rem, env(safe-area-inset-left, 0px));
        padding-right: max(2rem, env(safe-area-inset-right, 0px));
    }
}

/* 404 */
.page-404 {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.25rem;
}
.page-404__code { font-size: 6rem; font-weight: 900; opacity: 0.15; line-height: 1; }
.page-404__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.page-404__text { color: var(--color-muted-foreground); margin-bottom: 2rem; }

/* ---------------------------------------------------------------
   30. SVG ICON HELPERS
   --------------------------------------------------------------- */
.icon { display: inline-block; vertical-align: middle; }
.icon svg { display: block; }

/* ---------------------------------------------------------------
   31. CUSTOMIZER CONTROLS (enqueued separately)
   --------------------------------------------------------------- */
/* (styles for .theme-media-control are in customizer-controls.css) */

/* ---------------------------------------------------------------
   32. PRINT
   --------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    #theme-cart-drawer,
    #theme-cart-overlay,
    .floating-contact-btn,
    .announcement-popup { display: none !important; }
}