/** Shopify CDN: Minification failed

Line 1747:0 Expected "}" to go with "{"

**/
/* ============================================================
   TOXIC TENDENCIES — tt-custom.css
   Clean build — all phases consolidated

   TABLE OF CONTENTS
   ─────────────────
   1.  CSS Variables
   2.  Global reset & fonts
   3.  Header — base (transparent state)
   4.  Header — scrolled state (.is-scrolled)
   5.  Header — inner layout (2-column flexbox)
   6.  Header — left column (logo + mobile hamburger)
   7.  Header — logo styles & swap
   8.  Header — right column (nav + account + cart)
   9.  Header — hamburger button
   10. Mobile nav drawer
   11. Hero — base layout
   12. Hero — model-viewer (3D logo)
   13. Hero — tagline
   14. Hero — Shop the Drop CTA
   15. Keyframe animations
   16. Responsive — ≤990px (mobile)
   17. Responsive — ≤480px (small phones)
   ============================================================ */


/* ── 1. CSS Variables ─────────────────────────────────────── */

:root {
  /* Header heights */
  --header-height:          100px;   /* transparent / top-of-page state */
  --header-height-scrolled:  76px;   /* white / scrolled state */

  /* Transition — applied to all header state changes */
  --header-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Colours */
  --c-white:    #ffffff;
  --c-black:    #0a0a0a;
  --c-charcoal: #1a1a1a;
  --c-silver:   #c0c0c0;
  --c-border:   rgba(0, 0, 0, 0.10);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;   /* headlines, hero tagline */
  --font-body:    'Manrope',    sans-serif;   /* nav, body, buttons */

  /* Nav */
  --nav-gap:          40px;
  --nav-link-size:    12.5px;
  --nav-link-weight:  700;
  --nav-link-spacing: 0.14em;
}


/* ── 2. Global reset & fonts ──────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bebas Neue — display text only */
h1, .h1, .tt-hero__tagline {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* Manrope — everything else */
h2, h3, h4, h5, h6,
p, a, button, input, select, textarea,
.btn, .button, nav,
.price, .product__title, .card__heading {
  font-family: var(--font-body);
}


/* ── 3. Header — base (transparent state) ────────────────── */

.site-header {
  position: fixed;
  top: var(--tt-bar-height, 0px);
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-body);
}


/* ── 4. Header — scrolled state (.is-scrolled) ───────────── */
/* Added by JS when window.scrollY > 60                      */

.site-header.is-scrolled {
  background-color: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  height: var(--header-height-scrolled);
}


/* ── 5. Header — inner layout (2-column flexbox) ─────────── */
/*
   Desktop (>990px):  [Logo LEFT]  →  [Nav · Account · Cart RIGHT]
   Mobile  (≤990px):  [Hamburger · Logo LEFT]  →  [Account · Cart RIGHT]

   justify-content: flex-start anchors the left column to the
   left edge at every viewport width and every scroll state.
   margin-left: auto on the right column pushes it to the far right.
   This combination is explicit and cannot be disrupted by
   height changes, scroll events, or viewport resizing.
*/

.header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0 48px;
  max-width: 1600px;
  margin: 0 auto;
}


/* ── 6. Header — left column (logo + mobile hamburger) ───── */

.header__col--left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}


/* ── 7. Header — logo styles & swap ──────────────────────── */
/*
   Two <img> tags stacked inside .header__logo-link:
     .header__logo-img--white  → visible on transparent header
     .header__logo-img--black  → fades in on scrolled header

   CRITICAL: .header__logo-link must remain position:relative.
   The black logo is position:absolute inside it. If the link
   becomes position:static, the black logo escapes to the
   nearest positioned ancestor (.site-header), spans the full
   header width, and appears mispositioned when scrolled.
   Never override this to static anywhere in this file.
*/

.header__logo-link {
  display: block;
  line-height: 0;
  position: relative;   /* containing block for .header__logo-img--black */
}

