/*
 * SITE CHROME: the design tokens, base type and buttons, and the header (with the announcement bar) and footer that every
 * page shares (markup: inc/custom/layout/site-chrome.php; behaviour: js/site-chrome.js). The homepage's own sections are
 * in home-v2.css, which loads on top of this.
 */
body .site-main.ttc-home { max-width: 100%; width: 100%; padding: 0; margin: 0; }

.ttc-home, .e-loop-item.elementor-2411 {
  /* The homepage palette (audit spec, Oct 2026): espresso dark sections, cream page, sand alternate sections, terracotta
     buttons, gold labels on dark. Every colour on the page is one of these tokens or a translucent step of one (via the
     *-rgb triplets); the only literals left are the two SVG data-URI sweeps, which cannot read custom properties. */
  --ttc-ink: #2b1810;                   /* text on cream */
  --ttc-deep: #2e1c14;                  /* espresso: dark sections, headings on cream */
  --ttc-clay: #a84b22;                  /* terracotta: buttons (white text), accents */
  --ttc-clay-hover: #8f3f1b;
  --ttc-gold: #c99a2e;                  /* labels on dark only, never text on cream */
  --ttc-cream: #fcf5e8;                 /* page background */
  --ttc-alt: #f3e8d3;                   /* sand: alternate sections */
  --ttc-paper: #fffcf6;
  --ttc-muted: #5b4636;                 /* body paragraphs on cream */
  --ttc-rule: #c9b58e;                  /* borders on cream */
  --ttc-rule-dark: #6b4a32;             /* borders on espresso */
  --ttc-line: rgba(var(--ttc-rule-rgb), 0.7);
  --ttc-clay-text: #a0431f;             /* eyebrow labels on cream: 5.6:1 */
  --ttc-bar: #1c100a;                   /* announcement bar */
  --ttc-bar-text: #ead9b8;

  --ttc-ink-rgb: 43, 24, 16;
  --ttc-deep-rgb: 46, 28, 20;
  --ttc-clay-rgb: 168, 75, 34;
  --ttc-gold-rgb: 201, 154, 46;
  --ttc-cream-rgb: 252, 245, 232;
  --ttc-alt-rgb: 243, 232, 211;
  --ttc-rule-rgb: 201, 181, 142;
  --ttc-white: #ffffff;                 /* text on terracotta buttons */
  --ttc-deep-dark: #241209;             /* photo scrims */
  --ttc-deep-dark-rgb: 36, 18, 9;
  --ttc-deep-light: #5a3519;            /* the hero ground: spot, mid, edge */
  --ttc-deep-mid: #2e1c14;
  --ttc-deep-edge: #241209;
  --ttc-copper-rgb: 184, 115, 51;       /* the product page's hairlines (#b87333) */
  --ttc-bronze: #7a5c38;                /* the product page's price colour */
  --ttc-terracotta: #7b3f00;            /* aripan ink; the floor shade under the jar */
  --ttc-terracotta-rgb: 123, 63, 0;
  --ttc-error: #a33a1c;                 /* on cream */
  --ttc-error-light: #f2c2a0;           /* on espresso */
  --ttc-shadow-rgb: 18, 7, 2;           /* every shadow and vignette: warm black, never neutral */
  --ttc-tint-jaggery: #c48a4a;          /* the pack cards' sweetener tints */
  --ttc-tint-jaggery-dry: #8a552a;
  --ttc-tint-sugar: #e8d9b3;
  --ttc-tint-sugar-dry: #dcc79c;
  --ttc-size-250g: #e4cf9f;             /* the pack colour of each size */
  --ttc-size-500g: #d9a93b;
  --ttc-size-1kg: #c4693a;
  --ttc-size-2kg: #5a2a08;
  --ttc-pick: #6b2f17;                  /* the picked size on the cards */
  --ttc-tab: #ebddc0;                   /* inactive tabs */
  --ttc-wordmark: #f0e4cb;              /* the footer wordmark fill */

  --ttc-display: "Cormorant Garamond", Georgia, serif;
  --ttc-body: "Lora", Georgia, serif;
  --ttc-accent: "Jost", "Helvetica Neue", Arial, sans-serif;

  --ttc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ttc-gutter: clamp(20px, 5vw, 64px);
  --ttc-shell: 1200px;

  background: var(--ttc-cream);
  color: var(--ttc-ink);
  font-family: var(--ttc-body);
  overflow-x: clip;
}

