/* ==========================================================================
   TEESZIGN STOREFRONT
   Editorial luxe minimalism inspired by premium streetwear houses.
   Colour: cream + ink. Type: Anton (display) + Cormorant Italic (accents)
           + Manrope (body).  Motion: slow, refined, magazine-paced.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    --tz-bone:        #F4EFE6;   /* main bg — warm cream */
    --tz-bone-soft:   #ECE5D8;   /* card/section accent */
    --tz-bone-dark:   #DCD2BE;   /* dividers / secondary surfaces */
    --tz-ink:         #15110D;   /* primary text — almost-black, warm */
    --tz-ink-soft:    #4A4238;   /* body text */
    --tz-ink-mute:    #8B8170;   /* muted */
    --tz-line:        #C7BCA7;   /* borders */
    --tz-night:       #0A0907;   /* dark sections */
    --tz-night-soft:  #1A1612;
    --tz-accent:      #7A1F1F;   /* deep oxblood — sparingly used */

    --tz-font-display: 'Anton', 'Bebas Neue', Impact, sans-serif;
    --tz-font-italic:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --tz-font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

    --tz-max:        1440px;
    --tz-pad:        clamp(20px, 4vw, 56px);
    --tz-radius:     2px;        /* sharp, not rounded */

    --tz-ease:       cubic-bezier(.2, .7, .2, 1);
    --tz-dur:        .55s;
}

/* ---------- Reset within plugin scope ---------- */
.tz-header *, .tz-marquee *, .tz-hero *, .tz-categories *, .tz-lookbook *,
.tz-shop *, .tz-story *, .tz-newsletter *, .tz-footer *,
.tz-mobile-menu *, .tz-search-overlay * {
    box-sizing: border-box;
}

/* Make sure host theme doesn't fight us on these sections */
.tz-header, .tz-hero, .tz-categories, .tz-lookbook,
.tz-shop, .tz-story, .tz-newsletter, .tz-footer {
    font-family: var(--tz-font-body);
    color: var(--tz-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

.tz-header img, .tz-hero img, .tz-categories img, .tz-lookbook img,
.tz-shop img, .tz-footer img { max-width: 100%; height: auto; display: block; }

.tz-header a, .tz-hero a, .tz-categories a, .tz-lookbook a,
.tz-shop a, .tz-story a, .tz-newsletter a, .tz-footer a {
    color: inherit;
    text-decoration: none;
}

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

/* Page background — applies once shortcode is on the page */
body:has(.tz-hero) { background: var(--tz-bone); margin: 0; }

/* ==========================================================================
   1. HEADER
   ========================================================================== */
.tz-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--tz-bone);
    border-bottom: 1px solid var(--tz-line);
    transition: background var(--tz-dur) var(--tz-ease),
                border-color var(--tz-dur) var(--tz-ease);
}

.tz-header-inner {
    max-width: var(--tz-max);
    margin: 0 auto;
    padding: 18px var(--tz-pad);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

/* --- Left nav --- */
.tz-nav--left .tz-nav-list {
    display: flex; gap: 36px;
    list-style: none; margin: 0; padding: 0;
}
.tz-nav--left a {
    font-family: var(--tz-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tz-ink);
    position: relative;
    padding: 6px 0;
    transition: color .25s var(--tz-ease);
}
.tz-nav--left a::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--tz-ink);
    transition: width .35s var(--tz-ease);
}
.tz-nav--left a:hover::after { width: 100%; }

/* --- Center logo --- */
.tz-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    max-width: 280px;
}
.tz-logo-img {
    height: 78px !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100px !important;
    object-fit: contain;
    display: block !important;
    transition: opacity .3s var(--tz-ease);
}

/* --- Right utility --- */
.tz-nav--right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.tz-icon-btn {
    background: none; border: 0; cursor: pointer;
    padding: 10px;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--tz-ink);
    font-family: var(--tz-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    position: relative;
    transition: opacity .25s var(--tz-ease);
}
.tz-icon-btn svg { width: 19px; height: 19px; }
.tz-icon-btn:hover { opacity: .65; }
.tz-icon-label { display: inline; }

.tz-bag-count {
    position: absolute;
    top: 4px; right: 2px;
    font-size: 10px;
    background: var(--tz-ink);
    color: var(--tz-bone);
    border-radius: 999px;
    min-width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
    letter-spacing: 0;
}