.header__logo-img {
  display: block;
  height: 44px;
  width: auto;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* White logo: in normal flow, visible by default */
.header__logo-img--white {
  position: relative;
  opacity: 1;
}

/* Black logo: absolutely overlaid, hidden by default */
.header__logo-img--black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Scroll — cross-fade white → black */
.site-header.is-scrolled .header__logo-img--white { opacity: 0; }
.site-header.is-scrolled .header__logo-img--black { opacity: 1; }

/* Subtle scale-down on scroll */
.site-header.is-scrolled .header__logo-img { transform: scale(0.92); }


/* ── 8. Header — right column (nav + account + cart) ─────── */

.header__col--right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin-left: auto;   /* pushes this column to far right at all widths */
}

/* Gap between nav block and the icon group */
.header__col--right .header__nav {
  margin-right: 36px;
}

/* Thin vertical divider between nav and icons */
.header__nav-divider {
  display: block;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  margin-right: 28px;
  flex-shrink: 0;
  transition: background 0.4s ease;
}

.site-header.is-scrolled .header__nav-divider {
  background: rgba(0, 0, 0, 0.15);
}

/* Space between adjacent icon buttons */
.header__col--right .header__icon-btn + .header__icon-btn {
  margin-left: 8px;
}

/* Desktop nav list */
.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__nav-link {
  font-size: var(--nav-link-size);
  font-weight: var(--nav-link-weight);
  letter-spacing: var(--nav-link-spacing);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-white);
  transition: var(--header-transition);
  position: relative;
  padding-bottom: 3px;
}

/* Underline slide-in on hover */
.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.header__nav-link:hover::after { width: 100%; }

.site-header.is-scrolled .header__nav-link { color: var(--c-charcoal); }

/* Icon buttons (account + cart) */
.header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-white);
  transition: var(--header-transition);
  padding: 6px;
  position: relative;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.header__icon-btn:hover { opacity: 0.65; }

.header__icon-btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.site-header.is-scrolled .header__icon-btn { color: var(--c-charcoal); }

/* Cart badge */
.header__cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--c-charcoal);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  pointer-events: none;
  transition: background 0.4s ease;
}

.site-header.is-scrolled .header__cart-badge { background: var(--c-black); }


/* ── 9. Header — hamburger button ────────────────────────── */
/*
   Default display:none — hidden on desktop.
   Turned on inside the ≤990px media query only.
*/

.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* All three lines — 2px integer prevents sub-pixel inconsistency */
.header__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-white);
  border-radius: 1px;
  transition: var(--header-transition);
  flex-shrink: 0;
}

.site-header.is-scrolled .header__hamburger-line { background: var(--c-charcoal); }

/* Hamburger → X (JS adds .is-open) */
.header__hamburger.is-open .header__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.header__hamburger.is-open .header__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header__hamburger.is-open .header__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ── 10. Mobile nav drawer ────────────────────────────────── */

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 300px;
  background: var(--c-white);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

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

.mobile-nav__header {
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* X close button — absolutely positioned to sit on the HOME row */
.mobile-nav__close {
  position: absolute;
  top: 0;
  right: 0;
  height: 55px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--c-charcoal);
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav__close svg { stroke-width: 2.2; }

/* Nav list — flush to top so HOME aligns with the X */
.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav__link {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-charcoal);
  padding: 18px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transition: color 0.2s ease, padding-left 0.25s ease;
}

/* Extra right padding on HOME — prevents text running under X */
.mobile-nav__list li:first-child .mobile-nav__link {
  padding-right: 68px;
}

.mobile-nav__link:hover {
  color: var(--c-black);
  padding-left: 36px;
}

/* Dimming overlay behind open drawer */
.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-nav__overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}


/* ── 11. Hero — base layout ───────────────────────────────── */

.tt-hero {
  position: relative;       /* stacking context for all absolute children */
  width: 100%;
  height: 100vh;            /* fallback */
  height: 100svh;           /* excludes mobile browser chrome */
  min-height: 640px;

  background-color: #000;   /* shows while video loads */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;       /* forces a new stacking context — prevents external z-index interference */
}