.ttc-home *, .ttc-home *::before, .ttc-home *::after { box-sizing: border-box; }
.ttc-home img { display: block; max-width: 100%; height: auto; }
.ttc-home p { margin: 0; }
.ttc-home ul, .ttc-home ol { margin: 0; padding: 0; list-style: none; }
.ttc-home [hidden] { display: none !important; }
.ttc-home .ttc-shell { width: min(var(--ttc-shell), calc(100% - (var(--ttc-gutter) * 2))); margin-inline: auto; }
.ttc-home .ttc-sec { padding-block: clamp(64px, 9vw, 120px); position: relative; }

/* ---------- Shared type ---------- */

.ttc-home .ttc-eyebrow {
  font-family: var(--ttc-accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ttc-clay-text);
  margin-bottom: 0.9rem;
}
.ttc-home .ttc-eyebrow--light { color: var(--ttc-gold); }

.ttc-home .ttc-h2 {
  font-family: var(--ttc-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.4vw, 3.875rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
  color: var(--ttc-ink);
  max-width: 20ch;
  text-wrap: balance;
}
.ttc-home .ttc-h2 em { font-style: italic; color: var(--ttc-clay-text); }
.ttc-home .ttc-h2--light { color: var(--ttc-cream); }
.ttc-home .ttc-h2--light em { color: var(--ttc-gold); }

.ttc-home .ttc-lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.7; color: var(--ttc-muted); max-width: 56ch; }
.ttc-home .ttc-body { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.7; color: var(--ttc-muted); max-width: 58ch; }

/* Word-split headings: JS wraps words in .ttc-w > .ttc-w__in. */
.ttc-home .ttc-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ttc-home .ttc-w__in { display: inline-block; }
.ttc-anim .ttc-w__in { transform: translateY(112%); transition: transform 0.9s var(--ttc-ease); transition-delay: calc(var(--i, 0) * 45ms); }
.ttc-anim .is-in .ttc-w__in, .ttc-anim .is-in.ttc-h2 .ttc-w__in { transform: none; }

/* ---------- Buttons ---------- */

.ttc-home .ttc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-family: var(--ttc-accent);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.9em 1.9em;
  border-radius: 2px;
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: transform 0.3s var(--ttc-ease), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ttc-home .ttc-btn svg { width: 16px; height: 16px; margin-left: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ttc-ease); }
.ttc-home .ttc-btn:hover svg { transform: translateX(4px); }
/* The Elementor kit paints every button's hover clay at (0,1,1); these are (0,2,0) or more, for <a> and <button> alike. */
.ttc-home .ttc-btn--primary, .ttc-home .ttc-btn--primary:focus { background: var(--ttc-clay); color: var(--ttc-white); box-shadow: none; }
.ttc-home .ttc-btn--primary:hover { background: var(--ttc-clay-hover); color: var(--ttc-white); transform: translateY(-2px); }
/* On espresso grounds the primary button's hover flips to cream, otherwise it would sink into the background. */
.ttc-home :is(.ttc-chapter--hero, .ttc-texture, .ttc-range-sec, .ttc-foot) .ttc-btn--primary:hover { background: var(--ttc-cream); color: var(--ttc-deep); }
.ttc-home .ttc-btn--dark, .ttc-home .ttc-btn--dark:focus { background: var(--ttc-ink); color: var(--ttc-cream); }
.ttc-home .ttc-btn--dark:hover { background: var(--ttc-clay); color: var(--ttc-white); transform: translateY(-2px); }
.ttc-home .ttc-btn--ghost, .ttc-home .ttc-btn--ghost:focus { border-color: rgba(var(--ttc-ink-rgb), 0.4); color: var(--ttc-ink); background: transparent; box-shadow: none; }
.ttc-home .ttc-btn--ghost:hover { border-color: var(--ttc-clay); color: var(--ttc-clay-text); background: transparent; transform: translateY(-2px); }
.ttc-home .ttc-btn--ghost-light, .ttc-home .ttc-btn--ghost-light:focus { border-color: rgba(var(--ttc-cream-rgb), 0.45); color: var(--ttc-cream); background: transparent; box-shadow: none; }
.ttc-home .ttc-btn--ghost-light:hover { border-color: var(--ttc-gold); color: var(--ttc-gold); background: transparent; transform: translateY(-2px); }
.ttc-home a:focus-visible, .ttc-home button:focus-visible, .ttc-home canvas:focus-visible { outline: 2px solid var(--ttc-clay); outline-offset: 4px; }
.ttc-home :is(.ttc-chapter--hero, .ttc-texture, .ttc-range-sec) :is(a, button):focus-visible { outline-color: var(--ttc-gold); }
.ttc-home .ttc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Letter slide on hover: JS builds .ttc-letters with two stacked rows of chars. */
.ttc-home .ttc-letters { display: inline-block; position: relative; overflow: hidden; line-height: 1.3; }
.ttc-home .ttc-letters__row { display: block; white-space: pre; }
.ttc-home .ttc-letters__row + .ttc-letters__row { position: absolute; top: 100%; left: 0; }
.ttc-home .ttc-letters__c { display: inline-block; transition: transform 0.5s var(--ttc-ease); transition-delay: calc(var(--i, 0) * 14ms); }
.ttc-home .ttc-btn:hover .ttc-letters__c { transform: translateY(-100%); }

