/*
Theme Name: Botiga Child
Theme URI: https://tonbora.com
Description: Child theme for TONBŌRA, an authentic Japanese cosmetics marketplace built on Botiga.
Author: TONBŌRA
Template: botiga
Version: 1.0.0
Text Domain: botiga-child
*/

/* ==========================================================================
   Header — fully custom, rendered by inc/header.php, zero dependency on
   any Botiga class. Botiga's native header (.bhfb-header) is hidden
   outright in inc/header.php (tonbora_hide_native_header) rather than
   restyled, which is what makes this section finally independent of
   every Botiga rule that caused repeated bugs here: the global
   `.ws-svg-icon svg:not(.stroke-based){fill:currentColor}` icon rule,
   the `transform: translate3d(-50%,0,0)` centering trick, the native
   `.header-item{margin-right:25px}`, and its sticky-header JS. None of
   that code can touch markup it doesn't render.
   ========================================================================== */

/* No page has a hero photo for the header to overlay anymore (removed
   with the homepage hero banner) — the header is always solid/dark-on-
   light now, so --nav-tone is just a fixed constant rather than a
   scroll-state variable. Kept as a custom property (not a plain color)
   so every rule that reads it below doesn't need editing again if a
   photo-overlay context is ever reintroduced somewhere. */
:root {
  --nav-tone: #111111;
}

/* Single source of truth for the site's horizontal gutter/max-width —
   every full-bleed section's inner container (navbar, editorial hero,
   NOVEDADES carousel, editorial diptych, comparison matrix, footer)
   reads these two variables so their content lines up on one shared
   left/right margin instead of each carrying its own hardcoded value. */
:root {
  --tb-site-max-width: 1680px;
  --tb-site-gutter: 48px;
}

@media screen and (max-width: 1024px) {
  :root {
    --tb-site-gutter: 24px;
  }
}

/* Switzer (Fontshare, self-hosted in assets/fonts/) — the sitewide
   typeface, replacing Alan Sans. Requested typeface was Suisse Int'l,
   a paid commercial face (Swiss Typefaces) with no free-to-use files;
   Switzer is Fontshare's free-for-commercial-use alternative built
   specifically as a Suisse Int'l lookalike, so it's the closest
   legally self-hostable match. Four weights (300/400/500/600) — more
   than Alan Sans ever had (regular only), available for anything that
   wants real weight contrast, though existing rules still mostly
   specify 400 unless changed elsewhere.
   Same Cyrillic gap as Alan Sans before it (checked directly against
   the font file's own cmap table — zero glyphs above U+0400): Russian
   text still falls through to the next stack entry. Inter does cover
   Cyrillic, so it's kept right after Switzer in the stack specifically
   for that — not just a generic fallback afterthought. */
@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/switzer-300-light.woff2') format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/switzer-400-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/switzer-500-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/switzer-600-semibold.woff2') format('woff2');
}

:root {
  --tb-font-heading: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Logo/wordmark typeface — geometric sans, matching --tb-font-heading,
   not a serif. (Aboreto was tried here briefly and reverted — the
   master spec is explicit that the logo must stay sans-serif, bold
   uppercase, tracked; serif was the wrong direction for this brand.)
   Kept as its own variable rather than just reusing --tb-font-heading
   directly so the four wordmark instances (header, footer wordmark,
   footer brand column, drawer) can still be retuned independently of
   ordinary H1-H6 copy if needed later. */
:root {
  --tb-font-logo: var(--tb-font-heading);
  --tb-logo-tracking: 0.16em;
}

/* ==========================================================================
   Global editorial header system — one kicker style and one headline
   style, reused across every section title site-wide instead of each
   section tuning its own. .tonbora-matrix-title (comparison matrix) and
   .tonbora-arrivals-title (NOVEDADES) are both headlines under this
   system now, not their own bespoke small-kicker treatment — their
   copy in inc/editorial-sections.php and inc/new-arrivals-carousel.php
   was changed from all-caps to sentence case to match (text-transform:
   none here relies on the source string already being cased right,
   same as .tonbora-editorial-heading always has been).
   ========================================================================== */

/* --- Global Editorial Kicker / Subhead --- */
.tonbora-kicker,
.tonbora-lead-tag,
.tonbora-matrix-kicker,
.tonbora-arrivals-kicker,
.tonbora-hero-kicker {
  display: block;
  font-family: var(--tb-font-heading);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #767676;
  margin-bottom: 14px;
}

/* --- Global Editorial Headline (Sentence case) --- */
.tonbora-headline,
.tonbora-section-title,
.tonbora-matrix-title,
.tonbora-arrivals-title {
  font-family: var(--tb-font-heading);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: none;
  color: #111111;
  margin: 0 0 16px 0;
}

@media (max-width: 768px) {
  .tonbora-headline,
  .tonbora-section-title,
  .tonbora-matrix-title,
  .tonbora-arrivals-title {
    font-size: 26px;
  }
}

/* ==========================================================================
   Global button system — text + underline, no fill, per the reference
   screenshot. Replaces every solid black-fill "square" button site-wide
   (hero CTA, editorial "explore the catalogue" link, product-card
   quick-add, WooCommerce Add to Cart/Checkout/Place Order, region-modal
   submit, cookie consent, newsletter signup). Each listed selector
   keeps its OWN display/width/padding/margin below (those are real
   per-component layout — a full-width checkout button still needs to
   be full-width) — only the fill/border/color/weight/hover treatment
   is unified here, in one place, instead of seven.

   Decorative elements that merely happen to share the same #111111
   were deliberately left alone: .woocommerce span.onsale (sale badge),
   .tonbora-icon-badge (cart count dot), .tonbora-progress-bar (carousel
   scrubber) — none of those are buttons.

   No underline anymore (was a real ::after bottom line — removed
   entirely, not just hidden). Hover is now a per-character progressive
   blur reveal (assets/js/btn-blur-text.js splits each button's text
   into .tonbora-btn-char spans on load) instead of the earlier sweep/
   underline combo. Text starts fully sharp/legible at rest — critical,
   since a chunk of these are real "Add to Cart"/"Checkout" buttons and
   touch devices never fire :hover at all, so a design that depended on
   hover to become readable would leave those buttons permanently
   blurred for anyone without a mouse. The animation is a ripple (blur
   out then back to sharp, staggered left-to-right) that replays on
   every mouseenter — see the JS for how each hover forces the CSS
   animation to restart rather than a no-op re-add of an already-
   present class.
   .loop-button-wrap.button-layout3 a.button (product-card quick-add)
   is excluded entirely and kept on its own original solid-black design
   further down — not just skipped by the ::before/::after rules, but
   left out of this shared selector list and the blur-text JS's own
   selector too, both deliberately. It's a small, dense overlay on a
   product thumbnail (not a page-level CTA), and it's also the one
   button where the JS's generic `.button` match caused a real bug:
   WooCommerce's real Add to Cart anchor carries class="button" as part
   of its full class list, so the script was grabbing its real
   (localized) text — e.g. "Добавить в корзину" — and unhiding it as
   visible character spans, which mixed with this button's own CSS
   ::before label ("quick add") into garbled bilingual text. */
.tonbora-hero-btn,
.tonbora-hero-content a.button,
.tonbora-hero-content .wp-block-button__link,
.tonbora-editorial-link,
.tonbora-region-submit,
.tonbora-cookie-accept,
.tonbora-footer-newsletter-form button,
.button,
.woocommerce-Button,
.single_add_to_cart_button,
.checkout-button {
  position: relative;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #111111 !important;
  font-family: var(--tb-font-sans, 'Inter', -apple-system, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
}

/* Wrapper span the JS puts each character into — inline-block so
   `filter` animates per-character rather than across the whole string
   at once, which is what actually produces the staggered/progressive
   look rather than a flat all-at-once blur. */
.tonbora-btn-char {
  display: inline-block;
}

@keyframes tonbora-btn-char-blur-reveal {
  0% {
    filter: blur(0);
    opacity: 1;
  }
  45% {
    filter: blur(6px);
    opacity: 0.45;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

.tonbora-btn-blur-ready.tonbora-btn-animated .tonbora-btn-char {
  animation: tonbora-btn-char-blur-reveal 650ms ease both;
  animation-delay: var(--char-delay, 0ms);
}

/* The line under the button — always present at rest (not a hover-
   only reveal), and on hover it gets the same blur-out-then-sharp
   treatment as the text above it (tonbora-btn-char-blur-reveal),
   rather than a separate scale/draw animation, so the two read as one
   effect rather than two different ones layered together.
   --btn-line-duration is set per-button by the JS (character count ×
   the same per-char delay, plus the char reveal's own 650ms), so the
   line's pulse finishes right as the last character finishes
   rippling, regardless of how long that button's label is. */
.tonbora-btn-blur-ready::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  pointer-events: none;
}

.tonbora-btn-blur-ready.tonbora-btn-animated::after {
  animation: tonbora-btn-char-blur-reveal var(--btn-line-duration, 650ms) ease both;
}

/* The NOVEDADES carousel's own quick-add button (.tonbora-card-add
   .button — real WooCommerce Add to Cart markup, so it's caught by the
   generic .button selector above and gets the blur-text hover) keeps
   that hover but not the underline: a small overlay CTA on a thumbnail
   reads as busier with a line under it than the same treatment on a
   full-width page CTA. */
.tonbora-card-add .tonbora-btn-blur-ready::after {
  display: none;
}

/* ---------- Announcement ticker ---------- */

.tonbora-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: #111111;
  overflow: hidden;
}

.tonbora-ticker-text {
  max-width: 100%;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tonbora-ticker-batch-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.tonbora-ticker-batch-trigger:hover {
  text-decoration-color: #FFFFFF;
}

body.admin-bar .tonbora-ticker {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .tonbora-ticker {
    top: 46px;
  }
}

/* Masthead: solid white at all times (was transparent-at-top/white-
   on-scroll — reverted back to always-white per later instruction).
   body.is-scrolled no longer needs its own background rule since it's
   the same white as the default state now. */
.tonbora-header {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: #FFFFFF;
}

body.admin-bar .tonbora-header {
  top: 60px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .tonbora-header {
    top: 74px;
  }
}

/* Single-row masthead — nav left, logo centered, utilities right, all
   in one line (reverted from the earlier two-row version). Equal
   flex:1 on the two side columns is what actually centers the logo
   regardless of the two sides' differing content width, rather than
   text-align:center on the row itself. */
.tonbora-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--tb-site-max-width);
  margin: 0 auto;
  padding: 24px var(--tb-site-gutter);
  color: var(--nav-tone);
}

@media screen and (max-width: 1023px) {
  .tonbora-header-inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.tonbora-brand-logo {
  flex: 0 0 auto;
}

/* Small tracked-uppercase wordmark — the theme's original masthead
   treatment (font-family/font-weight are the only two things that have
   moved since: system sans → Alan Sans, then 600 → regular 400). */
.tonbora-logo {
  display: inline-block;
  font-family: var(--tb-font-logo);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: var(--tb-logo-tracking);
  text-transform: uppercase;
  color: var(--nav-tone) !important;
  text-decoration: none;
  white-space: nowrap;
}

@media screen and (max-width: 1023px) {
  .tonbora-logo {
    font-size: 24px;
  }
}

.tonbora-desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1 1 0;
  min-width: 0;
}

/* Below 1024px only the drawer trigger (first child, "Brands") stays —
   the four plain category links don't fit next to a centered logo at
   that width, and the drawer already reaches all of them. */
@media screen and (max-width: 1023px) {
  .tonbora-desktop-nav .tonbora-nav-link:not(:first-child) {
    display: none;
  }
}

/* Used on both <a> links and the "Menu" <button> — the reset
   properties below only matter for the button (an <a> already has none
   of this default browser chrome), kept on one shared rule rather than
   split so both stay visually identical. */
.tonbora-nav-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-tone) !important;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 200ms ease;
}