.tt-hero__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);   /* strong dark tint */
  z-index: 2;                         /* above video (1), below content (3) */
  pointer-events: none;               /* never blocks clicks or interactions */
}

/* ── Hero — video background ─────────────────────────────── */

.tt-hero__video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;               /* lowest layer — sits under everything */
  pointer-events: none;
  user-select: none;
  display: block;

  /* Backup darkening directly on the video element.
     Works even if the overlay has a layering issue. */
  filter: brightness(0.20) grayscale(0.25);
}

/* Desktop video: visible on wide screens */
.tt-hero__video--desktop {
  display: block;
}

/* Mobile video: hidden on wide screens */
.tt-hero__video--mobile {
  display: none;
}

/* Center group: 3D logo + tagline */
.tt-hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding-top: calc(var(--header-height) + 20px);
  padding-bottom: 20px;
  gap: 36px;
}


/* ── 12. Hero — model-viewer (3D logo) ───────────────────── */

.tt-hero__model-viewer {
  width:  clamp(300px, 56vw, 720px);
  height: clamp(300px, 56vw, 720px);
  background: transparent;
  --poster-color: transparent;
  flex-shrink: 0;

  /* Interaction lock */
  pointer-events: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}


/* ── 13. Hero — tagline ───────────────────────────────────── */

.tt-hero__tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 58px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  text-align: center;
  line-height: 1;
}


/* ── 14. Hero — Shop the Drop CTA ────────────────────────── */

.shop-the-drop {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 40px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shop-the-drop__arrow {
  display: block;
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.50);
  animation: arrowBounce 1.8s ease-in-out infinite;
  transition: color 0.3s ease;
}

.shop-the-drop__text {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  transition: color 0.3s ease, letter-spacing 0.3s ease;
  white-space: nowrap;
}

.shop-the-drop:hover .shop-the-drop__arrow,
.shop-the-drop:hover .shop-the-drop__text {
  color: rgba(255, 255, 255, 1);
}
.shop-the-drop:hover .shop-the-drop__text {
  letter-spacing: 0.34em;
}


/* ── 15. Keyframe animations ──────────────────────────────── */

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-8px); }
}


/* ── 16. Responsive — ≤990px (mobile) ────────────────────── */
/*
   Layout: [Hamburger · Logo — LEFT]  [Account · Cart — RIGHT]
*/

