/* ============================================================
   TIMBER TRAIL WORKSHOP — theme.css
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
    --color-background: #FAF6EF;
    --color-foreground: #1A1208;
    --color-accent: #C17B2F;
    --color-primary: #3D2B1A;
    --color-cream: #F5ECD7;
    --color-surface: #FFFFFF;
    --color-muted: rgba(26,18,8,0.55);
    --color-border: rgba(26,18,8,0.15);
    --color-footer-bg: #1A1208;
    --color-accent-04: rgba(193,123,47,0.04);
    --color-accent-07: rgba(193,123,47,0.07);
    --color-accent-13: rgba(193,123,47,0.13);
    --color-accent-35: rgba(193,123,47,0.35);
    --color-cream-70: rgba(245,236,215,0.7);
    --color-primary-20: rgba(61,43,26,0.2);
    --color-card-hover: #FFFCF7;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --logo-height: 60px;
    --btn-radius: 2px;
    --btn-height: 48px;
    --btn-padding: 13px 28px;
    --btn-font-size: 13px;
    --btn-font-weight: 600;
    --btn-letter-spacing: 0.15em;
    --btn-text-transform: uppercase;
    --header-height: 72px;
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 4px 20px -4px rgba(26,18,8,0.08);
    --shadow-elevated: 0 8px 40px -8px rgba(26,18,8,0.16);
    --card-radius: 4px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading reset (Tailwind preflight parity) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Safe global img rule — exclude cover images */
img:not(.cover-img):not(.hero-bg-img):not(.ttw-hero-video):not(.shop-card-img):not(.ttw-story-image):not(.ttw-workshop-banner-img):not(.ttw-owner-photo):not(.ttw-gallery-main-img):not(.ttw-gallery-desktop-img):not(.ttw-thumbnail img):not(.ttw-contact-video) {
    max-width: 100%;
    height: auto;
}

a { text-decoration: none; color: inherit; }
button { font-family: var(--font-body); cursor: pointer; }

/* ---- Layout Utilities ---- */
.container-wide {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 1024px) {
    .container-wide { padding-left: 2rem; padding-right: 2rem; }
}

.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.scroll-mt-24 { scroll-margin-top: 6rem; }
.hidden-mobile { display: none; }
@media (min-width: 1024px) {
    .hidden-mobile { display: block; }
    .lg-hidden { display: none; }
}

/* ---- Typography ---- */
.ttw-eyebrow {
    color: var(--color-accent);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 600;
    font-family: var(--font-body);
    margin-bottom: 16px;
}
.ttw-rule {
    width: 48px;
    height: 2px;
    background: var(--color-accent);
    margin: 24px 0;
}
.ttw-rule-centered { margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 0; }
.ttw-rule-scale { transform-origin: left center; }

/* Accent / primary text highlights */
.ttw-text-accent,
.ttw-hero-accent {
    color: var(--color-accent);
}
.ttw-text-primary {
    color: var(--color-primary);
}

/* ---- Buttons ---- */
.ttw-btn-primary, .ttw-btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: var(--btn-letter-spacing);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    font-family: var(--font-body);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    border: none;
    cursor: pointer;
    transition: transform 200ms ease, filter 200ms ease;
    text-decoration: none;
}
.ttw-btn-primary:hover, .ttw-btn-accent:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.ttw-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: var(--btn-letter-spacing);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    font-family: var(--font-body);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}
.ttw-btn-outline:hover {
    background: var(--color-foreground);
    color: var(--color-background);
}

.ttw-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    padding: 16px 32px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.ttw-btn-ghost:hover, .hero-cta-ghost:hover { background-color: rgba(255,255,255,0.12) !important; }

.ttw-btn-solid {
    display: inline-flex;
    align-items: center;
    background: var(--color-foreground);
    color: var(--color-background);
    border: 1px solid var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: var(--btn-letter-spacing);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    font-family: var(--font-body);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, transform 150ms ease;
}
.ttw-btn-solid:hover { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.03); }

/* ---- Site Logo ---- */
.site-logo-img {
    height: var(--logo-height) !important;
    width: auto !important;
    display: block;
}
.site-logo-text {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-foreground);
    line-height: var(--logo-height);
    display: block;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.ttw-announcement-bar {
    position: relative;
    background: var(--color-primary);
    color: var(--color-background);
    text-align: center;
}
.ttw-announcement-inner { padding: 8px 0; }
.ttw-announcement-text {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-body);
}
.ttw-announcement-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    padding: 4px;
    cursor: pointer;
    transition: opacity 150ms ease;
    display: flex;
    align-items: center;
}
.ttw-announcement-close:hover { opacity: 1; }

/* ============================================================
   SITE HEADER
   ============================================================ */
.ttw-site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
    background: var(--color-background);
    border-bottom: 1px solid transparent;
}
.ttw-site-header.is-solid,
.ttw-site-header.is-scrolled {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(26,18,8,0.12);
    box-shadow: 0 2px 20px rgba(26,18,8,0.08);
}

.ttw-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--header-height);
    transition: height 300ms ease;
}
.ttw-site-header.is-scrolled .ttw-nav { height: 60px; }

.ttw-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 0;
    text-decoration: none;
}
.ttw-logo-link .site-logo-img {
    transition: transform 300ms ease;
}
.ttw-logo-link:hover .site-logo-img { transform: rotate(-3deg); }

.ttw-brand-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}
@media (min-width: 640px) { .ttw-brand-name { display: inline; } }

.ttw-nav-desktop { display: none; }
@media (min-width: 1024px) {
    .ttw-nav-desktop { display: flex; align-items: center; gap: 28px; }
}

.ttw-nav-controls { display: flex; align-items: center; gap: 8px; }

/* Nav links */
.theme-nav-list { list-style: none; display: flex; align-items: center; gap: 20px; padding: 0; margin: 0; }
@media (min-width: 1280px) { .theme-nav-list { gap: 28px; } }

.theme-nav-list .menu-item a,
.nav-link {
    position: relative;
    font-size: 15px;
    font-family: var(--font-body);
    white-space: nowrap;
    color: rgba(26,18,8,0.8);
    transition: color 200ms ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}
.theme-nav-list .menu-item a::after,
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 250ms ease;
}
.theme-nav-list .menu-item a:hover,
.nav-link:hover,
.nav-link.is-active { color: var(--color-accent); }
.theme-nav-list .menu-item a:hover::after,
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }

/* Cart button */
.ttw-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(26,18,8,0.3);
    color: rgba(26,18,8,0.8);
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.ttw-cart-btn:hover { color: var(--color-accent); border-color: var(--color-accent); transform: scale(1.1); }

.theme-cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.theme-cart-count:empty { display: none; }