.tonbora-nav-link:hover {
  opacity: 1;
}

.tonbora-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex: 1 1 0;
  min-width: 0;
}

/* Right cluster — plain tracked-uppercase text links (SEARCH / LOG IN /
   BAG (n)) on desktop, matching the nav links' typographic treatment
   rather than introducing a second visual language for the same row.
   Below 1024px, all four (Menu/Search/Account/Bag) swap that label for
   a hairline SVG icon instead, since text labels don't compress well
   at that width; see .tonbora-nav-icon/.tonbora-nav-label below. */
.tonbora-text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-tone) !important;
  opacity: 0.85;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 200ms ease;
}

.tonbora-text-link:hover {
  opacity: 1;
}

/* Icon shown only ≤1024px (label shown only above it) — see the media
   query below. Desktop never renders these visible at all. */
.tonbora-nav-icon {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
}

.tonbora-nav-icon svg {
  display: block;
}

.tonbora-icon-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #111111;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
}

@media screen and (max-width: 1024px) {
  .tonbora-nav-label {
    display: none;
  }

  .tonbora-nav-icon {
    display: inline-flex;
  }
}

/* ==========================================================================
   Full-screen editorial search overlay
   ========================================================================== */

body.tonbora-search-open {
  overflow: hidden;
}

.tonbora-search-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.tonbora-search-modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* Same max-width/gutter tokens as .tonbora-header-inner — this used to
   run its own hardcoded 1100px/40px, independent of the shared site
   variables, so the search overlay's left/right edge never actually
   lined up with the navbar's. */
.tonbora-search-inner {
  max-width: var(--tb-site-max-width);
  margin: 0 auto;
  padding: 48px var(--tb-site-gutter) 80px;
}

@media screen and (max-width: 719px) {
  .tonbora-search-inner {
    padding: 32px var(--tb-site-gutter) 60px;
  }
}

.tonbora-search-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
  padding-top: 36px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 28px !important;
  width: 100% !important;
}

.tonbora-search-form {
  flex: 1 1 auto;
}

.tonbora-search-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* outline: none above needed a real replacement — a keyboard user
   tabbing into this field previously got zero visual indication they
   were focused there. Bottom border on :focus-visible only (not plain
   :focus), so it shows for keyboard nav without adding an unwanted
   ring on a mouse click — matches the underline language already used
   for focus/interaction everywhere else on the site. */
.tonbora-search-input:focus-visible {
  border-bottom: 1px solid #111111 !important;
}

.tonbora-search-input::placeholder {
  color: #8E8E8E !important;
  letter-spacing: 0.18em !important;
  font-weight: 400 !important;
}

.tonbora-search-close {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  color: #111111 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
  margin: 0;
  transition: opacity 200ms ease;
}

.tonbora-search-close svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.1px !important;
}

.tonbora-search-close:hover {
  opacity: 0.6;
}

.tonbora-search-meta {
  margin: 40px 0 24px;
}

.tonbora-search-tagline {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #767676;
}

.tonbora-search-results-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px 20px;
}

@media screen and (max-width: 991px) {
  .tonbora-search-results-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 719px) {
  .tonbora-search-results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }
}

.tonbora-search-item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tonbora-search-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #F6F6F4;
  margin-bottom: 12px;
}

.tonbora-search-thumb-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tonbora-search-placeholder {
  position: absolute;
  inset: 0;
  background-color: #F6F6F4;
}

.tonbora-search-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tonbora-search-item-brand {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #767676;
}

.tonbora-search-item-title {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #111111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tonbora-search-item-price {
  font-size: 12px;
  color: #111111;
}

/* Every page needs explicit top clearance equal to the fixed
   ticker+header stack's real height — otherwise the first block of
   page content renders underneath it. This used to exclude the
   homepage (body:not(.home)) because .tonbora-mission-strip carried
   that same clearance as its own margin-top instead; the mission strip
   (a pre-hero "immediate catalog entry" stand-in) is gone now that the
   editorial hero renders there, so the homepage needs this same rule
   like every other page — no more exception. */
.site-main {
  padding-top: 120px;
}

@media screen and (max-width: 1023px) {
  .site-main {
    padding-top: 90px;
  }
}

body.admin-bar .site-main {
  padding-top: 152px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-main {
    padding-top: 136px;
  }
}

/* ==========================================================================
   Homepage: editorial hero ("Block 0") — 50/50 split, crossfading
   product visual on the left, value proposition + CTA on the right.
   Renders first, above the NOVEDADES carousel. inc/editorial-hero.php /
   assets/js/hero-slider.js.
   ========================================================================== */

/* margin-top is on top of .site-main's own 120px/90px clearance below
   the fixed ticker+header (which stops the literal collision) — this
   is the deliberate visual gap beneath that, not a substitute for it.
   !important because .tonbora-hero-section is also a grid container
   with margin: auto elsewhere in this rule and the shorthand needs to
   not accidentally clobber this later if that's ever reordered. */
/* Left column (the product visual) bleeds flush to the section's own
   top-left — padding-left: 0 (was matching the right column's own
   inset). Only the right column (padding-right: var(--tb-site-gutter),
   unchanged) keeps the normal site gutter, so the copy doesn't end up
   flush against the edge too — just the image.
   align-items: center — the copy column is naturally much shorter than
   a 65vh-capped image, so centering it against the image is what
   actually looks intentional. (A stretch-to-full-height + internal
   space-between was tried so the specs row would sit flush with the
   image's bottom edge — in practice, with real (short) copy, that just
   opened up a large dead gap between the CTA and the specs with
   nothing in it, which read as a layout bug rather than a design
   choice. Reverted.) */