@media (max-width: 990px) {

  :root {
    --header-height:          76px;
    --header-height-scrolled: 60px;
  }

  .header__inner {
    padding: 0 20px;
  }

  /* Hamburger + logo with clear gap */
  .header__col--left {
    gap: 30px;
  }

  /* Show hamburger — off by default on desktop */
  .header__hamburger {
    display: flex;
  }

  /* Smaller logo on mobile */
  .header__logo-img {
    height: 36px;
  }

  /*
    .header__logo-link position is intentionally NOT overridden here.
    It must stay position:relative (set globally in section 7).
    Changing it to static breaks the black logo swap on scroll.
  */

  /* Icons pushed to far right — margin-left:auto already on right col globally */
  .header__col--right {
    gap: 14px;
  }

  /* Hide desktop nav and divider */
  .header__col--right .header__nav,
  .header__nav-divider {
    display: none;
  }

  /* Remove stacked margin on mobile — gap handles icon spacing */
  .header__col--right .header__icon-btn + .header__icon-btn {
    margin-left: 0;
  }

  /* Hero content */
  .tt-hero__content {
    gap: 24px;
    padding-top: calc(var(--header-height) + 12px);
  }

  /* Larger 3D logo on mobile */
  .tt-hero__model-viewer {
    width:  clamp(300px, 82vw, 520px);
    height: clamp(300px, 82vw, 520px);
  }

  /* Tagline: larger + stacked two lines */
  .tt-hero__tagline {
    font-size: clamp(48px, 13vw, 48px);
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 20px;
    text-align: center;
  }

  .tt-hero__tagline-line {
    display: block;
    white-space: nowrap;
  }

  /* Safe-area inset keeps CTA above mobile browser bar */
  .shop-the-drop {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .tt-hero {
    min-height: 560px;
  }

    /* Swap to mobile video at 990px */
  .tt-hero__video--desktop { display: none; }
  .tt-hero__video--mobile  { display: block; }
}


/* ── 17. Responsive — ≤480px (small phones) ──────────────── */

@media (max-width: 480px) {

  .header__inner {
    padding: 0 16px;
  }

  .header__col--right {
    gap: 8px;
  }

  .tt-hero {
    min-height: 580px;
  }

  .tt-hero__tagline {
    font-size: clamp(32px, 9vw, 48px);
    letter-spacing: 0.12em;
    padding: 0 20px;
  }

  .shop-the-drop__text {
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOXIC TENDENCIES — Inner Pages
   Dark background · White text · Editorial layout
   Typography matched to tt-footer.liquid design tokens
══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (inner pages) ── */
:root {
  --tt-ip-bg:           #000000;
  --tt-ip-text:         #f5f5f5;
  --tt-ip-text-soft:    rgba(255, 255, 255, 0.72);
  --tt-ip-text-muted:   rgba(255, 255, 255, 0.45);
  --tt-ip-border:       rgba(255, 255, 255, 0.12);
  --tt-ip-accent:       #ffffff;
  --tt-ip-btn-bg:       #ffffff;
  --tt-ip-btn-text:     #000000;
  --tt-ip-transition:   0.22s ease;
}


/* ── Page wrapper ── */
.inner-page {
  background-color: var(--tt-ip-bg);
  color:            var(--tt-ip-text);
  min-height:       unset;
  padding-top:      96px;   /* clears sticky header */
  padding-bottom:   40px;
}

.inner-page__container {
  max-width:  860px;
  margin:     0 auto;
  padding:    0 32px;
}

/* ── TT Mobile Page Top Spacing ──────────────────────────────────────────
   Adjust --tt-mobile-page-top-spacing to control breathing room on all
   inner pages (About, FAQ, Contact, Privacy, Terms) on mobile.
   Change the value here and it updates everywhere automatically.
   Desktop value: 96px (left untouched above — do not change that).
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --tt-mobile-page-top-spacing: 100px; /* ← adjust this one value */
  }
  .inner-page {
    padding-top:    var(--tt-mobile-page-top-spacing);
    padding-bottom: 40px;
  }
  .inner-page__container {
    padding: 0 20px;
  }
}


/* ── Page hero block (title + optional subtitle) ── */
.inner-page__hero {
  padding-bottom: 16px;
  border-bottom:  1px solid var(--tt-ip-border);
  margin-bottom:  16px;
}

/* TITLE — Bebas Neue, matches footer subscribe-title energy */
.inner-page__title {
  font-family:    var(--font-display, 'Bebas Neue', sans-serif);
  font-size:      clamp(42px, 4vw, 60px);
  font-weight:    400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height:    1;
  color:          var(--tt-ip-accent);
  margin:         40px 0 0 0;
}

.inner-page__subtitle {
  font-family:    var(--font-body, 'Manrope', sans-serif);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--tt-ip-text-muted);
  margin:         0;
}

@media (max-width: 768px) {
  .inner-page__title {
    margin: 20px 0 0 0;
  }
  .inner-page__hero {
    padding-bottom: 16px;
    margin-bottom:  16px;
  }
}


/* ── Body content area ── */
.inner-page__content {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size:   12px;
  font-weight: 400;
  line-height: 1.85;
  color:       var(--tt-ip-text-soft);
}


/* ══════════════════════════════════════════════════════════════════════════
   tt-page-* classes — used by Shopify page editor HTML (About, FAQ, etc.)
══════════════════════════════════════════════════════════════════════════ */

.tt-page-content {
  font-family: var(--font-body, 'Manrope', sans-serif);
  color:       var(--tt-ip-text-soft);
}

.tt-page-section {
  margin-bottom: 30px;
}

.tt-page-section:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .tt-page-section {
    margin-bottom: 48px;
  }
}