/* Mobile Toggle */
.ttw-mobile-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    transition: opacity 200ms ease;
    -webkit-tap-highlight-color: transparent;
}
.ttw-mobile-toggle:hover { opacity: 0.6; }
@media (min-width: 1024px) { .ttw-mobile-toggle { display: none; } }

.ttw-mobile-toggle .ttw-close-icon { display: none; }
.ttw-mobile-toggle.is-open .ttw-hamburger-icon { display: none; }
.ttw-mobile-toggle.is-open .ttw-close-icon { display: flex; }

/* Mobile Menu */
.ttw-mobile-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    border-top: 1px solid transparent;
    padding: 0;
    transition:
        max-height 420ms var(--transition-smooth),
        opacity 320ms var(--transition-smooth),
        transform 320ms var(--transition-smooth),
        padding 320ms var(--transition-smooth),
        border-color 320ms var(--transition-smooth),
        visibility 0ms linear 420ms;
}
.ttw-mobile-menu.is-open {
    max-height: 420px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    border-top-color: rgba(26,18,8,0.1);
    padding: 16px 0 20px;
    transition:
        max-height 420ms var(--transition-smooth),
        opacity 320ms var(--transition-smooth),
        transform 320ms var(--transition-smooth),
        padding 320ms var(--transition-smooth),
        border-color 320ms var(--transition-smooth),
        visibility 0ms;
}
@media (min-width: 1024px) { .ttw-mobile-menu { display: none !important; } }

.ttw-mobile-nav-list { display: flex; flex-direction: column; gap: 4px; }
.ttw-mobile-nav-link {
    display: block;
    padding: 10px 4px;
    font-size: 14px;
    font-family: var(--font-body);
    color: rgba(26,18,8,0.7);
    text-decoration: none;
    opacity: 0;
    transform: translateX(-16px);
    transition: color 180ms ease, transform 280ms var(--transition-smooth), opacity 280ms var(--transition-smooth);
}
.ttw-mobile-menu.is-open .ttw-mobile-nav-link {
    opacity: 1;
    transform: translateX(0);
}
.ttw-mobile-menu.is-open .ttw-mobile-nav-link:nth-child(1) { transition-delay: 60ms; }
.ttw-mobile-menu.is-open .ttw-mobile-nav-link:nth-child(2) { transition-delay: 100ms; }
.ttw-mobile-menu.is-open .ttw-mobile-nav-link:nth-child(3) { transition-delay: 140ms; }
.ttw-mobile-menu.is-open .ttw-mobile-nav-link:nth-child(4) { transition-delay: 180ms; }
.ttw-mobile-menu.is-open .ttw-mobile-nav-link:nth-child(5) { transition-delay: 220ms; }
.ttw-mobile-menu.is-open .ttw-mobile-nav-link:nth-child(6) { transition-delay: 260ms; }
.ttw-mobile-nav-link:hover { color: var(--color-accent); }

body.mobile-menu-open { overflow: hidden; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.ttw-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: var(--color-foreground);
}

.ttw-hero-video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.ttw-hero-video {
    position: absolute;
    inset-inline: 0;
    top: -15%;
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
}
.ttw-hero-video-overlay {
    position: absolute;
    inset: 0;
    background: black;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease-in-out;
}
.ttw-hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(20,12,5,0) 0%, rgba(20,12,5,0.45) 50%, rgba(20,12,5,0.65) 100%);
}
.ttw-hero-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ttw-hero-text-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 64rem;
    padding: 0 8px;
}
.ttw-hero-heading {
    color: #ffffff;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.95;
}
.ttw-hero-line1, .ttw-hero-line2 { display: block; }

.reveal-hero-line {
    opacity: 0;
    animation: heroLineUp 700ms cubic-bezier(0.22,1,0.36,1) forwards;
}
.ttw-hero-line1.reveal-hero-line { animation-delay: 0ms; }
.ttw-hero-line2.reveal-hero-line { animation-delay: 150ms; }

.ttw-hero-subtext {
    margin-top: 24px;
    max-width: 42rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.625;
    color: rgba(255,255,255,0.8);
    opacity: 0;
    animation: heroFadeIn 600ms cubic-bezier(0.22,1,0.36,1) 400ms forwards;
}
@media (min-width: 768px) { .ttw-hero-subtext { font-size: 1rem; } }

.ttw-hero-ctas {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 0;
    animation: heroCtaIn 500ms cubic-bezier(0.22,1,0.36,1) 650ms forwards;
}
@media (min-width: 640px) { .ttw-hero-ctas { flex-direction: row; } }

.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 16px 40px;
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 600;
    background: var(--color-accent);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: transform 200ms ease, filter 200ms ease;
    text-decoration: none;
}
.hero-cta-primary:hover { transform: scale(1.03); filter: brightness(1.1); }

@keyframes heroLineUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroCtaIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* ============================================================
   ABOUT / STORY SECTION
   ============================================================ */
.ttw-about-section { width: 100%; }

/* Marquee */
.ttw-marquee-wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 44px;
    background: var(--color-accent);
}
.ttw-marquee-track {
    display: flex;
    white-space: nowrap;
    animation: storyMarquee 30s linear infinite;
    will-change: transform;
}
.ttw-marquee-item {
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.2em;
    font-weight: 600;
    padding-right: 2rem;
    font-family: var(--font-body);
}
@keyframes storyMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Two-column layout */
.ttw-story-cols {
    display: grid;
    min-height: 600px;
}
@media (min-width: 1024px) { .ttw-story-cols { grid-template-columns: 1fr 1fr; } }

.ttw-story-left {
    background: var(--color-background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 8vw, 80px) clamp(24px, 10%, 80px);
}
.ttw-story-inner {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(40px, 8vw, 80px) 24px;
}

.ttw-story-left .ttw-eyebrow {
    letter-spacing: 0.25em;
    margin-bottom: 20px;
}
.ttw-story-heading {
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.1;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    font-family: var(--font-body);
    margin: 0;
}
.ttw-story-h-line { display: block; }
.ttw-story-body {
    color: var(--color-primary);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 440px;
    font-family: var(--font-body);
    margin: 0;
}
.ttw-story-cta, .story-cta {
    margin-top: 32px;
    padding: 14px 32px;
}

.ttw-story-right {
    position: relative;
    overflow: hidden;
    background: var(--color-foreground);
    min-height: 360px;
}
.ttw-story-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1200ms ease-out;
}
.ttw-story-img-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to left, transparent 30%, rgba(26,18,8,0.35) 100%);
}

/* Stats Bar */
.ttw-stats-bar {
    background: var(--color-foreground);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: clamp(28px, 4vw, 40px) clamp(20px, 6vw, 80px);
}
@media (min-width: 768px) { .ttw-stats-bar { grid-template-columns: repeat(4, 1fr); } }