.tonbora-hero-section {
  max-width: var(--tb-site-max-width);
  min-height: auto;
  max-height: calc(100vh - 90px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 80px;
  padding: 0 var(--tb-site-gutter) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* On genuinely large/full desktop screens the hero sat right at the
   very top edge (margin-top: 0 above) with nothing but .site-main's own
   fixed-header clearance above it — moved lower here specifically at
   this width rather than raising the base margin-top, so smaller
   laptop windows (961-1439px) and the mobile breakpoint below both
   keep their own already-tuned spacing untouched. */
@media screen and (min-width: 1440px) {
  .tonbora-hero-section {
    margin-top: 60px;
  }
}

@media screen and (max-width: 960px) {
  .tonbora-hero-section {
    max-height: none;
    grid-template-columns: 1fr;
    gap: 40px;
    /* Stacked to one column here, so "left column vs. right column"
       no longer exists. Section padding is 0 on both sides now (not
       just the left) so the image bleeds fully edge-to-edge on mobile
       too, matching desktop instead of losing the bleed once stacked —
       the gutter the text still needs moves onto .tonbora-hero-content
       itself below, rather than being reapplied to the whole section
       (which would inset the image again along with it). */
    padding: 0;
    margin-top: 40px !important;
    margin-bottom: 60px;
  }

  /* Undo the desktop-only viewport-edge bleed math — not needed here
     since the section itself now has zero side padding at this
     breakpoint, so 100% width is already edge-to-edge. */
  .tonbora-hero-visual {
    width: 100%;
    margin-left: 0;
  }

  /* Text still needs the normal site gutter — only the image is
     meant to bleed full-width. */
  .tonbora-hero-content {
    padding: 0 var(--tb-site-gutter);
  }
}

/* ---------- left: crossfading product visual ---------- */

/* Frameless, edge-to-edge — no background mat, no padding around the
   photo. Height-capped (65vh) rather than left to aspect-ratio alone,
   so the hero fits the fold on standard desktop screens instead of
   running tall; object-fit: cover on the slides crops to fill
   whatever box shape that cap produces. */
/* True viewport-edge bleed, not just flush to .tonbora-hero-section's
   own left edge. Above 1680px viewport width the section itself is
   still centered (margin: auto) so the rest of the page keeps aligning
   with the navbar/gutter — that leaves an outer gap between the
   viewport edge and the section's own left edge on wide screens, which
   this image still sat behind even with the section's padding-left
   already at 0. Pulling left by that exact outer-gap amount (and
   growing width to match) extends the image across it without moving
   or resizing anything else in the grid; below 1680px the gap is 0 and
   this is a no-op. */
.tonbora-hero-visual {
  width: calc(100% + max(0px, (100vw - var(--tb-site-max-width)) / 2));
  margin-left: calc(-1 * max(0px, (100vw - var(--tb-site-max-width)) / 2));
  max-height: 65vh;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: transparent;
}

.tonbora-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 0;
  margin: 0;
  opacity: 0;
  filter: blur(20px);
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), filter 1.2s ease, transform 1.2s ease;
}

.tonbora-hero-slide.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
  pointer-events: auto;
}

/* ---------- right: copy + CTA ---------- */

/* Plain block flow, vertically centered against the image by the grid's
   own align-items: center (above) — no forced height/space-between.
   A max-width keeps the whole column from stretching edge-to-edge and
   reading as loose/directionless on wide screens; every child below
   inherits its rhythm from here rather than each setting its own
   arbitrary top margin. */
.tonbora-hero-content {
  max-width: 480px;
}

/* .tonbora-hero-kicker joins the global editorial kicker system
   defined near the top of this file (uppercase, tracked, muted) — that
   one line is what tells the eye "this is a service, not just a photo"
   before the headline lands. */

/* The headline is the one element in this column allowed real
   presence — Alan Sans only ships a 400 weight on this site (no bold
   face to lean on), so scale and tight tracking/line-height are doing
   the work a heavier weight normally would. Sized up from the earlier
   pass (34-44px) — at 34px minimum it was reading closer to a
   subheading than the page's actual lead statement. */
.tonbora-hero-title {
  margin: 0;
  font-family: var(--tb-font-heading);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #111111;
}

@media screen and (max-width: 960px) {
  .tonbora-hero-title {
    font-size: 30px;
    line-height: 1.15;
  }
}

.tonbora-hero-subtitle {
  font-family: var(--tb-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: #555555;
  margin: 20px 0 32px 0;
}

/* Fill/border/color/weight/hover come from the global button system
   near the top of this file — this only sets the hero CTA's own box. */
.tonbora-hero-btn,
.tonbora-hero-content a.button,
.tonbora-hero-content .wp-block-button__link {
  display: inline-block !important;
  font-size: 11px !important;
  padding: 4px 0 !important;
  line-height: 1 !important;
}

/* Trust markers, set apart from the pitch above rather than crowding
   directly under the CTA — a real 3-column grid, each index numeral
   sitting above its own line of copy instead of the old inline
   "01  text" row, which read cramped at this width. Generous top
   margin (not just the hairline) is what actually separates it as its
   own "why this works" footnote rather than a fourth line of the pitch. */
.tonbora-hero-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #E5E5E5;
}