/* ---------- S11. WhatsApp signup and footer (the page's own; the email form still posts to template 2062's form) ---------- */
/* The same gold-hairline sweep on the top edge as the shop, a warm light, a faint cane motif, the signup as a panel with
   clay corner brackets, five columns on a hairline, the legal line, and the wordmark cut off at the foot. The footer
   carries the .ttc-home class so the page's tokens, shell and buttons reach it. */
.ttc-home.ttc-foot { position: relative; overflow: visible; margin-top: 0; padding: clamp(72px, 9vw, 128px) 0 0; background: radial-gradient(55% 40% at 10% 0%, rgba(var(--ttc-clay-rgb), 0.2), transparent 70%), radial-gradient(50% 30% at 50% 100%, rgba(var(--ttc-gold-rgb), 0.14), transparent 70%), var(--ttc-deep); color: var(--ttc-cream); font-family: var(--ttc-body); }
.ttc-home.ttc-foot::before { content: ""; position: absolute; left: 0; right: 0; top: calc(1px - clamp(28px, 4.5vw, 64px)); height: clamp(28px, 4.5vw, 64px); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V54C360 12 1080 12 1440 54V80Z' fill='%232e1c14'/%3E%3Cpath d='M0 46C360 4 1080 4 1440 46' fill='none' stroke='%23c99a2e' stroke-width='1.5' vector-effect='non-scaling-stroke' opacity='.85'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.ttc-foot__clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ttc-foot__motif { position: absolute; top: -2%; right: -3%; width: clamp(220px, 26vw, 420px); height: auto; aspect-ratio: 1; fill: none; stroke: var(--ttc-gold); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.13; pointer-events: none; transform: rotate(14deg); }
.ttc-foot .ttc-shell { position: relative; z-index: 1; }
.ttc-foot__news { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(28px, 3.6vw, 52px); border: 1px solid var(--ttc-rule-dark); border-radius: 2px; background: rgba(var(--ttc-cream-rgb), 0.04); box-shadow: 0 30px 70px -40px rgba(var(--ttc-shadow-rgb), 0.6); }
.ttc-foot__news::before, .ttc-foot__news::after { content: ""; position: absolute; width: 26px; height: 26px; border: 1px solid var(--ttc-clay); pointer-events: none; }
.ttc-foot__news::before { top: -9px; left: -9px; border-right: 0; border-bottom: 0; }
.ttc-foot__news::after { right: -9px; bottom: -9px; border-left: 0; border-top: 0; }
.ttc-home .ttc-foot__title { margin: 0 0 12px; font: 500 clamp(1.9rem, 3.1vw, 2.7rem)/1.08 var(--ttc-display); letter-spacing: -0.01em; color: var(--ttc-cream); }
.ttc-foot__title em { font-style: italic; color: var(--ttc-gold); }
.ttc-home .ttc-foot__lede { margin: 0; max-width: 44ch; font-size: 0.98rem; line-height: 1.65; color: rgba(var(--ttc-cream-rgb), 0.78); }
.ttc-foot__forms { display: grid; gap: 14px; }
.ttc-foot__form { display: grid; gap: 16px; }
.ttc-foot__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ttc-foot__phone { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(var(--ttc-gold-rgb), 0.6); transition: border-color 0.3s ease; }
.ttc-foot__phone:focus-within { border-bottom-color: var(--ttc-gold); }
.ttc-home .ttc-foot__cc { font: 500 1.05rem/1 var(--ttc-accent); color: var(--ttc-gold); font-variant-numeric: lining-nums; }
.ttc-foot .ttc-foot__input { width: 100%; min-height: 52px; margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(var(--ttc-cream-rgb), 0.38); border-radius: 0; background: transparent; color: var(--ttc-cream); font: 1.05rem/1.4 var(--ttc-body); box-shadow: none; transition: border-color 0.3s ease; }
.ttc-foot .ttc-foot__phone .ttc-foot__input { border-bottom: 0; }
.ttc-foot .ttc-foot__input::placeholder { color: rgba(var(--ttc-cream-rgb), 0.55); }
.ttc-foot .ttc-foot__input:focus, .ttc-foot .ttc-foot__input:focus-visible { outline: none; border-bottom-color: var(--ttc-gold); box-shadow: none; }
.ttc-home .ttc-foot__consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font: 0.84rem/1.5 var(--ttc-body); color: rgba(var(--ttc-cream-rgb), 0.78); cursor: pointer; }
.ttc-foot__consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ttc-clay); }
.ttc-foot__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ttc-foot .ttc-foot__btn { gap: 10px; white-space: nowrap; min-height: 52px; }
.ttc-foot [data-wa-form] .ttc-foot__btn { width: 100%; }
.ttc-foot .ttc-foot__btn.is-busy { opacity: 0.6; pointer-events: none; }
.ttc-foot__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.ttc-home .ttc-foot__note { margin: 0; min-height: 1.2em; font-size: 0.84rem; color: rgba(var(--ttc-cream-rgb), 0.6); }
.ttc-foot__note:empty { display: none; }
.ttc-foot__note.is-ok { color: var(--ttc-gold); }
.ttc-foot__note.is-err { color: var(--ttc-error-light); }
.ttc-home .ttc-foot__alt { font: 0.88rem/1.5 var(--ttc-body); color: rgba(var(--ttc-cream-rgb), 0.72); }
.ttc-home .ttc-foot__toggle, .ttc-home .ttc-foot__toggle:hover, .ttc-home .ttc-foot__toggle:focus { margin: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; color: var(--ttc-gold); font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ttc-home .ttc-foot__toggle:hover { color: var(--ttc-cream); }
.ttc-foot__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 56px); padding: clamp(48px, 6vw, 80px) 0 28px; border-bottom: 1px solid var(--ttc-rule-dark); }
.ttc-foot__mark { display: block; width: 88px; height: 88px; margin: 0 0 16px; border-radius: 2px; }
.ttc-home .ttc-foot__mission { max-width: 30ch; font-size: 0.94rem; line-height: 1.65; color: rgba(var(--ttc-cream-rgb), 0.72); }
.ttc-home .ttc-foot__social { display: flex; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.ttc-foot__social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ttc-rule-dark); border-radius: 2px; color: var(--ttc-cream); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.ttc-foot__social a:hover { background: var(--ttc-gold); border-color: var(--ttc-gold); color: var(--ttc-deep); }
.ttc-foot__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ttc-home .ttc-foot__head { margin: 0 0 18px; font: 600 0.78rem/1 var(--ttc-accent); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ttc-gold); }
.ttc-foot__links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ttc-foot__links a { display: inline-block; padding: 2px 0; font-size: 0.96rem; line-height: 1.5; color: rgba(var(--ttc-cream-rgb), 0.85); text-decoration: none; overflow-wrap: break-word; transition: color 0.25s ease; }
.ttc-foot__links a:hover { color: var(--ttc-gold); }
.ttc-foot :is(a, button):focus-visible { outline: 2px solid var(--ttc-gold); outline-offset: 3px; }
.ttc-foot__legal { padding: 22px 0 clamp(150px, 19vw, 290px); }
.ttc-home .ttc-foot__copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 0.8rem; line-height: 1.6; color: rgba(var(--ttc-cream-rgb), 0.6); }
.ttc-foot__copy a { color: inherit; }
.ttc-foot__copy a:hover { color: var(--ttc-gold); }
/* The wordmark, set huge and cut off by the bottom edge; it writes itself in letter by letter each time it comes into
   view (home-v2.js toggles is-in): the outline wipes on, then the letter fills in the brand's sand. */