.ttw-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
}
.ttw-stat-value {
    color: var(--color-accent);
    font-weight: 800;
    font-size: 1.6rem;
    font-family: var(--font-body);
    line-height: 1.1;
}
.ttw-stat-label {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 8px;
    font-family: var(--font-body);
}

/* ============================================================
   OWNER SECTION
   ============================================================ */
.ttw-owner-section {
    background: var(--color-background);
    padding: clamp(64px, 8vw, 90px) clamp(24px, 6vw, 80px);
    width: 100%;
}
.ttw-owner-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 40px;
    align-items: center;
}
@media (min-width: 800px) {
    .ttw-owner-container { grid-template-columns: 340px 1fr; gap: 48px; }
}
@media (min-width: 1024px) {
    .ttw-owner-container { grid-template-columns: 420px 1fr; gap: 72px; }
}

.ttw-owner-photo-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 16px 40px rgba(26,18,8,0.15);
    border: 2px solid var(--color-accent-35);
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
@media (min-width: 800px) {
    .ttw-owner-photo-wrap { width: 340px; height: 340px; }
}
@media (min-width: 1024px) {
    .ttw-owner-photo-wrap { width: 420px; height: 420px; }
}
.ttw-owner-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
    transition: transform 400ms ease;
}
.ttw-owner-photo-wrap:hover .ttw-owner-photo { transform: scale(1.02); }

.ttw-owner-text { display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 799px) {
    .ttw-owner-text { text-align: center; align-items: center; }
    .ttw-owner-text .ttw-rule { margin-left: auto; margin-right: auto; }
}

.ttw-owner-eyebrow { margin-bottom: 18px; font-size: 11px; letter-spacing: 0.25em; }
.ttw-owner-quote {
    font-size: 1.25rem;
    color: var(--color-foreground);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 22px;
    font-family: var(--font-display);
}
.ttw-owner-rule {
    width: 44px;
    margin-bottom: 18px;
}
.ttw-owner-name { color: var(--color-foreground); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; font-family: var(--font-body); }
.ttw-owner-title { color: var(--color-accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 22px; font-family: var(--font-body); }
.ttw-owner-bio { color: rgba(26,18,8,0.6); font-size: 1rem; line-height: 1.8; max-width: 520px; margin-bottom: 30px; font-family: var(--font-body); }

.ttw-owner-section .ttw-btn-outline, .owner-cta {
    align-self: flex-start;
    font-size: 12px;
    padding: 13px 28px;
    letter-spacing: 0.15em;
}
@media (max-width: 799px) {
    .ttw-owner-section .ttw-btn-outline, .owner-cta { align-self: center; }
}

/* Reveal animations for owner */
.reveal-photo {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.reveal-text {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.ttw-owner-container.is-visible .reveal-photo { opacity: 1; transform: scale(1); }
.ttw-owner-container.is-visible .reveal-text { opacity: 1; transform: translateY(0); }
.delay-120 { transition-delay: 120ms; }
.delay-240 { transition-delay: 240ms; }
.delay-360 { transition-delay: 360ms; }
.delay-480 { transition-delay: 480ms; }
.delay-600 { transition-delay: 600ms; }
.delay-720 { transition-delay: 720ms; }

/* ============================================================
   WORKSHOP BANNER
   ============================================================ */
.ttw-workshop-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 280px;
    height: clamp(280px, 32vw, 500px);
}
.ttw-workshop-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ttw-workshop-banner-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(26,18,8,0.82) 0%, rgba(26,18,8,0.55) 50%, rgba(26,18,8,0.2) 100%);
}
.ttw-workshop-banner-content {
    position: relative;
    height: 100%;
    min-height: inherit;
    display: flex;
    align-items: center;
    padding-left: clamp(24px, 6vw, 80px);
    padding-right: clamp(24px, 6vw, 80px);
}
.ttw-workshop-banner-inner {
    max-width: 640px;
    width: 100%;
}
.ttw-workshop-banner-heading {
    margin: 0;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--color-cream);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    font-family: var(--font-body);
}
.ttw-banner-line { display: block; }
.ttw-workshop-banner-heading .ttw-text-accent,
.ttw-workshop-banner-heading .ttw-hero-accent {
    color: var(--color-accent);
}
.ttw-workshop-banner-content .ttw-rule-scale { width: 48px; margin: 16px 0; }
.ttw-workshop-banner-sub {
    color: var(--color-cream-70);
    font-size: 1rem;
    letter-spacing: 0.05em;
    max-width: 380px;
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.5;
}

/* Slide-X animation for banner lines */
.ttw-slide-x {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.ttw-workshop-banner.is-revealed .ttw-slide-x { opacity: 1; transform: translateX(0); }
.ttw-slide-x[data-delay="150"] { transition-delay: 150ms; }
.ttw-workshop-banner.is-revealed .ttw-rule-scale { transform: scaleX(1); transition: transform 400ms ease-out 400ms; }
.ttw-rule-scale { transform: scaleX(0); transition: transform 400ms ease-out 400ms; }
.ttw-workshop-banner.is-revealed .ttw-workshop-banner-sub { opacity: 1; transition: opacity 400ms ease-out 600ms; }
.ttw-workshop-banner-sub { opacity: 0; transition: opacity 400ms ease-out 600ms; }

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.ttw-services-section {
    background: var(--color-background);
    padding: clamp(56px, 8vw, 100px) clamp(20px, 6vw, 80px);
    width: 100%;
}
.ttw-services-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 48px;
}
@media (min-width: 1024px) {
    .ttw-services-header {
        grid-template-columns: 35% 65%;
        gap: 48px;
        margin-bottom: 64px;
    }
}
.ttw-services-header-copy { min-width: 0; }
.ttw-services-header-spacer { display: none; }
@media (min-width: 1024px) {
    .ttw-services-header-spacer { display: block; }
}
.ttw-services-header .ttw-eyebrow {
    margin-bottom: 18px;
}
.ttw-services-heading {
    font-weight: 800;
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    font-family: var(--font-body);
    text-align: left;
}
.ttw-services-h-line { display: block; }
.ttw-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) { .ttw-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ttw-services-grid { grid-template-columns: repeat(5, 1fr); } }

/* Service Card */
.ttw-service-card, .service-card {
    background: var(--color-surface);
    border: 1px solid rgba(26,18,8,0.08);
    border-radius: var(--card-radius);
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}
.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--color-accent);
    transition: width 300ms ease;
}
.service-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(26,18,8,0.10);
    background-color: var(--color-card-hover) !important;
}
.service-card:hover::after { width: 100%; }
.service-card:hover .service-card-num { color: var(--color-accent-13) !important; }
.service-card:hover .service-card-icon { transform: scale(1.15) rotate(5deg); }
.service-card:hover .service-card-cta { letter-spacing: 0.3em !important; }