.tonbora-spec-index {
  display: block;
  margin-bottom: 8px;
  font-family: var(--tb-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #111111;
}

.tonbora-spec-text {
  margin: 0;
  font-family: var(--tb-font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: #555555;
}

@media screen and (max-width: 640px) {
  .tonbora-hero-specs {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
}

/* ==========================================================================
   Homepage: new arrivals carousel — replaces the earlier static curated
   grid (formerly .tonbora-featured / .tonbora-section-heading, rendered
   by inc/new-arrivals-carousel.php).
   ========================================================================== */

/* Botiga's plain .container caps at 1140px (its Bootstrap-style
   breakpoints), which reads as a narrow inset compared to the rest of
   the page. Product-card grids — the archives sharing Botiga's
   .container(.content-wrapper) wrapper — get the same side margin as
   the navbar (48px desktop / 24px ≤1023px) instead, so the grid lines
   up with the header above it rather than floating at its own width.

   The single product page deliberately keeps Botiga's original
   centered, narrower .container (reading-width for the description/
   text-heavy content) rather than this treatment — confirmed against
   a reference screenshot showing the wider, symmetric margin that
   default container already produces. (A later edit briefly widened
   this to include body.single-product for the PDP redesign below —
   reverted; the PDP's own max-width/padding on div.product /
   .product-gallery-summary now just renders inside whatever width
   this narrower default container produces, same as before.)
   Cart/checkout/account pages don't carry .archive either and get the
   same untouched default.

   The archive path also sits inside Botiga's .row.main-row (-15px
   margin) which itself wraps <main class="site-main no-sidebar">
   (+15px !important padding) — those two cancel exactly, so this needs
   the same flat 48px/24px, not +15px extra as previously assumed.

   max-width was `none` here — fine below ~1776px viewport width (the
   navbar's own 1680px cap + its 48px gutters hadn't kicked in yet
   either, so both just traced the true viewport edge and happened to
   coincide), but on a wider screen the navbar centers within 1680px
   while this kept stretching edge-to-edge, drifting apart exactly like
   the NOVEDADES carousel bug from earlier this session (same root
   cause: max-width missing on one side of a comparison, present on the
   other). Capped + centered to match .tonbora-header-inner exactly.
   */
body.archive .container.content-wrapper {
  max-width: var(--tb-site-max-width);
  margin: 0 auto;
  padding-left: var(--tb-site-gutter);
  padding-right: var(--tb-site-gutter);
}

/* ==========================================================================
   Single Product Page (PDP) — Massimo Dutti editorial redesign.
   Gallery/summary grid lock. !important throughout matches the spec:
   WooCommerce's own div.product carries inline/plugin-level styles in
   places (gallery layout variants especially), so this needs to win
   outright rather than negotiate specificity with them one by one.

   The 1.1fr/0.9fr grid is on .product-gallery-summary, not div.product
   itself — confirmed against both Botiga's own gallery-wrapper hook
   (inc/plugins/woocommerce/features/single-product-gallery.php,
   botiga_single_product_wrap_before()/_after(), hooked to
   woocommerce_before_single_product_summary / _after_) and the live
   rendered markup: that wrapper opens BEFORE the gallery and closes
   AFTER the summary, so .woocommerce-product-gallery and .summary are
   both nested inside .product-gallery-summary, not direct children of
   div.product — div.product's own direct children are
   .product-gallery-summary (one box holding both) plus whatever
   renders below it (tabs, related products). display: grid on
   div.product itself would have tried to 2-column-split those instead
   of the gallery/summary pair. div.product still gets the max-width/
   padding/centering, since that should also contain the tabs/related-
   products sections below the fold, not just the top area. */
.single-product div.product {
  max-width: var(--tb-site-max-width, 1680px) !important;
  padding: 40px var(--tb-site-gutter, 48px) 120px var(--tb-site-gutter, 48px) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.single-product .product-gallery-summary {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 80px !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  .single-product div.product {
    padding: 20px 24px 80px 24px !important;
  }

  .single-product .product-gallery-summary {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* The ONLY element in this section that carries the gutter — header,
   viewport and controls below all sit flush inside it at padding:0 so
   there's exactly one alignment reference line, not three independently
   centered ones (that's what was drifting apart on wide viewports:
   .tonbora-carousel-viewport had no max-width of its own, so past
   ~1776px it stayed padding-inset from the true edge while the
   max-width–capped header/controls centered inward instead). */
.tonbora-arrivals-section {
  max-width: var(--tb-site-max-width);
  margin: 120px auto 100px auto;
  padding: 0 var(--tb-site-gutter);
  box-sizing: border-box;
  width: 100%;
}

@media screen and (max-width: 719px) {
  .tonbora-arrivals-section {
    margin: 56px auto 48px auto;
  }
}

.tonbora-arrivals-header {
  padding: 0 0 24px;
  margin: 0;
}

/* .tonbora-arrivals-title's own type is set by the global editorial
   headline rule (near the top of this file) — nothing here. */

.tonbora-arrivals-subtitle {
  max-width: 560px;
  margin: 6px 0 0;
  font-family: var(--tb-font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #666666;
}

/* ---------- carousel track ---------- */

.tonbora-carousel-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
}

.tonbora-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.tonbora-carousel-track {
  display: flex;
  gap: 24px;
  padding: 0;
  margin: 0;
}

.tonbora-carousel-card {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
}

@media screen and (max-width: 719px) {
  .tonbora-carousel-track {
    gap: 16px;
  }

  .tonbora-carousel-card {
    width: 68vw;
  }
}

.tonbora-card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #F6F6F5;
}

.tonbora-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.tonbora-card-media:hover img {
  transform: scale(1.03);
}

/* Quick-add overlay, revealed on hover (shop grid already had this
   pattern; this carousel previously had no add-to-cart at all — see
   inc/new-arrivals-carousel.php). @media (hover: none) keeps it
   permanently visible on touch devices instead of depending on a
   hover that can't fire there — same reasoning applied to the button
   blur-reveal effect elsewhere on the site. The button itself picks up
   the shared global button system automatically (same .button/
   add_to_cart_button classes WooCommerce's own template outputs), so
   no button styling needed here, only the overlay positioning. */
.tonbora-card-add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  background-color: rgba(255, 255, 255, 0.92);
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 250ms ease, transform 250ms ease;
}

.tonbora-carousel-card:hover .tonbora-card-add,
.tonbora-card-add:focus-within {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .tonbora-card-add {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Muted tag rather than a solid block — reads as a quiet note, not a
   sale-style stamp. */
.tonbora-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 3px 8px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #555555;
  background-color: rgba(220, 210, 205, 0.45);
}

.tonbora-card-info {
  padding-top: 16px;
}

.tonbora-card-brand {
  display: block;
  margin-bottom: 4px;
  font-family: var(--tb-font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #737373;
}

.tonbora-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.tonbora-card-title a {
  font-family: var(--tb-font-sans);
  color: #111111;
}

.tonbora-card-price {
  display: block;
  margin-top: 6px;
  font-family: var(--tb-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: #111111;
}

.tonbora-card-price del {
  margin-right: 6px;
  color: #9E9E9E;
  font-size: 0.9em;
  opacity: 1;
}

.tonbora-card-price ins {
  text-decoration: none;
}

/* ---------- progress bar + prev/next ---------- */

.tonbora-carousel-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0;
  margin-top: 32px;
}

.tonbora-carousel-progress {
  flex: 1 1 auto;
  height: 1px;
  background-color: #E5E5E5;
}

.tonbora-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background-color: #111111;
  transition: width 100ms linear;
}

.tonbora-carousel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.tonbora-carousel-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #E5E5E5;
  border-radius: 50%;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: #111111;
  cursor: pointer;
  transition: border-color 200ms ease, opacity 200ms ease;
}

.tonbora-carousel-nav button:hover:not(:disabled) {
  border-color: #111111;
}

.tonbora-carousel-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ==========================================================================
   Homepage: editorial narrative — manifesto/comparison + 3-step process,
   rendered by inc/editorial-sections.php, called directly from
   front-page.php below the product grid.
   ========================================================================== */

/* Shared by the diptych's two-col grid and the 3-step wrapper below —
   unified to the site gutter system (--tb-site-max-width/--tb-site-
   gutter) rather than each section carrying its own width/inset, so
   NOVEDADES, this section, the matrix and the footer all line up on
   the same left/right margin. */
.tonbora-section-inner {
  max-width: var(--tb-site-max-width);
  margin: 0 auto;
  padding: 0 var(--tb-site-gutter);
}

/* ---------- 1. Centered editorial manifesto (no image) ---------- */

.tonbora-sub-label {
  display: block;
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #767676;
}

.tonbora-manifesto-v2 {
  padding: 90px 0;
}

/* Full site width now (was a narrow 760px centered column) — the head
   and quote below keep their own constrained/centered width, but the
   text-columns + product image row wants the full section width. */
.tonbora-manifesto-v2-inner {
  text-align: center;
}

.tonbora-manifesto-v2-head {
  max-width: 760px;
  margin: 0 auto 8px;
}

.tonbora-manifesto-v2-title {
  margin: 0;
  font-family: var(--tb-font-heading);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #111111;
}

/* The one pulled line from the copy below, set apart in the headline
   typeface at quote scale. */
.tonbora-manifesto-v2-quote {
  margin: 40px auto;
  max-width: 540px;
  font-family: var(--tb-font-heading);
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: #111111;
}

/* Text columns on the left half, a real product photo on the right —
   restored per your Figma correction (this section briefly went
   image-free). */
.tonbora-manifesto-v2-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 40px;
  text-align: left;
}

.tonbora-manifesto-v2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.tonbora-manifesto-v2-col p {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: #555555;
}

.tonbora-manifesto-v2-col p:last-of-type {
  margin-bottom: 0;
}

.tonbora-manifesto-v2-visual {
  position: relative;
  aspect-ratio: 652 / 581;
  overflow: hidden;
  background: #F7F7F6;
}

.tonbora-manifesto-v2-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fill/border/color/weight/hover come from the global button system. */
.tonbora-editorial-link {
  display: inline-block;
  margin-top: 32px;
  padding-bottom: 8px;
  font-size: 11px;
}

.tonbora-manifesto-v2-cta {
  margin-top: 28px;
}

@media screen and (max-width: 900px) {
  .tonbora-manifesto-v2-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media screen and (max-width: 720px) {
  .tonbora-manifesto-v2-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---------- 2. Full-width hairline comparison matrix ---------- */

/* No section-level border — pacing between this and the diptych/3-steps
   sections comes from margin, not a hairline divider (the internal
   .tonbora-comparison-col borders below stay: those are functional
   column separators, not a between-sections rule). */
.tonbora-comparison-matrix {
  max-width: var(--tb-site-max-width);
  margin: 65px auto 120px;
}

.tonbora-matrix-header {
  padding: 0 var(--tb-site-gutter);
}

/* .tonbora-matrix-title's own type is set by the global editorial
   headline rule (near the top of this file) — this just widens its
   bottom margin for this specific header (title sits right above the
   4-column row, wants more breathing room than the 16px default). */
.tonbora-matrix-title {
  margin-bottom: 48px;
}

.tonbora-comparison-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--tb-site-gutter);
}

.tonbora-comparison-col {
  padding: 40px 32px;
  min-height: 200px;
  border-left: 1px solid #E5E5E5;
}

.tonbora-comparison-col:first-child {
  border-left: none;
}

.tonbora-comparison-col-highlight {
  background: #FAF9F8;
}

.tonbora-comparison-label {
  display: block;
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999999;
}

.tonbora-comparison-col-highlight .tonbora-comparison-label {
  color: #111111;
  font-weight: 500;
}

.tonbora-comparison-detail {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: #666666;
}

.tonbora-comparison-col-highlight .tonbora-comparison-detail {
  color: #111111;
}

/* ---------- 3. 3-step dispatch process ---------- */

.tonbora-three-steps {
  padding: 65px 0;
}

/* Left-aligned kicker + h2.tonbora-headline (replacing the old bare
   centered <h3> this used to style). The headline's own global margin
   (16px bottom, from the shared editorial-headline rule) is zeroed
   here since this header's own margin-bottom already provides the gap
   before .tonbora-steps-grid. */
.tonbora-steps-header {
  margin-bottom: 48px;
  text-align: left;
}

.tonbora-steps-header .tonbora-headline {
  margin: 0;
}

.tonbora-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.tonbora-step-col {
  padding: 60px 40px;
}

.tonbora-step-num {
  display: block;
  margin-bottom: 16px;
  font-family: var(--tb-font-sans);
  font-size: 28px;
  font-weight: 300;
  color: #BBBBBB;
}

.tonbora-step-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #111111;
}

.tonbora-step-text {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: #666666;
}

/* ---------- 4. Group shipping (Block 4) ---------- */

.tonbora-group-shipping-section {
  padding: 0 0 100px;
}

.tonbora-group-shipping-header {
  max-width: 560px;
  margin: 0 auto 48px;
  text-align: center;
}

.tonbora-group-shipping-header .tonbora-headline {
  margin: 0 0 12px;
}

.tonbora-group-shipping-subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: #666666;
}

/* ---------- 5. FAQ (Block 11) — last section before the footer ---------- */

.tonbora-homepage-faq {
  padding: 0 0 100px;
}

.tonbora-homepage-faq-inner {
  max-width: 720px;
}

.tonbora-homepage-faq-header {
  margin-bottom: 32px;
  text-align: center;
}

.tonbora-homepage-faq-header .tonbora-headline {
  margin: 0;
}

/* Reuses .tonbora-footer-faq's own +/- accordion styling (further down
   this file) — same interaction pattern, just outside the footer now,
   with generous top/bottom padding for a section that's read on its
   own rather than tucked into a dense legal column. */
.tonbora-homepage-faq-list .tonbora-footer-faq {
  padding: 20px 0;
}

.tonbora-homepage-faq-list .tonbora-footer-faq summary {
  font-size: 15px;
}

.tonbora-homepage-faq-list .tonbora-footer-faq p {
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
}

.tonbora-homepage-faq-list .tonbora-footer-faq p a {
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media screen and (max-width: 900px) {
  .tonbora-manifesto-v2 {
    padding: 48px 0;
  }

  .tonbora-comparison-matrix {
    margin: 36px auto;
  }

  .tonbora-three-steps {
    padding: 36px 0;
  }

  .tonbora-homepage-faq {
    padding-bottom: 60px;
  }

  .tonbora-group-shipping-section {
    padding-bottom: 60px;
  }

  .tonbora-comparison-row {
    grid-template-columns: 1fr 1fr;
  }

  .tonbora-comparison-col:nth-child(2) {
    border-left: 1px solid #E5E5E5;
  }

  .tonbora-comparison-col:nth-child(3) {
    border-left: none;
    border-top: 1px solid #E5E5E5;
  }

  .tonbora-comparison-col:nth-child(4) {
    border-top: 1px solid #E5E5E5;
  }

  .tonbora-steps-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tonbora-step-col {
    padding: 40px 0;
    border-top: 1px solid #E5E5E5;
  }

  .tonbora-step-col:first-child {
    border-top: none;
  }
}

/* ==========================================================================
   Typography & global polish
   ========================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .botiga-wc-loop-product__title,
.woocommerce ul.products li.product .price,
.tonbora-product-brand,
.tonbora-single-brand,
.tonbora-badge,
.loop-button-wrap.button-layout3 a.button {
  font-family: var(--tb-font-sans);
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Single product: gallery zoom trigger
   ========================================================================== */

/* WooCommerce's own gallery-zoom button (wc/assets/js/frontend/
   single-product.js) injects a raw "🔍" emoji as its visible glyph — the
   theme's ::before/::after "custom icon" CSS never actually draws
   anything over it, so what renders is the browser's native (colored)
   emoji, clashing with every other hairline SVG icon on the site (the
   header search icon this mirrors). Hide the emoji and draw the same
   thin-stroke circle-and-handle icon used in the header instead. */
.woocommerce-product-gallery__trigger {
  background-color: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21.5' y2='21.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.woocommerce-product-gallery__trigger::before,
.woocommerce-product-gallery__trigger::after {
  display: none;
}

.woocommerce-product-gallery__trigger span[aria-hidden="true"] {
  font-size: 0;
}

/* ==========================================================================
   Shop archive subnav (Massimo Dutti-style: concern tabs left,
   Filters/View/pagination right) — replaces Botiga's default
   "Showing X of Y / Default sorting" toolbar entirely.
   ========================================================================== */

.tonbora-shop-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid #E5E5E3;
  background: #FFFFFF;
  position: sticky;
  /* --tonbora-header-bottom is set by header-scroll.js from the fixed
     header's actual getBoundingClientRect().bottom — a live measurement
     rather than a guessed pixel value, so this stays correct across
     breakpoints and with the admin bar without separate hardcoded rules
     for each. The 96px fallback only ever shows for a first-paint
     instant before the script runs. */
  top: var(--tonbora-header-bottom, 96px);
  z-index: 500;
}

.tonbora-concern-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.tonbora-concern-tab {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999999;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}

.tonbora-concern-tab:hover {
  color: #111111;
}

.tonbora-concern-tab.is-active {
  color: #111111;
}

.tonbora-shop-subnav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.tonbora-filters-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
  cursor: default;
}

.tonbora-filters-trigger svg {
  flex-shrink: 0;
}

.tonbora-view-label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999999;
}