.ttc-home .ttc-foot__word { position: absolute; left: 50%; bottom: -0.26em; margin: 0; transform: translateX(-50%); font: 600 clamp(140px, 23vw, 330px)/1 var(--ttc-display); /* ~85% of the letters show, the foot just cropped */ letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(var(--ttc-gold-rgb), 0.26); pointer-events: none; user-select: none; white-space: nowrap; }
.ttc-foot__word span { position: relative; display: inline-block; clip-path: inset(-10% 100% -10% 0); transition: clip-path 0.25s ease; }
.ttc-foot__word.is-in span { clip-path: inset(-10% 0 -10% 0); transition: clip-path 0.55s var(--ttc-ease) calc(var(--i, 0) * 0.16s); }
.ttc-foot__word span::before { content: attr(data-ch); position: absolute; inset: 0; -webkit-text-stroke: 0; color: transparent; background: linear-gradient(to top, var(--fill-foot) 0%, var(--fill-crown) 100%); -webkit-background-clip: text; background-clip: text; clip-path: inset(100% 0 0 0); transition: clip-path 0.3s ease; pointer-events: none; }
.ttc-foot__word.is-in span::before { clip-path: inset(-6% 0 0 0); transition: clip-path 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 0.16s + 0.4s); }
.ttc-home .ttc-foot__word { --fill-foot: var(--ttc-wordmark); --fill-crown: var(--ttc-wordmark); }
html:not(.ttc-anim) .ttc-foot__word span, html:not(.ttc-anim) .ttc-foot__word span::before { clip-path: none; }
@media (max-width: 1024px) {
  .ttc-foot__news { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; }
  .ttc-foot__motif { width: 180px; top: -1%; right: -8%; }
  .ttc-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .ttc-foot__brand, .ttc-foot__col:last-child { grid-column: 1 / -1; }
  .ttc-foot__field { grid-template-columns: minmax(0, 1fr); }
  .ttc-foot__legal { padding-bottom: clamp(104px, 28vw, 190px); }
  .ttc-home .ttc-foot__word { font-size: clamp(96px, 27vw, 200px); bottom: -0.26em; } /* cropped at the foot, as on desktop */
  .ttc-home .ttc-foot__copy { display: grid; }
}