/* --- Burger (mobile) --- */
.tz-burger {
    display: none;
    background: none; border: 0; cursor: pointer;
    width: 28px; height: 24px;
    padding: 0;
    flex-direction: column; justify-content: space-between;
}
.tz-burger span {
    display: block;
    height: 1.5px; width: 100%;
    background: var(--tz-ink);
    transition: transform .3s var(--tz-ease), opacity .3s var(--tz-ease);
}
.tz-burger.is-open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.tz-burger.is-open span:nth-child(2) { opacity: 0; }
.tz-burger.is-open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* --- Search overlay --- */
.tz-search-overlay {
    position: fixed; inset: 0;
    background: rgba(244, 239, 230, .98);
    z-index: 200;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 18vh;
    animation: tzFade .3s var(--tz-ease);
}
.tz-search-overlay[hidden] { display: none; }
.tz-search-inner {
    width: min(720px, 92vw);
    position: relative;
}
.tz-search-inner form {
    display: flex; align-items: center;
    border-bottom: 1px solid var(--tz-ink);
    padding-bottom: 14px;
}
.tz-search-inner input {
    flex: 1;
    border: 0; background: transparent;
    font-family: var(--tz-font-display);
    font-size: clamp(28px, 5vw, 56px);
    letter-spacing: .02em;
    color: var(--tz-ink);
    outline: none;
}
.tz-search-inner input::placeholder { color: var(--tz-ink-mute); }
.tz-search-inner button[type="submit"] {
    background: none; border: 0; cursor: pointer;
    color: var(--tz-ink); padding: 8px;
}
.tz-search-inner button[type="submit"] svg { width: 28px; height: 28px; }
.tz-search-close {
    position: absolute; top: -56px; right: 0;
    background: none; border: 0; cursor: pointer;
    font-size: 40px; color: var(--tz-ink);
    line-height: 1; padding: 0;
}

/* --- Mobile menu --- */
.tz-mobile-menu {
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: var(--tz-bone);
    z-index: 90;
    padding: 40px var(--tz-pad);
    animation: tzSlideDown .35s var(--tz-ease);
}
.tz-mobile-menu[hidden] { display: none; }
.tz-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.tz-mobile-menu li { padding: 14px 0; border-bottom: 1px solid var(--tz-line); }
.tz-mobile-menu li.tz-mobile-divider { border: 0; height: 16px; }
.tz-mobile-menu a {
    font-family: var(--tz-font-display);
    font-size: 32px;
    letter-spacing: .04em;
    color: var(--tz-ink);
    text-transform: uppercase;
}

@keyframes tzFade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes tzSlideDown { from { transform: translateY(-12px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ==========================================================================
   2. MARQUEE
   ========================================================================== */
.tz-marquee {
    background: var(--tz-night);
    color: var(--tz-bone);
    overflow: hidden;
    padding: 12px 0;
    border-bottom: 1px solid var(--tz-night-soft);
}
.tz-marquee-track {
    display: flex; gap: 32px;
    white-space: nowrap;
    animation: tzMarquee 38s linear infinite;
    will-change: transform;
}
.tz-marquee-item {
    font-family: var(--tz-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
}
.tz-marquee-dot {
    color: var(--tz-ink-mute);
    font-size: 10px;
}
@keyframes tzMarquee {
    from { transform: translateX(0) }
    to   { transform: translateX(-50%) }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.tz-hero {
    position: relative;
    overflow: hidden;
    background: var(--tz-night);
    margin: 0;
}
.tz-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    animation: tzHeroIn 1.4s var(--tz-ease) both;
}
@keyframes tzHeroIn {
    from { transform: scale(1.04); opacity: .6 }
    to   { transform: none;        opacity: 1 }
}

.tz-hero-meta {
    position: absolute;
    left: var(--tz-pad);
    bottom: clamp(20px, 4vw, 48px);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    color: var(--tz-bone);
    z-index: 2;
    animation: tzHeroMetaIn 1.2s var(--tz-ease) .6s both;
}
@keyframes tzHeroMetaIn {
    from { opacity: 0; transform: translateY(20px) }
    to   { opacity: 1; transform: none }
}

.tz-hero-eyebrow {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 16px;
    letter-spacing: .04em;
    color: rgba(244, 239, 230, .85);
}

.tz-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--tz-bone);
    color: var(--tz-ink);
    font-family: var(--tz-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: background .3s var(--tz-ease), color .3s var(--tz-ease), transform .3s var(--tz-ease);
}
.tz-hero-cta:hover {
    background: var(--tz-ink);
    color: var(--tz-bone);
    transform: translateY(-1px);
}
.tz-hero-cta svg { width: 16px; height: 16px; }

/* ==========================================================================
   4. SECTION HEADS (shared)
   ========================================================================== */
.tz-section-head {
    max-width: var(--tz-max);
    margin: clamp(60px, 9vw, 120px) auto clamp(28px, 4vw, 56px);
    padding: 0 var(--tz-pad);
    text-align: left;
}
.tz-section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}
.tz-section-eyebrow {
    display: block;
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 17px;
    color: var(--tz-ink-mute);
    margin-bottom: 12px;
    letter-spacing: .02em;
}
.tz-section-eyebrow--light { color: rgba(244, 239, 230, .65); }
.tz-section-title {
    font-family: var(--tz-font-display);
    font-size: clamp(48px, 8vw, 112px);
    letter-spacing: .015em;
    line-height: .95;
    margin: 0;
    text-transform: uppercase;
    color: var(--tz-ink);
}

/* ==========================================================================
   5. CATEGORIES
   ========================================================================== */
.tz-categories { padding-bottom: clamp(40px, 6vw, 80px); }
.tz-cat-grid {
    max-width: var(--tz-max);
    margin: 0 auto;
    padding: 0 var(--tz-pad);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.tz-cat-card {
    display: block;
    transition: transform .5s var(--tz-ease);
    position: relative;
}
.tz-cat-card-imgwrap {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--tz-bone-soft);
    border: 1px solid var(--tz-line);
    position: relative;
}

/* Real category photo */
.tz-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .8s var(--tz-ease), filter .5s var(--tz-ease);
    display: block;
}
.tz-cat-card:hover .tz-cat-img { transform: scale(1.04); }

/* Editorial number — top-left of tile */
.tz-cat-num {
    position: absolute;
    top: 16px;
    left: 18px;
    font-family: var(--tz-font-display);
    font-size: 32px;
    line-height: .8;
    color: var(--tz-ink);
    letter-spacing: .04em;
    z-index: 2;
    background: var(--tz-bone);
    padding: 4px 10px 2px;
    border: 1px solid var(--tz-ink);
}

/* Slogan tag — bottom of tile */
.tz-cat-overlay-tag {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 18px;
    color: var(--tz-bone);
    letter-spacing: .015em;
    z-index: 2;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--tz-ease), transform .4s var(--tz-ease);
}
.tz-cat-card:hover .tz-cat-overlay-tag {
    opacity: 1;
    transform: none;
}