/* Title — Bebas Neue, large display */
.tt-page-title {
  font-family:    var(--font-display, 'Bebas Neue', sans-serif);
  font-size:      clamp(2.4rem, 6vw, 4.8rem);
  font-weight:    400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height:    1;
  color:          var(--tt-ip-accent);
  margin:         0 0 16px 0;
}

/* Subtitle — small Manrope uppercase, muted */
.tt-page-subtitle {
  font-family:    var(--font-body, 'Manrope', sans-serif);
  font-size:      clamp(1rem, 1.6vw, 1.15rem);
  font-weight:    500;
  letter-spacing: 0.06em;
  color:          var(--tt-ip-text-soft);
  margin:         0 0 24px 0;
  line-height:    1.5;
}

/* Section heading — matches footer nav title style */
.tt-page-heading {
  font-family:    var(--font-body, 'Manrope', sans-serif);
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--tt-ip-accent);
  margin:         0 0 20px 0;
  line-height:    1;
}

/* Body text */
.tt-page-text {
  font-family:  var(--font-body, 'Manrope', sans-serif);
  font-size:    12px;
  font-weight:  400;
  line-height:  1.85;
  color:        var(--tt-ip-text-soft);
  margin:       0 0 20px 0;
}

.tt-page-text:last-child {
  margin-bottom: 0;
}

/* Blockquote — editorial pull quote */
.tt-page-quote {
  font-family:     var(--font-display, 'Bebas Neue', sans-serif);
  font-size:       clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight:     400;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           var(--tt-ip-accent);
  border-left:     2px solid rgba(255, 255, 255, 0.25);
  margin:          40px 0;
  padding:         12px 0 12px 28px;
  line-height:     1.15;
}

/* Button
   !important on color/background overrides Dawn's global <a> colour cascade */
.tt-page-button {
  display:         inline-block;
  font-family:     var(--font-body, 'Manrope', sans-serif);
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  text-decoration: none !important;
  color:           #000000 !important;   /* explicit black — never inherit */
  background:      #ffffff !important;   /* explicit white — never inherit */
  padding:         14px 32px;
  border:          1px solid #ffffff;
  outline:         none;
  transition:      background 0.22s ease,
                   color      0.22s ease,
                   border-color 0.22s ease,
                   opacity    0.22s ease;
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
}

.tt-page-button:hover,
.tt-page-button:focus-visible {
  background:   transparent !important;
  color:        #ffffff !important;
  border-color: #ffffff;
  outline:      none;
}

.tt-page-button:active {
  opacity: 0.75;
}


/* ══════════════════════════════════════════════════════════════════════════
   RTE — Rich Text Editor output from Shopify page editor
   Applied when {{ page.content }} renders inside .inner-page__content
══════════════════════════════════════════════════════════════════════════ */

.inner-page__content.rte h1,
.inner-page__content.rte h2,
.inner-page__content.rte h3,
.inner-page__content.rte h4 {
  font-family:    var(--font-display, 'Bebas Neue', sans-serif);
  font-weight:    400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--tt-ip-accent);
  margin:         16px 0;
}

.inner-page__content.rte h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.inner-page__content.rte h2 { font-size: 20px; }
.inner-page__content.rte h3 { font-size: clamp(0.95rem, 1.6vw, 1.1rem); }

.inner-page__content.rte p {
  font-size:   12px;
  line-height: 1.85;
  color:       var(--tt-ip-text-soft);
  margin:      0 0 20px;
}

.inner-page__content.rte a {
  color:                  var(--tt-ip-accent);
  text-decoration:        underline;
  text-underline-offset:  3px;
  text-decoration-color:  rgba(255, 255, 255, 0.35);
  transition:             text-decoration-color var(--tt-ip-transition);
}

.inner-page__content.rte a:hover {
  text-decoration-color: rgba(255, 255, 255, 1);
}

.inner-page__content.rte strong {
  color:       var(--tt-ip-accent);
  font-weight: 600;
}

.inner-page__content.rte em {
  color: var(--tt-ip-text-soft);
}