/* ---------- Header: the page's own ---------- */
/* Fixed. Over the hero it is transparent with cream type; once the story turns to paper (data-chapter-active leaves
   "hero") it becomes a paper bar with a gold hairline. It slips away on a scroll down and returns on a scroll up
   (home-v2.js). The loader keeps it hidden until the thekua has landed. */
.ttc-home.ttc-hdr { --hdr-h: 72px; --hdr-fg: var(--ttc-cream); --hdr-fg-soft: rgba(var(--ttc-cream-rgb), 0.78); --hdr-line: rgba(var(--ttc-cream-rgb), 0.14); position: fixed; inset: 0 0 auto 0; z-index: 9000; color: var(--hdr-fg); font-family: var(--ttc-body); background: transparent; transition: transform 0.45s var(--ttc-ease), background-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease; }
.ttc-hdr.is-paper { --hdr-fg: var(--ttc-deep); --hdr-fg-soft: var(--ttc-muted); --hdr-line: var(--ttc-line); background: rgba(var(--ttc-cream-rgb), 0.92); backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 rgba(var(--ttc-gold-rgb), 0.45); }
.ttc-hdr.is-hidden:not(.is-open):not(.is-closing) { transform: translateY(-100%); }
html.ttc-loading .ttc-hdr { opacity: 0; }
html.ttc-loaded .ttc-hdr { opacity: 1; transition: opacity 0.8s ease 0.2s; }
.ttc-hdr__bar { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--hdr-h); width: min(var(--ttc-shell), calc(100% - (var(--ttc-gutter) * 2))); margin-inline: auto; }
/* Brand: the rosette mark and the name set in the display face. */
.ttc-home .ttc-hdr__brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; color: inherit; text-decoration: none; }
.ttc-hdr__mark { width: 40px; height: 40px; border-radius: 50%; }
/* The logo (778 x 168): the brown one on paper and in the open menu, the cream one over the dark hero. */
.ttc-home.ttc-hdr .ttc-hdr__logo { display: block; width: auto; height: 52px !important; max-width: none; }
.ttc-home.ttc-hdr .ttc-hdr__logo--light { display: none; }
.ttc-home.ttc-hdr:not(.is-paper):not(.is-open) .ttc-hdr__logo--dark { display: none; }
.ttc-home.ttc-hdr:not(.is-paper):not(.is-open) .ttc-hdr__logo--light { display: block; }
.ttc-home .ttc-hdr__name { font: 600 1.06rem/1 var(--ttc-display); letter-spacing: 0.02em; white-space: nowrap; }
/* Nav: small caps on a hairline that draws on hover; the About panel opens on hover/focus. */
.ttc-hdr__menu { display: flex; gap: clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.ttc-hdr__item { position: relative; }
.ttc-home .ttc-hdr__link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 2px; border: 0; background: none; box-shadow: none; color: inherit; font: 500 0.74rem/1 var(--ttc-accent); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
/* The kit paints every button's hover clay; the header's controls are text, not buttons. */
.ttc-home .ttc-hdr__link:hover, .ttc-home .ttc-hdr__link:focus, .ttc-home .ttc-hdr__icon:focus, .ttc-home .ttc-hdr__icon:hover { background: none; color: inherit; box-shadow: none; }
@media (hover: hover) { .ttc-home .ttc-hdr__icon:hover { color: var(--ttc-gold); background: rgba(var(--ttc-gold-rgb), 0.08); } }
.ttc-home .ttc-hdr__icon:focus-visible { color: var(--ttc-gold); background: rgba(var(--ttc-gold-rgb), 0.08); }
.ttc-home .ttc-hdr__link::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 10px; height: 1px; background: var(--ttc-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ttc-ease); }
.ttc-home .ttc-hdr__link:hover::after, .ttc-home .ttc-hdr__link:focus-visible::after, .ttc-hdr__item--sub:focus-within .ttc-hdr__link::after, .ttc-home .ttc-hdr__link[aria-expanded="true"]::after { transform: scaleX(1); }
.ttc-home .ttc-hdr__link svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ttc-ease); }
.ttc-home .ttc-hdr__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.ttc-hdr__sub { position: absolute; left: 50%; top: calc(100% - 4px); transform: translate(-50%, 6px); min-width: 240px; padding: 8px; border: 1px solid rgba(var(--ttc-copper-rgb), 0.22); border-radius: 2px; background: var(--ttc-paper); box-shadow: 0 14px 34px rgba(var(--ttc-shadow-rgb), 0.2); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.3s var(--ttc-ease), visibility 0s linear 0.25s; }
.ttc-hdr__item--sub:hover .ttc-hdr__sub, .ttc-hdr__item--sub:focus-within .ttc-hdr__sub, .ttc-hdr__link[aria-expanded="true"] + .ttc-hdr__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.ttc-home .ttc-hdr__sub a { display: block; padding: 10px 12px; border-radius: 2px; color: var(--ttc-ink); font: 0.9rem/1.3 var(--ttc-body); text-decoration: none; transition: background-color 0.2s ease; }
.ttc-home .ttc-hdr__sub a:hover, .ttc-home .ttc-hdr__sub a:focus-visible { background: var(--ttc-cream); }
/* Tools: account, cart with its count, and on phones the burger. */
.ttc-hdr__tools { display: flex; align-items: center; gap: 6px; justify-self: end; }
.ttc-home .ttc-hdr__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 2px; background: none; box-shadow: none; color: inherit; cursor: pointer; transition: color 0.25s ease, background-color 0.25s ease; }
.ttc-home .ttc-hdr__icon:hover, .ttc-home .ttc-hdr__icon:focus-visible { color: var(--ttc-gold); background: rgba(var(--ttc-gold-rgb), 0.08); box-shadow: none; }
.ttc-hdr.is-paper .ttc-hdr__icon:hover, .ttc-hdr.is-paper .ttc-hdr__icon:focus-visible { color: var(--ttc-clay-text); }
.ttc-hdr__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ttc-home .ttc-hdr__count { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ttc-clay); color: var(--ttc-white); font: 600 0.62rem/18px var(--ttc-accent); text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.ttc-hdr__count[data-zero="true"], .ttc-hdr__count:empty { display: none; }
.ttc-home .ttc-hdr__burger { display: none; }
.ttc-hdr :is(a, button):focus-visible { outline: 2px solid var(--ttc-gold); outline-offset: 2px; }
.ttc-hdr:is(.is-paper, .is-open) :is(a, button):focus-visible { outline-color: var(--ttc-clay); }
/* The panel (phones): the hero's ground, the menu set large in the display face, revealed line by line. */
.ttc-hdr__panel { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--hdr-h) + var(--ttc-bar-h, 0px) + 24px) max(20px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-bottom)); background: radial-gradient(60% 40% at 92% 8%, rgba(var(--ttc-gold-rgb), 0.18), transparent 70%), radial-gradient(50% 36% at 4% 96%, rgba(var(--ttc-clay-rgb), 0.08), transparent 70%), var(--ttc-cream); color: var(--ttc-deep); visibility: hidden; clip-path: circle(0px at var(--bx, calc(100% - 36px)) var(--by, 30px)); transition: clip-path 0.34s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.34s; overflow-y: auto; }
.ttc-hdr__panel[hidden] { display: flex; }
/* Opening, the cream grows out of the burger as a circle (site-chrome.js sets --bx/--by to the burger's centre and --br to the farthest corner, so the whole sweep shows),
   then the links rise in turn; closing is the circle drawn back in at about half the time, the links dropping at once. */
