/** Shopify CDN: Minification failed

Line 514:0 Unexpected "}"

**/
/* ==========================================================================
   Custom Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/* ==========================================================================
   TEN DISPLAY — COMMON / SITE-WIDE CSS
   Load this ONCE, before any section stylesheet.
   Every section stylesheet assumes these tokens and base classes exist.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Typeface ---------------------------------------------------------
     Set the real family here once; it cascades to the whole site.
     Replace the first entry with the family from Figma. */

  /* --td-font: "Neue Haas Grotesk Display Pro", "Helvetica Now Display",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; */

    --td-font: "Manrope", sans-serif;

  /* --- Colour ----------------------------------------------------------- */
  --td-ink: #0d0e0e;          /* headings, primary text on light           */
  --td-ink-body: #5c6066;     /* body copy on light                        */
  --td-ink-muted: #b0b4ba;   /* eyebrows, meta, big index numerals        */
  --td-text: rgba(13, 14, 14, 0.62);
  --td-line: rgba(176, 180, 186, 0.50);         /* hairline rules on light                   */

  --td-surface: #ffffff;
  --td-surface-alt: #f7f7f8;  /* "The three years" band                    */
  --td-dark: #0d0e0e;         /* dark sections + footer                    */
  /* --td-dark-alt: #151515;     video band                                */
  --td-dark-alt: #0d0e0e;     /* video band                                */

  --td-on-dark: #ffffff;
  /* --td-on-dark-body: #a5a9ae; */
  --td-on-dark-body: rgba(255, 255, 255, 0.62);
  --td-on-dark-muted: #7e838a;
  --td-light-alt: #f2f0ea;
  --td-light-grey: #b4aea4;
  --td-line-dark: rgba(255, 255, 255, 0.10);

  /* --- Layout ------------------------------------------------------------ */
  --td-container: 1264px;       /* default content width (88px gutter @1440) */
  --td-container-narrow: 1200px;/* gallery + feature grid (120px gutter)     */
  --td-gutter: clamp(20px, 6.1vw, 88px);

  /* --- Spacing scale ------------------------------------------------------ */
  --td-space-2xs: 8px;
  --td-space-xs: 12px;
  --td-space-sm: 16px;
  --td-space-md: 22px;
  --td-space-lg: 40px;
  --td-space-xl: 64px;
  --td-space-2xl: 96px;
  --td-space-3xl: 130px;

  /* Vertical rhythm for a full section */
  /* --td-section-y: clamp(64px, 9vw, 128px); */

  --td-section-y: clamp(50px, 9vw, 64px);
  --td-section-y-md: clamp(64px, 9vw, 98px);
  --td-section-y-sm: clamp(48px, 6vw, 84px);

  /* Standard gap between grid columns */
  --td-gap: clamp(24px, 2.8vw, 40px);

  /* --- Type scale --------------------------------------------------------
     Min → max, fluid between 767px and 1440px viewports. */
  --td-fs-display: clamp(2.375rem, 6.95vw, 6rem);    /*  38 →  96 */
  --td-fs-h1: clamp(1.875rem, 3.2vw, 2.875rem);      /*  30 →  46 */
  --td-fs-h2: clamp(1.75rem, 2.7vw, 2.375rem); /* 28 → 38 */
  --td-fs-h3: clamp(1.5rem, 2.4vw, 2.125rem); /* 24 → 34 */
  --td-fs-h4: clamp(1.25rem, 1.5vw, 1.375rem);       /*  20 →  22 */
  --td-fs-lede: clamp(1rem, 1.2vw, 1.125rem);        /*  16 →  18 */
  --td-fs-body: clamp(1rem, 1.2vw, 1.125rem);        /*       16 */
  --td-fs-sm: 0.75rem;                              /*       12 */
  --td-fs-eyebrow: 0.75rem;                          /*       12 */
  --td-fs-numeral: clamp(2rem, 3.3vw, 3rem);         /*  32 →  48 */

  --td-lh-tight: 1.18;
  --td-lh-heading: 1.14;
  --td-lh-body: 1.8;

  --td-ls-eyebrow: 0.16em;
  --td-ls-display: -0.015em;

  /* --- Misc -------------------------------------------------------------- */
  --td-radius: 0px;           /* the design is square-cornered throughout   */
  --td-radius-pill: 999px;
  --td-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --td-duration: 0.28s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--td-surface);
  color: var(--td-ink) !important;
  font-family: var(--td-font);
  font-size: var(--td-fs-body) !important;
  line-height: var(--td-lh-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

/* Keyboard focus only — never a mouse ring */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

/* Centred content well. Padding is part of the container, never the section. */
.td-container {
  width: 100%;
  max-width: calc(var(--td-container) + var(--td-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--td-gutter);
}

/* Slightly narrower well used by the gallery + feature grid */
.td-container--narrow {
  max-width: calc(var(--td-container-narrow) + var(--td-gutter) * 2);
}

/* Section shell. Sections set their own background via a modifier. */
.td-section {
  padding-block: var(--td-section-y);
}

.td-section--tight { padding-block: var(--td-section-y-sm); }
.td-section--flush-top { padding-block-start: 0; }
.td-section--flush-bottom { padding-block-end: 0; }

.td-section--alt {
  background: linear-gradient(0deg, rgba(176, 180, 186, 0.10) 0%, rgba(176, 180, 186, 0.10) 100%), #FFF;
}

.td-section--dark {
  background-color: var(--td-dark);
  color: var(--td-on-dark);
}

/* Column grids. Collapse at 991 then 767 per the site breakpoints. */
.td-grid {
  display: grid;
  gap: var(--td-gap);
}

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

@media (max-width: 991px) {
  .td-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .td-grid--2,
  .td-grid--3 { grid-template-columns: 1fr; }
}

/* Vertical flow. Set --td-stack-gap on the element to change the rhythm. */
.td-stack {
  display: flex;
  flex-direction: column;
  gap: var(--td-stack-gap, var(--td-space-md));
}

/* Hairline rule */
.td-rule {
  border: 0;
  border-top: 1px solid var(--td-line);
  margin: 0;
}

.td-section--dark .td-rule { border-top-color: var(--td-line-dark); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */

/* Small uppercase label above a heading */
.td-eyebrow {
  color: var(--td-ink-muted);
  font-size: var(--td-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 1.75px;
  line-height: 1.2;
  text-transform: uppercase;
}

.td-reviews .td-eyebrow,
.td-faq .td-eyebrow,
.td-collection-hero .td-eyebrow,
.td-faq-help .td-eyebrow {
  color: var(--td-text);
}

.td-display,
.td-h1,
.td-h2,
.td-h3,
.td-h4 {
  color: inherit;
  font-weight: 400;
  letter-spacing: -1.92px;
  text-wrap: balance;
}

.td-display {
  font-size: var(--td-fs-display);
  font-weight: 300;
  line-height: 0.96;
}

.td-h1 { font-size: var(--td-fs-h1); font-weight: 500; line-height: 1.06; letter-spacing: -0.92px; }
.td-h2 { font-size: var(--td-fs-h2); font-weight: 500; line-height: var(--td-lh-tight); letter-spacing: -0.76px; line-height: var(--td-lh-heading); }
.td-h3 { font-size: var(--td-fs-h3); font-weight: 500; line-height: var(--td-lh-tight); letter-spacing: -0.51px; }

.td-h4 {
  font-size: var(--td-fs-h4);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* Body copy */
.td-body {
 color: var(--td-ink-muted); 
  /* color: var(--td-text); */
  font-size: var(--td-fs-body);
  font-weight: 400;
  line-height: var(--td-lh-body);
  text-wrap: pretty;
}

.td-section:not(.td-section--dark) .td-body,
.td-collection-hero:not(.td-section--dark) .td-body,
.td-faq-help:not(.td-section--dark) .td-body {
  color: var(--td-text);
}

.td-lede {
  color: var(--td-ink-body);
  font-size: var(--td-fs-lede);
  line-height: 1.6;
}

/* Emphasised single line inside a body block ("No MDF. No particleboard.") */
.td-body-strong {
  color: var(--td-ink);
  font-size: var(--td-fs-body);
  font-weight: 600;
  line-height: 1.6;
}

/* Uppercase caption under a body block ("LOS ANGELES, CA · EST. 2023") */
.td-meta {
  color: var(--td-ink-muted);
  font-size: var(--td-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 1.44px;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Colour swaps inside dark sections */
/* .td-section--dark .td-eyebrow,
.td-section--dark .td-meta { color: var(--td-on-dark-muted); } */

.td-section--dark .td-body,
.td-section--dark .td-lede { 
  /* color: var(--td-on-dark-body); */
  color: var(--td-ink-muted);
}

.td-section--dark .td-body-strong { color: var(--td-on-dark); }

/* Measure caps — keep paragraphs readable */
.td-measure { max-width: 44ch; }
.td-measure--wide { max-width: 62ch; }

/* --------------------------------------------------------------------------
   5. COMPONENTS
   -------------------------------------------------------------------------- */

/* --- Text link with trailing arrow: "See how it works →" ----------------- */
.td-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--td-ink);
  /* font-size: var(--td-fs-sm); */
  font-size: calc(var(--td-fs-sm) + 2px);
  font-weight: 600;
  line-height: 1;
  transition: opacity var(--td-duration) var(--td-ease);
}

.td-link::after {
  content: "";
  width: 16px;
  height: 10px;
  background-color: currentColor;
  transition: transform var(--td-duration) var(--td-ease);
  /* Right-pointing arrow, drawn as a mask so it inherits colour */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.td-link:hover::after,
.td-link:focus-visible::after { transform: translateX(5px); }

.td-section--dark .td-link { color: var(--td-on-dark); }

/* --- Uppercase link with a down arrow: "SEE THE DISPLAY ↓" --------------- */
.td-link-down {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: var(--td-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 2.16px;
  line-height: 1;
  text-transform: uppercase;
  transition: opacity var(--td-duration) var(--td-ease);
}

.td-link-down:hover,
.td-link-down:focus-visible { opacity: 0.65; }

/* --- Pill button ("SHOP") ------------------------------------------------ */
.td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: 1px solid currentColor;
  border-radius: var(--td-radius-pill);
  font-size: var(--td-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 1.68px;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color var(--td-duration) var(--td-ease),
              color var(--td-duration) var(--td-ease);
}

.td-btn:hover,
.td-btn:focus-visible {
  background-color: var(--td-ink);
  color: var(--td-surface);
}

.td-btn--on-dark:hover,
.td-btn--on-dark:focus-visible {
  background-color: var(--td-on-dark);
  color: var(--td-ink);
}

/* --- Square chip ("PSA", "BGS") ----------------------------------------- */
.td-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 1px solid var(--td-line-dark);
  color: var(--td-ink-muted);
  font-size: var(--td-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}

/* --- Media frame. Set --td-ratio per instance. --------------------------- */
.td-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--td-ratio, 4 / 3);
  background-color: var(--td-ink-muted);
  border-radius: 14px;
  overflow: hidden;
}

.td-media > img,
.td-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--td-media-position, center);
}

/* --- Circular play button, centred over a .td-media ---------------------- */
.td-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--td-on-dark);
}

.td-play__ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
  transition: background-color var(--td-duration) var(--td-ease),
              transform var(--td-duration) var(--td-ease);
}