/* Soft gradient on hover for legibility */
.tz-cat-card-imgwrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(21,17,13,.55) 100%);
    opacity: 0;
    transition: opacity .4s var(--tz-ease);
    pointer-events: none;
}
.tz-cat-card:hover .tz-cat-card-imgwrap::after { opacity: 1; }

.tz-cat-card-meta {
    padding: 18px 4px 0;
    display: flex; justify-content: space-between; align-items: baseline;
}
.tz-cat-card-meta h3 {
    font-family: var(--tz-font-display);
    font-size: 30px;
    letter-spacing: .04em;
    margin: 0;
    text-transform: uppercase;
}
.tz-cat-link {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 16px;
    color: var(--tz-ink-mute);
    transition: color .25s var(--tz-ease);
}
.tz-cat-card:hover .tz-cat-link { color: var(--tz-ink); }


/* ==========================================================================
   6. LOOKBOOK — editorial asymmetric grid
   ========================================================================== */
.tz-lookbook {
    background: var(--tz-bone);
    padding: clamp(60px, 9vw, 120px) 0 clamp(60px, 9vw, 120px);
    position: relative;
}
.tz-lookbook::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: var(--tz-line);
}

.tz-lookbook-intro {
    max-width: var(--tz-max);
    margin: 0 auto clamp(40px, 6vw, 80px);
    padding: 0 var(--tz-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
}

.tz-lookbook-title {
    font-family: var(--tz-font-display);
    font-size: clamp(64px, 12vw, 180px);
    letter-spacing: .01em;
    line-height: .9;
    margin: 0;
    text-transform: uppercase;
}
.tz-lookbook-italic {
    display: block;
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: .35em;
    font-weight: 400;
    color: var(--tz-ink-mute);
    text-transform: none;
    letter-spacing: .02em;
    margin-top: 12px;
}
.tz-lookbook-blurb {
    font-size: 16px;
    line-height: 1.65;
    color: var(--tz-ink-soft);
    max-width: 460px;
    margin: 0;
}

.tz-lookbook-grid {
    max-width: var(--tz-max);
    margin: 0 auto;
    padding: 0 var(--tz-pad);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 80px;
    gap: 16px;
}

/* Asymmetric placement for editorial feel */
.tz-look--01 { grid-column: 1 / 6;  grid-row: span 7; }
.tz-look--02 { grid-column: 6 / 13; grid-row: span 5; }
.tz-look--03 { grid-column: 6 / 9;  grid-row: span 4; }
.tz-look--04 { grid-column: 9 / 13; grid-row: span 4; }
.tz-look--05 { grid-column: 1 / 7;  grid-row: span 6; }
.tz-look--06 { grid-column: 7 / 13; grid-row: span 6; }

.tz-look {
    margin: 0;
    overflow: hidden;
    position: relative;
}
.tz-look-img {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--tz-bone-soft), var(--tz-bone-dark));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: transform .8s var(--tz-ease);
    position: relative;
}
.tz-look-img::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 14px,
        rgba(21, 17, 13, .03) 14px,
        rgba(21, 17, 13, .03) 15px
    );
}
.tz-look-fallback {
    font-family: var(--tz-font-display);
    font-size: 28px;
    letter-spacing: .15em;
    color: var(--tz-ink-mute);
    z-index: 1;
}
.tz-look:hover .tz-look-img { transform: scale(1.04); }

