@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;500;600;700;900&family=Jost:wght@500;700&display=swap');

/* ==========================================================================
   TBF — Symmetry look
   Design tokens mirroring turbobrandsfactory.com (Out of the Sandbox, Symmetry)
   ========================================================================== */

:root {
  --color-text: #232323;
  --color-bg: #ffffff;
  --color-link: #bf570a;
  --color-link-hover: #232323;
  --color-scheme-light-bg: #f7f7f7;
  --color-scheme-lighter-bg: #efefef;
  --color-dark-bg: #000000;
  --btn-bg: #232323;
  --btn-bg-hover: #5c5c5c;
  --btn-text: #ffffff;
  --announce-bg: #48300d;
  --announce-text: #ffffff;
  --heading-font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --body-font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --heading-weight: 200;
  --body-font-size: 14px;
  --container-max: 1600px;
  --gutter: 20px;
  --transition: 0.2s ease;
  --header-height: 92px;
  --menubar-height: 56px;
  --site-header-height: 148px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-link-hover); }
h1, h2, h3, h4, h5, h6, .heading-font { font-family: var(--heading-font); font-weight: var(--heading-weight); line-height: 1.25; letter-spacing: 0.03em; }
h1 { font-size: 42px; }
h2 { font-size: 34px; }
h3 { font-size: 26px; }
h4, .h4 { font-size: 20px; font-weight: 500; letter-spacing: 0.1em; }
h5 { font-size: 17px; font-weight: 500; }
h6, .h6 { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.majortitle { text-transform: uppercase; text-align: center; }
.section-custom-content .tbf-sale-title .majortitle {
  font-size: 22px;
  font-weight: 400;
}
.section-custom-content .tbf-sale-title .majortitle strong { font-weight: 700; }
.section-custom-content .btn.btn--primary {
  font-size: 14px;
  padding: 10px 22px;
}
.rte { word-wrap: break-word; }
.rte p:first-child { margin-top: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -999em; top: 0; background: #fff; padding: 8px 14px; z-index: 9999; }
.skip-link:focus { left: 10px; }

.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--max { max-width: var(--container-max); }
.container--no-max { max-width: none; width: 100%; }
.page-content { padding: 50px var(--gutter); }
.page-title { text-align: center; text-transform: uppercase; font-weight: 200; margin: 0 0 30px; }
.collection-hero__media {
  min-height: 320px;
  background-color: #232323;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.collection-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
}
.collection-hero__inner { position: relative; padding-top: 90px; padding-bottom: 28px; color: #fff; }
.collection-hero__kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 13px;
  opacity: 0.9;
}
.collection-hero__title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 56px);
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.05;
}
.collection-hero__desc { max-width: 640px; font-size: 15px; color: rgba(255, 255, 255, 0.92); margin: 0 0 12px; }
.collection-hero__desc p { margin: 0; }
.collection-hero__count {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  color: #fff;
  margin: 0;
}
.collection-hero__count::before { content: "\2b06\00a0\00a0"; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 13px 28px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  border-radius: 3px;
}
.btn--primary { background: var(--btn-bg); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-bg-hover); color: #fff; }
.btn--secondary { background: #fff; color: #232323; border-color: #232323; }
.btn--secondary:hover { background: #232323; color: #fff; }
.btn--inherit { background: transparent; color: #fff; border-color: #fff; }
.btn--inherit:hover { background: #fff; color: #000; }

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */
.section-announcement-bar { position: relative; z-index: 30; }
.announcement-bar { background: var(--announce-bg); color: var(--announce-text); font-size: var(--announcement-font-size, 18px); }
.announcement-bar .container { display: flex; align-items: center; justify-content: center; min-height: 42px; gap: 20px; }
.announcement-bar__middle { flex: 1 1 auto; text-align: center; }
.announcement-bar__middle a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announcement-bar__middle a:hover { color: #e0cdb0; }
.announcement-bar__left, .announcement-bar__right { flex: 1 1 25%; }
.announcement-bar__left { display: flex; justify-content: flex-start; }
.announcement-bar__right { display: flex; justify-content: flex-end; }

.social { display: inline-flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.social__link { color: var(--announce-text); padding: 6px; }
.social__link svg { width: 20px; height: 20px; display: block; }
.announcement-bar .social__link svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Header: logo block (row 1) + menu block (row 2) - two separate bars
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 40; }

/* Default (inner pages): both rows white */
.pageheader { background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }
.menubar { background: #fff; }

/* Homepage: both rows transparent over the hero slideshow */
.pageheader--transparent { background: transparent; box-shadow: none; }
.tbf-front .site-header .menubar { background: transparent; box-shadow: none; }
.tbf-front .pageheader--transparent .logo-area a { color: #fff; }
.tbf-front .pageheader--transparent .logo-area a:hover { color: #e0cdb0; }
.tbf-front .site-header .menubar .navigation__link { color: #fff; }
.tbf-front .site-header .menubar .navigation__link:hover { color: #e0cdb0; }
.tbf-front .site-header .menubar .navigation__link::after { background: #fff; }

/* Menu hover -> the menu bar turns white */
.tbf-front .menubar:hover,
.tbf-front .menubar:focus-within {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.tbf-front .menubar:hover .navigation__link,
.tbf-front .menubar:focus-within .navigation__link,
.tbf-front .menubar:hover .navigation__link:hover { color: var(--color-text); }

/* Scrolled -> whole header turns white */
.site-header.is-scrolled { background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }
.site-header.is-scrolled .menubar { background: #fff; }
.site-header.is-scrolled .logo-area a,
.site-header.is-scrolled .menubar .navigation__link { color: var(--color-text); }
.site-header.is-scrolled .menubar .navigation__link:hover { color: var(--color-link); }

.logo-area { display: flex; align-items: center; height: var(--header-height); padding: 0 var(--gutter); }
.logo-area__left, .logo-area__right { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.logo-area__left__inner, .logo-area__right__inner { display: flex; align-items: center; gap: 8px; width: 100%; }
.logo-area__left__inner { justify-content: flex-start; }
.logo-area__right__inner { justify-content: flex-end; }
.logo-area__middle { flex: 1 0 auto; display: flex; justify-content: center; text-align: center; }
.logo-area__middle--logo-text .logo__link { font-family: 'Jost', var(--heading-font); font-weight: 700; font-size: 30px; letter-spacing: 0.28em; color: var(--color-text); text-transform: uppercase; }
.logo__image, .logo .custom-logo { width: auto; height: auto; max-height: 74px; max-width: 220px; object-fit: contain; }
.logo__image--mask {
  display: inline-block;
  width: 220px;
  height: 74px;
  max-width: 100%;
  background-color: currentColor;
  -webkit-mask: url('../img/logo.png') no-repeat center / contain;
  mask: url('../img/logo.png') no-repeat center / contain;
}

/* Logo color states: white on the transparent homepage header,
   black silhouette once scrolled or on any inner page. */
.tbf-front .pageheader--transparent:not(.is-scrolled) .logo .custom-logo {
  filter: brightness(0) invert(1);
}
.site-header.is-scrolled .logo .custom-logo,
.pageheader:not(.pageheader--transparent) .logo .custom-logo {
  filter: brightness(0);
}
.logo-area__right a { color: var(--color-text); display: inline-flex; align-items: center; padding: 6px; position: relative; }
.logo-area__right a:hover { color: var(--color-link); }
.logo-area__right .icon { width: 24px; height: 24px; }
.cart-link__icon { position: relative; display: inline-block; }
.tbf-cart-count {
  position: absolute; top: -6px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--btn-bg); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 18px; text-align: center;
  border-radius: 50%;
}
.mobile-nav-toggle { display: none; background: none; border: 0; padding: 6px; color: inherit; cursor: pointer; }

/* Menu block (row 2) */
.menubar {
  display: flex; align-items: center; justify-content: center;
  height: var(--menubar-height); position: relative;
}
.menubar .navigation__tier-1 { gap: 12px 34px; flex-wrap: wrap; justify-content: center; }
.menubar .navigation__link { padding: 8px 0; }

.navigation__tier-1 { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; white-space: nowrap; }
.navigation__link {
  font-family: var(--heading-font);
  font-size: 13px; font-weight: 500; letter-spacing: 0.12em;
  color: var(--color-text); text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.navigation__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.navigation__link:hover::after { transform: scaleX(1); }

/* Featured promotional menu items (3x size, brand colors, slow blink) */
.tbf-front .site-header .menubar .navigation__link.menu-feature-end,
.tbf-front .site-header .menubar .navigation__link.menu-feature-end:hover,
.menubar .navigation__link.menu-feature-end,
.menubar .navigation__link.menu-feature-end:hover { color: #9b111e; }
.tbf-front .site-header .menubar .navigation__link.menu-feature-below,
.tbf-front .site-header .menubar .navigation__link.menu-feature-below:hover,
.menubar .navigation__link.menu-feature-below,
.menubar .navigation__link.menu-feature-below:hover { color: #00a651; }
.menubar .navigation__link.menu-feature-end,
.menubar .navigation__link.menu-feature-below {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: tbf-blink 2.6s ease-in-out infinite;
}
.tbf-mobile-nav .navigation__link.menu-feature-end,
.tbf-mobile-nav .navigation__link.menu-feature-below {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  animation: tbf-blink 2.6s ease-in-out infinite;
}
@keyframes tbf-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Mega menu dropdowns: panel anchors to .site-header (sticky = positioned)
   so it opens in a full-width band BELOW the menu block, matching Symmetry. */
.navigation__tier-2-container {
  position: absolute; left: 50%; top: 100%; z-index: 60;
  width: 100vw; transform: translateX(-50%) translateY(10px);
  background: #fff; color: var(--color-text);
  border-bottom: 1px solid #e5e5e5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Closing is delayed (0.3s) so the dropdown doesn't vanish while the
     pointer is still travelling from the menu into the panel. */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.3s;
  padding: 26px 0 30px;
}
/* Hover bridge: an invisible strip above the panel, so moving the pointer
   from the menu band down into the dropdown never falls into a dead zone. */
.navigation__tier-2-container::before {
  content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
  pointer-events: auto;
}
.navigation__item--with-children:hover > .navigation__tier-2-container,
.navigation__item--with-children:focus-within > .navigation__tier-2-container {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.navigation__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }
.navigation__column { min-width: 0; }
.navigation__column-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text); margin-bottom: 12px; display: inline-block;
}
.navigation__column-title::after { display: none; }
.navigation__tier-3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.navigation__tier-2 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 34px; }
.navigation__item--with-small-menu .navigation__tier-2 .navigation__link { font-weight: 500; text-transform: uppercase; font-size: 13px; letter-spacing: 0.1em; }
.navigation__tier-3 .navigation__link { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #5b5b5b; }
.navigation__tier-3 .navigation__link:hover { color: var(--color-link); }
.navigation__tier-3 .navigation__link::after { display: none; }

/* --------------------------------------------------------------------------
   Slideshow
   -------------------------------------------------------------------------- */
/* On the homepage the hero slides UP under the transparent two-row header so
   the logo block and menu block are part of the carousel. */
.tbf-front .section-slideshow { margin-top: calc(-1 * var(--site-header-height)); }
.tbf-slideshow { position: relative; overflow: hidden; background: var(--color-scheme-light-bg); }
.tbf-slideshow__track { position: relative; aspect-ratio: 2 / 1; }
.tbf-slideshow__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.tbf-slideshow__slide.is-active { opacity: 1; z-index: 1; }
.tbf-slideshow__slide a, .tbf-slideshow__slide picture { display: block; height: 100%; }
.tbf-slideshow__slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tbf-slideshow__pagination {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 10;
}
.tbf-slideshow__pagination .page-btn { background: none; border: 0; padding: 4px; cursor: pointer; }
.page-btn__circle { display: block; }
.page-btn__fg-circle { stroke: #fff; stroke-width: 1; fill: none; transform: scale(0); transform-origin: center; transition: transform .35s ease; }
.page-btn__bg-circle { stroke: rgba(255,255,255,.45); stroke-width: 1; fill: none; }
.page-btn.is-active .page-btn__fg-circle { transform: scale(1); }

/* --------------------------------------------------------------------------
   Sale / countdown custom content
   -------------------------------------------------------------------------- */
.fully-spaced-row { padding-top: 50px; padding-bottom: 50px; }
.fully-spaced-row--small { padding-top: 30px; padding-bottom: 30px; }
.fully-spaced-row--medium { padding-top: 40px; padding-bottom: 40px; }
.flexible-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }
.column--third { width: calc(33.333% - 20px); flex: 1 1 calc(33.333% - 20px); }
.valign-middle { align-items: center; }
.align-center { text-align: center; }
.align-ltr-left { text-align: left; }
.lightly-spaced-row > span { color: #7d786d; }
.lightly-spaced-row svg { width: 34px; height: 34px; }
.lightly-spaced-row { margin-bottom: 10px; }
.lightish-spaced-row-above { margin-top: 20px; }
.tbf-sale-title h2 { font-size: 26px; font-weight: 200; text-transform: uppercase; }

.tbf-countdown .countdown__grid { display: grid; grid-template-columns: repeat(4, auto); gap: 14px; justify-content: center; }
.tbf-countdown .countdown__item { display: flex; flex-direction: column; min-width: 62px; }
.tbf-countdown .countdown__number {
  font-family: var(--heading-font); font-size: var(--size, 38px); font-weight: 200;
  line-height: 1; letter-spacing: 0.04em;
}
.tbf-countdown .countdown__unit { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 8px; color: #7d786d; }

/* --------------------------------------------------------------------------
   Gallery tiles
   -------------------------------------------------------------------------- */
.gallery { display: grid; gap: 12px; }
.gallery--grid-desktop-4 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); }
.gallery--with-margins { gap: 12px; }
.gallery__item { position: relative; overflow: hidden; background: var(--color-scheme-lighter-bg); }
.gallery__item--enlarged { grid-row: span 2; height: auto !important; }
.gallery__image { position: absolute; inset: 0; }
.gallery__image img, .gallery__image img.fit { width: 100%; height: 100%; object-fit: cover; display: block; }
.text-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 14px; pointer-events: none;
}
.image-overlay--edge-boxes { outline: 1px solid rgba(255,255,255,.55); outline-offset: -14px; }
.text-overlay__inner--pad-standard { padding: 16px 10px 14px; }
.text-overlay__button-row { display: flex; gap: 10px; justify-content: center; }
.text-overlay__button btn, a.text-overlay__button { pointer-events: auto; }
.gallery__item:hover .gallery__image img { transform: scale(1.03); }
.gallery__image img { transition: transform .6s cubic-bezier(.25,.46,.45,.94); }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee-container { overflow: hidden; display: flex; }
.marquee {
  display: flex; flex: 0 0 auto; min-width: 100%;
  animation: tbf-marquee var(--duration) linear infinite;
  padding-top: var(--vertical-padding); padding-bottom: var(--vertical-padding);
}
.marquee-content { display: flex; flex: 0 0 auto; min-width: 100%; align-items: center; }
.marquee-item { flex: 0 0 auto; padding-right: var(--space); }
.marquee-text {
  font-family: var(--heading-font); font-size: var(--text-size);
  letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; white-space: nowrap;
  font-weight: 200;
}
.marquee-text--stencil { color: transparent; -webkit-text-stroke: 2px var(--color, #000); }
.marquee:hover { animation-play-state: paused; }
@keyframes tbf-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* --------------------------------------------------------------------------
   Featured collection / product grid
   -------------------------------------------------------------------------- */
.collection-slider-row { padding: 10px 0 30px; }
.hometitle { margin: 30px 0 10px; }
.hometitle .h4 { margin: 0; font-weight: 200; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; }
.hometitle a { color: var(--color-text); }
.hometitle a:hover { color: var(--color-link); }
.view-all { margin: 6px 0 26px; }
.small-feature-link { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: var(--color-text); }
.small-feature-link:hover { color: var(--color-link); }

.product-grid { display: grid; gap: 18px 20px; }
.product-grid--per-row-2 { grid-template-columns: repeat(2, 1fr); }
.product-grid--per-row-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid--per-row-4 { grid-template-columns: repeat(4, 1fr); }

/* Product card */
.collection-listing { padding-bottom: 20px; }
.product-block { position: relative; background: #fff; }
.block-inner-inner { position: relative; }
.image-cont { position: relative; overflow: hidden; background: var(--color-scheme-light-bg); }
.img-ar { width: 100%; aspect-ratio: var(--aspect-ratio, 0.67); overflow: hidden; position: relative; }
.img-ar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-ar--cover img { object-fit: cover; }
.product-block__image--secondary { position: absolute; inset: 0; opacity: 0; transition: opacity var(--transition); }
.product-block:hover .product-block__image--secondary { opacity: 1; }
.product-block:hover .product-block__image--primary { opacity: 0; }
.product-block__image--primary, .product-block__image--secondary { width: 100%; }
.product-label-container { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.product-label--sale {
  background: #e9e9e9; color: #232323;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px;
}
.image-page-button {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; background: #fff; border: 1px solid #ddd; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
}
.product-block:hover .image-page-button { display: inline-flex; }
.image-page-button--previous { left: 8px; }
.image-page-button--next { right: 8px; }
.quickbuy-toggle {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  background: #fff; color: #232323;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 10px; text-align: center; border-radius: 3px;
  transform: translateY(8px); opacity: 0; transition: opacity var(--transition), transform var(--transition);
}
.product-block:hover .quickbuy-toggle { opacity: 1; transform: translateY(0); }
.quickbuy-toggle:hover { background: #232323; color: #fff; }
.product-block__detail { text-align: left; padding: 12px 2px 4px; }
.product-block__title {
  font-size: 14px; font-weight: 400; letter-spacing: 0.02em; margin: 0 0 4px; line-height: 1.4;
}
.product-block:hover .product-block__title { color: var(--color-link); }
.product-price--block .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.price__current { font-size: 15px; font-weight: 600; color: #232323; }
.price__was { font-size: 14px; opacity: 0.5; text-decoration: line-through; font-weight: 400; }
.price__current:first-child + .price__was { margin-left: 4px; }
.product-block a.product-link { color: var(--color-text); }

/* Pagination */
.pagination-row { display: flex; justify-content: center; gap: 8px; margin: 30px 0 50px; }
.pagination-row .nav-links a, .pagination-row .nav-links span.page-numbers { display: inline-block; padding: 8px 14px; border: 1px solid #ddd; color: var(--color-text); }
.pagination-row .nav-links .current { background: var(--btn-bg); color: #fff; border-color: var(--btn-bg); }

/* --------------------------------------------------------------------------
   Collection (archive) page
   -------------------------------------------------------------------------- */
.pageheader--spacer { height: 34px; }
.collection-heading { padding-bottom: 20px; text-align: center; }
.collection-title { text-transform: uppercase; font-weight: 200; font-size: 34px; margin: 10px 0 8px; }
.breadcrumbs { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.breadcrumbs-list { display: inline; list-style: none; margin: 0; padding: 0; }
.breadcrumbs__sep { margin: 0 8px; color: #999; }
.breadcrumbs-list a { color: var(--color-text); }
.breadcrumbs-list a:hover { color: var(--color-link); }
.tbf-archive-grid { padding-bottom: 40px; }

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.product-area { padding-top: 20px; }
.product { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; padding: 10px 0 40px; }
.product-media { position: relative; display: grid; gap: 12px; }
.product-media__main { position: relative; background: var(--color-scheme-light-bg); }
.tbf-main-image { display: none; }
.tbf-main-image.is-active { display: block; }
.tbf-main-image img { width: 100%; display: block; }
.product-media__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.tbf-thumb { width: 84px; border: 1px solid #ddd; padding: 2px; }
.tbf-thumb img { width: 100%; display: block; }
.tbf-thumb:hover { border-color: #999; }
.product-info { display: flex; flex-direction: column; gap: 20px; }
.product-title { font-weight: 200; font-size: 32px; text-transform: none; letter-spacing: 0.02em; margin: 0; }
.product-info__price { display: flex; align-items: baseline; gap: 12px; font-size: 20px; }
.product-info__price .price__current { font-size: 22px; }
.product-info__sku { color: #7d786d; font-size: 12px; letter-spacing: 0.08em; }
.product-purchase-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.quantity-spinner { display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 3px; overflow: hidden; }
.qty-input__btn { background: none; border: 0; width: 40px; height: 46px; font-size: 20px; color: var(--color-text); cursor: pointer; }
.qty-input__btn:hover { background: #efefef; }
.qty-input__input { width: 52px; border: 0; text-align: center; font-family: inherit; font-size: 16px; height: 46px; -moz-appearance: textfield; }
.qty-input__input::-webkit-outer-spin-button, .qty-input__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-purchase-form__add { flex: 1; }
.product-purchase-form .add-to-cart-btn { width: 100%; }
.product-info__description { border-bottom: 1px solid #eee; padding-bottom: 20px; }
.tabs__tab { border-bottom: 1px solid #eee; }
.tabs__label { padding: 16px 0; cursor: pointer; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; }
.tabs__panel { padding: 4px 0 18px; }
.tabs__tab[open] .tabs__label { color: var(--color-link); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--color-dark-bg); color: #fff; }
.section-footer__row-container { padding-top: 44px; }
.section-footer__row--blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.section-footer__title { color: #fff; margin: 0 0 16px; }
.section-footer__text p { margin: 0 0 10px; color: #cfcfcf; font-size: 13px; }
.section-footer__text a { color: #fff; }
.section-footer__text a:hover { color: #e0cdb0; }
.section-footer__text-block .social { margin-top: 18px; }
.section-footer__text-block .social__link { color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.section-footer__text-block .social__link:hover { background: #fff; color: #000; border-color: #fff; }
.section-footer__menu-block__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.section-footer__menu-block__menu a { color: #cfcfcf; font-size: 13px; }
.section-footer__menu-block__menu a:hover { color: #fff; }
.signup-form { display: flex; margin-top: 6px; }
.signup-form .signup-form__email {
  flex: 1; min-width: 0; padding: 11px 14px; font-family: inherit; font-size: 13px;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); border-right: 0; border-radius: 3px 0 0 3px;
}
.signup-form .signup-form__email::placeholder { color: rgba(255,255,255,.6); }
.signup-form__button { border-radius: 0 3px 3px 0; }
.section-footer__row-lower { display: flex; justify-content: space-between; padding: 26px 0 34px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.16); }
.copyright { color: #9a9a9a; font-size: 12px; }
.copyright a { color: #fff; }

/* --------------------------------------------------------------------------
   Mobile nav drawer
   -------------------------------------------------------------------------- */
.tbf-mobile-nav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
  width: min(420px, 88vw);
  background: #fff; color: var(--color-text);
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.25,.46,.45,.94);
  overflow-y: auto; padding: 70px 24px 30px;
}
.tbf-mobile-nav.open { transform: translateX(0); }
.tbf-mobile-nav .navigation__tier-1 { flex-direction: column; gap: 0; }
.tbf-mobile-nav .navigation__item { border-bottom: 1px solid #eee; }
.tbf-mobile-nav .navigation__link { display: block; padding: 14px 0; font-size: 18px; font-weight: 400; }
.tbf-mobile-nav .navigation__link::after { display: none; }
.tbf-mobile-nav .navigation__tier-2,
.tbf-mobile-nav .navigation__tier-3 { list-style: none; margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 0; }
.tbf-mobile-nav .navigation__tier-2 .navigation__link { font-size: 14px; font-weight: 500; padding: 12px 0; }
.tbf-mobile-nav .navigation__tier-3 .navigation__link { font-size: 13px; font-weight: 400; padding: 10px 0; color: #5b5b5b; }
.tbf-mobile-nav .navigation__item--with-children > .navigation__link { font-weight: 600; }
.tbf-drawer-close { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 30px; color: var(--color-text); cursor: pointer; }
.mobile-nav-social { margin-top: 24px; }
.mobile-nav-social .social__link { color: var(--color-text); }

.tbf-drawer-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.tbf-drawer-overlay.show { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Cart drawer
   -------------------------------------------------------------------------- */
.tbf-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 92;
  width: min(420px, 92vw); background: #fff; color: var(--color-text);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.25,.46,.45,.94);
  display: flex; flex-direction: column;
}
.tbf-cart-drawer.open { transform: translateX(0); }
.tbf-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #eee; }
.tbf-cart-drawer__title { font-size: 18px; font-weight: 600; }
.tbf-cart-drawer__close { background: none; border: 0; font-size: 28px; cursor: pointer; color: inherit; }
.tbf-cart-drawer__body { flex: 1; overflow-y: auto; padding: 24px 22px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099.98px) {
  #proxy-nav { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .logo-area { height: 70px; }
  .menubar { display: none; }
  .logo-area__middle--logo-text .logo__link { font-size: 22px; }
}

@media (max-width: 989.98px) {
  .product-grid--per-row-4 { grid-template-columns: repeat(3, 1fr); }
  .product-grid--per-row-3 { grid-template-columns: repeat(2, 1fr); }
  .gallery--grid-desktop-4 { grid-template-columns: repeat(2, 1fr); }
  .column--third { flex-basis: 100%; width: 100%; }
  .product { grid-template-columns: 1fr; gap: 24px; }
  .section-footer__row--blocks { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 767.98px) {
  .announcement-bar .container { min-height: 38px; }
  .announcement-bar { font-size: 15px; }
  .tbf-slideshow .tbf-slideshow__track { aspect-ratio: 1 / 1; }
  .logo__image, .logo .custom-logo { max-height: 60px; max-width: 200px; }
  .logo__image--mask { width: 200px; height: 60px; }
  .product-grid--per-row-4, .product-grid--per-row-3 { grid-template-columns: repeat(2, 1fr); }
  .product-grid--per-row-mob-2 { grid-template-columns: repeat(2, 1fr); }
  .gallery--grid-mobile-1 { grid-template-columns: 1fr; }
  .marquee-text { font-size: calc(var(--text-size) * 0.6); }
  h1 { font-size: 32px; }
  .tbf-sale-title h2 { font-size: 20px; }
  .tbf-countdown .countdown__number { font-size: calc(var(--size, 38px) * 0.8); }
  .collection-title { font-size: 26px; }
  .hometitle .h4 { font-size: 16px; }
  .section-footer__row-lower { flex-direction: column; gap: 16px; }
}

@media (min-width: 768px) {
  .desktop-only { display: flex !important; }
}
@media (max-width: 767.98px) {
  .desktop-only { display: none !important; }
}