.td-play:hover .td-play__ring,
.td-play:focus-visible .td-play__ring {
  background-color: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}

.td-play__ring svg { width: 15px; height: 17px; margin-left: 3px; fill: currentColor; }

.td-play.is-hidden { display: none; }

@media (max-width: 767px) {
  .td-play__ring { width: 52px; height: 52px; }
}

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */
.u-text-center { text-align: center; }
.u-mx-auto { margin-inline: auto; }

.u-mt-xs { margin-top: var(--td-space-xs); }
.u-mt-sm { margin-top: var(--td-space-sm); }
.u-mt-md { margin-top: var(--td-space-md); }
.u-mt-lg { margin-top: var(--td-space-lg); }
.u-mt-xl { margin-top: var(--td-space-xl); }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  }
}

.hidden { display: none !important; }
@media (max-width: 767px) {
  .u-hide-mobile { display: none !important; }
}

/* ------------------------------------------------------------------
   Accordion
   Colours are inherited from the section, so the same markup works
   on a light or a dark background with no modifier.
   ------------------------------------------------------------------ */
.td-accordion { border-top: 1px solid var(--td-line); }

.td-accordion__item { border-bottom: 1px solid var(--td-line); }

.td-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: none;
  color: inherit;
  /* font-size: 16px; */
  font-size: var(--td-fs-h4);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.td-accordion__sign {
  flex-shrink: 0;
  /* color: var(--td-ink-muted); */
  color: var(--td-text);
  /* font-size: 18px; */
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  transition: transform var(--td-duration) var(--td-ease);
}