/* Distinct gradients per frame for visual variety */
.tz-look--01 .tz-look-img { background: linear-gradient(160deg, #1A1612 0%, #2A2620 100%); }
.tz-look--01 .tz-look-fallback { color: var(--tz-bone-soft); }
.tz-look--02 .tz-look-img { background: linear-gradient(135deg, #DCD2BE 0%, #ECE5D8 100%); }
.tz-look--03 .tz-look-img { background: linear-gradient(160deg, #4A1212 0%, #7A1F1F 100%); }
.tz-look--03 .tz-look-fallback { color: rgba(244, 239, 230, .75); }
.tz-look--04 .tz-look-img { background: linear-gradient(135deg, #ECE5D8 0%, #C7BCA7 100%); }
.tz-look--05 .tz-look-img { background: linear-gradient(160deg, #2A2620 0%, #15110D 100%); }
.tz-look--05 .tz-look-fallback { color: var(--tz-bone-soft); }
.tz-look--06 .tz-look-img { background: linear-gradient(135deg, #C7BCA7 0%, #DCD2BE 100%); }

.tz-look figcaption {
    position: absolute;
    left: 14px; bottom: 14px;
    display: flex; flex-direction: column; gap: 4px;
    font-family: var(--tz-font-body);
    font-size: 11px;
    color: var(--tz-bone);
    text-transform: uppercase;
    letter-spacing: .15em;
    z-index: 2;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.tz-look--02 figcaption,
.tz-look--04 figcaption,
.tz-look--06 figcaption { color: var(--tz-ink); text-shadow: none; }
.tz-look-num { opacity: .7; }
.tz-look-name { font-weight: 500; }

.tz-lookbook-cta {
    text-align: center;
    margin-top: clamp(48px, 6vw, 80px);
    padding: 0 var(--tz-pad);
}

/* ==========================================================================
   7. SHOP GRID
   ========================================================================== */
.tz-shop {
    background: var(--tz-bone-soft);
    padding-bottom: clamp(60px, 9vw, 120px);
    border-top: 1px solid var(--tz-line);
}

.tz-shop-filters {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.tz-pill {
    background: transparent;
    border: 1px solid var(--tz-line);
    padding: 9px 18px;
    font-family: var(--tz-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .25s var(--tz-ease);
    color: var(--tz-ink);
    border-radius: 0;
}
.tz-pill:hover { border-color: var(--tz-ink); }
.tz-pill.is-active {
    background: var(--tz-ink);
    color: var(--tz-bone);
    border-color: var(--tz-ink);
}

.tz-shop-grid {
    max-width: var(--tz-max);
    margin: 0 auto;
    padding: 0 var(--tz-pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
}

.tz-product {
    display: block;
    transition: transform .4s var(--tz-ease);
}
.tz-product[hidden] { display: none; }
.tz-product:hover { transform: translateY(-3px); }

.tz-product-imgwrap {
    aspect-ratio: 4 / 5;
    background: var(--tz-bone);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--tz-line);
}
.tz-product-imgwrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--tz-ease);
}
.tz-product:hover .tz-product-imgwrap img { transform: scale(1.06); }

.tz-product-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--tz-font-display);
    font-size: 22px;
    letter-spacing: .25em;
    color: var(--tz-ink-mute);
}
.tz-product-placeholder--1 { background: linear-gradient(135deg, #ECE5D8 0%, #DCD2BE 100%); }
.tz-product-placeholder--2 { background: linear-gradient(135deg, #2A2620 0%, #15110D 100%); color: var(--tz-bone-soft); }
.tz-product-placeholder--3 { background: linear-gradient(135deg, #DCD2BE 0%, #C7BCA7 100%); }
.tz-product-placeholder--4 { background: linear-gradient(135deg, #4A1212 0%, #7A1F1F 100%); color: rgba(244, 239, 230, .8); }

.tz-product-tag {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--tz-ink);
    color: var(--tz-bone);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 5px 10px;
}

.tz-product-meta {
    padding: 14px 4px 0;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px;
}
.tz-product-meta h3 {
    font-family: var(--tz-font-body);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: var(--tz-ink);
    letter-spacing: .01em;
}
.tz-product-price {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 16px;
    color: var(--tz-ink-soft);
    white-space: nowrap;
}

.tz-shop-note {
    max-width: var(--tz-max);
    margin: 32px auto 0;
    padding: 0 var(--tz-pad);
    text-align: center;
    color: var(--tz-ink-mute);
    font-size: 13px;
    font-family: var(--tz-font-italic);
}

.tz-shop-cta { text-align: center; margin-top: 56px; padding: 0 var(--tz-pad); }

/* ==========================================================================
   8. STORY STRIP (dark)
   ========================================================================== */
.tz-story {
    background: var(--tz-night);
    color: var(--tz-bone);
    padding: clamp(80px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}
.tz-story::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(800px circle at 80% 30%, rgba(122, 31, 31, .15), transparent 60%),
        radial-gradient(600px circle at 10% 80%, rgba(244, 239, 230, .04), transparent 60%);
    pointer-events: none;
}

.tz-story-inner {
    max-width: var(--tz-max);
    margin: 0 auto;
    padding: 0 var(--tz-pad);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
}

.tz-story-title {
    font-family: var(--tz-font-display);
    font-size: clamp(44px, 7vw, 96px);
    line-height: .95;
    letter-spacing: .015em;
    margin: 12px 0 28px;
    text-transform: uppercase;
}
.tz-story-title em {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    color: var(--tz-bone-dark);
    display: inline-block;
    padding: 0 4px;
}

.tz-story-body {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(244, 239, 230, .8);
    max-width: 580px;
    margin: 0 0 32px;
}

.tz-story-side { text-align: right; }
.tz-story-num {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 18px;
    color: rgba(244, 239, 230, .55);
    line-height: 1.3;
}
.tz-story-num span {
    display: block;
    font-family: var(--tz-font-display);
    font-style: normal;
    font-size: clamp(80px, 12vw, 160px);
    color: var(--tz-bone);
    letter-spacing: .01em;
    line-height: 1;
}

/* ==========================================================================
   9. NEWSLETTER
   ========================================================================== */
.tz-newsletter {
    background: var(--tz-bone);
    padding: clamp(80px, 11vw, 140px) var(--tz-pad);
    text-align: center;
    border-top: 1px solid var(--tz-line);
}
.tz-newsletter-inner { max-width: 640px; margin: 0 auto; }
.tz-newsletter-title {
    font-family: var(--tz-font-display);
    font-size: clamp(40px, 6vw, 80px);
    line-height: .95;
    letter-spacing: .015em;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.tz-newsletter-blurb {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 18px;
    color: var(--tz-ink-soft);
    margin: 0 0 32px;
}
.tz-newsletter-form {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--tz-ink);
    padding-bottom: 12px;
    position: relative;
}
.tz-newsletter-form input {
    flex: 1;
    border: 0; background: transparent;
    font-family: var(--tz-font-body);
    font-size: 16px;
    padding: 8px 0;
    outline: none;
    color: var(--tz-ink);
}
.tz-newsletter-form input::placeholder { color: var(--tz-ink-mute); }
.tz-newsletter-form button {
    background: none; border: 0; cursor: pointer;
    font-family: var(--tz-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tz-ink);
    padding: 8px 0 8px 16px;
    transition: opacity .25s var(--tz-ease);
}
.tz-newsletter-form button:hover { opacity: .65; }
.tz-newsletter-thanks {
    position: absolute;
    left: 0; right: 0; bottom: -32px;
    font-family: var(--tz-font-italic);
    font-style: italic;
    color: var(--tz-accent);
    font-size: 14px;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.tz-footer {
    background: var(--tz-night);
    color: var(--tz-bone);
    padding: clamp(60px, 8vw, 100px) 0 24px;
}
.tz-footer-inner {
    max-width: var(--tz-max);
    margin: 0 auto;
    padding: 0 var(--tz-pad);
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: 64px;
}
.tz-footer-brand img.tz-footer-logo {
    width: 140px; height: auto;
    margin-bottom: 16px;
    opacity: .95;
}
.tz-footer-brand p {
    font-family: var(--tz-font-italic);
    font-size: 16px;
    color: rgba(244, 239, 230, .65);
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}
.tz-footer-brand em { color: var(--tz-bone); font-weight: 500; }

.tz-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.tz-footer-cols h4 {
    font-family: var(--tz-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--tz-bone);
    margin: 0 0 18px;
}
.tz-footer-cols ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.tz-footer-cols a {
    font-size: 14px;
    color: rgba(244, 239, 230, .65);
    transition: color .2s var(--tz-ease);
}
.tz-footer-cols a:hover { color: var(--tz-bone); }

.tz-footer-bottom {
    max-width: var(--tz-max);
    margin: 60px auto 0;
    padding: 24px var(--tz-pad) 0;
    border-top: 1px solid rgba(244, 239, 230, .12);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: rgba(244, 239, 230, .5);
    letter-spacing: .05em;
}

/* ==========================================================================
   11. BUTTONS (shared)
   ========================================================================== */
.tz-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: var(--tz-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s var(--tz-ease);
    border: 1px solid var(--tz-ink);
}
.tz-btn--solid { background: var(--tz-ink); color: var(--tz-bone); }
.tz-btn--solid:hover { background: var(--tz-bone); color: var(--tz-ink); }
.tz-btn--ghost { background: transparent; color: var(--tz-ink); }
.tz-btn--ghost:hover { background: var(--tz-ink); color: var(--tz-bone); }
.tz-btn--ghost-light {
    background: transparent;
    color: var(--tz-bone);
    border-color: var(--tz-bone);
}
.tz-btn--ghost-light:hover { background: var(--tz-bone); color: var(--tz-ink); }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .tz-shop-grid { grid-template-columns: repeat(3, 1fr); }
    .tz-icon-label { display: none; }

    .tz-lookbook-intro { grid-template-columns: 1fr; gap: 24px; }
    .tz-story-inner { grid-template-columns: 1fr; }
    .tz-story-side { text-align: left; }

    .tz-footer-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Mobile */
@media (max-width: 720px) {
    .tz-header-inner {
        grid-template-columns: 1fr auto 1fr;
        padding: 14px var(--tz-pad);
        gap: 12px;
    }
    .tz-nav--left .tz-nav-list { display: none; }
    .tz-burger { display: flex; }
    .tz-icon-btn:not(.tz-icon-btn--bag):not(#tzSearchBtn) { display: none; }
    .tz-logo { height: auto; max-width: 180px; }
    .tz-logo-img { height: 52px !important; max-width: 100% !important; }

    .tz-cat-grid { grid-template-columns: 1fr; }

    /* Lookbook stacks into 2-col */
    .tz-lookbook-grid { grid-auto-rows: 60px; gap: 10px; }
    .tz-look--01 { grid-column: 1 / 13; grid-row: span 5; }
    .tz-look--02 { grid-column: 1 / 13; grid-row: span 4; }
    .tz-look--03 { grid-column: 1 / 7;  grid-row: span 4; }
    .tz-look--04 { grid-column: 7 / 13; grid-row: span 4; }
    .tz-look--05 { grid-column: 1 / 13; grid-row: span 5; }
    .tz-look--06 { grid-column: 1 / 13; grid-row: span 5; }

    .tz-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
    .tz-section-head--split { flex-direction: column; align-items: flex-start; }
    .tz-shop-filters { width: 100%; overflow-x: auto; }

    .tz-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .tz-footer-bottom { font-size: 11px; }

    .tz-marquee-track { animation-duration: 24s; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .tz-marquee-track { animation: none; }
    .tz-hero-img, .tz-hero-meta, .tz-product-imgwrap img,
    .tz-cat-placeholder, .tz-look-img { animation: none; transition: none; }
}

/* ==========================================================================
   12. HERO TEXT OVERLAY (v1.2.0)
   Headline is now real HTML overlaid on a clean dark image — never overlaps
   the model, stays sharp at every resolution, edits live from hero.php.
   ========================================================================== */

.tz-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 9, 7, .82) 0%,
        rgba(10, 9, 7, .55) 38%,
        rgba(10, 9, 7, 0)   68%
    );
    z-index: 1;
    pointer-events: none;
}

.tz-hero-text {
    position: absolute;
    top: 50%;
    left: var(--tz-pad);
    transform: translateY(-50%);
    z-index: 2;
    max-width: 54%;
    pointer-events: none;
    animation: tzHeroMetaIn 1.2s var(--tz-ease) .3s both;
}

.tz-hero-title {
    margin: 0;
    line-height: .92;
    color: var(--tz-bone);
}

.tz-hero-line-1 {
    display: block;
    font-family: var(--tz-font-display);
    font-size: clamp(40px, 7.2vw, 120px);
    text-transform: uppercase;
    letter-spacing: -.015em;
    -webkit-text-stroke: 1.5px var(--tz-bone);
    color: transparent;
}

.tz-hero-line-2 {
    display: block;
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 5.2vw, 84px);
    color: var(--tz-bone);
    margin-top: .12em;
    letter-spacing: -.005em;
}

.tz-hero-meta { z-index: 3; }

@media (max-width: 1024px) {
    .tz-hero-text { max-width: 66%; }
    .tz-hero-veil {
        background: linear-gradient(
            90deg,
            rgba(10, 9, 7, .82) 0%,
            rgba(10, 9, 7, .58) 50%,
            rgba(10, 9, 7, .18) 100%
        );
    }
}

@media (max-width: 640px) {
    .tz-hero-text {
        max-width: 92%;
        top: auto;
        bottom: 28%;
        transform: none;
    }
    .tz-hero-line-1 { -webkit-text-stroke-width: 1.2px; }
    .tz-hero-veil {
        background: linear-gradient(
            180deg,
            rgba(10, 9, 7, .35) 0%,
            rgba(10, 9, 7, .75) 100%
        );
    }
}

/* ==========================================================================
   13. HOST THEME RESET (v1.2.0)
   When [teeszign_homepage] or [teeszign_header] is on the page, the plugin
   tags <body class="tz-storefront-active"> via PHP. We use that class to
   silently hide the host theme's (Astra, etc.) header & footer plus reset
   any inherited content padding/max-widths. This means the user does NOT
   need to manually disable the theme's chrome — drop the shortcode, set
   the page as homepage, and the storefront renders edge-to-edge.
   ========================================================================== */

body.tz-storefront-active #masthead,
body.tz-storefront-active .site-header,
body.tz-storefront-active header.site-header,
body.tz-storefront-active #colophon,
body.tz-storefront-active .site-footer,
body.tz-storefront-active footer.site-footer,
body.tz-storefront-active .ast-above-header-wrap,
body.tz-storefront-active .ast-below-header-wrap,
body.tz-storefront-active .ast-primary-header-bar,
body.tz-storefront-active .ast-header-break-point .main-header-bar,
body.tz-storefront-active .entry-header,
body.tz-storefront-active .entry-title,
body.tz-storefront-active .post-thumb,
body.tz-storefront-active .ast-single-entry-banner,
body.tz-storefront-active .ast-archive-description,
body.tz-storefront-active .ast-pagination,
body.tz-storefront-active .post-navigation,
body.tz-storefront-active .ast-author-details {
    display: none !important;
}

body.tz-storefront-active,
body.tz-storefront-active .ast-container,
body.tz-storefront-active .site-content,
body.tz-storefront-active #content,
body.tz-storefront-active #primary,
body.tz-storefront-active .content-area,
body.tz-storefront-active .entry-content,
body.tz-storefront-active .ast-article-single,
body.tz-storefront-active .ast-article-post,
body.tz-storefront-active main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: var(--tz-bone) !important;
}

body.tz-storefront-active .entry-content > *:first-child { margin-top: 0 !important; }
body.tz-storefront-active .entry-content > *:last-child  { margin-bottom: 0 !important; }

/* ==========================================================================
   14. v1.3.0 PATCHES — logo, search, hero hover, categories, lookbook
   ========================================================================== */

/* --- LOGO: show full artwork (smiley + bracket frame + name) --------------- */
.tz-logo {
    height: auto;
    padding: 6px 0;
}
.tz-logo-img {
    height: 78px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
}
@media (max-width: 1024px) { .tz-logo-img { height: 64px; max-width: 220px; } }
@media (max-width: 640px)  { .tz-logo-img { height: 52px; max-width: 180px; } }

/* --- SEARCH OVERLAY: smaller, more elegant -------------------------------- */
.tz-search-inner input {
    font-size: clamp(22px, 3.4vw, 38px) !important;
    letter-spacing: -.01em;
    padding: 14px 0 !important;
}
.tz-search-inner input::placeholder {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    opacity: .55;
}

/* --- HERO TEXT: hover colour change --------------------------------------- */
.tz-hero { cursor: default; }
.tz-hero-text { pointer-events: auto; }
.tz-hero-line-1 { transition: color .45s var(--tz-ease), -webkit-text-stroke-color .45s var(--tz-ease); }
.tz-hero-line-2 { transition: color .45s var(--tz-ease); }
.tz-hero-text:hover .tz-hero-line-1 {
    color: var(--tz-bone);
    -webkit-text-stroke-color: var(--tz-bone);
}
.tz-hero-text:hover .tz-hero-line-2 { color: var(--tz-accent); }

/* Ensure hero eyebrow + CTA stay visible on every viewport */
.tz-hero-eyebrow {
    color: rgba(244, 239, 230, .92) !important;
    font-size: clamp(14px, 1.4vw, 18px);
}
.tz-hero-cta {
    background: var(--tz-bone) !important;
    color: var(--tz-ink) !important;
}

/* --- CATEGORIES: hide the 01/02/03 numbers -------------------------------- */
.tz-cat-num { display: none !important; }

/* --- LOOKBOOK: real images replace gradient placeholders ------------------ */
.tz-look-img {
    background: var(--tz-night-soft) !important;
}
.tz-look-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s var(--tz-ease), filter .6s var(--tz-ease);
    filter: saturate(.95) contrast(1.02);
}
.tz-look-fallback { display: none; }
.tz-look:hover .tz-look-img img {
    transform: scale(1.05);
    filter: saturate(1.05) contrast(1.06);
}
/* Drop the per-tile gradient backgrounds since real images now show */
.tz-look--01 .tz-look-img,
.tz-look--02 .tz-look-img,
.tz-look--03 .tz-look-img,
.tz-look--04 .tz-look-img,
.tz-look--05 .tz-look-img,
.tz-look--06 .tz-look-img { background: var(--tz-night-soft) !important; }

/* ==========================================================================
   15. ACCOUNT PAGE
   ========================================================================== */
.tz-account {
    background: var(--tz-bone);
    padding: clamp(60px, 8vw, 120px) var(--tz-pad);
    min-height: 70vh;
}
.tz-account-inner { max-width: var(--tz-max); margin: 0 auto; }
.tz-account-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.tz-account-title {
    font-family: var(--tz-font-display);
    font-size: clamp(40px, 5vw, 80px);
    margin: 12px 0;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: var(--tz-ink);
}
.tz-account-blurb {
    font-family: var(--tz-font-body);
    color: var(--tz-ink-soft);
    max-width: 560px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
}
.tz-account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 48px);
    max-width: 980px;
    margin: 0 auto;
}
.tz-account-card {
    background: #FFFCF6;
    border: 1px solid var(--tz-line);
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--tz-radius);
}
.tz-account-card-title {
    font-family: var(--tz-font-display);
    font-size: clamp(24px, 2.4vw, 34px);
    text-transform: uppercase;
    letter-spacing: -.005em;
    margin: 0 0 20px;
    color: var(--tz-ink);
}
.tz-account-form { display: flex; flex-direction: column; gap: 16px; }
.tz-account-form label {
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--tz-font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--tz-ink-soft);
}
.tz-account-form input {
    font-family: var(--tz-font-body);
    font-size: 15px;
    padding: 13px 14px;
    background: var(--tz-bone);
    border: 1px solid var(--tz-line);
    color: var(--tz-ink);
    border-radius: var(--tz-radius);
    transition: border-color .25s var(--tz-ease);
}
.tz-account-form input:focus {
    outline: none;
    border-color: var(--tz-ink);
}
.tz-account-link {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--tz-ink-soft);
    text-align: center;
    margin-top: 4px;
}
.tz-account-link:hover { color: var(--tz-accent); }
.tz-account-perks {
    list-style: none; padding: 0; margin: 0 0 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.tz-account-perks li {
    font-family: var(--tz-font-body);
    font-size: 14px;
    color: var(--tz-ink-soft);
    padding-left: 22px;
    position: relative;
}
.tz-account-perks li::before {
    content: '—'; position: absolute; left: 0; top: 0;
    color: var(--tz-accent); font-weight: 700;
}
.tz-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px;
    font-family: var(--tz-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-radius: var(--tz-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background .3s var(--tz-ease), color .3s var(--tz-ease),
                border-color .3s var(--tz-ease), transform .3s var(--tz-ease);
    border: 1px solid transparent;
}
.tz-btn--solid {
    background: var(--tz-ink); color: var(--tz-bone);
    border-color: var(--tz-ink);
}
.tz-btn--solid:hover {
    background: var(--tz-accent); color: var(--tz-bone);
    border-color: var(--tz-accent);
    transform: translateY(-1px);
}
.tz-btn--ghost {
    background: transparent; color: var(--tz-ink);
    border-color: var(--tz-ink);
}
.tz-btn--ghost:hover {
    background: var(--tz-ink); color: var(--tz-bone);
}

@media (max-width: 768px) {
    .tz-account-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. CART / BAG PAGE
   ========================================================================== */
.tz-cart {
    background: var(--tz-bone);
    padding: clamp(60px, 8vw, 120px) var(--tz-pad);
    min-height: 70vh;
}
.tz-cart-inner { max-width: 920px; margin: 0 auto; }
.tz-cart-head { text-align: center; margin-bottom: clamp(40px, 5vw, 56px); }
.tz-cart-title {
    font-family: var(--tz-font-display);
    font-size: clamp(40px, 5vw, 80px);
    text-transform: uppercase;
    margin: 12px 0;
    letter-spacing: -.01em;
    color: var(--tz-ink);
}
.tz-cart-count {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: .55em;
    color: var(--tz-ink-soft);
    text-transform: none;
    letter-spacing: 0;
}
.tz-cart-empty {
    text-align: center;
    background: #FFFCF6;
    border: 1px solid var(--tz-line);
    border-radius: var(--tz-radius);
    padding: clamp(48px, 8vw, 96px) clamp(28px, 5vw, 64px);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.tz-cart-empty-icon {
    width: 56px; height: 56px;
    color: var(--tz-ink-mute);
    margin-bottom: 8px;
}
.tz-cart-empty-text {
    font-family: var(--tz-font-display);
    font-size: clamp(22px, 2.4vw, 32px);
    text-transform: uppercase;
    letter-spacing: -.005em;
    margin: 0;
    color: var(--tz-ink);
}
.tz-cart-empty-sub {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 16px;
    color: var(--tz-ink-soft);
    max-width: 420px;
    margin: 0 0 16px;
    line-height: 1.5;
}

.tz-cart-perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--tz-line);
}
.tz-cart-perk {
    text-align: center;
    display: flex; flex-direction: column; gap: 4px;
}
.tz-cart-perk strong {
    font-family: var(--tz-font-display);
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tz-ink);
    font-weight: 400;
}
.tz-cart-perk span {
    font-family: var(--tz-font-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--tz-ink-soft);
}
@media (max-width: 640px) {
    .tz-cart-perks { grid-template-columns: 1fr; gap: 12px; }
}

/* ==========================================================================
   17. v1.3.2 — Hero text overlay DISABLED
   Hero artwork has the headline baked into the image now, so all CSS-side
   overlay layers must be hidden to avoid duplication.
   ========================================================================== */
.tz-hero-veil,
.tz-hero-text,
.tz-hero-title,
.tz-hero-line-1,
.tz-hero-line-2 { display: none !important; }

/* Make sure the image fills the hero cleanly without any veil */
.tz-hero { background: #0a0907; }
.tz-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}