.ttw-service-num, .service-card-num {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 80px;
    font-weight: 900;
    color: var(--color-accent-07);
    line-height: 1;
    pointer-events: none;
    font-family: var(--font-body);
    transition: color 300ms ease;
}
.ttw-service-icon, .service-card-icon {
    color: var(--color-accent);
    margin-bottom: 20px;
    transition: transform 300ms ease;
    display: block;
}
.ttw-service-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--color-foreground);
    margin-bottom: 12px;
    font-family: var(--font-body);
}
.ttw-service-desc-wrap { flex: 1; }
.ttw-service-desc { font-size: 1rem; color: rgba(26,18,8,0.6); line-height: 1.7; margin-bottom: 24px; font-family: var(--font-body); }
.ttw-service-cta, .service-card-cta {
    color: var(--color-accent);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    text-decoration: none;
    display: inline-block;
    transition: letter-spacing 300ms ease;
}

/* Services Strip */
.ttw-services-strip {
    background: var(--color-accent);
    padding: 36px clamp(24px, 6vw, 80px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
@media (min-width: 768px) { .ttw-services-strip { flex-direction: row; justify-content: space-between; } }

.ttw-strip-text {
    color: var(--color-foreground);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;
    font-family: var(--font-display);
    margin: 0;
    text-align: center;
}
.ttw-strip-cta, .services-strip-cta {
    background: var(--color-foreground);
    color: var(--color-cream);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 12px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-family: var(--font-body);
    white-space: nowrap;
    transition: background-color 200ms ease, color 200ms ease;
    text-decoration: none;
    display: inline-block;
}
.ttw-strip-cta:hover, .services-strip-cta:hover {
    background-color: var(--color-cream);
    color: var(--color-foreground);
}

/* ============================================================
   SHOP SECTION
   ============================================================ */
.ttw-shop-section {
    background: var(--color-background);
    padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 64px);
    width: 100%;
}
.ttw-shop-header { text-align: center; margin-bottom: 40px; }
@media (min-width: 768px) { .ttw-shop-header { margin-bottom: 56px; } }
.ttw-shop-header .ttw-eyebrow { margin-bottom: 14px; }

.ttw-shop-heading {
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 0;
    font-family: var(--font-body);
}

/* Search + Filter */
.ttw-shop-filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 24px;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 640px) { .ttw-shop-filters { flex-direction: row; align-items: flex-start; } }

.ttw-search-wrap {
    position: relative;
    flex: 1;
}
.ttw-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.ttw-search-input, .shop-search-input {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    padding: 10px 16px 10px 38px;
    font-size: 14px;
    color: var(--color-foreground);
    outline: none;
    font-family: var(--font-body);
    transition: border-color 200ms ease;
}
.ttw-search-input:focus, .shop-search-input:focus { border-color: var(--color-accent) !important; }

.ttw-price-filter-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 200px; }
@media (min-width: 640px) { .ttw-price-filter-wrap { align-items: flex-start; } }

.ttw-price-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    padding: 10px 16px;
    cursor: pointer;
    font-family: var(--font-body);
    height: 40px;
}
.ttw-price-toggle svg { transition: transform 200ms ease; }
.ttw-price-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.ttw-price-filter-panel {
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 300ms ease, opacity 300ms ease;
}
.ttw-price-filter-panel.is-open { max-height: 120px; opacity: 1; }
.ttw-price-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-muted); margin-top: 8px; }

/* Dual-range price slider */
.price-range-wrapper { position: relative; height: 1.5rem; margin: 8px 0; }
.range-track-bg, .range-track-fill {
    position: absolute;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.range-track-bg { left: 0; right: 0; background: var(--color-border); }
.range-track-fill { background: var(--color-accent); }
.range-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}
.range-input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--color-accent); }
.range-input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); cursor: pointer; border: 2px solid #fff; }
.range-input--max { z-index: 3; }
.range-input--min { z-index: 4; }

/* Category Pills */
.ttw-category-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}
.ttw-category-pill, .shop-pill {
    position: relative;
    background: transparent;
    border: 1px solid rgba(26,18,8,0.2);
    color: rgba(26,18,8,0.5);
    border-radius: var(--btn-radius);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.15em;
    padding: 8px 20px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    margin-top: 8px;
}
.ttw-category-pill.is-active, .shop-pill.is-active {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
}
.shop-pill:hover, .ttw-category-pill:hover {
    background: var(--color-foreground) !important;
    border-color: var(--color-foreground) !important;
    color: var(--color-background) !important;
}
.ttw-pill-dot {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Product Grid — 2-column layout (matches Lovable ShopSection) */
.masonry-container-shop,
.ttw-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    padding: 0 0 80px 0;
}
.masonry-container-collection {
    column-count: 2;
    column-gap: 32px;
}
@media (min-width: 1024px) {
    .masonry-container-collection { column-count: 3; }
}
.masonry-container-shop .masonry-item,
.ttw-product-grid .masonry-item {
    break-inside: unset;
    -webkit-column-break-inside: unset;
    display: block;
    width: 100%;
    margin-bottom: 0;
}
.masonry-container-collection .masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 40px;
}

/* Product Card */
.ttw-product-card-wrap { position: relative; }
.shop-card {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    text-decoration: none;
    display: block;
}
.theme-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: auto;
}
.shop-card *:not(.theme-card-link):not(.shop-card-atc-wrap):not(.shop-card-atc-btn) { pointer-events: none; }

.shop-card-image-wrap {
    position: relative;
    overflow: visible;
    background: transparent;
}
.shop-card-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
    transition: transform 350ms ease, filter 350ms ease;
}
.shop-card-img.is-sold-out { opacity: 0.65; }
.shop-card:hover .shop-card-img {
    transform: scale(1.02);
    filter: drop-shadow(0 8px 28px rgba(26,18,8,0.18));
}

.shop-card-atc-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 20;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
}
.shop-card:hover .shop-card-atc-wrap {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.shop-card-atc-btn {
    text-transform: uppercase;
    font-size: clamp(12px, 2vw, 22px);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: clamp(8px, 1.5vw, 20px) clamp(16px, 2.5vw, 40px);
    border-radius: var(--btn-radius);
    background: var(--color-accent);
    color: var(--color-foreground);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 3;
    pointer-events: auto;
}
.shop-card-atc-btn:hover { background: var(--color-foreground); color: var(--color-background); }

.ttw-sold-out-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-accent);
    color: var(--color-background);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.15em;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--btn-radius);
    font-family: var(--font-body);
    z-index: 10;
}
.shop-card-info { padding-top: 12px; }
.shop-card-cat {
    color: var(--color-accent);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
    font-family: var(--font-body);
}
.shop-card-name {
    color: var(--color-foreground);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 6px;
    font-family: var(--font-body);
    line-height: 1.3;
}
.shop-card-price { color: var(--color-muted); font-size: 1rem; font-family: var(--font-body); }