.td-accordion__btn[aria-expanded="true"] .td-accordion__sign { transform: rotate(45deg); }

/* Closed resting state — no more display:none. max-height:0 plus the
   overflow/transition rule further down is what makes this animate.
   Padding stays constant (not toggled) — box-sizing: border-box means
   max-height already clips the padding away along with the content
   at max-height:0, so animating padding separately isn't needed.

   The :not([data-open]) rule right after this one is a defensive
   guard: it has higher specificity (0,2,0 vs 0,1,0) than any other
   single-class rule that might still be setting max-height on this
   selector elsewhere in the stylesheet, so the closed state always
   wins regardless of what else is declared or where. */
.td-accordion__panel {
  max-width: 62ch;
  max-height: 0;
  /* color: var(--td-ink-body); */
  /* color: var(--td-ink-muted); */
  color: var(--td-text);
  font-size: 16px;
  line-height: 1.75;
}

.td-accordion__panel:not([data-open]) {
  max-height: 0;
}

.td-accordion__panel-inr{
  padding-block-end: 22px;
}

.td-accordion__panel ul { margin: 0; padding-left: 18px; list-style: disc; }
.td-accordion__panel li { margin-bottom: 6px; }
.td-accordion__panel p + p { margin-top: 12px; }

.td-section--dark .td-accordion,
.td-section--dark .td-accordion__item { border-color: var(--td-line-dark); }