.tonbora-shop-pagination {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tonbora-shop-pagination .page-numbers {
  font-size: 13px;
  color: #999999;
  text-decoration: none;
  transition: color 200ms ease;
}

.tonbora-shop-pagination .page-numbers:hover {
  color: #111111;
}

.tonbora-shop-pagination .page-numbers.current {
  color: #111111;
  font-weight: 600;
}

.tonbora-shop-pagination .page-numbers.dots {
  color: #cccccc;
}

@media screen and (max-width: 719px) {
  .tonbora-shop-subnav {
    gap: 16px;
  }

  .tonbora-concern-tabs {
    gap: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ==========================================================================
   Catalog grid spacing
   ========================================================================== */

.woocommerce ul.products {
  gap: 40px 16px;
  margin-bottom: 40px;
}

@media screen and (max-width: 991px) {
  .woocommerce ul.products {
    gap: 32px 14px;
  }
}

@media screen and (max-width: 719px) {
  .woocommerce ul.products {
    gap: 28px 10px;
  }
}

/* ==========================================================================
   Product card: image
   ========================================================================== */

.woocommerce ul.products li.product {
  border: none;
  box-shadow: none;
  background: none;
}

.woocommerce ul.products li.product .loop-image-wrap,
ul.products li.product .loop-image-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  background-color: #F6F6F4 !important;
  border-radius: 0;
}

/* Defensive: on some button-layout/quick-view configurations Botiga moves
   the product link inside .loop-image-wrap instead of wrapping it — fill
   it either way so it never constrains the image's box. */
.woocommerce ul.products li.product .loop-image-wrap > a,
ul.products li.product .loop-image-wrap > a {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.woocommerce ul.products li.product .loop-image-wrap img,
ul.products li.product .loop-image-wrap img,
.loop-image-wrap .wp-post-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 500ms ease-in-out;
}

.woocommerce ul.products li.product .loop-image-wrap:hover img {
  opacity: 1;
  transform: scale(1.025);
}

/* ==========================================================================
   Product card: brand + title + price
   ========================================================================== */

.tonbora-product-brand {
  display: block;
  margin: 16px 0 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #737373;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  font-size: 13px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .botiga-wc-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  color: #111111;
  font-weight: 400;
  font-size: 13px;
}

.woocommerce ul.products li.product .price {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
  font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

.woocommerce ul.products li.product .price ins .amount {
  color: #111111;
}

.woocommerce ul.products li.product .price del {
  margin-right: 6px;
  color: #9E9E9E;
  font-size: 0.9em;
  font-weight: 400;
  opacity: 1;
}

/* ==========================================================================
   Product card: quick add — same treatment as the homepage carousel's
   quick-add (.tonbora-card-add, inc/new-arrivals-carousel.php): a
   translucent white slide-up panel with WooCommerce's real button
   shown plain, picked up automatically by the global button system
   (further up this file) since it's a real .button — transparent, no
   fill, uppercase. Replaces the old solid-black overlay that hid the
   real text (font-size: 0) in favor of a ::before "quick add" label —
   that hack was fragile (a global !important on .button kept fighting
   it) and, more to the point, no longer matches how every other button
   on the site looks. Showing WooCommerce's own real, already-
   correctly-localized "Add to cart" text directly is simpler and
   consistent instead. */
.woocommerce ul.products li.product .loop-image-wrap > .loop-button-wrap.button-layout3 {
  top: auto;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  background-color: rgba(255, 255, 255, 0.92);
  text-align: center;
  transform: translate3d(0, 100%, 0);
  transition: transform 300ms ease-in-out, opacity 300ms ease-in-out, visibility 300ms ease-in-out;
}

.woocommerce ul.products li.product .loop-image-wrap.botiga-add-to-cart-button-layout3:hover > .loop-button-wrap.button-layout3 {
  transform: translate3d(0, 0, 0);
}

.woocommerce ul.products li.product .loop-button-wrap.button-layout3 a.button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 0;
}

/* No underline under this one — a small overlay button on a thumbnail
   reads busier with a line under it than a full-width page CTA (same
   exception already carved out for .tonbora-card-add). */
.woocommerce ul.products li.product .loop-button-wrap.button-layout3 .tonbora-btn-blur-ready::after {
  display: none;
}

/* Touch devices never fire :hover, so reveal the panel permanently
   there instead of leaving it unreachable (same fallback as
   .tonbora-card-add) rather than the old separate round "+" icon. */
@media (hover: none) {
  .woocommerce ul.products li.product .loop-image-wrap > .loop-button-wrap.button-layout3 {
    transform: translate3d(0, 0, 0);
  }
}

/* ==========================================================================
   Badges
   ========================================================================== */

.woocommerce span.onsale {
  top: 0;
  left: 0;
  padding: 6px 10px !important;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background-color: #111111;
  border-radius: 0;
}

/* ==========================================================================
   Single product: brand + attribute pills
   ========================================================================== */

.tonbora-single-brand {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #737373;
}

.tonbora-attr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.tonbora-attr-pill {
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111111;
  background: transparent;
  border: 1px solid #E5E5E5;
  border-radius: 0;
}

/* ==========================================================================
   Off-canvas navigation drawer
   ========================================================================== */

/* nav-drawer.js moves this button into the real left column of both the
   desktop and mobile header trees, so it's a normal flex child now — no
   more position:fixed/independent floating. */
/* The old floating/cloned MENU trigger classes (.tonbora-menu-trigger,
   .menu-toggle-editorial) and the rules hiding Botiga's native
   menu/hamburger components are gone — the trigger (now a plain "Menu"
   text link, #tonbora-drawer-trigger, styled via .tonbora-text-link)
   renders directly in place in inc/header.php, and Botiga's entire
   native header (including that menu/hamburger) is hidden as one unit
   in inc/header.php's tonbora_hide_native_header(), so hiding its
   individual pieces here is no longer needed. */

body.tonbora-drawer-open {
  overflow: hidden;
}

.tonbora-drawer-overlay,
.bhfb-mobile-menu-wrapper-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999 !important;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tonbora-drawer-overlay.is-visible {
  opacity: 1;
}

.tonbora-drawer,
.bhfb-mobile-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9999 !important;
  width: min(520px, 92vw);
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #FAFAFA;
  transform: translateX(-100%);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  padding: 36px 32px 40px 40px !important;
  box-sizing: border-box !important;
}

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

body.admin-bar .tonbora-drawer,
body.admin-bar .bhfb-mobile-menu-wrapper {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
}

.tonbora-drawer-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 24px !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
  margin-bottom: 32px !important;
}