/* WooCommerce "View cart" hide */
.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; }

/* Add-to-cart button style override */
.single_add_to_cart_button.button,
.add_to_cart_button.button,
a.single_add_to_cart_button,
a.add_to_cart_button {
    background-color: var(--color-foreground) !important;
    color: var(--color-background) !important;
    border: none !important;
    border-radius: 9999px !important;
    min-height: var(--btn-height) !important;
    padding: 16px 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
}
.single_add_to_cart_button.button:hover,
.add_to_cart_button.button:hover { opacity: 0.9 !important; background-color: var(--color-foreground) !important; color: var(--color-background) !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-foreground) !important; }

/* Card compact button override */
.ttw-product-card-wrap .add_to_cart_button.ajax_add_to_cart,
.shop-card .add_to_cart_button.ajax_add_to_cart,
.shop-card-atc-btn.add_to_cart_button {
    min-height: unset !important;
    padding: clamp(8px, 1.5vw, 20px) clamp(16px, 2.5vw, 40px) !important;
    border-radius: var(--btn-radius) !important;
    background-color: var(--color-accent) !important;
    color: var(--color-foreground) !important;
    font-size: clamp(12px, 2vw, 22px) !important;
    letter-spacing: 0.15em !important;
}

/* Loading state */
.ajax_add_to_cart.theme-btn-loading { opacity: 0.6 !important; pointer-events: none !important; cursor: wait !important; }
.single-product .single_add_to_cart_button.loading::after,
.ajax_add_to_cart.loading::after { display: none !important; }

/* Show More button */
.ttw-show-more-wrap { text-align: center; margin-top: 48px; }
.ttw-show-more, .shop-show-more {
    background: transparent;
    border: 1px solid var(--color-foreground);
    color: var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 13px;
    font-weight: 600;
    padding: 14px 48px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-family: var(--font-body);
    transition: background-color 200ms ease, color 200ms ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ttw-show-more:hover, .shop-show-more:hover { background: var(--color-foreground); color: var(--color-background); }

.shop-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: none;
    animation: shopSpin 0.7s linear infinite;
}
.is-loading .shop-spinner { display: inline-block; }
@keyframes shopSpin { to { transform: rotate(360deg); } }

.ttw-shop-empty { text-align: center; padding: 80px 0; color: var(--color-muted); font-family: var(--font-body); }

/* Signature Strip */
.ttw-shop-signature {
    text-align: center;
    background: var(--color-cream);
    padding: clamp(32px, 5vw, 48px) clamp(24px, 6vw, 80px);
    border-top: 1px solid rgba(26,18,8,0.08);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-top: clamp(56px, 8vw, 80px);
}
.ttw-signature-quote {
    color: var(--color-foreground);
    font-size: 1.05rem;
    font-style: italic;
    margin-bottom: 8px;
    font-family: var(--font-display);
}
.ttw-signature-name {
    color: var(--color-accent);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    font-family: var(--font-body);
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.ttw-faq-section {
    background: var(--color-background);
    padding: clamp(56px, 8vw, 100px) clamp(20px, 6vw, 80px);
}
.ttw-faq-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 1024px) {
    .ttw-faq-layout { grid-template-columns: 38% 62%; gap: 64px; }
}
.ttw-faq-sticky { position: static; }
.ttw-faq-left .ttw-eyebrow { margin-bottom: 16px; }
.ttw-faq-left .ttw-rule { margin: 24px 0; }
@media (min-width: 1024px) {
    .ttw-faq-sticky { position: sticky; top: 100px; }
}
.ttw-faq-heading {
    margin: 0;
    font-weight: 900;
    font-size: clamp(2rem, 3.5vw, 3rem);
    color: var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-family: var(--font-body);
}
.ttw-faq-no-answer { color: rgba(26,18,8,0.55); font-size: 1rem; margin-bottom: 8px; font-family: var(--font-body); }
.ttw-faq-email { color: var(--color-accent); font-size: 1rem; font-weight: 600; text-decoration: none; font-family: var(--font-body); transition: text-decoration 150ms ease; }
.faq-email-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.ttw-faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}
.faq-tab {
    background: transparent;
    border: 1px solid rgba(26,18,8,0.15);
    color: rgba(26,18,8,0.5);
    border-radius: var(--btn-radius);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.15em;
    padding: 7px 18px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.faq-tab:hover { background: transparent; border-color: var(--color-foreground); color: var(--color-foreground); }
.faq-tab.is-active, .faq-tab[aria-pressed="true"] {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
}

.ttw-faq-panel { display: none; }
.ttw-faq-panel.is-active { display: block; }

.ttw-faq-item, .faq-row {
    border-top: 1px solid rgba(26,18,8,0.1);
    padding: 24px 16px;
    border-left: 3px solid transparent;
    transition: border-color 200ms ease, background-color 150ms ease;
}
.ttw-faq-item.is-open { border-left-color: var(--color-accent); }
.faq-row:hover { background-color: var(--color-accent-04); }

.ttw-faq-question {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.ttw-faq-q-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-foreground);
    letter-spacing: -0.01em;
    line-height: 1.4;
    transition: color 200ms ease;
    font-family: var(--font-body);
    flex: 1;
}
.ttw-faq-item.is-open .ttw-faq-q-text { color: var(--color-accent); }
.ttw-faq-toggle {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-accent);
    font-weight: 300;
    line-height: 1;
    margin-top: 2px;
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 300ms ease;
}
.ttw-faq-item.is-open .ttw-faq-toggle { transform: rotate(45deg); }

.ttw-faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ttw-faq-item.is-open .ttw-faq-answer { max-height: 320px; }
.ttw-faq-answer p {
    color: rgba(26,18,8,0.65);
    font-size: 1rem;
    line-height: 1.8;
    padding-top: 12px;
    padding-right: 32px;
    margin: 0;
    font-family: var(--font-body);
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.ttw-contact-section { background: var(--color-background); padding: 0; }

.ttw-contact-video-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 420px;
}
.ttw-contact-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.ttw-contact-video-overlay-fade {
    position: absolute;
    inset: 0;
    background: black;
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
}
.ttw-contact-video-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(26,18,8,0.88) 0%, rgba(26,18,8,0.4) 50%, rgba(26,18,8,0.15) 100%);
}
.ttw-contact-video-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px;
}
.ttw-contact-banner-heading {
    font-weight: 900;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    color: var(--color-cream);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-family: var(--font-body);
}
.ttw-contact-banner-tagline { color: var(--color-accent); font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em; margin-top: 10px; font-family: var(--font-body); font-weight: 600; }