.td-section--dark .td-accordion__btn { color: var(--td-on-dark); }
.td-section--dark .td-accordion__sign { color: var(--td-on-dark-muted); }
.td-section--dark .td-accordion__panel { color: var(--td-on-dark-body); }

.td-accordion__panel {
  overflow: hidden;
  transition: max-height 0.35s var(--td-ease, ease);
}






/* ============================================================
   privacy-policy.css
   ============================================================ */

.shopify-policy__container {
  background-color: var(--td-surface);
  color: var(--td-ink);

  width: 100% !important; 
  max-width: calc(var(--td-container) + var(--td-gutter) * 2) !important;
  margin-inline: auto !important;
  padding-inline: var(--td-gutter) !important;
}

/* --------------------------------------------------------------------------
   1. CONTENT WELL
   Narrower than the site's default container — long-form legal text
   reads best around 68–72 characters per line, not the full page width.

   IMPORTANT: the top/bottom spacing lives on .shopify-policy__container
   itself (the outer section wrapper), not on .section-content-wrapper.
   .section-content-wrapper carries an inline style attribute written
   by Shopify's spacing-style snippet (from the section's padding
   settings, which default to 0), and an inline style always wins
   over a class rule — so padding set there gets silently overridden.
   The outer element has no inline style, so it's the safe place to
   add the page's actual top/bottom spacing.
   -------------------------------------------------------------------------- */
.shopify-policy__container {
  padding-block: var(--td-section-y) !important;
}

.shopify-policy__container .section-content-wrapper {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--td-gutter, clamp(20px, 6.1vw, 88px));
}

/* --------------------------------------------------------------------------
   2. HEADINGS
   -------------------------------------------------------------------------- */
.shopify-policy__container h1,
.shopify-policy__container h2,
.shopify-policy__container h3,
.shopify-policy__container h4 {
  color: var(--td-ink);
  font-family: var(--td-font);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Page title — first heading in the flow */
.shopify-policy__container h1 {
  font-size: var(--td-fs-h1);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.shopify-policy__container h1 + * ,
.shopify-policy__container h1 + p {
  margin-block-start: var(--td-space-sm);
}

/* Section headings ("Information we collect", "How we use it"...) */
.shopify-policy__container h2 {
  font-size: var(--td-fs-h3);
  line-height: 1.25;
  margin-block-start: clamp(40px, 5vw, 50px);
  margin-block-end: var(--td-space-sm);
  padding-block-start: clamp(40px, 5vw, 50px);
  border-block-start: 1px solid var(--td-line);
}

/* Fixed: was ".td-policy-toc__content > h2:first-child", which only
   matches when the <h2> is literally the very first node with no
   exceptions. Shopify's rich text editor commonly leaves a stray
   empty <p> (a blank line) between blocks, and if one landed right
   after the moved Table of Contents list, it — not the <h2> — became
   the true first child, so this override silently never matched and
   the heading fell back to the bordered/padded style above, breaking
   its alignment with the sidebar label. :first-of-type matches "the
   first <h2> among its siblings" regardless of what non-h2 elements
   (like a stray empty paragraph) come before it, so this keeps
   working no matter what the rich text editor happened to insert. */
.td-policy-toc__content > h2:first-of-type{
  padding-top: 0;
  margin-top: 0;
  border-block-start: none;
}

/* First h2 shouldn't inherit the rule/gap the page title already provides */
.shopify-policy__container h1 + h2,
.shopify-policy__container h1 + p + h2 {
  border-block-start: 0;
  padding-block-start: 0;
  margin-block-start: clamp(32px, 4vw, 48px);
}

.shopify-policy__container h3 {
  font-size: var(--td-fs-h4);
  line-height: 1.3;
  /* margin-block-start: var(--td-space-xl); */
  margin-block-start: 30px;
  margin-block-end: var(--td-space-xs);
}

.shopify-policy__container h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-block-start: var(--td-space-lg);
  margin-block-end: var(--td-space-2xs);
}

/* --------------------------------------------------------------------------
   3. BODY COPY
   -------------------------------------------------------------------------- */
.shopify-policy__container p {
  /* color: var(--td-ink-muted); */
  color: var(--td-text);
  font-size: var(--td-fs-body);
  line-height: var(--td-lh-body);
  margin-block: 0 var(--td-space-md);
}

.shopify-policy__container p:last-child { margin-block-end: 0; }

/* A short first paragraph right under the title often functions as an
   intro/eyebrow line ("Last updated ...") — set it apart slightly */
.shopify-policy__container h1 + p {
  /* color: var(--td-ink-muted); */
  color: var(--td-text);
  font-size: var(--td-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--td-ls-eyebrow, 0.1em);
  text-transform: uppercase;
}

.shopify-policy__container strong,
.shopify-policy__container b { color: var(--td-ink); font-weight: 600; }
.shopify-policy__container em,
.shopify-policy__container i { font-style: italic; }

/* --------------------------------------------------------------------------
   4. LINKS
   -------------------------------------------------------------------------- */
.shopify-policy__container a {
  color: var(--td-ink);
  text-decoration: underline;
  text-decoration-color: var(--td-line);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--td-duration, 0.28s) var(--td-ease, ease);
}