.inner-page__content.rte blockquote {
  font-family:    var(--font-display, 'Bebas Neue', sans-serif);
  font-size:      clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--tt-ip-accent);
  border-left:    2px solid rgba(255, 255, 255, 0.25);
  margin:         40px 0;
  padding:        12px 0 12px 28px;
  line-height:    1.15;
}

.inner-page__content.rte ul,
.inner-page__content.rte ol {
  padding-left: 20px;
  margin:       0 0 20px;
}

.inner-page__content.rte li {
  font-size:   clamp(0.875rem, 1.4vw, 0.975rem);
  line-height: 1.85;
  color:       var(--tt-ip-text-soft);
  margin:      0 0 8px;
}

.inner-page__content.rte hr {
  border:     none;
  border-top: 1px solid var(--tt-ip-border);
  margin:     48px 0;
}

.inner-page__content.rte img {
  max-width:    100%;
  height:       auto;
  display:      block;
  margin:       40px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact Page — main-page-contact.liquid
   Additive only — builds on .inner-page and design tokens
══════════════════════════════════════════════════════════════════════════ */

/* ── Form wrapper ── */
.tt-contact-form-wrap {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ── Field spacing ── */
.tt-field {
  margin-bottom: 28px;
}

.tt-field-group--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 600px) {
  .tt-field-group--half {
    grid-template-columns: 1fr;
  }
}

/* ── Labels ── */
.tt-label {
  display: block;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-ip-text-soft);
  margin-bottom: 10px;
}

.tt-required {
  color: var(--tt-ip-accent);
  margin-left: 2px;
}

/* ── Inputs / select / textarea ── */
.tt-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--tt-ip-border);
  color: var(--tt-ip-text);
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 10px 0;
  outline: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.22s ease;
  caret-color: var(--tt-ip-accent);
}

.tt-input::placeholder {
  color: var(--tt-ip-text-muted);
  font-size: 11px;
}

.tt-input:focus {
  border-bottom-color: var(--tt-ip-accent);
}

/* Select — custom white chevron */
.tt-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
  cursor: pointer;
}

.tt-select option {
  background: var(--c-charcoal, #1a1a1a);
  color: var(--tt-ip-text);
}

/* Textarea */
.tt-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.7;
}

/* ── Attachment note ── */
.tt-attach-note {
  padding: 20px 0;
  border-top: 1px solid var(--tt-ip-border);
  border-bottom: 1px solid var(--tt-ip-border);
  margin-bottom: 36px;
}

.tt-attach-text {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--tt-ip-text-soft);
  margin: 4px 0 0 0;
}

.tt-attach-link {
  color: var(--tt-ip-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color 0.22s ease;
}

.tt-attach-link:hover {
  text-decoration-color: rgba(255, 255, 255, 1);
}

/* ── Submit row ── */
.tt-submit-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 8px;
}

.tt-submit-btn {
  min-width: 160px;
}

@media (max-width: 600px) {
  .tt-submit-row {
    justify-content: stretch;
  }
  .tt-submit-btn {
    width: 100%;
  }

/* ── Success / error messages ── */
.tt-form-success,
.tt-form-error {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 20px;
  margin-bottom: 32px;
  border: 1px solid;
}

.tt-form-success {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--tt-ip-text-soft);
}

.tt-form-error {
  border-color: rgba(255, 80, 80, 0.4);
  color: rgba(255, 120, 120, 0.9);
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — tt-custom.css additions
   PASTE THIS AT THE VERY BOTTOM of your existing tt-custom.css file.
   Do not replace anything — this is additive only.
   All product page styles are scoped to .tt-pdp to prevent bleed.
══════════════════════════════════════════════════════════════════════════ */

/* ── Force dark background on the product page body ─────────────────────
   Dawn sometimes applies a white page background. This ensures the product
   page background image shows correctly and no white flash occurs.         */

body:has(.tt-pdp) {
  background-color: #0d0d0d;
}

/* Fallback for Safari < 15.4 (no :has support) */
.template-product .shopify-section,
.template-product main,
.template-product #MainContent {
  background: transparent !important;
}