.ttw-contact-content { background: var(--color-background); padding: clamp(40px, 6vw, 64px) clamp(20px, 6vw, 80px); }
.ttw-contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .ttw-contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

.ttw-contact-heading {
    margin: 0;
    font-weight: 900;
    font-size: clamp(2rem, 3.5vw, 3rem);
    color: var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-family: var(--font-body);
}
.ttw-contact-left .ttw-eyebrow { margin-bottom: 16px; }
.ttw-contact-left .ttw-rule { margin: 20px 0; }
.ttw-contact-body { color: rgba(26,18,8,0.6); font-size: 1.05rem; line-height: 1.8; font-family: var(--font-body); margin: 0; max-width: 460px; }
.ttw-contact-detail-value:hover { color: var(--color-accent); }

.ttw-contact-right { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: center; }
.ttw-contact-detail { display: flex; flex-direction: column; }
.ttw-contact-detail-label { color: rgba(26,18,8,0.4); font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 4px; font-family: var(--font-body); font-weight: 600; }
.ttw-contact-detail-value { color: var(--color-foreground); font-weight: 600; font-size: 1.1rem; font-family: var(--font-body); }
.ttw-contact-email-link { text-decoration: none; transition: color 150ms ease; }
.ttw-contact-email-link:hover { color: var(--color-accent); }
.ttw-contact-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.ttw-footer { background: var(--color-footer-bg); width: 100%; margin: 0; }

.ttw-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
    padding-top: 64px;
    padding-bottom: 64px;
}
@media (min-width: 640px) { .ttw-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ttw-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; } }

.ttw-footer-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.ttw-footer-logo-img { height: 64px !important; width: auto !important; display: block; }
.ttw-footer-brand-name { color: var(--color-cream); font-weight: 700; font-size: 1rem; margin-left: 12px; }
.ttw-footer-tagline { color: rgba(255,255,255,0.45); font-size: 0.85rem; line-height: 1.7; margin-top: 16px; max-width: 220px; }

.ttw-footer-col-heading {
    color: var(--color-cream);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: 16px;
    font-family: var(--font-body);
}
.ttw-footer-link {
    display: block;
    color: rgba(255,255,255,0.45);
    font-size: 0.875rem;
    transition: color 150ms ease;
    text-align: left;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1.5;
    margin-bottom: 8px;
    font-family: var(--font-body);
    text-decoration: none;
}
.ttw-footer-link:last-child { margin-bottom: 0; }
.ttw-footer-link:hover { color: var(--color-accent); }

.ttw-footer-muted { color: rgba(255,255,255,0.45); font-size: 0.85rem; line-height: 1.7; margin-bottom: 16px; font-family: var(--font-body); }
.ttw-footer-email { color: rgba(255,255,255,0.55); font-size: 0.85rem; text-decoration: none; transition: color 150ms ease; display: block; }
.ttw-footer-email:hover { color: var(--color-accent); }
.ttw-footer-location { color: rgba(255,255,255,0.35); font-size: 0.85rem; margin-top: 4px; font-family: var(--font-body); }

.ttw-footer-social { display: flex; gap: 12px; margin-top: 16px; }
.ttw-footer-social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    transition: border-color 150ms ease, color 150ms ease;
    text-decoration: none;
}
.ttw-footer-social-link:hover { border-color: var(--color-accent); color: var(--color-accent); }

.ttw-footer-divider { border-top: 1px solid rgba(255,255,255,0.08); }

.ttw-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 20px;
}
@media (min-width: 640px) { .ttw-footer-bottom { flex-direction: row; justify-content: space-between; } }
.ttw-footer-copy { color: rgba(255,255,255,0.25); font-size: 12px; font-family: var(--font-body); }
.ttw-footer-credit { color: rgba(255,255,255,0.25); font-size: 12px; font-family: var(--font-body); }
.ttw-footer-credit-link { color: var(--color-cream); font-weight: 700; text-decoration: none; transition: color 150ms ease; }
.ttw-footer-credit-link:hover { color: var(--color-accent); }

/* ============================================================
   CART DRAWER
   ============================================================ */
#theme-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,18,8,0.2);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}
body.cart-open #theme-cart-overlay { opacity: 1; pointer-events: auto; }

#theme-cart-drawer {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    max-width: 440px;
    background: var(--color-background);
    z-index: 50;
    box-shadow: var(--shadow-elevated);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.cart-open #theme-cart-drawer { transform: translateX(0); }
#theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; }

.ttw-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}
.ttw-cart-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.ttw-cart-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-foreground);
    opacity: 0.7;
    transition: opacity 150ms ease;
    display: flex;
}
.ttw-cart-close:hover { opacity: 1; }

.ttw-cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    gap: 16px;
}
.ttw-cart-empty svg { color: var(--color-muted); width: 48px; height: 48px; }
.ttw-cart-empty-msg { color: var(--color-muted); font-family: var(--font-body); }

.ttw-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ttw-cart-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.ttw-cart-item-img-wrap {
    width: 80px;
    height: 96px;
    background: var(--color-border);
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}
.ttw-cart-item-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ttw-cart-item-details { flex: 1; min-width: 0; }
.ttw-cart-item-name {
    font-size: 14px;
    font-weight: 500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-body);
    transition: opacity 150ms ease;
    text-decoration: none;
    color: var(--color-foreground);
}
.ttw-cart-item-name:hover { opacity: 0.7; }
.ttw-cart-item-price { font-size: 14px; color: var(--color-muted); margin-top: 2px; font-family: var(--font-body); }
.ttw-cart-item-variation { font-size: 12px; color: var(--color-muted); margin-top: 4px; }
.ttw-cart-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.ttw-cart-qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: background-color 150ms ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.ttw-cart-qty-btn:hover { background: rgba(26,18,8,0.08); }
.ttw-cart-qty { font-size: 14px; width: 24px; text-align: center; font-family: var(--font-body); }
.ttw-cart-remove {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-muted);
    font-family: var(--font-body);
    transition: color 150ms ease;
}
.ttw-cart-remove:hover { color: var(--color-foreground); }