.tonbora-drawer-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #767676;
}

.tonbora-drawer-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: #111111 !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.tonbora-drawer-close:hover {
  opacity: 0.5 !important;
  transform: rotate(90deg) !important;
}

/* Two-column editorial split: left = five primary sections, right =
   that section's real subcategories/brands, swapped by JS via
   data-section matching rather than five separate always-rendered
   lists (only one .tonbora-secondary-panel is ever display:block). */
.tonbora-drawer-body {
  flex: 1 0 auto;
  display: flex;
  gap: 40px;
  overflow-y: auto;
}

.tonbora-drawer-primary {
  flex: 0 0 auto;
  width: 40%;
}

.tonbora-primary-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tonbora-primary-item + .tonbora-primary-item {
  margin-top: 4px;
}

.tonbora-primary-item a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 2;
  color: #999999;
  text-decoration: none;
  transition: color 200ms ease;
}

.tonbora-primary-item.is-active a,
.tonbora-primary-item a:hover {
  color: #111111;
}

/* No border/rule between the two columns (Massimo Dutti's own mega-menu
   separates columns with whitespace alone, never a divider line) — the
   40px flex gap on .tonbora-drawer-body is the only separation. */
.tonbora-drawer-secondary {
  flex: 1 1 auto;
}

.tonbora-secondary-panel {
  display: none;
}

.tonbora-secondary-panel.is-active {
  display: block;
}

.tonbora-drawer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tonbora-drawer-list li + li {
  margin-top: 4px;
}

.tonbora-drawer-list a {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 2.2;
  color: #111111;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.tonbora-drawer-list a:hover {
  opacity: 0.6;
}

.tonbora-drawer-all-link,
.tonbora-secondary-single-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
  border-bottom: 1px solid #111111;
}

.tonbora-secondary-single-link {
  margin-top: 0;
  font-size: 14px;
}

@media screen and (max-width: 480px) {
  .tonbora-drawer-body {
    gap: 24px;
  }

  .tonbora-drawer-primary {
    width: 36%;
  }

}

.tonbora-drawer-footer {
  padding-top: 32px;
  margin-top: 32px;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* Full-width hero wordmark — back at the bottom of the drawer, above
   the shipping/language meta row (moved to the top briefly, reverted).
   Symmetric 24px top/bottom padding around the logo itself, no border
   of its own — .tonbora-drawer-locale directly below already draws
   its own border-top as the divider, so a second one here would double
   up. text-justify: inter-character is what actually stretches a
   single word ("TONBŌRA" has no spaces, so plain text-align: justify
   has no word-gap to expand) across the full container width —
   Chromium-only; Firefox/Safari fall back to a normal left-aligned
   word at the same size, not a broken layout.

   text-align-last: justify is load-bearing, not redundant — by
   default text-align: justify skips the LAST line of a block (left-
   aligning it instead), and a single line of text (no wrapping) IS
   the last line, so without this the whole thing silently fell back
   to plain left-aligned text: "T" flush left, ragged whitespace on
   the right where the justification should have been. Also dropped
   the fixed letter-spacing that was here — a static per-character gap
   works against inter-character justify's own width-fitting, which
   is a competing "stretch to fill" mechanism already doing that job. */
.tonbora-drawer-logo-wrap {
  width: 100%;
  padding: 24px 0;
}

.tonbora-drawer-logo {
  display: block;
  width: 100%;
  font-family: var(--tb-font-logo);
  font-size: clamp(48px, 6.5vw, 84px);
  font-weight: 400;
  text-transform: uppercase;
  color: #111111;
  line-height: 0.9;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
}

/* Drawer's own shipping-region + language block — bottom of the drawer,
   per spec: an active-region line with a "Change" trigger that reopens
   the welcome modal, and a vertical/row language list. Kept deliberately
   compact (9px, tight tracking/gaps) — this is a status line + quick
   switch, not a primary piece of drawer content. */
.tonbora-drawer-locale {
  margin-top: 32px;
}

/* The whole row is the trigger now (data-tnb-region-trigger moved here
   from a separate "Change" button, which is gone) — click anywhere on
   "Shipping To: ..." to open the region modal, rather than needing to
   land on a small separate link next to it. Button-reset properties
   only matter here because this is now a <button>, not a <div>. */
.tonbora-drawer-locale-region {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  text-align: left;
  cursor: pointer;
}

.tonbora-drawer-locale-region:hover .tonbora-drawer-locale-label {
  color: #111111;
}

.tonbora-drawer-locale-label {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #767676;
  transition: color 200ms ease;
}

.tonbora-drawer-locale-languages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
}

.tonbora-drawer-locale-lang {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #767676;
  text-decoration: none;
}

.tonbora-drawer-locale-lang:hover,
.tonbora-drawer-locale-lang.is-current {
  color: #111111;
}

@media screen and (max-width: 480px) {
  .tonbora-drawer-top,
  .tonbora-drawer-body,
  .tonbora-drawer-footer {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ==========================================================================
   Logistics drawer — the "Master-Box Route" panel opened from the
   ticker's "Current Batch" trigger. A right-side slide-out, its own
   component distinct from the left-side nav drawer above.
   ========================================================================== */

body.tonbora-logistics-drawer-open {
  overflow: hidden;
}

.tonbora-logistics-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tonbora-logistics-overlay.is-visible {
  opacity: 1;
}

.tonbora-logistics-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: min(440px, 92vw);
  background: #FFFFFF;
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  padding: 36px 40px 40px;
  box-sizing: border-box;
}

.tonbora-logistics-drawer.is-open {
  transform: translateX(0);
}

.tonbora-logistics-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

.tonbora-logistics-drawer-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111111;
}