.shopify-policy__container a:hover,
.shopify-policy__container a:focus-visible {
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   5. LISTS
   -------------------------------------------------------------------------- */
.shopify-policy__container ul,
.shopify-policy__container ol {
  margin-block: var(--td-space-sm) var(--td-space-md);
  padding-inline-start: 1.25em;
  /* color: var(--td-ink-muted); */
  color: var(--td-text);
  font-size: var(--td-fs-body);
  line-height: var(--td-lh-body);
}

.shopify-policy__container ul { list-style: disc; }
.shopify-policy__container ol { list-style: decimal; }

.shopify-policy__container li { margin-block-end: var(--td-space-xs); }
.shopify-policy__container li:last-child { margin-block-end: 0; }
.shopify-policy__container li::marker { 
  color: var(--td-text);
}

/* Nested lists sit closer together than top-level items */
.shopify-policy__container li > ul,
.shopify-policy__container li > ol {
  margin-block: var(--td-space-xs) 0;
}

/* --------------------------------------------------------------------------
   6. TABLES (rare in policy pages, but rich text supports them)
   -------------------------------------------------------------------------- */
.shopify-policy__container table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin-block: var(--td-space-md);
  border-collapse: collapse;
  /* font-size: var(--td-fs-sm); */
  font-size: 14px;
}

.shopify-policy__container th,
.shopify-policy__container td {
  padding: 12px 16px;
  border: 1px solid var(--td-line);
  text-align: left;
  vertical-align: top;
}

.shopify-policy__container th {
  color: var(--td-ink);
  font-weight: 600;
  background-color: var(--td-surface-alt);
}

.shopify-policy__container td { color: var(--td-text); }

/* --------------------------------------------------------------------------
   7. BLOCKQUOTE, HR, MISC
   -------------------------------------------------------------------------- */
.shopify-policy__container blockquote {
  margin: var(--td-space-lg) 0;
  padding-inline-start: var(--td-space-md);
  border-inline-start: 2px solid var(--td-line);
  color: var(--td-ink-body);
  font-style: italic;
}

.shopify-policy__container hr {
  margin-block: var(--td-space-xl);
  border: 0;
  border-block-start: 1px solid var(--td-line);
}

.shopify-policy__container img {
  max-width: 100%;
  height: auto;
  margin-block: var(--td-space-md);
}

.shopify-policy__title{
  margin-bottom: 50px;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   Most sizing already flexes via the theme's clamp()-based tokens;
   these two breakpoints trim spacing rhythm for smaller screens.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .shopify-policy__container {
    padding-block: clamp(48px, 12vw, 72px) clamp(56px, 13vw, 88px);
  }

  .shopify-policy__container h2 {
    margin-block-start: clamp(32px, 8vw, 40px);
    padding-block-start: clamp(32px, 8vw, 40px);
  }

  /* .shopify-policy__container h3 { margin-block-start: var(--td-space-lg); } */

  .shopify-policy__container ul,
  .shopify-policy__container ol { padding-inline-start: 1.1em; }
}