.ttc-hdr.is-open .ttc-hdr__panel { visibility: visible; clip-path: circle(var(--br, 150vmax) at var(--bx, calc(100% - 36px)) var(--by, 30px)); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s; }
.ttc-hdr.is-open { --hdr-fg: var(--ttc-deep); --hdr-fg-soft: var(--ttc-muted); background: transparent; box-shadow: none; backdrop-filter: none; }
.ttc-hdr__panel-nav { display: grid; gap: 6px; }
.ttc-home .ttc-hdr__big, .ttc-home .ttc-hdr__small { display: block; color: inherit; text-decoration: none; opacity: 0; transform: translateY(14px); transition: opacity 0.18s ease, transform 0.2s ease; }
.ttc-home .ttc-hdr__big { padding: 8px 0; font: 500 clamp(2.2rem, 9vw, 3rem)/1.05 var(--ttc-display); }
.ttc-home .ttc-hdr__small { padding: 6px 0 6px 2px; font: 0.98rem/1.3 var(--ttc-body); color: var(--ttc-muted); }
.ttc-hdr__panel-foot { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--ttc-line); opacity: 0; transform: translateY(14px); transition: opacity 0.18s ease, transform 0.2s ease; }
.ttc-hdr.is-open .ttc-hdr__big, .ttc-hdr.is-open .ttc-hdr__small, .ttc-hdr.is-open .ttc-hdr__panel-foot { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.6s var(--ttc-ease); transition-delay: calc(0.16s + var(--i, 0) * 50ms); }
.ttc-hdr.is-open .ttc-hdr__panel-foot .ttc-btn { width: 100%; }
.ttc-home .ttc-hdr__panel-note { margin: 0; font: 0.72rem/1.7 var(--ttc-accent); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ttc-clay-text); }
html.ttc-menu-open, html.ttc-menu-open body { overflow: hidden; }
/* The open menu covers the page, so the floating WhatsApp and chat step out of it. */
html.ttc-menu-open :is(.wa-float, #chat-widget) { visibility: hidden; }
@media (max-width: 1024px) {
  .ttc-home.ttc-hdr { --hdr-h: 60px; }
  .ttc-hdr__bar { grid-template-columns: 1fr auto; }
  .ttc-hdr__nav { display: none; }
  .ttc-hdr__mark { width: 34px; height: 34px; }
  .ttc-home.ttc-hdr .ttc-hdr__logo { height: 42px !important; }
  .ttc-home .ttc-hdr__name { font-size: 0.98rem; }
  /* The burger: two bars 6px apart in a fixed 20x14 icon; open, they meet at the centre as a cross. */
  .ttc-home .ttc-hdr__burger { display: grid; place-items: center; }
  .ttc-home .ttc-hdr__burger::before { content: ""; grid-area: 1 / 1; width: 20px; height: 14px; }
  .ttc-hdr__burger span { grid-area: 1 / 1; display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.35s var(--ttc-ease); }
  .ttc-hdr__burger span:first-child { transform: translateY(-3px); }
  .ttc-hdr__burger span:last-child { transform: translateY(3px); }
  .ttc-hdr.is-open .ttc-hdr__burger span:first-child { transform: rotate(45deg); }
  .ttc-hdr.is-open .ttc-hdr__burger span:last-child { transform: rotate(-45deg); }
  .ttc-hdr.is-open .ttc-hdr__burger, .ttc-hdr.is-open .ttc-hdr__burger:focus, .ttc-hdr.is-open .ttc-hdr__burger:focus-visible { color: var(--ttc-deep); background: none; }
  .ttc-hdr__tools .ttc-hdr__icon[aria-label="Account"] { display: none; }
}
@media (max-width: 340px) { .ttc-home .ttc-hdr__name { display: none; } }
@media (prefers-reduced-motion: reduce) { .ttc-home.ttc-hdr, .ttc-hdr__sub, .ttc-hdr__panel, .ttc-hdr__big, .ttc-hdr__small, .ttc-hdr__panel-foot, .ttc-hdr__burger span { transition: none !important; } }

/* ---------- S0. Announcement bar: the first row of the fixed header; it slides away with the first 40px of scroll and
   can be dismissed for seven days (the inline head script sets html.ttc-bar-off before first paint). ---------- */
html { --ttc-bar-h: 40px; }
html.ttc-bar-off { --ttc-bar-h: 0px; }
.ttc-bar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; height: var(--ttc-bar-h); padding: 0 48px; background: var(--ttc-bar); color: var(--ttc-bar-text); overflow: hidden; }
html.ttc-bar-off .ttc-bar { display: none; }
.ttc-home .ttc-bar__text { display: flex; justify-content: center; margin: 0; font: 500 0.8125rem/1.3 var(--ttc-accent); letter-spacing: 0.02em; text-align: center; white-space: nowrap; }
.ttc-bar__item + .ttc-bar__item::before { content: "·"; margin: 0 0.8em; color: var(--ttc-gold); }
.ttc-bar__item--offer b { font-weight: 600; letter-spacing: 0.08em; color: var(--ttc-gold); }
.ttc-home .ttc-bar__close { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 2px; background: none; box-shadow: none; color: inherit; transform: translateY(-50%); cursor: pointer; }
.ttc-home .ttc-bar__close:hover, .ttc-home .ttc-bar__close:focus { background: rgba(var(--ttc-cream-rgb), 0.08); color: var(--ttc-cream); box-shadow: none; }
.ttc-bar__close svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ttc-hdr.is-past-bar:not(.is-open):not(.is-closing) { transform: translateY(calc(-1 * var(--ttc-bar-h))); }
.ttc-hdr.is-past-bar.is-hidden:not(.is-open):not(.is-closing) { transform: translateY(-100%); }
/* A transform or backdrop-filter on the header makes it the box the fixed panel fills, so the panel would grow from the
   header's 112px while the slide runs. Open, and through the close fade, the header drops both at once. */