.tonbora-logistics-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: #111111;
  transition: opacity 200ms ease, transform 200ms ease;
}

.tonbora-logistics-drawer-close:hover {
  opacity: 0.5;
  transform: rotate(90deg);
}

.tonbora-route-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tonbora-route-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #E5E5E5;
}

.tonbora-route-step:first-child {
  padding-top: 0;
}

.tonbora-route-step:last-child {
  border-bottom: none;
}

.tonbora-route-step-num {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #999999;
}

.tonbora-route-step-title {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111111;
}

.tonbora-route-step-copy {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: #757575;
}

@media screen and (max-width: 480px) {
  .tonbora-logistics-drawer {
    padding: 28px 24px 32px;
  }
}

/* ==========================================================================
   Welcome region/language modal — first-visit overlay (localStorage-gated,
   see assets/js/region-modal.js), reopenable anytime from the nav drawer
   or footer via [data-tnb-region-trigger].
   ========================================================================== */

body.tonbora-region-modal-open {
  overflow: hidden;
}

/* pointer-events: none is load-bearing, not decorative — this overlay
   only ever relied on its `hidden` attribute to stay non-interactive,
   but region-modal.js's closeModal() never restored `hidden` (unlike
   nav-drawer.js/logistics-drawer.js's equivalents, which both do).
   Once opened once, it became a permanent invisible, full-viewport,
   z-index:9998 layer silently absorbing every click on the page below
   it — including the footer's language switcher links — since opacity
   alone doesn't stop hit-testing. */
.tonbora-region-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.tonbora-region-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.tonbora-region-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.tonbora-region-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.tonbora-region-modal-panel {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  padding: 48px 40px;
  text-align: center;
  box-sizing: border-box;
}

.tonbora-region-modal-title {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111111;
}

.tonbora-region-modal-subtitle {
  margin: 0 0 32px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: #757575;
}

.tonbora-modal-field {
  margin: 0 0 24px;
  text-align: left;
}

.tonbora-field-label {
  display: block;
  padding: 0 0 10px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999999;
}

.tonbora-select-wrapper {
  position: relative;
}

/* Custom arrow drawn in CSS rather than relying on the native one —
   browsers render that inconsistently, and this keeps it a plain
   hairline chevron matching the rest of the site's iconography. */
.tonbora-select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1px solid #111111;
  border-bottom: 1px solid #111111;
  transform: rotate(45deg);
  pointer-events: none;
}

.tonbora-editorial-select {
  width: 100%;
  padding: 14px 40px 14px 16px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  font-size: 12px;
  font-weight: 300;
  color: #111111;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 200ms ease;
}

.tonbora-editorial-select:hover,
.tonbora-editorial-select:focus {
  border-color: #111111;
  outline: none;
}

/* Fill/border/color/hover come from the global button system. */
.tonbora-region-submit {
  width: 100%;
  margin-top: 8px;
  padding: 15px 20px 8px;
  font-size: 11px;
}

@media screen and (max-width: 480px) {
  .tonbora-region-modal-panel {
    padding: 36px 24px;
  }
}

/* ==========================================================================
   Cookie consent banner — a separate first-visit prompt from the region
   modal above (own dismissal, shown alongside rather than gating it).
   ========================================================================== */

.tonbora-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9997;
  background: #FFFFFF;
  border-top: 1px solid #E5E5E5;
  transform: translateY(100%);
  transition: transform 300ms ease;
}

.tonbora-cookie-banner.is-visible {
  transform: translateY(0);
}

.tonbora-cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 48px;
}

.tonbora-cookie-banner-text {
  flex: 1 1 420px;
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: #555555;
}

.tonbora-cookie-banner-text a {
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fill/border/color/hover come from the global button system. */
.tonbora-cookie-accept {
  flex-shrink: 0;
  padding: 13px 32px 8px;
  font-size: 11px;
}

@media screen and (max-width: 600px) {
  .tonbora-cookie-banner-inner {
    padding: 18px 24px;
  }

  .tonbora-cookie-accept {
    width: 100%;
  }
}

/* ==========================================================================
   Site footer — editorial, centered, minimalist
   ========================================================================== */

.tonbora-footer {
  background: #FFFFFF;
  padding: 80px 24px 40px;
  border-top: 1px solid #EDEDED;
}

.tonbora-footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px 64px;
  max-width: 1100px;
  margin: 0 auto 56px;
  text-align: center;
}

.tonbora-footer-col {
  min-width: 140px;
}

.tonbora-footer-heading {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111111;
}

.tonbora-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tonbora-footer-list li + li {
  margin-top: 10px;
}

.tonbora-footer-list a {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #767676;
  text-decoration: none;
  transition: color 200ms ease;
}

.tonbora-footer-list a:hover {
  color: #111111;
}

.tonbora-footer-market {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 48px;
}

.tonbora-footer-locale-item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.tonbora-footer-locale-item:hover {
  opacity: 0.6;
}

.tonbora-footer-locale-item .is-current {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Language dropdown — a plain button + absolutely-positioned list
   rather than a native <select> (can't be styled without its own
   browser-drawn frame) or the old inline "EN / ES / DE / RU / UKR"
   row. Deliberately no border/box-shadow on the menu itself — just
   floating text on the footer's own white background, per "don't
   frame it". */
.tonbora-footer-lang-dropdown {
  position: relative;
}

.tonbora-footer-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tonbora-footer-lang-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5,9 12,16 19,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 200ms ease;
}

.tonbora-footer-lang-dropdown.is-open .tonbora-footer-lang-chevron {
  transform: rotate(180deg);
}

/* A single compact row (matching the old inline "EN / ES / DE / RU /
   UKR" layout), not a tall vertical stack — five short codes read as
   one glance-able line, not a five-line list. */
.tonbora-footer-lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #FFFFFF;
  white-space: nowrap;
}

.tonbora-footer-lang-menu li {
  margin: 0;
  padding: 0;
}

.tonbora-footer-lang-menu a {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
  text-align: center;
  transition: opacity 200ms ease;
}

.tonbora-footer-lang-menu a:hover {
  opacity: 0.6;
}