@media (max-width: 480px) {
  .shopify-policy__container th,
  .shopify-policy__container td { padding: 10px 12px; }
  .shopify-policy__title { margin-bottom: 30px; }
}

/* ============================================================
   privacy-policy-toc.css
   Sticky Table of Contents sidebar for the native Shopify Privacy
   Policy page (/policies/privacy-policy).

   SCOPE: every rule below is nested under .td-policy-toc-layout, a
   wrapper that only exists when assets/td-site.js's
   initPrivacyPolicyToc() finds a genuine TOC list and builds it —
   and that function only runs when window.location.pathname
   contains "privacy-policy" (see the JS). Terms of Service, Refund,
   and Shipping policies share the exact same .shopify-policy__*
   markup and the CSS above this block, but never get this wrapper,
   so they're completely unaffected. No existing rule above this
   comment was changed.
   ============================================================ */

.td-policy-toc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-block-start: clamp(32px, 4vw, 48px);
}

.td-policy-toc {
  /* Sticks while scrolling through the content column, and stops
     the instant it reaches the bottom of .td-policy-toc-layout
     (which stretches to the height of the taller column, i.e. the
     content) — this is native position:sticky behaviour, no extra
     JS needed for the "stop at the end" part described in the
     brief. */
  position: sticky;
  top: calc(104px + var(--td-space-lg));
}