.ttc-hdr.is-open, .ttc-hdr.is-closing { backdrop-filter: none; transition-property: background-color, color, box-shadow, opacity; }
@media (max-width: 767px) {
  html { --ttc-bar-h: 36px; }
  html.ttc-bar-off { --ttc-bar-h: 0px; }
  .ttc-home .ttc-bar__text { font-size: 0.78rem; }
  .ttc-bar__item:nth-child(3) { display: none; }
  /* The offer is one long line: on phones it wraps to two and the bar grows to hold them (everything under it reads --ttc-bar-h). */
  html:not(.ttc-bar-off):has(.ttc-bar__text--offer) { --ttc-bar-h: 48px; }
  .ttc-home .ttc-bar__text--offer { white-space: normal; font-size: 0.74rem; line-height: 1.35; }
  .ttc-bar { padding: 0 40px; }
}


/* ---------- Every page but the homepage: room for the fixed header, the paper bar from the first paint ---------- */
body.ttc-has-chrome { padding-top: calc(var(--ttc-bar-h, 40px) + 72px); }
@media (max-width: 1024px) { body.ttc-has-chrome { padding-top: calc(var(--ttc-bar-h, 36px) + 60px); } }
/* The header and footer bring their own font stack; on other pages the body's base styles must not leak in. */
.ttc-home.ttc-hdr, .ttc-home.ttc-foot { line-height: 1.5; text-align: left; }
.ttc-home.ttc-hdr a, .ttc-home.ttc-foot a { text-decoration: none; }

/* ---------- Leftover plugin markup the page does not use (the reviews plugin's lightbox) ---------- */
.pswp:not(.pswp--open) { display: none !important; }

/* ---------- The floating buttons on the right: one size, one column ---------- */
/* The header carries the cart, so Modern Cart's own launcher stays out of sight (the header button still opens its
   drawer through it). WhatsApp and the chat button are the same 52px circle, stacked with a 12px gap. */
body .moderncart-floating-cart-button, body .moderncart-toggle-slide-out { visibility: hidden !important; pointer-events: none !important; }
body .wa-float { width: 52px !important; height: 52px !important; right: 24px !important; bottom: 88px !important; }
body .wa-float svg { width: 26px !important; height: 26px !important; }
body #chat-widget { right: 24px !important; bottom: 24px !important; }
body #chat-toggle { width: 52px !important; height: 52px !important; }
body #chat-toggle svg { width: 24px !important; height: 24px !important; }
@media (max-width: 1024px) {
  body .wa-float { right: 16px !important; bottom: 80px !important; }
  body #chat-widget { right: 16px !important; bottom: 16px !important; }
  body #chat-teaser { display: none !important; }
}