.ttw-cart-footer {
    padding: 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ttw-cart-subtotal { display: flex; justify-content: space-between; font-size: 14px; font-family: var(--font-body); }
.ttw-cart-subtotal-label { color: var(--color-muted); }
.ttw-cart-subtotal-value { font-weight: 500; }
.ttw-cart-free-shipping { font-size: 14px; color: var(--color-muted); font-family: var(--font-body); }
.ttw-cart-checkout-btn {
    display: block;
    text-align: center;
    background: var(--color-foreground);
    color: var(--color-background);
    padding: 16px 24px;
    border-radius: var(--btn-radius);
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 200ms ease;
}
.ttw-cart-checkout-btn:hover { opacity: 0.9; }

/* ============================================================
   CONTACT MODAL
   ============================================================ */
.ttw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,18,8,0.5);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}
.ttw-modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.ttw-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: calc(100% - 48px);
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-background);
    z-index: 70;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(26,18,8,0.25);
    padding: 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
}
.ttw-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.ttw-modal-content { position: relative; }
.ttw-modal-close {
    position: absolute;
    top: -8px;
    right: -8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-foreground);
    opacity: 0.6;
    transition: opacity 150ms ease;
    display: flex;
}
.ttw-modal-close:hover { opacity: 1; }

.ttw-modal-title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 8px; color: var(--color-foreground); }
.ttw-modal-desc { font-family: var(--font-body); color: var(--color-muted); margin-bottom: 16px; }

.ttw-modal-contact-info { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; color: var(--color-muted); margin-bottom: 24px; }
.ttw-modal-contact-item { display: flex; align-items: center; gap: 8px; }
.ttw-modal-contact-link { color: var(--color-muted); text-decoration: none; transition: color 150ms ease; font-family: var(--font-body); }
.ttw-modal-contact-link:hover { color: var(--color-foreground); }

/* Form */
.ttw-contact-form { display: flex; flex-direction: column; gap: 16px; }
.ttw-form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .ttw-form-row { grid-template-columns: 1fr 1fr; } }
.ttw-form-group { display: flex; flex-direction: column; gap: 6px; }
.ttw-form-group label { font-size: 14px; font-weight: 500; color: var(--color-foreground); font-family: var(--font-body); }

.ttw-form-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    color: var(--color-foreground);
    font-family: var(--font-body);
    outline: none;
    transition: box-shadow 300ms ease, border-color 200ms ease;
}
.ttw-form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-20);
}
.ttw-form-textarea { resize: none; }

.ttw-form-footer { display: flex; justify-content: flex-end; }
.ttw-form-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-foreground);
    color: var(--color-background);
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: opacity 200ms ease;
}
.ttw-form-submit:hover { opacity: 0.85; }
.ttw-form-submit:disabled { opacity: 0.6; cursor: wait; }
.ttw-submit-sending { display: none; }
.ttw-form-submit.is-sending .ttw-submit-label { display: none; }
.ttw-form-submit.is-sending .ttw-submit-sending { display: inline; }

/* Success State */
.ttw-modal-success { display: none; text-align: center; padding: 32px 0; }
.ttw-modal-success.is-visible { display: block; }
.ttw-success-icon-wrap {
    width: 56px;
    height: 56px;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    color: var(--color-background);
    animation: successPop 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 150ms both;
}
@keyframes successPop { from { transform: scale(0); } to { transform: scale(1); } }
.ttw-success-title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 8px; }
.ttw-success-body { font-size: 14px; color: var(--color-muted); font-family: var(--font-body); }

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.ttw-single-product { padding-top: 80px; }
@media (min-width: 1024px) { .ttw-single-product { padding-top: 96px; } }

.ttw-product-breadcrumb { padding: 8px 0 16px; }
.ttw-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted);
    text-decoration: none;
    font-family: var(--font-body);
    transition: color 200ms ease;
}
.ttw-back-link:hover { color: var(--color-foreground); }

.ttw-product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 96px;
    padding-top: 16px;
    align-items: start;
}
@media (min-width: 1024px) {
    .ttw-product-layout {
        grid-template-columns: 7fr 5fr;
        gap: 64px;
    }
    .ttw-product-gallery { min-width: 0; }
    .ttw-product-info { position: sticky; top: 112px; }
}

.ttw-gallery-main-wrap {
    background: var(--color-foreground);
    padding: 16px;
    margin-bottom: 16px;
}
.ttw-gallery-main-img { width: 100%; height: auto; object-fit: contain; display: block; }
.ttw-product-thumbnails { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; flex-wrap: wrap; }
.ttw-thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(26,18,8,0.08);
    border: none;
    cursor: pointer;
    padding: 0;
}
.ttw-thumbnail img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: opacity 200ms ease; }
.ttw-thumbnail.is-active img, .ttw-thumbnail:hover img { opacity: 1; }
.ttw-thumbnail.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--color-foreground);
}

.ttw-gallery-desktop-main {
    background: var(--color-foreground);
    padding: 16px;
    margin-bottom: 16px;
}
.ttw-gallery-desktop-img { width: 100%; height: auto; object-fit: contain; display: block; }

/* Product Info */
.ttw-product-cat {
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-family: var(--font-body);
    margin-bottom: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.ttw-product-cat a { color: var(--color-muted); text-decoration: none; transition: color 150ms ease; }
.ttw-product-cat a:hover { color: var(--color-accent); }

.ttw-product-title, .product-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 20px;
}
.ttw-product-price { font-size: 1.25rem; color: var(--color-foreground); margin-bottom: 24px; font-family: var(--font-body); }
.ttw-product-price .price { font-size: 1.25rem; }
.ttw-out-of-stock-badge {
    display: inline-block;
    background: rgba(26,18,8,0.08);
    color: var(--color-foreground);
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--btn-radius);
    margin-bottom: 16px;
    font-family: var(--font-body);
}
.ttw-product-description { color: var(--color-muted); line-height: 1.75; margin-bottom: 32px; font-family: var(--font-body); overflow-wrap: break-word; word-break: break-word; }

/* Quantity + Add to Cart */
.ttw-add-to-cart-area, .theme-add-to-cart-area {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.ttw-quantity-wrapper, .theme-quantity-wrapper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
}
.ttw-qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
}
.ttw-qty-btn:hover { background: rgba(26,18,8,0.06); }
.ttw-qty-input, .theme-qty-input {
    width: 44px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    padding: 8px 4px;
    font-size: 14px;
    font-family: var(--font-body);
    background: transparent;
    -moz-appearance: textfield;
}
.ttw-qty-input::-webkit-outer-spin-button,
.ttw-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.ttw-add-to-cart-btn {
    flex: 1 1 auto;
    min-width: 160px;
    border-radius: 9999px;
}

/* Variation form */
.variations { width: 100%; border: none; }
.variations tbody tr, .variations tbody td { display: block; width: 100%; }
.variations .label { padding-bottom: 4px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted); font-family: var(--font-body); }
.variations .label label { font-family: var(--font-body); font-weight: 600; font-style: normal; }
.variations .value { margin-bottom: 16px; }
.theme-attr-select-hidden { display: none !important; }