.td-policy-toc__label {
  margin: 0 0 var(--td-space-sm);
  color: var(--td-ink);
  font-size: var(--td-fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Desktop: the label is a <button> (needed for the mobile accordion
   below) but reads as a plain, non-interactive heading here — no
   affordance, no hover state, nothing suggesting it's clickable,
   since on desktop it isn't functionally anything other than a
   label. Only the mobile media query further down gives it its
   accordion-trigger appearance. */
.td-policy-toc__label {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  cursor: default;
  font: inherit;
}

.td-policy-toc__sign { display: none; }

.td-policy-toc ul,
.td-policy-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-inline-start: 1px solid var(--td-line);
}

.td-policy-toc li { margin: 0; }

.td-policy-toc a {
  display: block;
  padding: 7px 0 7px var(--td-space-sm);
  margin-inline-start: -1px;
  border-inline-start: 1px solid transparent;
  color: var(--td-text);
  font-size: 14px;
  line-height: 1.4;
  transition: color var(--td-duration) var(--td-ease),
              border-color var(--td-duration) var(--td-ease);
}

.td-policy-toc a:hover,
.td-policy-toc a:focus-visible {
  color: var(--td-ink);
}

.td-policy-toc a.is-active {
  border-inline-start-color: var(--td-ink);
  color: var(--td-ink);
  font-weight: 600;
}

.td-policy-toc__content { min-width: 0; }

/* Scroll clearance for every TOC destination — see the JS comment
   at the .td-policy-toc__target tagging point for why this exists.
   Desktop's value reuses the same 104px already used for the
   sidebar's own sticky offset above, so both stay in sync with
   whatever the fixed header's real height is. */
.td-policy-toc__target {
  scroll-margin-top: calc(104px + var(--td-space-sm));
}

.shopify-challenge__container {
  max-width: var(--td-container, 1264px);
  margin-inline: auto;
  padding: clamp(60px, 10vw, 120px) var(--td-gutter, 24px);
  text-align: center;
}

.shopify-challenge__message {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 32px;
}

.shopify-challenge__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 52px;
  padding: 0 32px;
  margin-top: 24px;
  border: 0;
  border-radius: 999px;
  background: var(--td-ink, #171717);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}


@media (max-width: 991px) {
  /* Mobile has needed two adjustments so far:
     1st (header + 56px + 16px, the original estimate): too small —
     left the tail end of the previous section's paragraph visible
     above the target after a TOC link scroll.
     2nd (header + 100px + 22px): overcorrected — fixed that, but
     landed the target noticeably lower on screen than intended.
     Current value trims back moderately from the 2nd attempt
     rather than reverting toward the 1st, since undershooting is
     what caused the original bug. Desktop is untouched — this only
     lives inside this existing mobile media query. */
  .td-policy-toc__target {
    /* scroll-margin-top: calc(var(--td-header-h, 76px) + 70px + var(--td-space-sm)); */
    scroll-margin-top: 60px;
  }
}

/* --------------------------------------------------------------------------
   Mobile: sticky, collapsible accordion.

   The layout stays single-column (unchanged from before). What's new
   is .td-policy-toc itself: instead of returning to normal static
   flow, it now sticks just below the fixed header (var(--td-header-h),
   already defined by the header itself at this same breakpoint) as a
   slim closed bar, and expands downward in place when tapped — never
   taking up more room than the header clearance plus one line of
   text unless the visitor actually opens it.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .td-policy-toc-layout { grid-template-columns: 1fr !important; }

  .td-policy-toc {
    position: sticky !important;
    top: var(--td-header-h, 76px) !important;
    z-index: 9;
    background-color: var(--td-surface);
    border: 1px solid var(--td-line);
  } 

  .td-policy-toc__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--td-space-sm);
    margin: 0;
    padding: 14px var(--td-space-sm);
    cursor: pointer;
  } 

  .td-policy-toc__sign {
    display: inline-block;
    flex-shrink: 0;
    color: var(--td-ink-muted);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    transition: transform var(--td-duration) var(--td-ease);
  }

  /* Same plus-rotates-to-cross language as .td-accordion__sign
     elsewhere on the site, reused deliberately for consistency
     rather than introducing a different open/close indicator. */
  .td-policy-toc__label[aria-expanded="true"] .td-policy-toc__sign {
    transform: rotate(45deg);
  }

  .td-policy-toc ul,
  .td-policy-toc ol {
    max-height: 0;
    overflow: hidden;
    border-inline-start: 0;
    border-block-start: 1px solid var(--td-line);
    padding-inline: var(--td-space-sm);
    transition: max-height 0.35s var(--td-ease, ease);
  }

  .td-policy-toc a {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .td-policy-toc a.is-active {
    border-inline-start: 0;
    text-decoration: underline;
    text-decoration-color: var(--td-ink);
    text-underline-offset: 3px;
  }
}

/* ============================================================
   contact-form.css
   Styles Horizon's native "Contact form" block on the Contact page.

   Verified against the actual rendered markup (inspected live):
     .contact-form                    outer wrapper div
     .contact-form__form              the <form> element
     .contact-form__form-row          wraps Name + Email side by side
     .contact-form__input             every input/textarea
     .contact-form__input--textarea   the Comment textarea specifically
     button[type="submit"].submit-button
   Labels carry a real .visually-hidden class already (kept as-is —
   that's correct accessibility, not a bug) — the visible field
   names are placeholder text, so styling targets ::placeholder.

   The form's own id is a long, block-instance-specific string
   (e.g. #ContactForm-AMWUxNXVSem14cVNCZ__contact_form_UwiCkQ), so
   none of the rules below key off id — only the stable classes above.
   ============================================================ */

main[data-template="page.contact"]{
  /* padding-block: clamp(28px, 4vw, 56px) var(--td-section-y-sm); */
  padding-block: var(--td-section-y);
}

main[data-template="page.contact"] h1{
  margin-bottom: 30px !important;
}

.contact-form {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--td-gutter, clamp(20px, 6.1vw, 88px));
}

.contact-form__form {
  display: flex;
  flex-direction: column;
}

/* Name + Email sit side by side, divided by one vertical hairline */
.contact-form__form-row {
  display: flex;
}

.contact-form__form-row .contact-form__input {
  flex: 1 1 50%;
  min-width: 0;
  border-inline-end: 1px solid var(--td-line);
}

/* Every field is full-width, borderless except a bottom hairline —
   consecutive fields share one line rather than doubling up */
.contact-form__input {
  display: block;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  border-block-end: 1px solid var(--td-line);
  background-color: transparent;
  color: var(--td-ink) !important;
  font-family: var(--td-font);
  font-size: var(--td-fs-body);
  line-height: 1.4;
  transition: border-color var(--td-duration) var(--td-ease);
}

.contact-form__input--textarea {
  min-height: 220px;
  resize: vertical;
}

.contact-form__input::placeholder {
  /* color: var(--td-ink-muted); */
  color: var(--td-text);
}

.contact-form__input:focus,
.contact-form__input:focus-visible {
  border-color: var(--td-ink);
  outline: none;
}

/* --- Submit — matches the site's pill button (.td-btn) look ---------- */
.contact-form__form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-block-start: 20px;
  padding: 15px 34px;
  border: 1px solid var(--td-ink);
  border-radius: var(--td-radius-pill);
  background-color: var(--td-ink);
  color: var(--td-surface);
  font-size: var(--td-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 1.68px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--td-duration) var(--td-ease),
              color var(--td-duration) var(--td-ease);
}