.template-product { background-color: #0d0d0d; }

/* ── Dawn theme overrides — remove conflicting product page defaults ─────
   Dawn's main-product section has its own padding/background that can
   clash with our full-bleed design. These selectors neutralize that.       */

.section-tt-product {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  margin-top:     0 !important;
  margin-bottom:  0 !important;
}

/* Dawn sometimes wraps product sections in a container with max-width.
   Allow our layout to handle all containment. */
.section-tt-product > .page-width,
.section-tt-product > .container {
  max-width: none !important;
  padding:   0 !important;
}

/* ── Prevent Dawn's RTE styles from over-styling our description ─────────
   Dawn injects .rte styles globally. We scope ours to .tt-pdp__description */

.tt-pdp__description.rte h1,
.tt-pdp__description.rte h2,
.tt-pdp__description.rte h3 {
  font-family:    var(--font-body, 'Manrope', sans-serif);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.75);
  margin:         0 0 10px;
}

.tt-pdp__description.rte p {
  font-size:   13px;
  line-height: 1.85;
  color:       rgba(255,255,255,0.60);
  margin:      0 0 14px;
}

.tt-pdp__description.rte ul,
.tt-pdp__description.rte ol {
  padding-left: 18px;
  margin:       0 0 14px;
}

.tt-pdp__description.rte li {
  font-size:   13px;
  line-height: 1.85;
  color:       rgba(255,255,255,0.60);
  margin:      0 0 6px;
}

/* ── Nuclear background fix for Dawn ── */
.template-product,
.template-product body,
.template-product #MainContent,
.template-product .main-page-content,
.template-product main[role="main"],
.template-product .shopify-section,
.template-product .section-tt-product,
.template-product #shopify-section-main,
.template-product [id^="shopify-section"] {
  background-color: transparent !important;
  background-image: none !important;
}

body:has(.tt-pdp) {
  background-color: #0d0d0d !important;
}

.tt-pdp__bg {
  display: none; /* no longer needed — background moved to .tt-pdp directly */
}

.tt-pdp {
  position:            relative;
  z-index:             1;
  min-height:          100vh;
  font-family:         var(--font-body, 'Manrope', sans-serif);
  -webkit-font-smoothing: antialiased;
  overflow:            hidden;
  background-image:    url('/cdn/shop/files/bgproducts.png');
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  background-color:    #0d0d0d;
  background-attachment: fixed;
}

/* ── Cart drawer / popup trigger (if your theme uses one) ────────────────
   Some Dawn variants open a cart drawer on add-to-cart. The AJAX cart
   call in our JS fires /cart/add.js which is compatible with Dawn's
   cart drawer. If your theme has a cart-notification or cart-drawer
   component, it will pick up the fetch response automatically.
   No extra CSS needed for that here.                                       */

  /* ══════════════════════════════════════════════════════════════════════════
   CART DRAWER — tt-custom.css additions
   PASTE THIS AT THE VERY BOTTOM of your existing tt-custom.css file.
   Do not replace anything — this is additive only.
   All styles are scoped to .tt-cart-* to prevent bleed.
══════════════════════════════════════════════════════════════════════════ */


/* ── Overlay ──────────────────────────────────────────────────────────── */

.tt-cart-overlay,
div#tt-cart-overlay {
  position: fixed !important;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.tt-cart-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}


/* ── Drawer shell ─────────────────────────────────────────────────────── */

.tt-cart-drawer,
div#tt-cart-drawer {
  position: fixed !important;
  top: 0;
  right: 0;
  height: 100%;
  width: 480px;
  max-width: 100vw;
  background: var(--c-white, #ffffff);
  z-index: 3999;

  display: flex;
  flex-direction: column;

  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);

  font-family: var(--font-body, 'Manrope', sans-serif);
  -webkit-font-smoothing: antialiased;
}

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


/* ── Header ───────────────────────────────────────────────────────────── */

.tt-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 64px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.tt-cart-drawer__title {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-black, #0a0a0a);
}