.tonbora-footer-lang-menu a.is-current {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tonbora-footer-locale-divider {
  color: #CCCCCC;
  font-size: 11px;
}

.tonbora-footer-newsletter {
  max-width: 480px;
  margin: 0 auto 56px;
  text-align: center;
}

.tonbora-footer-newsletter-copy {
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: #767676;
}

.tonbora-footer-newsletter-message {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tonbora-footer-newsletter-message.is-success {
  color: #111111;
}

.tonbora-footer-newsletter-message.is-error {
  color: #B3261E;
}

.tonbora-footer-newsletter-form {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* No box — bottom line only, matching the button treatment next to it.
   box-shadow: none is required, not just cosmetic — Botiga's own
   global input:focus rule (parent theme styles.css) adds
   `box-shadow: 0 0 0 1px` on every input type, which draws its own
   four-sided ring completely independent of border/outline and was
   what actually produced the boxed-in look on focus. */
.tonbora-footer-newsletter-form input[type="email"] {
  flex: 1 1 auto;
  max-width: 280px;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid #E0E0E0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #111111;
  transition: border-color 200ms ease;
}

.tonbora-footer-newsletter-form input[type="email"]:focus {
  border-bottom-color: #111111;
  outline: none;
  box-shadow: none !important;
}

.tonbora-footer-newsletter-form input[type="email"]::placeholder {
  color: #9E9E9E;
}

/* Fill/border/color/hover come from the global button system. */
.tonbora-footer-newsletter-form button {
  padding: 12px 24px 8px;
  font-size: 11px;
}

/* A single centered stacked column (Legal links, then operator info,
   then region/language) — not a side-by-side grid. Missed on the first
   pass through the Figma correction: the text content matched already,
   but the block was still laid out as a left-aligned 4-column grid
   (also now stale on its own terms — the old 4th "Import FAQ" column
   was removed elsewhere, leaving grid-template-columns: repeat(4, 1fr)
   rendering 3 real columns plus one empty track). align-items: center
   (not stretch) is what lets each block hug its own natural content
   width instead of stretching to the full 1100px. */
.tonbora-footer-legal-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 56px;
  padding-top: 40px;
  border-top: 1px solid #EDEDED;
  text-align: center;
}

.tonbora-footer-legal-col p {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #767676;
}

.tonbora-footer-legal-col p:last-child {
  margin-bottom: 0;
}

.tonbora-footer-legal-col a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

.tonbora-footer-legal-col a:hover {
  color: #111111;
}


.tonbora-footer-faq {
  border-top: 1px solid #EDEDED;
  padding: 12px 0;
}

.tonbora-footer-faq:last-child {
  border-bottom: 1px solid #EDEDED;
}

/* flex (not position:absolute) for the +/- marker — its size is set in
   em, relative to the summary's own font-size, so it scales correctly
   in both the small 12px footer instance and the much larger 15px
   homepage FAQ instance instead of staying a tiny fixed 13px next to
   whatever-size question text surrounds it. */
.tonbora-footer-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #111111;
  cursor: pointer;
  list-style: none;
}

.tonbora-footer-faq summary::-webkit-details-marker {
  display: none;
}

/* Thin-stroke SVG (data-URI), not a text glyph — matches the navbar's
   own icon style (hairline stroke, currentColor-weight round caps)
   rather than a font character, which read as a barely-visible dot at
   small sizes and didn't match anything else on the site. em-sized so
   it scales with summary's own font-size (12px footer / 15px homepage
   FAQ instance) instead of a fixed pixel size. */
.tonbora-footer-faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.tonbora-footer-faq[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E");
}

.tonbora-footer-faq p {
  margin-top: 10px;
}

.tonbora-footer-legal-locale .tonbora-footer-market {
  justify-content: center;
  margin-bottom: 0;
  text-align: center;
}

.tonbora-footer-bottom {
  text-align: center;
}

/* Letter-spacing unified with .tonbora-logo/.tonbora-drawer-logo via
   --tb-logo-tracking — this used to run its own 0.22em, wider than the
   navbar's 0.14em, so the same wordmark visibly re-tracked itself
   between header and footer. */
.tonbora-footer-wordmark {
  margin-bottom: 8px;
  font-family: var(--tb-font-logo);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: var(--tb-logo-tracking);
  text-transform: uppercase;
  color: #111111;
}

/* The one .tonbora-footer-heading instance that's the actual wordmark
   (inc/footer.php's operator column, literal "TONBŌRA") rather than a
   column label like "Legal"/"Help" — those stay on the generic sans
   heading style, only this one switches to the logo typeface/tracking. */
.tonbora-footer-heading-brand {
  font-family: var(--tb-font-logo);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: var(--tb-logo-tracking);
}

.tonbora-footer-copyright {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #9E9E9E;
}

@media screen and (max-width: 719px) {
  .tonbora-footer {
    padding: 56px 20px 32px;
  }

  .tonbora-footer-columns {
    gap: 32px 40px;
    margin-bottom: 40px;
  }

  .tonbora-footer-newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .tonbora-footer-newsletter-form input[type="email"] {
    max-width: none;
  }

  .tonbora-footer-legal-strip {
    gap: 32px;
    margin-bottom: 40px;
  }
}

/* ==========================================================================
   IOSS multi-package split notice — cart & checkout
   ========================================================================== */

.tonbora-ioss-split-notice {
  max-width: 100%;
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid #E5E5E5;
  background: #FAF9F8;
}

.tonbora-split-tag {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
}

.tonbora-ioss-split-notice p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #767676;
}

/* ==========================================================================
   inc/editorial-footer.php was deleted (dead code — its render function
   was hooked to 'botiga_footer', but Botiga's own Header/Footer Builder
   module unconditionally calls remove_all_actions('botiga_footer')
   before registering its own callback, so tonbora_render_editorial_
   footer() never actually fired, ever — confirmed by directly
   inspecting the live $wp_filter callback list, not just reading the
   source. inc/footer.php's tonbora_render_footer()/_footer_legal()
   (hooked to the unconditional 'botiga_footer_before') is the real,
   live footer and already covers the same ground — legal links,
   operator info, region/language switcher — so nothing needed
   preserving. This whole block (.tonbora-master-footer, .tonbora-f-*,
   .tonbora-lang-cluster) styled markup that was never in the DOM.
   ========================================================================== */

/* --- IOSS Split Bar (Cart & Checkout) --- */
.tonbora-ioss-split-bar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid #E5E5E5;
  background: #FAF9F8;
  padding: 20px 24px;
  margin: 24px 0;
}
/* Thin-stroke SVG check, not a text "✓" glyph — matches the navbar's
   own icon style rather than a font character. */
.tonbora-split-indicator {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,13 9,18 20,6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.tonbora-split-content strong {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #111111;
}
.tonbora-split-content p {
  font-size: 12px;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}

/* --- In-Card Price Breakdown (PDP) --- */
.tonbora-breakdown-box {
  border: 1px solid #E5E5E5;
  background: #FAF9F8;
  padding: 16px 20px;
  margin: 24px 0;
}
.tonbora-breakdown-summary {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #111111;
  cursor: pointer;
  outline: none;
}
/* Same reasoning as .tonbora-search-input above — outline: none needs
   a real replacement for keyboard users. */
.tonbora-breakdown-summary:focus-visible {
  outline: 1px solid #111111;
  outline-offset: 3px;
}
.tonbora-breakdown-rows {
  margin-top: 14px;
  border-top: 1px solid #E5E5E5;
  padding-top: 10px;
}
.tonbora-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #666666;
  margin-bottom: 6px;
}
.tonbora-breakdown-row.tonbora-breakdown-total {
  border-top: 1px dashed #D5D5D5;
  padding-top: 8px;
  margin-top: 8px;
  font-weight: 600;
  color: #111111;
}
.tonbora-breakdown-note {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #888888;
  margin: 10px 0 0 0;
}

/* ==========================================================================
   TONBŌRA UNIFIED DESIGN SYSTEM (MASSIMO DUTTI LUXURY FRAMEWORK)
   ========================================================================== */

:root {
  /* Fonts — sans-serif only, site-wide. --tb-site-max-width/--tb-site-
     gutter (defined near the top of this file) are the gutter system;
     kept separate from this palette since they're consumed well beyond
     what this block still styles. */
  --tb-font-sans: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Color Palette */
  --tb-black: #111111;
  --tb-charcoal: #333333;
  --tb-muted: #767676;
  --tb-hairline: #E5E5E5;
  --tb-bg-soft: #F9F9F8;
  --tb-bg-canvas: #FFFFFF;
}

/* 1. Global Typography Reset — sans-serif everywhere, no exceptions.
   !important guards against Botiga's own compiled/customizer typography
   settings re-asserting a serif heading font underneath this. */
body, button, input, select, textarea {
  font-family: var(--tb-font-sans) !important;
  color: var(--tb-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .tonbora-logo-text, .entry-title {
  font-family: var(--tb-font-heading) !important;
  font-weight: 400 !important;
  color: var(--tb-black);
}

/* 2. Catalog & Product Grid (Massimo Dutti 3:4 Proportion) */
/* No padding here — ul.products is a real CSS grid (gap: 40px 16px,
   set earlier in this file) which already spaces cards on both axes.
   The 16px horizontal padding this rule used to add on top of that gap
   was inset INSIDE every cell, including the first and last column, so
   the actual product images sat 16px further from the edge than the
   container's own 48px gutter — misaligning the grid from the navbar
   above it by that same 16px on both sides. */
.woocommerce ul.products li.product {
  text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--tb-font-sans) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--tb-charcoal) !important;
  margin: 16px 0 6px 0 !important;
}

.woocommerce ul.products li.product .price {
  font-size: 12px !important;
  color: var(--tb-black) !important;
  font-weight: 500 !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--tb-muted) !important;
  font-weight: 300 !important;
}

/* 3. Button sizing — fill/border/color/hover come from the global
   button system near the top of this file now. */
.button,
.woocommerce-Button,
.single_add_to_cart_button,
.checkout-button {
  font-size: 10.5px !important;
  padding: 16px 0 8px !important;
}

/* 4. Refined PDP Pricing Transparency Drawer / Micro-Trigger */
.tonbora-breakdown-box {
  margin: 28px 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.tonbora-breakdown-details {
  border: 1px solid var(--tb-hairline) !important;
  background: var(--tb-bg-soft) !important;
  padding: 16px 20px !important;
  transition: all 0.2s ease;
}

.tonbora-breakdown-details[open] {
  background: #FFFFFF !important;
}

.tonbora-breakdown-summary {
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--tb-black) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 5. Checkout & Cart Flow Polish */
.tonbora-ioss-split-bar {
  border-left: 2px solid var(--tb-black) !important;
  border-top: 1px solid var(--tb-hairline) !important;
  border-right: 1px solid var(--tb-hairline) !important;
  border-bottom: 1px solid var(--tb-hairline) !important;
  background: #FFFFFF !important;
  padding: 24px 32px !important;
}

.tonbora-split-content strong {
  font-family: var(--tb-font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: var(--tb-black) !important;
}

.tonbora-split-content p {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--tb-charcoal) !important;
  margin-top: 6px !important;
}