.contact-form__form button[type="submit"]:hover,
.contact-form__form button[type="submit"]:focus-visible {
  background-color: var(--td-surface);
  color: var(--td-ink);
}

@media (max-width: 767px) {
  .contact-form__form-row {
    flex-direction: column;
  }
}

.cart-discount__error{
  flex-wrap: wrap;
  row-gap: 10px;
}

.cart-discount__error .cart-primary-typography{
  width: calc(100% - 30px);
}

.cart-drawer__items .cart-items__table-row img{
  width: auto !important;
  height: auto !important;
}

.cart-drawer__summary{
  padding-block: 0 25px !important;
  padding-inline: 25px !important;
}

.td-upsell{
  padding-bottom: 0 !important;
}

.cart__ctas .cart__checkout-button{
  margin-top: 0 !important;
}

.theme-drawer__header{
  padding: 15px var(--theme-drawer-padding) !important;
}

.cart-discount{
  font-size: 14px;
  color: var(--td-text);
  margin-top: 15px;
}

.td-upsell__add{
  font-size: 12px !important;
}

.cart-discount__input,
.cart-discount__button {
  color: var(--td-ink) !important; 
}

.cart-items__details *,
.theme-drawer__close-button,
.td-upsell__heading{
  /* color: var(--td-ink-muted) !important; */
  color: var(--td-text) !important;
}

#cart-drawer-heading,
.cart-items__title,
.cart-items__quantity-controls,
.cart-items__remove,
.cart-totals__container *{
  color: var(--td-ink) !important;
}

.cart__checkout-button{
  background: var(--td-ink) !important;
  border-color: var(--td-ink) !important;
} 

.cart-drawer__inner .theme-drawer__badge{
  background: var(--td-ink-muted) !important;
  color: var(--td-ink) !important;
}

.cart-drawer__inner .td-upsell__price{
  font-size: 14px;
  color: var(--td-text);
}

.cart-drawer__inner .cart-items__media img,
.cart-drawer__inner .td-upsell__media{
  border-radius: 10px;
  overflow: hidden;
}

.cart-drawer__inner .paypal-buttons,
.cart-drawer__inner .dynamic-checkout__content shopify-google-pay-button{
  border-radius: 100px !important;
  overflow: hidden !important;
} 

.contact-form__form .contact-form__error, 
.contact-form__form .contact-form__success{
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
  color: var(--td-text) !important;
}

.contact-form__error svg, 
.contact-form__success svg{
  display: none !important;
  margin-top: 9px !important;
}

main[data-template="page.contact"] h1{ 
  /* font-size: clamp(2.25rem,4.4vw,4rem) !important; */
  font-size: var(--td-fs-h1);
  /* font-size: var(--td-fs-h2); */
  font-weight: 400;
  color: var(--td-ink);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.td-gate__head h2{
	font-size: var(--td-fs-h2) !important;
  font-weight: 400 !important;
}

.td-gate__col .td-h4{
	font-size: var(--td-fs-h4) !important;
  font-weight: 400 !important;
}

.td-gate__col .td-body{
	font-size: 16px !important;
}

.cart-drawer__summary .additional-checkout-buttons{
  border-radius: 50px !important;
  overflow: hidden !important;
}

.cart-items__wrapper--drawer-empty a{
  text-decoration: underline;
}

.cart-items__empty-button{
	border: 1px solid var(--td-ink) !important;
  padding: 13px 20px !important;
  border-radius: var(--td-radius-pill);
  color: var(--td-ink) !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
  text-decoration: none !important;
  transition: all 0.3s ease 0s;
}

.cart-items__empty-button:hover{
  background: var(--td-ink);
}

.cart-items__empty-button:hover .button-text{
  color: var(--td-surface) !important;
}

.td-gate__col--guest, 
.td-gate__col--signin{
  background: linear-gradient(0deg, rgba(176, 180, 186, 0.10) 0%, rgba(176, 180, 186, 0.10) 100%), #FFF !important;
}

.td-gate__col .td-gate__btn{
  font-size: 12px;
  background: var(--td-ink);
}

.td-gate .td-h3,
.td-gate__col .td-h4 {
  color: var(--td-ink) !important;
}

.td-gate__col .td-body{
  color: var(--td-text);
}

@media screen and (max-width: 750px) {
  .cart-items .quantity-selector input {
    width: 50px;
  }
}