.tt-cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-black, #0a0a0a);
  padding: 8px;
  margin-right: -8px;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.tt-cart-drawer__close:hover { opacity: 0.45; }


/* ── Body (scrollable item list) ──────────────────────────────────────── */

.tt-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  /* Custom minimal scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}

.tt-cart-drawer__body::-webkit-scrollbar { width: 4px; }
.tt-cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.tt-cart-drawer__body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 2px;
}


/* ── Empty state ──────────────────────────────────────────────────────── */

.tt-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 60px 28px;
  text-align: center;
  gap: 32px;
}

.tt-cart-empty__message {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
}

.tt-cart-empty__cta {
  display: inline-block;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-white, #ffffff);
  background: var(--c-black, #0a0a0a);
  padding: 14px 32px;
  border: 1px solid var(--c-black, #0a0a0a);
  transition: color 0.22s ease, background 0.22s ease;
}

.tt-cart-empty__cta:hover {
  color: var(--c-black, #0a0a0a);
  background: var(--c-white, #ffffff);
}


/* ── Cart item ────────────────────────────────────────────────────────── */

.tt-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  position: relative;
}

/* Product image */
.tt-cart-item__img-wrap {
  flex-shrink: 0;
  width: 84px;
  height: 100px;
  overflow: hidden;
  background: #f5f5f5;
}

.tt-cart-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Middle: title + meta */
.tt-cart-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
}

.tt-cart-item__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-black, #0a0a0a);
  line-height: 1.4;
  /* Clamp long titles to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.tt-cart-item__price {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-black, #0a0a0a);
  margin: 2px 0 0;
}

.tt-cart-item__meta {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.6;
  margin: 0;
}

/* Right: qty + trash */
.tt-cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  height: 100px; /* matches image height */
}

/* Quantity control */
.tt-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
}

.tt-cart-item__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  font-size: 16px;
  font-weight: 300;
  color: var(--c-black, #0a0a0a);
  line-height: 1;
  transition: background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.tt-cart-item__qty-btn:hover { background: rgba(0,0,0,0.06); }
.tt-cart-item__qty-btn:active { background: rgba(0,0,0,0.11); }

.tt-cart-item__qty-num {
  width: 28px;
  text-align: center;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-black, #0a0a0a);
  /* No border — the parent .tt-cart-item__qty handles the box */
  border-left: 1px solid rgba(0,0,0,0.14);
  border-right: 1px solid rgba(0,0,0,0.14);
  padding: 0;
  line-height: 30px;
  user-select: none;
}

/* Trash icon */
.tt-cart-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.30);
  padding: 4px;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.tt-cart-item__remove:hover { color: var(--c-black, #0a0a0a); }

.tt-cart-item__remove svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

/* Loading state — dims the item while AJAX in flight */
.tt-cart-item.is-updating {
  opacity: 0.45;
  pointer-events: none;
}


/* ── Footer (fixed checkout area) ─────────────────────────────────────── */

.tt-cart-drawer__footer {
  flex-shrink: 0;
  padding: 20px 28px 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  background: var(--c-white, #ffffff);
}

.tt-cart-drawer__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.tt-cart-drawer__subtotal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-black, #0a0a0a);
}

.tt-cart-drawer__subtotal-price {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-black, #0a0a0a);
}

.tt-cart-drawer__checkout-btn {
  display: block;
  width: 100%;
  background: var(--c-black, #0a0a0a);
  color: var(--c-white, #ffffff);
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 17px 24px;
  border: 1px solid var(--c-black, #0a0a0a);
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

.tt-cart-drawer__checkout-btn:hover {
  background: var(--c-white, #ffffff);
  color: var(--c-black, #0a0a0a);
}

/* Hide footer when cart is empty (JS toggles .is-empty on <body> or drawer) */
.tt-cart-drawer.is-empty .tt-cart-drawer__footer {
  display: none;
}


/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 520px) {
  .tt-cart-drawer {
    width: 100vw;
  }

  .tt-cart-drawer__header,
  .tt-cart-item,
  .tt-cart-drawer__footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}