.ttw-variation-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ttw-variation-pill {
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 200ms ease;
}
.ttw-variation-pill:hover { border-color: rgba(26,18,8,0.5); }
.ttw-variation-pill.is-selected { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }

/* Details / Short desc */
.ttw-product-details { margin-top: 32px; }
.ttw-details-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-foreground); margin-bottom: 12px; font-family: var(--font-body); }
.ttw-details-content { font-size: 15px; color: var(--color-muted); line-height: 1.7; font-family: var(--font-body); }

/* Accordions */
.ttw-product-accordions { margin-top: 40px; border-top: 1px solid var(--color-border); }
.ttw-accordion-item { border-bottom: 1px solid var(--color-border); }
.ttw-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-family: var(--font-body);
    color: var(--color-foreground);
}
.ttw-accordion-trigger svg { transition: transform 200ms ease; flex-shrink: 0; }
.ttw-accordion-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.ttw-accordion-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms ease;
}
.ttw-accordion-panel[aria-hidden="false"] { max-height: 500px; }
.ttw-accordion-panel p { font-size: 15px; color: var(--color-muted); line-height: 1.75; margin-bottom: 12px; font-family: var(--font-body); }
.ttw-accordion-panel p:last-child { padding-bottom: 24px; }

/* Related Products */
.ttw-related-section {
    padding: 80px 0;
    border-top: 1px solid var(--color-border);
}
.ttw-related-header { text-align: center; margin-bottom: 48px; }
.ttw-related-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--color-muted); margin-bottom: 8px; }
.ttw-related-heading { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.ttw-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (min-width: 1024px) { .ttw-related-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

/* ============================================================
   WooCommerce ARCHIVE / SHOP PAGE
   ============================================================ */
.ttw-shop-archive { padding-top: 80px; }
@media (min-width: 1024px) { .ttw-shop-archive { padding-top: 96px; } }
.ttw-archive-header { padding: 24px 0; }
.ttw-archive-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; font-family: var(--font-body); }
.ttw-no-products { color: var(--color-muted); font-family: var(--font-body); padding: 40px 0; }

/* ============================================================
   INNER PAGES (non-homepage)
   ============================================================ */
.ttw-inner-page { padding-top: 80px; }
@media (min-width: 1024px) { .ttw-inner-page { padding-top: 96px; } }

.ttw-page-content { padding-top: 32px; padding-bottom: 64px; }
.page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    font-family: var(--font-body);
    color: var(--color-foreground);
    margin-bottom: 24px;
}
.entry-content { font-family: var(--font-body); line-height: 1.7; color: var(--color-foreground); }
.entry-content h2, .entry-content h3 { font-weight: 700; font-family: var(--font-body); margin: 24px 0 12px; }
.entry-content p { margin-bottom: 16px; }

/* ============================================================
   WooCommerce NOTICES
   ============================================================ */
.single-product .woocommerce-message,
.single-product .woocommerce-info { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--color-surface);
    border-left: 4px solid var(--color-accent);
    padding: 12px 16px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: 16px;
}

/* ============================================================
   CHECKOUT
   ============================================================ */
body.woocommerce-checkout .site-main { padding-top: var(--header-height, 72px); 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 1fr;
        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-checkout__sidebar {
    background-color: var(--color-surface);
    border-radius: var(--card-radius);
    padding: 2rem;
}
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-foreground);
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus { border-color: var(--color-primary); }
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background: var(--color-foreground) !important;
    color: var(--color-background) !important;
    border-radius: var(--btn-radius) !important;
    font-family: var(--font-body) !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { opacity: 0.9; }

/* ============================================================
   THANK YOU PAGE
   ============================================================ */
.ttw-thankyou-wrap { padding: 40px 0; }
body.theme-thankyou-page .woocommerce-order { max-width: 720px; }
body.theme-thankyou-page .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin-bottom: 32px; }
body.theme-thankyou-page .woocommerce-order-overview li { font-family: var(--font-body); font-size: 14px; }
body.theme-thankyou-page .woocommerce-order-details table { width: 100%; table-layout: fixed; border-collapse: collapse; }
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-order-details__title { padding: 0 0 1rem; font-size: 1.25rem; font-weight: 700; font-family: var(--font-body); }
body.theme-thankyou-page .woocommerce-customer-details { display: flex; flex-direction: column; gap: 1.5rem; }
body.theme-thankyou-page { overflow-x: hidden; }

/* ============================================================
   404
   ============================================================ */
.ttw-404 { display: flex; align-items: center; min-height: calc(100vh - 200px); }
.ttw-404-content { width: 100%; }
.ttw-404-inner { max-width: 520px; margin: 0 auto; text-align: center; padding: 80px 0; }
.ttw-404-heading { font-size: clamp(4rem, 10vw, 8rem); font-weight: 900; color: var(--color-foreground); font-family: var(--font-body); line-height: 1; margin: 16px 0; }
.ttw-404-message { color: var(--color-muted); font-family: var(--font-body); margin-bottom: 40px; }
.ttw-404-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   REVEAL / SCROLL ANIMATIONS
   ============================================================ */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-on-scroll[data-reveal="slide-right"] {
    transform: translateX(-20px);
}
.reveal-on-scroll[data-reveal="slide-right"].is-revealed {
    transform: translateX(0);
}
.reveal-on-scroll[data-reveal="fade-in"] {
    transform: scale(1.04);
}
.reveal-on-scroll[data-reveal="fade-in"].is-revealed {
    transform: scale(1);
}
.reveal-on-scroll[data-reveal="scale-in"] {
    transform: scale(1.05);
}
.reveal-on-scroll[data-reveal="scale-in"].is-revealed {
    transform: scale(1);
}
.reveal-on-scroll[data-reveal="strip-reveal"] { transform: none; }
.reveal-on-scroll[data-reveal="owner-reveal"] { transform: none; }
.reveal-on-scroll[data-reveal="banner-reveal"] { transform: none; }

/* Customizer fallback: reveal classes always visible */
.is-customizer .reveal-on-scroll,
.is-customizer .reveal-hero-line,
.is-customizer .reveal-hero-sub,
.is-customizer .reveal-hero-ctas,
.is-customizer .reveal-photo,
.is-customizer .reveal-text,
.is-customizer .ttw-slide-x {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ownerBadgeSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================
   WOOCOMMERCE NOTICES SCOPED
   ============================================================ */
.single-product .woocommerce-message,
.single-product .woocommerce-info { display: none; }
#theme-cart-drawer .woocommerce-message { display: none; }