/** Shopify CDN: Minification failed

Line 1416:8 Unexpected "{"
Line 1416:17 Expected ":"
Line 1416:24 Unexpected "{"

**/
/* ==========================================================================
   THE TOY FACTORY — Visual Redesign System
   Based on Claude Design handoff (May 2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --tf-pink:        #d974ae;
  --tf-pink-deep:   #b8478f;
  --tf-pink-soft:   #fde7f2;
  --tf-blue:        #1ba4e2;
  --tf-blue-deep:   #0c7fb0;
  --tf-blue-soft:   #e3f4fc;
  --tf-mint:        #6ed3b7;
  --tf-mint-soft:   #e2f7ef;
  --tf-sun:         #ffc23a;
  --tf-sun-soft:    #fff3d1;
  --tf-grape:       #8b6cf0;
  --tf-grape-soft:  #ece4ff;

  /* Neutrals — warm */
  --tf-ink:   #1c1a1a;
  --tf-ink-2: #4a4646;
  --tf-ink-3: #807a78;
  --tf-line:  #efe9ec;
  --tf-line-2:#f7f3f5;
  --tf-cream: #fdfaf6;

  /* Radii */
  --tf-r-sm:   10px;
  --tf-r-md:   16px;
  --tf-r-lg:   24px;
  --tf-r-xl:   32px;
  --tf-r-pill: 999px;

  /* Shadows */
  --tf-shadow-1: 0 1px 2px rgba(28,26,26,.04), 0 4px 12px rgba(28,26,26,.04);
  --tf-shadow-2: 0 4px 12px rgba(28,26,26,.06), 0 24px 48px -12px rgba(184,71,143,.18);
  --tf-shadow-3: 0 30px 80px -20px rgba(28,26,26,.25);
}

/* --------------------------------------------------------------------------
   SHARED SECTION HEADING UTILITIES (used by tf-age-band, tf-featured-collections etc.)
   -------------------------------------------------------------------------- */
.tf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 24px;
}
.tf-section-head .tf-sh-left { max-width: 600px; }
.tf-section-head .tf-sh-eye {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tf-pink-deep, #b8478f);
  display: block;
  margin-bottom: 8px;
}
.tf-section-head h2 {
  font-size: 38px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -.02em;
  color: var(--tf-ink, #1c1a1a);
  line-height: 1.1;
}
.tf-section-head p { font-size: 15px; color: var(--tf-ink-2, #4a4646); margin: 8px 0 0; }
.tf-section-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--tf-pink-deep, #b8478f);
  text-decoration: none;
  flex-shrink: 0;
}
.tf-section-more svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   GLOBAL BASE
   -------------------------------------------------------------------------- */
body {
  background-color: var(--tf-cream) !important;
  color: var(--tf-ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   ANNOUNCEMENT BAR — gradient marquee
   -------------------------------------------------------------------------- */
.announcement-bar {
  background: linear-gradient(90deg, var(--tf-pink) 0%, var(--tf-grape) 50%, var(--tf-blue) 100%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
  height: 38px;
  display: flex;
  align-items: center;
}

/* Hide existing static text layout so only marquee shows */
.announcement-bar .container,
.announcement-bar .row,
.announcement-bar .col-md-7,
.announcement-bar .col-md-5,
.announcement-bar .announcement-bar__message {
  display: none !important;
}

/* Marquee wrapper injected by JS */
.tf-marquee-wrap {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 38px;
}
.tf-marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: tf-marquee 18s linear infinite;
  will-change: transform;
}
.tf-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.tf-marquee-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  display: inline-block;
  flex-shrink: 0;
}
@keyframes tf-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
header.header,
.header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--tf-line) !important;
  box-shadow: none !important;
}

/* Logo text "The Toy Factory" */
.header__heading-link .h2,
.header__heading-link span {
  color: var(--tf-ink) !important;
  font-weight: 900 !important;
}

/* Search bar */
.wbsearch input,
.header__search input,
.search__input {
  border-radius: var(--tf-r-pill) !important;
  background: var(--tf-line-2) !important;
  border: 1.5px solid transparent !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
  color: var(--tf-ink) !important;
}
.wbsearch:focus-within input,
.header__search:focus-within input,
.search__input:focus {
  background: #fff !important;
  border-color: var(--tf-pink) !important;
  box-shadow: 0 0 0 4px var(--tf-pink-soft) !important;
}
.wbsearch .search-btn,
.header__search button[type="submit"],
.search-form__submit {
  background: var(--tf-ink) !important;
  color: white !important;
  border-radius: var(--tf-r-pill) !important;
  border: none !important;
  font-weight: 700 !important;
}

/* Cart & wishlist count badges */
.wbbagcount,
.cart-count-bubble,
.wishcount,
.wishlist-count {
  background: var(--tf-pink) !important;
  border-radius: var(--tf-r-pill) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
}

/* Icon buttons (account, wishlist, cart) hover state */
.icon-btn,
.header__icon {
  border-radius: var(--tf-r-pill) !important;
  transition: background .15s !important;
}
.icon-btn:hover,
.header__icon:hover {
  background: var(--tf-line-2) !important;
}

/* --------------------------------------------------------------------------
   NAVIGATION STRIP
   -------------------------------------------------------------------------- */
.wbmenuup,
.header-top .hmenu,
nav#megamenu,
.header__menu {
  background: #ffffff !important;
}

/* Nav links */
#megamenu li.wbmenul_1 > a.wbmenul1_link,
.nav-link,
.header__menu-item a {
  color: var(--tf-ink) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  transition: color .15s !important;
  position: relative;
}
#megamenu li.wbmenul_1 > a.wbmenul1_link:hover,
#megamenu li.wbmenul_1 > a.wbmenul1_link.active,
.nav-link:hover,
.nav-link.active {
  color: var(--tf-pink-deep) !important;
}

/* Active indicator underline */
#megamenu li.wbmenul_1 > a.wbmenul1_link.active::after,
.nav-item.active .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  background: var(--tf-pink);
  border-radius: 3px 3px 0 0;
}

/* Nav badge pips */
.menu_badge {
  border-radius: var(--tf-r-pill) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* Megamenu dropdown */
.wbmenudropdown,
.level_2,
.mega-menu-wrapper {
  border-radius: 0 0 var(--tf-r-xl) var(--tf-r-xl) !important;
  box-shadow: var(--tf-shadow-3) !important;
  border-top: 1px solid var(--tf-line) !important;
  background: #ffffff !important;
}

/* --------------------------------------------------------------------------
   BUTTONS (global)
   -------------------------------------------------------------------------- */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
  background: var(--tf-pink) !important;
  color: #fff !important;
  border-radius: var(--tf-r-pill) !important;
  font-weight: 800 !important;
  border: none !important;
  transition: background .15s, transform .15s !important;
  letter-spacing: 0 !important;
}
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--tf-pink-deep) !important;
  transform: translateY(-1px) !important;
}

/* Add-to-cart */
.wbcartbtn,
button[name="add"],
.product-form__submit,
.btn-add-to-cart {
  background: var(--tf-pink) !important;
  color: #fff !important;
  border-radius: var(--tf-r-pill) !important;
  font-weight: 900 !important;
  border: none !important;
  transition: background .15s !important;
}
.wbcartbtn:hover,
button[name="add"]:hover,
.product-form__submit:hover {
  background: var(--tf-pink-deep) !important;
}

/* --------------------------------------------------------------------------
   SECTION HEADINGS
   -------------------------------------------------------------------------- */
.sectiontitle h2,
.section-heading h2,
.featured-collection__title h2,
.section__title {
  font-size: 38px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: var(--tf-ink) !important;
  line-height: 1.1 !important;
}
.section-eyebrow,
.section-eye {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--tf-pink-deep) !important;
}

/* --------------------------------------------------------------------------
   FOOTER — dark gradient
   -------------------------------------------------------------------------- */

/* Newsletter band above footer */
.newsltr {
  background: linear-gradient(170deg, #b8478f 0%, #8a3169 100%) !important;
  padding: 40px 0 !important;
  margin-top: 64px;
}
.newsl {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--tf-r-xl) !important;
  padding: 32px 40px !important;
}
.newsl h2 {
  color: #fff !important;
  font-weight: 900 !important;
}
.newsl .news-content p,
.newsl .subnews {
  color: rgba(255,255,255,.7) !important;
  font-size: 13px !important;
}
.newsl .newsletter-form__button,
.newsl #Subscribe {
  background: var(--tf-pink) !important;
  color: #fff !important;
  border-radius: var(--tf-r-pill) !important;
  font-weight: 800 !important;
  border: none !important;
  transition: background .15s !important;
}
.newsl .newsletter-form__button:hover,
.newsl #Subscribe:hover {
  background: var(--tf-pink-deep) !important;
}
.newsl .field__input,
.newsl input[type="email"] {
  border-radius: var(--tf-r-pill) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.newsl .field__input::placeholder,
.newsl input[type="email"]::placeholder {
  color: rgba(255,255,255,.4) !important;
}
.newsl .field__label {
  color: rgba(255,255,255,.5) !important;
}

/* Main footer */
footer.footer,
.footer {
  background: linear-gradient(170deg, #b8478f 0%, #8a3169 100%) !important;
  color: rgba(255,255,255,.7) !important;
  margin-top: 0 !important;
}
.footer .footmiddle {
  padding: 40px 0 32px !important;
}

/* Footer headings */
.footer h2,
.footer h3,
.footer h4,
.footer__blocks-wrapper h3,
.footer-block--newsletter h4,
.footer-collapse h3 {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

/* Footer links */
.footer a,
.footer .footer-collapse li a,
.footblink p a,
.fleft p a,
.footer li a {
  color: rgba(255,255,255,.65) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: color .15s !important;
}
.footer a:hover,
.footer .footer-collapse li a:hover,
.footer li a:hover {
  color: #fff !important;
}

/* Footer body text */
.footer p,
.fleft p {
  color: rgba(255,255,255,.65) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Social icons */
.footer__list-social {
  display: flex !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}
.footer__list-social li {
  display: flex !important;
}
.footer__list-social li a {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--tf-r-pill) !important;
  background: rgba(255,255,255,.08) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  transition: background .15s, transform .15s !important;
  border: none !important;
}
.footer__list-social li a:hover {
  background: var(--tf-pink) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}
.footer__list-social li a svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* Footer bottom bar */
.footcopy,
.footer-copyright,
.footer__content-bottom {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 18px 0 !important;
}
.footcopy a,
.footer-copyright a {
  color: rgba(255,255,255,.5) !important;
}
.footcopy a:hover,
.footer-copyright a:hover {
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   USP BAND (Trust bar)
   -------------------------------------------------------------------------- */
.service,
.usp-band,
.footer-trust-bar {
  background: var(--tf-ink) !important;
  border-radius: var(--tf-r-xl) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}
.service::before {
  content: "";
  position: absolute;
  top: -40px; left: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--tf-pink);
  opacity: .3;
  filter: blur(60px);
  pointer-events: none;
}
.service::after {
  content: "";
  position: absolute;
  bottom: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--tf-blue);
  opacity: .3;
  filter: blur(60px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   COLLECTION / HERO BANNERS
   -------------------------------------------------------------------------- */
.collection-hero,
.section-hero,
.slideshow__slide--first {
  border-radius: var(--tf-r-xl) !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   PRODUCT PAGE (PDP)
   -------------------------------------------------------------------------- */
.product__title h1,
.product-single__title {
  font-size: 38px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  color: var(--tf-ink) !important;
}
.product__vendor,
.product-single__vendor {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--tf-pink-deep) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.product__price .price,
.product-single__price {
  font-size: 34px !important;
  font-weight: 900 !important;
  color: var(--tf-ink) !important;
  letter-spacing: -.02em !important;
}

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.pagination .page-numbers,
.pagination__list li a,
.pagination__item {
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid var(--tf-line) !important;
  color: var(--tf-ink-2) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  transition: border-color .15s, color .15s !important;
}
.pagination .page-numbers:hover,
.pagination__item:hover {
  border-color: var(--tf-pink) !important;
  color: var(--tf-pink-deep) !important;
}
.pagination .page-numbers.current,
.pagination__item.active {
  background: var(--tf-ink) !important;
  color: #fff !important;
  border-color: var(--tf-ink) !important;
}

/* --------------------------------------------------------------------------
   FORM FIELDS (global)
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea,
select {
  border-radius: var(--tf-r-sm) !important;
  border: 1px solid var(--tf-line) !important;
  color: var(--tf-ink) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--tf-pink) !important;
  box-shadow: 0 0 0 3px var(--tf-pink-soft) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   MOBILE MENU DRAWER
   -------------------------------------------------------------------------- */
.header-drawer__inner,
.menu-drawer {
  background: #fff !important;
}
.header-drawer__header,
.menu-drawer__header {
  background: linear-gradient(135deg, var(--tf-pink) 0%, var(--tf-grape) 100%) !important;
  color: #fff !important;
  padding: 56px 20px 20px !important;
}

/* --------------------------------------------------------------------------
   BACK TO TOP / MISC
   -------------------------------------------------------------------------- */
.back-to-top,
#scrolltop {
  background: var(--tf-pink) !important;
  border-radius: 50% !important;
  color: #fff !important;
  box-shadow: var(--tf-shadow-2) !important;
}
.back-to-top:hover,
#scrolltop:hover {
  background: var(--tf-pink-deep) !important;
}

/* --------------------------------------------------------------------------
   SALE/PROMO BANNERS
   -------------------------------------------------------------------------- */
.salebanner,
.promo-banner {
  background: linear-gradient(135deg, var(--tf-ink) 0%, #3a2a30 100%) !important;
  border-radius: var(--tf-r-md) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   REVIEW / TESTIMONIAL STARS
   -------------------------------------------------------------------------- */
.jdgm-star,
.jdgm-prev-badge__stars,
.star-rating,
.spr-icon {
  color: var(--tf-sun) !important;
}

/* --------------------------------------------------------------------------
   SEARCH BAR — kill double border from Bootstrap / theme field styles
   -------------------------------------------------------------------------- */
.tf-search-form .search__input,
.tf-search-form input[type="search"],
.tf-search-form input {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
}
.tf-search-form .field__label { display: none !important; }

/* --------------------------------------------------------------------------
   TOPRATED / HOMEPAGE PRODUCT SECTIONS
   -------------------------------------------------------------------------- */
.toprated {
  max-width: 1440px !important;
  margin: 80px auto 0 !important;
  padding: 0 32px !important;
}
.toprated > .container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Section heading */
.toprated .heading {
  text-align: left !important;
  margin-bottom: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.toprated .heading span {
  font-family: 'Nunito', sans-serif !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: var(--tf-ink, #1c1a1a) !important;
  line-height: 1.1 !important;
  display: block !important;
}
.toprated .heading p {
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  color: var(--tf-ink-3, #807a78) !important;
  font-weight: 500 !important;
  margin: 6px 0 0 !important;
}

/* ── Toprated product grid ──
   Liquid now emits ONE <ul class="twopro"> containing all N products as <li>.
   Slick sees 1 slide → we apply the CSS grid on .twopro directly.          */
.toprated .wbtopr { width: 100% !important; overflow: visible !important; }

/* Let Slick's single slide fill the full width */
.toprated .wbtopr .slick-list { overflow: visible !important; height: auto !important; }
.toprated .wbtopr .slick-track {
  transform: none !important;
  width: 100% !important;
  float: none !important;
  height: auto !important;
}
.toprated .wbtopr .slick-slide {
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
}

/* The grid lives here — 4 equal columns, 20px gap */
.toprated .wbtopr .twopro {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.toprated .wbtopr .twopro .grid__item {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Hide Slick nav arrows */
.toprated .slick-prev,
.toprated .slick-next,
.toprated .slick-arrow { display: none !important; }

@media (max-width: 1100px) {
  .toprated .wbtopr .twopro { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
  .toprated { padding: 0 16px !important; margin-top: 48px !important; }
  .toprated .wbtopr .twopro { grid-template-columns: repeat(2, 1fr) !important; }
  .toprated .heading span { font-size: 28px !important; }
}

/* ── Toprated section heading — override Bootstrap .text-center ── */
.toprated .heading.text-center,
.toprated h2.heading {
  text-align: left !important;
}
.toprated .heading.text-center span,
.toprated h2.heading > span {
  display: block !important;
  font-family: 'Nunito', sans-serif !important;
  font-style: normal !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: var(--tf-ink, #1c1a1a) !important;
  line-height: 1.1 !important;
  text-align: left !important;
}
.toprated .heading.text-center p,
.toprated h2.heading > p {
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  color: var(--tf-ink-3, #807a78) !important;
  font-weight: 500 !important;
  margin: 6px 0 0 !important;
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   SEO RICH TEXT SECTION — branded cream card
   -------------------------------------------------------------------------- */
.shopify-section .rich-text,
.rich-text {
  background: var(--tf-cream, #fdfaf6) !important;
  border: 1px solid var(--tf-line, #efe9ec) !important;
  border-radius: var(--tf-r-md, 16px) !important;
  margin: 0 32px !important;
  max-width: calc(1440px - 64px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.rich-text__blocks {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 36px 40px !important;
  text-align: left !important;
}
.rich-text__blocks h2 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--tf-ink, #1c1a1a) !important;
  margin: 0 0 14px !important;
  letter-spacing: -.01em !important;
}
.rich-text__blocks h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: var(--tf-pink, #d974ae);
  border-radius: 2px;
  margin-bottom: 12px;
}
.rich-text__text,
.rich-text__blocks .rte p {
  font-size: 14px !important;
  color: var(--tf-ink-2, #4a4646) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
@media (max-width: 767px) {
  .rich-text { margin: 0 16px !important; }
  .rich-text__blocks { padding: 24px 20px !important; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .newsl {
    padding: 24px 20px !important;
  }
  .footer .footmiddle {
    padding: 32px 0 !important;
  }
}


/* ==========================================================================
   COLLECTION PAGE
   ========================================================================== */

/* ---- Collection banner (.homecolbnr) ---- */
.homecolbnr {
  margin: 24px 0 0 !important;
}
.homecolbnr .beffect {
  border-radius: var(--tf-r-lg) !important;
  overflow: hidden !important;
}
.homecolbnr .beffect img {
  transition: transform .4s ease !important;
}
.homecolbnr .beffect:hover img {
  transform: scale(1.03) !important;
}
/* Banner text overlay */
.homecolbnr .colltext,
.homecolbnr .righttext {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 28px !important;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%) !important;
  border-radius: var(--tf-r-lg) !important;
  pointer-events: none !important;
}
.homecolbnr .collff,
.homecolbnr .rightff {
  pointer-events: auto !important;
}
.homecolbnr .collff h2,
.homecolbnr .rightff h2 {
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 8px !important;
  line-height: 1.1 !important;
}
.homecolbnr .collff p,
.homecolbnr .rightff p {
  color: rgba(255,255,255,.9) !important;
  font-size: 13px !important;
  margin: 0 0 14px !important;
}
.homecolbnr .collff .btn,
.homecolbnr .rightff .btn {
  background: #fff !important;
  color: var(--tf-ink) !important;
  border-radius: var(--tf-r-pill) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
}
.homecolbnr .collff .btn:hover,
.homecolbnr .rightff .btn:hover {
  background: var(--tf-pink-soft) !important;
  color: var(--tf-pink-deep) !important;
}
/* Make banner wrappers relative for overlay positioning */
.homecolbnrin1,
.homecolbnrin2,
.homecolbnrin3,
.homecolbnrin4 {
  position: relative !important;
}

/* ---- Collection hero banner (design: gradient card with title + tags + art) ---- */
.tf-coll-hero {
  max-width: 1440px !important;
  margin: 24px auto 0 !important;
  padding: 0 32px !important;
}
.tf-coll-hero-inner {
  background: linear-gradient(135deg, var(--tf-blue-soft) 0%, var(--tf-pink-soft) 100%) !important;
  border-radius: var(--tf-r-xl) !important;
  padding: 32px 40px 40px !important;
}
.tf-coll-breadcrumb {
  font-size: 12px !important;
  color: var(--tf-ink-3) !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.tf-coll-breadcrumb a { color: var(--tf-ink-3) !important; text-decoration: none !important; }
.tf-coll-breadcrumb a:hover { color: var(--tf-pink-deep) !important; }
.tf-coll-breadcrumb span { opacity: .5 !important; }
.tf-coll-breadcrumb .current { opacity: 1 !important; color: var(--tf-ink) !important; }
.tf-coll-hero-grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  gap: 32px !important;
  align-items: center !important;
  margin-top: 16px !important;
}
.tf-coll-eye {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--tf-pink-deep) !important;
}
.tf-coll-title {
  font-family: 'Fraunces', serif !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  margin: 10px 0 14px !important;
  color: var(--tf-ink) !important;
}
.tf-coll-title em { font-style: italic !important; color: var(--tf-pink-deep) !important; }
.tf-coll-desc {
  font-size: 15px !important;
  color: var(--tf-ink-2) !important;
  margin: 0 0 16px !important;
  max-width: 520px !important;
  line-height: 1.5 !important;
}
.tf-coll-hero-tags {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.tf-coll-hero-tags .tag {
  background: white !important;
  border-radius: var(--tf-r-pill) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--tf-ink) !important;
}
.tf-coll-hero-art {
  aspect-ratio: 1 !important;
  background: white !important;
  border-radius: var(--tf-r-lg) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(28,26,26,.04), 0 4px 12px rgba(28,26,26,.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tf-coll-hero-art img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
@media (max-width: 767px) {
  .tf-coll-hero { padding: 0 16px !important; }
  .tf-coll-hero-inner { padding: 24px 20px 28px !important; }
  .tf-coll-hero-grid { grid-template-columns: 1fr !important; }
  .tf-coll-title { font-size: 32px !important; }
  .tf-coll-hero-art { display: none !important; }
}

/* ---- Age badge on product cards ---- */
.tf-age-badge {
  display: inline-block !important;
  background: var(--tf-blue-soft, #e3f4fc) !important;
  color: var(--tf-blue-deep, #0c7fb0) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  letter-spacing: .03em !important;
  margin-bottom: 4px !important;
}

/* ---- Product card price — design weights ---- */
/* Current price: large, bold */
.wbhprice .price-item--sale,
.wbhprice .price__regular .price-item--regular {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--tf-ink, #1c1a1a) !important;
}
/* Strike-through compare price: small, lighter */
.wbhprice .price__sale .price-item--regular {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tf-ink-3, #807a78) !important;
  text-decoration: line-through !important;
}
.wbhprice .price__container {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* ---- Filter sidebar ---- */
.facets-container {
  background: #fff !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: var(--tf-r-md) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: sticky !important;
  top: 16px !important;
}
.facets,
.facets__form {
  background: transparent !important;
}

/* Filter heading */
.facets__heading,
.facets-container > h2 {
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--tf-ink) !important;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--tf-line) !important;
  margin: 0 !important;
}

/* Active filter chips */
.active-facets-desktop {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--tf-line) !important;
}
.active-facets__button-inner.button,
.active-facets__button {
  background: var(--tf-pink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--tf-r-pill) !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.active-facets__button-inner.button:hover,
.active-facets__button:hover {
  background: var(--tf-pink-deep) !important;
}
.active-facets__button-remove {
  color: var(--tf-pink-deep) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  padding: 5px 10px !important;
}

/* Filter groups (details/summary) */
.facets__wrapper details {
  border-bottom: 1px solid var(--tf-line) !important;
}
.facets__wrapper details:last-child {
  border-bottom: none !important;
}
.facets__wrapper summary {
  padding: 14px 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tf-ink) !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.facets__wrapper summary::-webkit-details-marker { display: none !important; }
.facets__wrapper .facets__display {
  padding: 0 20px 14px !important;
}

/* Filter checkboxes */
.facets__item,
.facets__display li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
  color: var(--tf-ink-2) !important;
  cursor: pointer !important;
}
.facets__item input[type="checkbox"],
.facets__display input[type="checkbox"],
.facets__item input[type="radio"],
.facets__display input[type="radio"] {
  accent-color: var(--tf-pink) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}
.facets__item .facets__label,
.facets__display .facets__label {
  flex: 1 !important;
  font-size: 13px !important;
  color: var(--tf-ink-2) !important;
}
.facets__item .count,
.facets__display .count {
  font-size: 11px !important;
  color: var(--tf-ink-3) !important;
  font-weight: 700 !important;
  background: var(--tf-cream) !important;
  padding: 2px 7px !important;
  border-radius: var(--tf-r-pill) !important;
}

/* Price range slider */
.facets__price .price-filter__range {
  accent-color: var(--tf-pink) !important;
}

/* ---- Sort/view toolbar ---- */
.wbsortbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--tf-line) !important;
  /* Reset Bootstrap .row negative margins */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.wbglbtn {
  display: flex !important;
  background: var(--tf-cream) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
}
.wblistgridbtn {
  background: none !important;
  border: none !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: var(--tf-ink-3) !important;
  transition: background .15s, color .15s !important;
}
.wblistgridbtn.active,
.wblistgridbtn:hover {
  background: #fff !important;
  color: var(--tf-ink) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}
.wblistgridbtn svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Sort select */
.wbsortbar select,
.sort-by__select {
  background: #fff !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: var(--tf-r-pill) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  outline: none !important;
  color: var(--tf-ink) !important;
}
.wbsortbar select:focus,
.sort-by__select:focus {
  border-color: var(--tf-pink) !important;
  box-shadow: 0 0 0 3px var(--tf-pink-soft) !important;
}

/* Collection grid layout (.tf-coll-layout) and #product-grid CSS grid rules
   live in sections/main-collection-product-grid.liquid as an inline <style>
   block, so they load in <body> after all framework CSS and need no !important
   battles here. */

/* Pagination */
.pagination__list {
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-top: 32px !important;
  list-style: none !important;
  padding: 0 !important;
}
.pagination__item a,
.pagination__item span {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid var(--tf-line) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--tf-ink-2) !important;
  transition: border-color .15s, color .15s !important;
}
.pagination__item a:hover {
  border-color: var(--tf-pink) !important;
  color: var(--tf-pink-deep) !important;
}
.pagination__item--current a,
.pagination__item--current span {
  background: var(--tf-ink) !important;
  color: #fff !important;
  border-color: var(--tf-ink) !important;
}


/* ==========================================================================
   PRODUCT PAGE (PDP)
   ========================================================================== */

/* ---- Main layout ---- */
.product.grid--2-col-tablet {
  gap: 48px !important;
  align-items: start !important;
}

/* ---- Gallery (left column) ---- */
.product__media-wrapper.wbproleftimg {
  position: sticky !important;
  top: 16px !important;
}
.product__media-list {
  border-radius: var(--tf-r-md) !important;
  overflow: hidden !important;
}
.product__media-item.protopimg-item img {
  border-radius: var(--tf-r-md) !important;
}

/* Thumbnail strip */
.thumbnail-list {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.thumbnail-list .thumbnail-list__item button,
.thumbnail-list .thumbnail-list__item {
  border-radius: var(--tf-r-sm) !important;
  border: 2px solid transparent !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: var(--tf-cream) !important;
  transition: border-color .15s !important;
}
.thumbnail-list__item.is-active button,
.thumbnail-list__item:hover button {
  border-color: var(--tf-pink) !important;
}

/* Gallery nav arrows */
.slider-button {
  background: #fff !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: 50% !important;
  box-shadow: var(--tf-shadow-1) !important;
  color: var(--tf-ink) !important;
  transition: box-shadow .15s !important;
}
.slider-button:hover {
  box-shadow: var(--tf-shadow-2) !important;
}

/* Discount badge inside the card__badge div (shows "Sale" / "Sold Out") */
.card__badge span {
  background: var(--tf-pink) !important;
  color: #fff !important;
  border-radius: var(--tf-r-pill) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  letter-spacing: .04em !important;
  top: 12px !important;
  left: 12px !important;
}

/* ---- Info column (right) ---- */
.product__info-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Product title */
.product__title {
  font-family: 'Nunito', sans-serif !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  color: var(--tf-ink) !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* Short tagline under the title (product.metafields.custom.short_description) */
.product__subtitle {
  font-family: 'Nunito', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--tf-ink-2, #4a4646) !important;
  margin: 10px 0 0 !important;
  max-width: 46ch !important;
}

/* Vendor + stars row */
.tf-vendor-stars-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 2px !important;
}
.tf-vendor-stars-row .product__text { margin: 0 !important; }

/* Vendor */
.product__text.product-vendor,
.product__vendor {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--tf-pink-deep) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Price block — pink-soft card */
.mainp-price,
#price-{{ section.id }} {
  background: var(--tf-pink-soft) !important;
  border-radius: var(--tf-r-md) !important;
  padding: 16px 20px !important;
}
/* PDP: sale price (big) */
.price--large .price-item--sale {
  font-size: 34px !important;
  font-weight: 900 !important;
  color: var(--tf-ink) !important;
  letter-spacing: -.02em !important;
}
/* PDP: main price when NOT on sale (big, no strikethrough) */
.price--large .price__regular .price-item--regular {
  font-size: 34px !important;
  font-weight: 900 !important;
  color: var(--tf-ink) !important;
  letter-spacing: -.02em !important;
  text-decoration: none !important;
}
/* PDP: compare-at price inside <s> tag — small, grey, <s> provides strikethrough */
.price--large .price__sale .price-item--regular {
  font-size: 16px !important;
  color: var(--tf-ink-3) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
/* "Save X" badge on PDP */
.price__badge-sale,
.price-badge {
  background: var(--tf-ink) !important;
  color: #fff !important;
  border-radius: var(--tf-r-pill) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
}

/* Tax/installment info */
.product__tax {
  font-size: 12px !important;
  color: var(--tf-ink-2) !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* ---- Variant picker ---- */
.variant-radios fieldset,
.variant-selects .product-form__input {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Variant option labels (pill chips) */
.variant-radios label.color-swatch,
.variant-radios .color-swatch {
  border: 1.5px solid var(--tf-line) !important;
  border-radius: var(--tf-r-sm) !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tf-ink) !important;
  background: #fff !important;
}
.variant-radios input:checked + label.color-swatch,
.variant-radios label.color-swatch.active {
  border-color: var(--tf-pink) !important;
  background: var(--tf-pink-soft) !important;
}
.variant-radios label.color-swatch:hover {
  border-color: var(--tf-pink) !important;
}
/* Color swatch dots */
.color-swatchimg.color-swatch {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid var(--tf-line) !important;
  cursor: pointer !important;
  transition: border-color .15s, transform .15s !important;
}
.color-swatchimg.color-swatch.active {
  border-color: var(--tf-pink) !important;
  transform: scale(1.15) !important;
}

/* ---- Stock countdown ---- */
.wbstockcount {
  font-size: 13px !important;
  color: var(--tf-ink-2) !important;
  padding: 10px 14px !important;
  background: var(--tf-mint-soft) !important;
  border-radius: var(--tf-r-sm) !important;
}
.wbstockinfo_high { color: #1f8b6f !important; font-weight: 700 !important; }
.wbstockinfo_low  { color: #b86000 !important; font-weight: 700 !important; }
.wbstockinfo-bar {
  height: 4px !important;
  background: var(--tf-line-2) !important;
  border-radius: 2px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}
.wbstockinfo-probar {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--tf-mint), var(--tf-sun)) !important;
  border-radius: 2px !important;
  transition: width .4s !important;
}

/* ---- Add-to-cart area ---- */
.product-form .cartb,
.product-form__submit,
button[name="add"] {
  background: var(--tf-pink) !important;
  color: #fff !important;
  border-radius: var(--tf-r-pill) !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  padding: 14px 24px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  font-family: inherit !important;
  width: 100% !important;
  justify-content: center !important;
}
.product-form .cartb:hover,
.product-form__submit:hover,
button[name="add"]:hover {
  background: var(--tf-pink-deep) !important;
}
/* Sold out */
.product-form .cartb[disabled],
.product-form__submit[disabled] {
  background: var(--tf-line-2) !important;
  color: var(--tf-ink-3) !important;
  cursor: not-allowed !important;
}

/* Wishlist button on PDP */
.wbfav,
.product-form .wishlist-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--tf-line) !important;
  background: #fff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  color: var(--tf-ink-2) !important;
  transition: border-color .15s, color .15s !important;
}
.wbfav:hover { border-color: var(--tf-pink) !important; color: var(--tf-pink) !important; }

/* ---- Product description tabs ---- */
.wbtabs,
.product-tabs {
  margin-top: 48px !important;
}
.wbtabs .nav-tabs,
.product-tabs .nav-tabs {
  border-bottom: 2px solid var(--tf-line) !important;
  display: flex !important;
  gap: 4px !important;
  overflow-x: auto !important;
}
.wbtabs .nav-tabs .nav-link,
.wbtabs .nav-tabs button,
.product-tabs .nav-tabs button {
  background: none !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--tf-ink-3) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color .15s !important;
  font-family: inherit !important;
}
.wbtabs .nav-tabs .nav-link.active,
.wbtabs .nav-tabs .nav-link:hover,
.product-tabs .nav-tabs button.active,
.product-tabs .nav-tabs button:hover {
  color: var(--tf-ink) !important;
  border-bottom-color: var(--tf-pink) !important;
}
.wbtabs .tab-content,
.wbtabs .tab-pane,
.product-tabs .tab-content {
  background: #fff !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: var(--tf-r-md) !important;
  padding: 32px !important;
  margin-top: 0 !important;
}

/* Specs table */
.wbtable,
.specs-table,
table.product-specs {
  width: 100% !important;
  border-collapse: collapse !important;
}
.wbtable tr,
.specs-table tr {
  border-bottom: 1px solid var(--tf-line) !important;
}
.wbtable th,
.specs-table th {
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tf-ink-3) !important;
  padding: 12px 0 !important;
  width: 200px !important;
}
.wbtable td,
.specs-table td {
  font-size: 13px !important;
  color: var(--tf-ink) !important;
  padding: 12px 0 !important;
  font-weight: 600 !important;
}

/* ---- Trust badges / info rows ---- */
.wbtrust,
.product-trust,
.trust-badges {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--tf-line) !important;
}
.wbtrust span,
.trust-badges .trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--tf-ink-2) !important;
}

/* ---- Related products section heading ---- */
.product-recommendations h2,
.related-products h2 {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: var(--tf-ink) !important;
}

/* ---- Breadcrumbs ---- */
.breadcrumb,
.breadcrumbs,
nav[aria-label="breadcrumb"],
nav[aria-label="breadcrumbs"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--tf-ink-3) !important;
  background: none !important;
}
/* Bootstrap .row interference reset */
.breadcrumb.row,
.breadcrumbs.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.breadcrumb .col-12,
.breadcrumbs .col-12 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 0 !important;
  width: auto !important;
  flex: none !important;
}
.breadcrumb a,
.breadcrumbs a,
nav[aria-label="breadcrumbs"] a,
nav[aria-label="breadcrumb"] a {
  color: var(--tf-ink-3) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.breadcrumb a:hover,
.breadcrumbs a:hover,
nav[aria-label="breadcrumbs"] a:hover,
nav[aria-label="breadcrumb"] a:hover {
  color: var(--tf-pink-deep) !important;
}
/* Separator arrows */
.breadcrumb span[aria-hidden="true"],
.breadcrumbs span[aria-hidden="true"],
nav[aria-label="breadcrumbs"] span[aria-hidden="true"] {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--tf-ink-3) !important;
  opacity: .5 !important;
}
.breadcrumb span[aria-hidden="true"] svg,
.breadcrumbs span[aria-hidden="true"] svg,
nav[aria-label="breadcrumbs"] span[aria-hidden="true"] svg {
  width: 10px !important;
  height: 10px !important;
}
/* Active / current page */
.breadcrumb .breadcrumb-item.active,
.breadcrumb > span:last-child:not([aria-hidden]),
.breadcrumbs > span:last-child:not([aria-hidden]),
nav[aria-label="breadcrumbs"] .col-12 > span:last-child,
nav[aria-label="breadcrumbs"] > span:last-child {
  color: var(--tf-ink) !important;
  font-weight: 800 !important;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .product.grid--2-col-tablet {
    grid-template-columns: 1fr !important;
  }
  .product__media-wrapper.wbproleftimg {
    position: static !important;
  }
}
@media (max-width: 767px) {
  .product__title {
    font-size: 26px !important;
  }
  .price--large .price-item--sale,
  .price--large .price__regular .price-item--regular {
    font-size: 26px !important;
  }
  .facets-container {
    position: static !important;
  }
}

/* ==========================================================================
   COLLECTION BANNER HEADER
   ========================================================================== */
.tf-coll-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  background: linear-gradient(135deg, var(--tf-pink-soft) 0%, #fff3fb 40%, var(--tf-grape-soft) 80%, var(--tf-blue-soft) 100%) !important;
  border-radius: var(--tf-r-xl) !important;
  padding: 36px 48px !important;
  margin: 24px 32px !important;
  max-width: calc(1440px - 64px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  overflow: hidden !important;
}

.tf-coll-header__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Breadcrumb */
.tf-coll-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--tf-ink-3) !important;
}
.tf-coll-breadcrumb a {
  color: var(--tf-ink-3) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.tf-coll-breadcrumb a:hover { color: var(--tf-pink-deep) !important; }
.tf-coll-breadcrumb span:last-child { color: var(--tf-ink) !important; }

/* Title */
.tf-coll-title {
  font-family: 'Fraunces', serif !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: var(--tf-ink) !important;
  line-height: 1.05 !important;
  margin: 10px 0 14px !important;
}
.tf-coll-title em { font-style: italic !important; color: var(--tf-pink-deep) !important; }

/* Description */
.tf-coll-desc {
  font-size: 15px !important;
  color: var(--tf-ink-2) !important;
  margin: 0 !important;
  max-width: 520px !important;
  line-height: 1.55 !important;
}

/* Product count badge */
.tf-coll-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: var(--tf-r-pill) !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--tf-ink-2) !important;
  width: fit-content !important;
}

/* Deco SVG panel */
.tf-coll-header__deco {
  flex-shrink: 0 !important;
  width: 180px !important;
  height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tf-coll-header__deco svg {
  width: 100% !important;
  height: 100% !important;
}

/* Collection image panel */
.tf-coll-header__image {
  flex-shrink: 0 !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: var(--tf-r-lg) !important;
  overflow: hidden !important;
}
.tf-coll-header__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 900px) {
  .tf-coll-header {
    padding: 28px 24px !important;
    margin: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .tf-coll-title { font-size: 36px !important; }
  .tf-coll-header__deco,
  .tf-coll-header__image { display: none !important; }
}

/* Collection page container — constrain and pad */
.collection-grid-section .collection.container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}
@media (max-width: 767px) {
  .collection-grid-section .collection.container { padding: 0 16px !important; }
}

/* ==========================================================================
   PRODUCT PAGE — gap fixes & vendor block styling
   ========================================================================== */

/* Vendor text block (renders as .product__text when type=text) */
.product__info-container .product__text {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--tf-pink-deep) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Price background card — Liquid variables don't work in static CSS;
   target by class only. .mainp-price is already set on the element. */
.mainp-price {
  background: var(--tf-pink-soft) !important;
  border-radius: var(--tf-r-md) !important;
  padding: 16px 20px !important;
}

/* Trust strip — shown below the buy button inside the product info area */
.tf-pdp-trust {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--tf-line) !important;
  margin-top: 4px !important;
}
.tf-pdp-trust__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--tf-ink-2) !important;
}
.tf-pdp-trust__item svg,
.tf-pdp-trust__item span.icon {
  width: 16px !important;
  height: 16px !important;
  color: var(--tf-mint) !important;
  flex-shrink: 0 !important;
}

/* Quantity input styling — pill stepper, auto-matches ATC button height */
.product-form__quantity .quantity {
  display: flex !important;
  align-items: stretch !important;
  border: 1.5px solid var(--tf-line) !important;
  border-radius: var(--tf-r-pill) !important;
  overflow: hidden !important;
  width: fit-content !important;
  align-self: stretch !important;
  background: #fff !important;
}
.product-form__quantity .quantity__button {
  background: var(--tf-cream) !important;
  border: none !important;
  min-width: 40px !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  color: var(--tf-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background .15s !important;
}
.product-form__quantity .quantity__button:hover { background: var(--tf-pink-soft) !important; }
.product-form__quantity .quantity__input {
  border: none !important;
  border-left: 1px solid var(--tf-line) !important;
  border-right: 1px solid var(--tf-line) !important;
  border-radius: 0 !important;
  text-align: center !important;
  width: 44px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--tf-ink) !important;
  box-shadow: none !important;
  background: #fff !important;
  padding: 0 !important;
}

/* ATC button — icon + text + price inline */
.product-form__submit .tf-atc-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  white-space: nowrap !important;
}
.product-form__submit .tf-atc-price {
  opacity: .82 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Qty + ATC in one row, dynamic checkout below */
.product-form__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.tf-qty-atc-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
}
.tf-qty-atc-row .product-form__quantity {
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.tf-qty-atc-row .product-form__submit {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Collapsible tab (shipping/returns) */
.product__accordion summary {
  padding: 14px 0 !important;
  cursor: pointer !important;
  border-top: 1px solid var(--tf-line) !important;
}
.product__accordion .summary__title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.product__accordion .accordion__title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--tf-ink) !important;
  margin: 0 !important;
}
.product__accordion .accordion__content {
  padding: 0 0 16px !important;
  font-size: 14px !important;
  color: var(--tf-ink-2) !important;
  line-height: 1.6 !important;
}

/* Product page outer container */
.product-section > .container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 32px !important;
}
@media (max-width: 767px) {
  .product-section > .container { padding: 16px !important; }
}

/* Ensure product grid uses proper CSS grid.
   base.css sets .grid { display:flex } — we override with higher specificity
   by chaining both classes on the same element. */
.product.grid--2-col-tablet,
.product.grid--1-col.grid--2-col-tablet {
  display: grid !important;
  grid-template-columns: 55fr 45fr !important;
  gap: 48px !important;
  align-items: start !important;
  flex-wrap: unset !important;
}
/* base.css sets .grid--1-col .grid__item { width:100% } which collapses
   grid items even inside a CSS grid. Override it. */
.product.grid--2-col-tablet > .grid__item,
.product.grid--1-col.grid--2-col-tablet > .grid__item {
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
  flex-grow: 0 !important;
  flex-shrink: unset !important;
}
/* section-main-product.css adds padding-left:4rem on .product--large info */
.product.grid--2-col-tablet .product__info-wrapper {
  padding-left: 0 !important;
}
@media (max-width: 989px) {
  .product.grid--2-col-tablet,
  .product.grid--1-col.grid--2-col-tablet {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   COLLECTION TEMPLATE — missing container max-width
   ========================================================================== */
.template-collection .shopify-section:first-child { margin-top: 0 !important; }

/* ==========================================================================
   PRODUCT PAGE — REDESIGN v2 (Claude Design handoff)
   ========================================================================== */

/* Media wrapper needs position:relative for the SAVE badge absolute child */
.product__media-wrapper.wbproleftimg { position: relative !important; }

/* ---- Vertical left thumbnail gallery ----
   With gallery_layout:"thumbnail", product gets .product--thumbnail class.
   We transform the flex layout so thumbnails sit in a left column.        */
.product--thumbnail media-gallery {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.product--thumbnail .thumbnail-slider {
  order: -1 !important;
  flex-shrink: 0 !important;
  width: 80px !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
}
.product--thumbnail .thumbnail-slider::-webkit-scrollbar { width: 4px !important; }
.product--thumbnail .thumbnail-slider::-webkit-scrollbar-thumb {
  background: var(--tf-line) !important;
  border-radius: 2px !important;
}
.product--thumbnail .slider-mobile-gutter:not(.thumbnail-slider) {
  flex: 1 !important;
  min-width: 0 !important;
}
.product--thumbnail .thumbnail-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}
.product--thumbnail .thumbnail-list__item {
  width: 72px !important;
  height: 72px !important;
  flex-shrink: 0 !important;
}
.product--thumbnail .thumbnail {
  width: 72px !important;
  height: 72px !important;
  display: block !important;
  border: 2px solid var(--tf-line) !important;
  border-radius: var(--tf-r-sm) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color .15s !important;
  padding: 0 !important;
  background: none !important;
}
.product--thumbnail .thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.product--thumbnail .thumbnail[aria-current="true"],
.product--thumbnail .thumbnail:hover {
  border-color: var(--tf-pink) !important;
}
/* Hide ALL slider nav arrows on the product page — thumbnails handle navigation */
.product--thumbnail .thumbnail-slider .slider-button { display: none !important; }
.product__media-wrapper .slider-button,
.product__media-list ~ .slider-button,
.product__media-wrapper .product__media-icon { display: none !important; }

/* Main image: fill available space cleanly, square-ish with rounded corners */
.product--thumbnail .slider-mobile-gutter:not(.thumbnail-slider) .product__media-item {
  border-radius: var(--tf-r-md) !important;
  overflow: hidden !important;
  background: var(--tf-cream) !important;
}
.product--thumbnail .product__media-item img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: var(--tf-r-md) !important;
}
/* Hover-to-zoom hint */
.product__media-wrapper::after {
  content: "⊕ Hover to zoom";
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  background: rgba(28,26,26,.55) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 10px !important;
  border-radius: var(--tf-r-pill) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .2s !important;
  letter-spacing: .04em !important;
}
.product__media-wrapper:hover::after { opacity: 1 !important; }

/* ---- SAVE badge overlay on product image ----
   With thumbnail layout the media wrapper contains:
     [0..80px] = thumbnail strip  [90px..] = main image
   so left offset must clear the thumbnail column (80px) + gap (10px). */
.tf-pdp-save-badge {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;         /* default: no thumbnail strip (stacked/mobile) */
  z-index: 10 !important;
  background: var(--tf-pink) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 6px 14px !important;
  border-radius: var(--tf-r-pill) !important;
  letter-spacing: .04em !important;
  pointer-events: none !important;
}
/* On desktop with vertical thumbnails, offset badge past the 80px strip + 10px gap */
@media (min-width: 768px) {
  .product--thumbnail .tf-pdp-save-badge {
    left: calc(80px + 10px + 16px) !important;
  }
}

/* ---- Tag pills (shown below product title) ---- */
.tf-pdp-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}
.tf-pdp-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: var(--tf-r-pill) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}
.tf-pdp-tag--age   { background: var(--tf-blue-soft) !important; color: #1b6fc9 !important; }
.tf-pdp-tag--badge { background: var(--tf-mint-soft) !important; color: #1f8b6f !important; }
.tf-pdp-tag--type  { background: var(--tf-cream) !important; color: var(--tf-ink-2) !important; border: 1px solid var(--tf-line) !important; }

/* ---- Delivery info rows (above ATC button) ---- */
.tf-pdp-delivery {
  border: 1.5px solid var(--tf-line) !important;
  border-radius: var(--tf-r-md) !important;
  overflow: hidden !important;
  background: #fff !important;
}
.tf-pdp-delivery__row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--tf-line) !important;
}
.tf-pdp-delivery__row:last-child { border-bottom: none !important; }
.tf-pdp-delivery__icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  stroke: var(--tf-pink) !important;
}
.tf-pdp-delivery__row > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.tf-pdp-delivery__label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tf-ink) !important;
}
.tf-pdp-delivery__note {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--tf-ink-3) !important;
}

/* ---- Buy it now / dynamic checkout (black pill) ---- */
.shopify-payment-button__button--unbranded,
.shopify-payment-button .shopify-payment-button__button {
  background: var(--tf-ink) !important;
  color: #fff !important;
  border-radius: var(--tf-r-pill) !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  border: none !important;
  min-height: 52px !important;
  margin-top: 0 !important;
}
.shopify-payment-button__button--unbranded:hover {
  background: #2d2d3a !important;
  opacity: 1 !important;
}
/* Spacing between ATC row and Order Now comes solely from
   .product-form__buttons gap — no stacked margins. */
.shopify-payment-button { margin-top: 0 !important; }

/* ---- Social sharing list (share_button block) ---- */
.social-sharing {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.social-sharing li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  border: 1.5px solid var(--tf-line) !important;
  border-radius: var(--tf-r-pill) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--tf-ink) !important;
  text-decoration: none !important;
  background: #fff !important;
  transition: border-color .15s, color .15s !important;
}
.social-sharing li a:hover {
  border-color: var(--tf-pink) !important;
  color: var(--tf-pink-deep) !important;
}
.share-whatsapp       { color: #25D366 !important; }
.share-whatsapp:hover { border-color: #25D366 !important; color: #1da851 !important; }
.share-facebook       { color: #1877F2 !important; }
.share-twitter        { color: #1DA1F2 !important; }

/* ---- PDP color swatches — circular dots (class: wbprodvarcolor) ---- */
.product__info-wrapper .product-form__input input[type="radio"] + label.wbprodvarcolor {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2.5px solid var(--tf-line) !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: inline-block !important;
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
.product__info-wrapper .product-form__input input[type="radio"]:checked + label.wbprodvarcolor {
  border-color: var(--tf-pink) !important;
  box-shadow: 0 0 0 3px var(--tf-pink-soft) !important;
  transform: scale(1.1) !important;
}
.product__info-wrapper .product-form__input input[type="radio"] + label.wbprodvarcolor:hover {
  border-color: var(--tf-pink) !important;
  transform: scale(1.05) !important;
}

/* ---- Quantity + ATC button row layout ---- */
.product-form__buttons {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.product-form__buttons .product-form__submit {
  flex: 1 !important;
  min-width: 0 !important;
}

/* ---- Mobile: thumbnails go horizontal below main image ---- */
@media (max-width: 767px) {
  /* Stack as a flex column. The base sets align-items:flex-start (for the
     desktop row layout); on a column that shrinks the main image to its
     content width — so reset cross-axis alignment to stretch = full width. */
  .product--thumbnail media-gallery {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .product--thumbnail .slider-mobile-gutter:not(.thumbnail-slider) {
    width: 100% !important;
    min-width: 0 !important;
  }
  .product--thumbnail .thumbnail-slider {
    order: 0 !important;
    width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .product--thumbnail .thumbnail-list {
    flex-direction: row !important;
    gap: 6px !important;
  }
  .tf-pdp-save-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
    top: 10px !important;
    left: 10px !important;
  }
  .product-form__buttons {
    flex-direction: column !important;
  }
}

/* ---- Delivery date estimate (datejs custom_liquid block) ----
   Styles the "Get it between Mon-Fri" element that renders after ATC.
   Targets any <p> containing a flat icon truck image in the info container. */
.product__info-container > p {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tf-ink-2) !important;
  background: var(--tf-cream) !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: var(--tf-r-sm) !important;
  padding: 10px 14px !important;
  margin: 0 !important;
}
.product__info-container > p img {
  float: none !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.product__info-container > p strong {
  color: var(--tf-ink) !important;
  font-weight: 800 !important;
}

/* ---- Share button block — force pill chip style ----
   section-main-product.css sets colored backgrounds on share-*.
   These !important rules ensure our design wins. */
.product__info-container .social-sharing {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}
.product__info-container .social-sharing li {
  display: flex !important;
}
.product__info-container .social-sharing li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border: 1.5px solid var(--tf-line) !important;
  border-radius: var(--tf-r-pill) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: #fff !important;
  text-decoration: none !important;
  transition: border-color .15s, color .15s !important;
}
.product__info-container .social-sharing li a:hover {
  border-color: var(--tf-pink) !important;
}
.product__info-container .social-sharing .share-whatsapp { color: #25D366 !important; }
.product__info-container .social-sharing .share-whatsapp:hover { border-color: #25D366 !important; }
.product__info-container .social-sharing .share-facebook { color: #1877F2 !important; }
.product__info-container .social-sharing .share-twitter  { color: #1DA1F2 !important; }
.product__info-container .social-sharing .share-pinterest { color: #E60023 !important; }
.product__info-container .social-sharing svg {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* ---- Product card SAVE % badge (top-right corner of image block) ---- */
.tf-card-save-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 4 !important;
  background: var(--tf-pink) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 3px 8px !important;
  border-radius: var(--tf-r-pill) !important;
  letter-spacing: .04em !important;
  pointer-events: none !important;
  line-height: 1.4 !important;
}

/* ============================================================
   PREDICTIVE SEARCH — TF theme overrides
   ============================================================ */

/* Dropdown container */
.predictive-search {
  border-radius: var(--tf-r-md) !important;
  box-shadow: 0 8px 40px rgba(28,26,26,.14), 0 2px 8px rgba(217,116,174,.08) !important;
  border: 1px solid var(--tf-line) !important;
  background: #fff !important;
  overflow: hidden !important;
  top: calc(100% + 6px) !important;
}

#predictive-search-results {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Section heading ("Products") */
.predictive-search__heading {
  font-family: var(--tf-font-head, 'Nunito', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--tf-ink-3) !important;
  margin: 0 !important;
  padding: 14px 16px 10px !important;
  border-bottom: 1px solid var(--tf-line) !important;
}

/* Results list */
#predictive-search-results-list {
  padding: 8px 0 !important;
  margin: 0 !important;
}

.predictive-search__list-item {
  list-style: none !important;
  margin: 0 !important;
}

/* Product row */
.predictive-search__item--link {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  gap: 0 !important;
  align-items: center !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  text-decoration: none !important;
  transition: background .12s !important;
  border-left: 3px solid transparent !important;
}
.predictive-search__list-item:hover .predictive-search__item--link,
.predictive-search__list-item[aria-selected="true"] .predictive-search__item--link {
  background: var(--tf-cream) !important;
  border-left-color: var(--tf-pink) !important;
}

/* Product thumbnail */
.predictive-search__image {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  border-radius: var(--tf-r-sm, 10px) !important;
  border: 1px solid var(--tf-line) !important;
  background: var(--tf-cream) !important;
  flex-shrink: 0 !important;
}

/* Product content area */
.predictive-search__item-content {
  padding-left: 12px !important;
  gap: 2px !important;
}

/* Vendor badge */
.predictive-search__item-vendor {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--tf-pink) !important;
  line-height: 1.3 !important;
}

/* Product title */
.predictive-search__item-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tf-ink) !important;
  margin-bottom: 4px !important;
  -webkit-line-clamp: 2 !important;
  line-height: 1.35 !important;
}

/* Price */
.predictive-search__item-content .price {
  margin: 0 !important;
}
.predictive-search__item-content .price .price-item {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tf-ink) !important;
}
.predictive-search__item-content .price--on-sale .price-item--sale {
  color: var(--tf-pink) !important;
}
.predictive-search__item-content .price--on-sale .price-item--regular {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--tf-ink-3) !important;
  text-decoration: line-through !important;
}

/* "Search for X →" footer button */
.predictive-search__item--term {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  margin: 0 8px 8px !important;
  background: linear-gradient(135deg, var(--tf-pink-soft, #fde7f2) 0%, var(--tf-blue-soft, #e3f4fc) 100%) !important;
  border-radius: var(--tf-r-pill) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tf-pink-deep, #b8478f) !important;
  border: 1.5px solid rgba(217,116,174,.25) !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
  width: auto !important;
}
.predictive-search__item--term:hover {
  background: linear-gradient(135deg, #fcd4eb 0%, #cceaf7 100%) !important;
  border-color: var(--tf-pink) !important;
}
.predictive-search__item--term .icon-arrow {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Loading spinner — pink */
.predictive-search .spinner .path {
  stroke: var(--tf-pink) !important;
}
.predictive-search__loading-state {
  padding: 20px !important;
  justify-content: center !important;
}

/* Divider between heading + last product + footer button */
.predictive-search__list-item:last-child {
  border-top: 1px solid var(--tf-line) !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .predictive-search {
    border-radius: 0 0 var(--tf-r-md) var(--tf-r-md) !important;
    box-shadow: 0 8px 24px rgba(28,26,26,.12) !important;
  }
  .predictive-search__item--link {
    grid-template-columns: 52px 1fr !important;
    padding: 8px 12px !important;
  }
  .predictive-search__image {
    width: 44px !important;
    height: 44px !important;
  }
  .predictive-search__item--term {
    margin: 0 10px 10px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   TF CART DRAWER
   ============================================================ */

/* Suppress old cart-notification popup — drawer replaces it */
#cart-notification { display: none !important; }

/* Prevent body scroll when drawer open */
body.tf-cart-open { overflow: hidden !important; }

/* Backdrop */
.tf-sc-backdrop {
  position: fixed; inset: 0;
  background: rgba(28,26,26,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 399;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.tf-sc-backdrop.open { opacity: 1; pointer-events: auto; }

/* Drawer */
.tf-sidecart {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: 440px;
  max-width: 100vw;
  background: var(--tf-cream);
  z-index: 400;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow: -20px 0 60px -10px rgba(28,26,26,.2);
}
.tf-sidecart.open { transform: translateX(0); }

/* Inner content wrapper (replaced by Section Rendering) */
#tf-sc-content { display: flex; flex-direction: column; height: 100%; }

/* Loading state */
#tf-sc-content.tf-sc--loading { opacity: .65; pointer-events: none; transition: opacity .15s; }

/* Head */
.tf-sidecart .sc-head {
  background: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--tf-line);
  flex-shrink: 0;
}
.tf-sidecart .sc-head-l { display: flex; align-items: baseline; gap: 10px; }
.tf-sidecart .sc-head h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--tf-ink); }
.tf-sidecart .sc-count { font-size: 12px; color: var(--tf-ink-3); font-weight: 700; background: var(--tf-cream); padding: 4px 10px; border-radius: var(--tf-r-pill); }
.tf-sidecart .sc-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--tf-line); border: none;
  display: grid; place-items: center;
  cursor: pointer; color: var(--tf-ink);
  transition: background .15s, color .15s;
}
.tf-sidecart .sc-close:hover { background: var(--tf-pink-soft); color: var(--tf-pink-deep); }
.tf-sidecart .sc-close svg { width: 16px; height: 16px; }

/* Free shipping bar */
.tf-sidecart .sc-progress {
  background: #fff;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tf-line);
  flex-shrink: 0;
}
.tf-sidecart .sc-progress-msg { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tf-ink); margin-bottom: 10px; font-weight: 600; }
.tf-sidecart .sc-progress-msg svg { width: 18px; height: 18px; color: var(--tf-pink-deep); flex-shrink: 0; }
.tf-sidecart .sc-progress-msg strong { color: var(--tf-pink-deep); font-weight: 900; }
.tf-sidecart .sc-progress-msg.unlocked strong { color: #1f8b6f; }
.tf-sidecart .sc-bar { height: 6px; background: var(--tf-line); border-radius: 3px; overflow: hidden; }
.tf-sidecart .sc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--tf-mint) 0%, var(--tf-sun) 50%, var(--tf-pink) 100%); border-radius: 3px; transition: width .4s ease; }

/* Scrollable body */
.tf-sidecart .sc-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.tf-sidecart .sc-body::-webkit-scrollbar { width: 5px; }
.tf-sidecart .sc-body::-webkit-scrollbar-thumb { background: var(--tf-line); border-radius: 3px; }

/* Cart items */
.tf-sidecart .sc-items { display: flex; flex-direction: column; gap: 10px; }
.tf-sidecart .sc-item {
  background: #fff;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r-sm);
  padding: 12px;
  display: flex;
  gap: 12px;
  position: relative;
}
.tf-sidecart .sc-item-media {
  width: 72px; height: 72px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.tf-sidecart .sc-item-media img { width: 100%; height: 100%; object-fit: contain; }
.tf-sidecart .sc-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tf-sidecart .sc-item-brand { font-size: 10px; font-weight: 800; color: var(--tf-ink-3); letter-spacing: .04em; text-transform: uppercase; }
.tf-sidecart .sc-item-title { display: block; font-size: 13px; font-weight: 800; color: var(--tf-ink); line-height: 1.25; text-decoration: none; padding-right: 22px; }
.tf-sidecart .sc-item-title:hover { color: var(--tf-pink-deep); }
.tf-sidecart .sc-item-variant { font-size: 11px; color: var(--tf-ink-3); font-weight: 600; }
.tf-sidecart .sc-item-bot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tf-sidecart .sc-qty { display: flex; align-items: center; background: var(--tf-cream); border-radius: var(--tf-r-pill); padding: 2px; gap: 2px; }
.tf-sidecart .sc-qty button { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: none; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--tf-ink); transition: background .12s, color .12s; font-family: inherit; }
.tf-sidecart .sc-qty button:hover { background: var(--tf-pink-soft); color: var(--tf-pink-deep); }
.tf-sidecart .sc-qty span { padding: 0 8px; font-weight: 800; font-size: 13px; min-width: 20px; text-align: center; }
.tf-sidecart .sc-item-price { font-size: 14px; font-weight: 900; color: var(--tf-ink); }
.tf-sidecart .sc-item-remove {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tf-line); border: none;
  display: grid; place-items: center;
  cursor: pointer; color: var(--tf-ink-3);
  transition: background .12s, color .12s;
}
.tf-sidecart .sc-item-remove:hover { background: var(--tf-pink-soft); color: var(--tf-pink-deep); }
.tf-sidecart .sc-item-remove svg { width: 10px; height: 10px; }

/* Upsell row */
.tf-sidecart .sc-upsell {
  background: #fff;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r-md);
  padding: 14px;
  margin-top: 14px;
}
.tf-sidecart .sc-upsell-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tf-sidecart .sc-upsell-head .eye { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tf-pink-deep); }
.tf-sidecart .sc-upsell-hint { font-size: 10px; color: var(--tf-ink-3); font-weight: 700; }
.tf-sidecart .sc-upsell-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.tf-sidecart .sc-upsell-row::-webkit-scrollbar { display: none; }
.tf-sidecart .sc-upsell-card { flex: 0 0 140px; background: var(--tf-cream); border-radius: var(--tf-r-sm); overflow: hidden; display: flex; flex-direction: column; }
.tf-sidecart .sc-upsell-media { aspect-ratio: 1.3; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; }
.tf-sidecart .sc-upsell-media img { width: 100%; height: 100%; object-fit: contain; }
.tf-sidecart .sc-upsell-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tf-sidecart .sc-upsell-brand { font-size: 9px; font-weight: 800; color: var(--tf-ink-3); letter-spacing: .04em; text-transform: uppercase; }
.tf-sidecart .sc-upsell-title { font-size: 11px; font-weight: 700; color: var(--tf-ink); line-height: 1.25; }
.tf-sidecart .sc-upsell-bot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; gap: 4px; }
.tf-sidecart .sc-upsell-price { font-size: 12px; font-weight: 900; color: var(--tf-ink); }
.tf-sidecart .sc-upsell-add { background: var(--tf-ink); color: #fff; border: none; border-radius: var(--tf-r-pill); padding: 5px 10px; font-size: 10px; font-weight: 800; cursor: pointer; font-family: inherit; transition: background .12s; }
.tf-sidecart .sc-upsell-add:hover { background: var(--tf-pink); }
.tf-sidecart .sc-upsell-sold { font-size: 10px; color: var(--tf-ink-3); font-weight: 700; }

/* Gift nudge */
.tf-sidecart .sc-nudge {
  margin-top: 12px;
  background: linear-gradient(135deg, var(--tf-sun-soft) 0%, var(--tf-pink-soft) 100%);
  border-radius: var(--tf-r-sm);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--tf-ink);
  transition: transform .15s;
  cursor: pointer;
}
.tf-sidecart .sc-nudge:hover { transform: translateX(-2px); }
.tf-sidecart .sc-nudge-ico { font-size: 22px; line-height: 1; flex-shrink: 0; }
.tf-sidecart .sc-nudge > div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tf-sidecart .sc-nudge strong { font-size: 13px; font-weight: 800; }
.tf-sidecart .sc-nudge span { font-size: 11px; color: var(--tf-ink-2); font-weight: 600; }
.tf-sidecart .sc-nudge > svg { width: 14px; height: 14px; color: var(--tf-pink-deep); flex-shrink: 0; }

/* Empty state */
.tf-sidecart .sc-empty { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tf-sidecart .sc-empty-ico { font-size: 52px; }
.tf-sidecart .sc-empty h3 { margin: 8px 0 4px; font-size: 20px; font-weight: 900; color: var(--tf-ink); }
.tf-sidecart .sc-empty p { margin: 0 0 14px; font-size: 13px; color: var(--tf-ink-2); }
.tf-sidecart .sc-empty-cta { background: var(--tf-pink); color: #fff; border-radius: var(--tf-r-pill); padding: 12px 24px; font-size: 14px; font-weight: 800; text-decoration: none; transition: background .15s; }
.tf-sidecart .sc-empty-cta:hover { background: var(--tf-pink-deep); }

/* Sticky footer */
.tf-sidecart .sc-foot {
  background: #fff;
  border-top: 1px solid var(--tf-line);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 -8px 24px rgba(28,26,26,.05);
  flex-shrink: 0;
}
.tf-sidecart .sc-foot-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tf-sidecart .sc-foot-sub > div { display: flex; flex-direction: column; line-height: 1.3; }
.tf-sidecart .sc-foot-lbl { font-size: 14px; font-weight: 800; color: var(--tf-ink); }
.tf-sidecart .sc-foot-meta { font-size: 11px; color: var(--tf-ink-3); font-weight: 600; }
.tf-sidecart .sc-foot-price { font-size: 26px; font-weight: 900; color: var(--tf-ink); letter-spacing: -.02em; }
.tf-sidecart .sc-checkout-form { width: 100%; margin: 0; }
.tf-sidecart .sc-checkout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--tf-pink);
  color: #fff;
  border: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  border-radius: var(--tf-r-pill);
  padding: 14px 20px;
  font-size: 15px; font-weight: 900;
  text-decoration: none; font-family: var(--font-body-family, inherit);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.tf-sidecart .sc-checkout:hover { background: var(--tf-pink-deep); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(184,71,143,.3); }
.tf-sidecart .sc-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tf-sidecart .sc-foot-row > a { font-size: 12px; font-weight: 800; color: var(--tf-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.tf-sidecart .sc-foot-row > a:hover { color: var(--tf-pink-deep); }
.tf-sidecart .sc-pay { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tf-sidecart .sc-pay span { background: var(--tf-cream); padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 800; color: var(--tf-ink-2); }

@media (max-width: 480px) {
  .tf-sidecart { width: 100vw; }
  .tf-sidecart .sc-upsell-card { flex-basis: 120px; }
}

/* ==========================================================================
   PDP TABS SECTION (Description / Specifications)
   ========================================================================== */

/* Hide inline product description from the info panel when tabs section
   is on the page — it renders in full inside the tab instead. */
body:has(.tf-has-pdp-tabs) .product__description { display: none !important; }

.tf-pdp-tabs-section {
  max-width: 1440px !important;
  margin: 48px auto 0 !important;
  padding: 0 32px !important;
}

.tf-pdp-tnav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--tf-line);
  overflow-x: auto;
}
.tf-pdp-tnav-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 800;
  color: var(--tf-ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
  font-family: inherit;
}
.tf-pdp-tnav-btn:hover { color: var(--tf-ink); }
.tf-pdp-tnav-btn.on {
  color: var(--tf-ink);
  border-bottom-color: var(--tf-pink);
}

.tf-pdp-tpanel {
  background: white;
  border: 1px solid var(--tf-line);
  border-top: none;
  border-radius: 0 0 var(--tf-r-md) var(--tf-r-md);
  padding: 32px;
}
.tf-pdp-tpanel.tf-hidden,
.tf-pdp-tpanel[hidden] { display: none !important; }

/* Description RTE */
.tf-pdp-tpanel.rte h2,
.tf-pdp-tpanel.rte h3 { font-size: 20px; font-weight: 900; color: var(--tf-ink); margin: 0 0 12px; }
.tf-pdp-tpanel.rte h4 { font-size: 15px; font-weight: 800; color: var(--tf-ink); margin: 16px 0 8px; }
.tf-pdp-tpanel.rte p  { font-size: 14px; color: var(--tf-ink-2); line-height: 1.65; margin: 0 0 12px; }
.tf-pdp-tpanel.rte p:last-child { margin-bottom: 0; }
.tf-pdp-tpanel.rte ul,
.tf-pdp-tpanel.rte ol { padding-left: 20px; margin: 0 0 12px; }
.tf-pdp-tpanel.rte li { font-size: 14px; color: var(--tf-ink-2); line-height: 1.5; margin-bottom: 6px; }
.tf-pdp-tpanel.rte strong { font-weight: 800; color: var(--tf-ink); }
.tf-pdp-tpanel.rte a { color: var(--tf-pink-deep); }
.tf-pdp-tpanel.rte img { max-width: 100%; border-radius: var(--tf-r-sm); margin: 8px 0; }

/* Specs table */
.tf-specs-tbl { width: 100%; border-collapse: collapse; }
.tf-specs-tbl tr { border-bottom: 1px solid var(--tf-line); }
.tf-specs-tbl tr:last-child { border-bottom: none; }
.tf-specs-tbl th {
  text-align: left; font-size: 13px; font-weight: 700; color: var(--tf-ink-3);
  padding: 12px 0; width: 200px; vertical-align: top;
}
.tf-specs-tbl td {
  font-size: 13px; color: var(--tf-ink); padding: 12px 0; font-weight: 600;
}

@media (max-width: 767px) {
  .tf-pdp-tabs-section { padding: 0 16px !important; margin-top: 32px !important; }
  .tf-pdp-tpanel { padding: 20px 16px; }
  .tf-specs-tbl th { width: 120px; }
}

/* ==========================================================================
   STICKY ADD-TO-CART BAR
   ========================================================================== */
.tf-sticky-atc {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: white;
  border-top: 1px solid var(--tf-line);
  z-index: 150;
  box-shadow: 0 -8px 24px rgba(28,26,26,.10);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.tf-sticky-atc--show { transform: translateY(0) !important; }

.tf-sticky-atc__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.tf-sticky-atc__prod {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.tf-sticky-atc__prod img {
  width: 48px; height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tf-cream);
}
.tf-sticky-atc__title {
  font-size: 14px; font-weight: 800; color: var(--tf-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 420px;
}
.tf-sticky-atc__price {
  font-size: 13px; color: var(--tf-ink-3); font-weight: 700; margin-top: 2px;
}
.tf-sticky-atc__actions { flex-shrink: 0; }
.tf-sticky-atc__btn {
  background: var(--tf-pink);
  color: white;
  border: none;
  border-radius: var(--tf-r-pill);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, transform .15s;
}
.tf-sticky-atc__btn:hover {
  background: var(--tf-pink-deep);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .tf-sticky-atc__inner { padding: 10px 16px; }
  .tf-sticky-atc__title { max-width: 160px; font-size: 12px; }
  .tf-sticky-atc__prod img { width: 40px; height: 40px; }
  .tf-sticky-atc__btn { padding: 10px 16px; font-size: 13px; }
}

/* ============================================================
   MOBILE PRODUCT PAGE (Claude Design handoff: product-mobile)
   New components (accordion, delivery, buy-bar qty) + a mobile
   visual refresh of the existing PDP DOM. Desktop untouched
   except for the new accordion/delivery components.
   ============================================================ */

/* ---- Section divider title (Product details / You might also like) ---- */
.mp-secline { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.mp-secline h4 { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: var(--tf-ink-3); margin: 0; white-space: nowrap; }
.mp-secline .line { flex: 1; height: 1px; background: var(--tf-line); }

/* ---- Product details accordion ---- */
.tf-pdp-acc { max-width: 1440px; margin: 8px auto 0; padding: 0 32px; }
.tf-acc-item { border-bottom: 1px solid var(--tf-line); }
.tf-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 2px; font-size: 15px; font-weight: 800; color: var(--tf-ink);
  background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit;
}
.tf-acc-head .chev { width: 20px; height: 20px; color: var(--tf-ink-3); transition: transform .25s; flex-shrink: 0; }
.tf-acc-item.open .tf-acc-head .chev { transform: rotate(180deg); }
.tf-acc-body { display: none; padding: 0 2px 18px; font-size: 14px; color: var(--tf-ink-2); line-height: 1.65; }
.tf-acc-item.open .tf-acc-body { display: block; }
.tf-acc-body .tf-specs-tbl { width: 100%; border-collapse: collapse; }
.tf-acc-body .tf-specs-tbl tr { border-bottom: 1px solid var(--tf-line); }
.tf-acc-body .tf-specs-tbl th { text-align: left; font-size: 13px; font-weight: 700; color: var(--tf-ink-3); padding: 10px 0; width: 46%; }
.tf-acc-body .tf-specs-tbl td { text-align: right; font-size: 13px; font-weight: 800; color: var(--tf-ink); padding: 10px 0; }

/* ---- Delivery / trust rows ---- */
.tf-pdp-delivery { border: 1px solid var(--tf-line); border-radius: var(--tf-r-md); overflow: hidden; margin-top: 16px; }
.tf-pdp-delivery .d-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; font-size: 13px; color: var(--tf-ink-2); line-height: 1.4; }
.tf-pdp-delivery .d-row + .d-row { border-top: 1px solid var(--tf-line); }
.tf-pdp-delivery .d-row svg { width: 20px; height: 20px; color: var(--tf-pink-deep); flex-shrink: 0; margin-top: 1px; }
.tf-pdp-delivery .d-row strong { color: var(--tf-ink); font-weight: 800; }

/* ---- Sticky buy-bar: quantity stepper (hidden on desktop) ---- */
.tf-sticky-atc__qty { display: none; align-items: center; background: var(--tf-cream); border-radius: var(--tf-r-pill); flex-shrink: 0; }
.tf-sticky-atc__qty button { width: 38px; height: 44px; font-size: 19px; font-weight: 700; color: var(--tf-ink); background: none; border: 0; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.tf-sticky-atc__qty button:disabled { color: var(--tf-line); }
.tf-sticky-atc__qty span { min-width: 24px; text-align: center; font-size: 15px; font-weight: 800; }
.tf-buy-total { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .tf-acc-head { font-size: 16px; }
}

@media (max-width: 767px) {
  /* Buy-bar is always visible on mobile */
  .tf-sticky-atc { transform: none !important; }
  .tf-sticky-atc__inner { padding: 10px 14px 18px; gap: 10px; }
  .tf-sticky-atc__prod { display: none; }
  .tf-sticky-atc__qty { display: flex; }
  .tf-sticky-atc__actions { flex: 1; }
  .tf-sticky-atc__btn { width: 100%; height: 48px; justify-content: center; padding: 0 16px; font-size: 14px; }

  /* room so the fixed bar never covers page content */
  #MainContent { padding-bottom: 84px; }

  /* Accordion + details full-bleed on mobile */
  .tf-pdp-acc { padding: 0 16px; }
  .mp-secline { margin: 18px 16px 10px; }

  /* ---- Info column refresh ---- */
  .product__info-container { padding: 16px !important; }
  .product__info-container .product-vendor,
  .product__info-container .product__text.product-vendor {
    font-size: 12px !important; font-weight: 900 !important; letter-spacing: .04em;
    text-transform: uppercase; color: var(--tf-pink-deep) !important; margin: 0 !important;
  }
  .product__info-container .product__title {
    font-size: 22px !important; font-weight: 900 !important; line-height: 1.12 !important;
    letter-spacing: -.01em; margin: 8px 0 6px !important;
  }
  .product__info-container .product__subtitle {
    font-size: 13px !important; color: var(--tf-ink-2) !important; line-height: 1.45 !important; margin: 0 0 12px !important;
  }

  /* tags — align to design palette */
  .tf-pdp-tag--badge { background: var(--tf-sun-soft) !important; color: #8a5a00 !important; }
  .tf-pdp-tag--type  { background: var(--tf-mint-soft) !important; color: #1f6e57 !important; border: 0 !important; }

  /* price — big current price */
  .product__info-container .price .price-item--regular,
  .product__info-container .price .price-item--sale {
    font-size: 28px !important; font-weight: 900 !important; color: var(--tf-ink) !important; letter-spacing: -.02em;
  }
  .product__info-container .price__sale .price-item--regular {
    font-size: 15px !important; font-weight: 700 !important; color: var(--tf-ink-3) !important;
    text-decoration: line-through !important; letter-spacing: 0;
  }

  /* variant option pills → chips */
  .product__info-container .product-form__input--pill input[type="radio"] + label {
    border: 1.5px solid var(--tf-line) !important; border-radius: var(--tf-r-md) !important;
    padding: 9px 14px !important; font-size: 13px !important; font-weight: 800 !important; color: var(--tf-ink) !important;
    background: white !important;
  }
  .product__info-container .product-form__input--pill input[type="radio"]:checked + label {
    border-color: var(--tf-pink) !important; background: var(--tf-pink-soft) !important; color: var(--tf-pink-deep) !important;
  }

  /* stock countdown → soft mint pill */
  .product__info-container .wbstockcount {
    background: var(--tf-mint-soft); border-radius: var(--tf-r-md); padding: 10px 12px; margin: 6px 0 12px;
  }
  .product__info-container .wbstockinfo { font-size: 12px; font-weight: 800; color: #165a47; }

  /* related products → horizontal scroll cards */
  .product-recommendations .grid {
    display: flex !important; flex-wrap: nowrap !important; gap: 12px !important;
    overflow-x: auto !important; scroll-snap-type: x mandatory; padding-bottom: 8px;
    margin: 0 -16px !important; padding-left: 16px; padding-right: 16px;
  }
  .product-recommendations .grid::-webkit-scrollbar { display: none; }
  .product-recommendations .grid > .grid__item {
    flex: 0 0 150px !important; width: 150px !important; max-width: 150px !important;
    margin: 0 !important; scroll-snap-align: start;
  }

  /* ---- Gallery overlay (arrows / counter / dots) ---- */
  .product__media-wrapper { position: relative; }
  .tf-gal-ov { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
  .tf-gal-ov .tf-gal-arr {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: var(--tf-r-pill);
    background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(28,26,26,.14);
    display: grid; place-items: center; color: var(--tf-ink); border: 0; cursor: pointer; pointer-events: auto;
  }
  .tf-gal-ov .tf-gal-arr svg { width: 17px; height: 17px; }
  .tf-gal-ov .tf-gal-arr.l { left: 12px; }
  .tf-gal-ov .tf-gal-arr.l svg { transform: rotate(180deg); }
  .tf-gal-ov .tf-gal-arr.r { right: 12px; }
  .tf-gal-ov .tf-gal-count {
    position: absolute; bottom: 14px; right: 14px;
    background: rgba(28,26,26,.72); color: white; font-size: 11px; font-weight: 800;
    padding: 4px 10px; border-radius: var(--tf-r-pill);
  }
  .tf-gal-ov .tf-gal-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
  .tf-gal-ov .tf-gal-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(28,26,26,.25); transition: all .2s; }
  .tf-gal-ov .tf-gal-dots i.on { background: var(--tf-pink-deep); width: 18px; border-radius: 4px; }
}

/* ============================================================
   MOBILE PDP GALLERY — full-bleed (match Claude Design)
   Design has the main image edge-to-edge & square (no card,
   no radius, no side padding); thumbnails stay inset.
   ============================================================ */
@media (max-width: 767px) {
  /* Break the main gallery out of the .container's 16px side padding */
  .product--thumbnail .product__media-wrapper.wbproleftimg {
    position: relative !important;   /* was sticky; keeps SAVE badge anchored */
    top: 0 !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
  /* Main image slider anchors the arrows/dots/counter overlay */
  .product--thumbnail .slider-mobile-gutter:not(.thumbnail-slider) { position: relative !important; }

  /* Square, full-width, no card / radius / padding */
  .product--thumbnail .slider-mobile-gutter:not(.thumbnail-slider) .product__media-item {
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    background: var(--tf-cream) !important;
    padding: 0 !important;
  }
  .product--thumbnail .slider-mobile-gutter:not(.thumbnail-slider) .product__media-item .product__media {
    height: 100% !important;
    width: 100% !important;
  }
  .product--thumbnail .slider-mobile-gutter:not(.thumbnail-slider) .product__media-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }

  /* Thumbnails stay inset even though the wrapper is now full-bleed */
  .product--thumbnail .thumbnail-slider { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================================
   MOBILE MENU — full-screen takeover (Claude Design: menu-redesign)
   Markup is #megamenu in sections/header.liquid; styles scoped to it.
   ============================================================ */
#megamenu .m-drawer-head {
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px 20px;
  background: linear-gradient(135deg, var(--tf-pink) 0%, var(--tf-grape) 100%);
  color: #fff; position: relative; flex-shrink: 0;
}
#megamenu .m-drawer-head .close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 20px); right: 16px;
  width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.2); color: #fff; display: grid; place-items: center;
}
#megamenu .m-drawer-head .close svg { width: 16px; height: 16px; }
#megamenu .m-drawer-head h2 { font-size: 24px; font-weight: 900; margin: 0 0 4px; color: #fff; }
#megamenu .m-drawer-head p { margin: 0; font-size: 13px; opacity: .85; font-weight: 600; }

#megamenu .m-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
#megamenu .m-drawer-body::-webkit-scrollbar { display: none; }

#megamenu .m-pillrow { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 8px; padding-bottom: 4px; }
#megamenu .m-pillrow::-webkit-scrollbar { display: none; }
#megamenu .m-pillrow .pill {
  flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: #f4eff3; font-size: 12px; font-weight: 800; color: var(--tf-ink-2);
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; text-decoration: none; white-space: nowrap;
}
#megamenu .m-pillrow .pill.on { background: var(--tf-ink); color: #fff; }
#megamenu .m-pillrow .pill .new { background: var(--tf-pink); color: #fff; padding: 2px 6px; border-radius: 999px; font-size: 9px; }

#megamenu .m-tabpane[hidden] { display: none; }

#megamenu .m-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tf-ink-3); margin: 16px 4px 10px; }

#megamenu .m-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#megamenu .m-cat { border-radius: var(--tf-r-md); padding: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; min-height: 96px; text-decoration: none; color: var(--tf-ink); }
#megamenu .m-cat .ico { width: 32px; height: 32px; border-radius: 10px; background: #fff; display: grid; place-items: center; font-size: 18px; }
#megamenu .m-cat .name { font-weight: 800; font-size: 13px; margin-top: auto; }
#megamenu .m-cat .count { font-size: 10px; color: var(--tf-ink-3); font-weight: 700; }

#megamenu .m-age-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#megamenu .m-age-pill { border-radius: var(--tf-r-md); padding: 14px 8px; text-align: center; font-weight: 900; font-size: 18px; line-height: 1; text-decoration: none; }
#megamenu .m-age-pill small { display: block; font-size: 10px; font-weight: 700; opacity: .7; margin-top: 4px; }

#megamenu .m-list { list-style: none; margin: 0; padding: 0; }
#megamenu .m-list li a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-weight: 700; font-size: 14px; color: var(--tf-ink); text-decoration: none; border-bottom: 1px solid var(--tf-line); }
#megamenu .m-list li a svg { width: 14px; height: 14px; color: var(--tf-ink-3); }
#megamenu .m-list li a .badge { background: var(--tf-pink); color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
#megamenu .m-list li a .price { color: var(--tf-ink-3); font-weight: 700; font-size: 13px; }

#megamenu .m-trust { margin-top: 16px; background: var(--tf-mint-soft); border-radius: var(--tf-r-md); padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #1f6e57; }
#megamenu .m-trust svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   MOBILE COLLECTION PAGE (Claude Design: collection-mobile)
   2-up grid is already set in the section; here: compact hero,
   active-filter chips, and Dawn's mobile facets restyled into a
   sticky bottom Filter/Sort bar + bottom sheet (real filters+sort).
   ============================================================ */
@media (max-width: 767px) {
  /* Compact hero */
  .tf-coll-hero { background: linear-gradient(180deg, var(--tf-pink-soft) 0%, #fff 100%) !important; }
  .tf-coll-hero-inner { padding: 14px 16px 18px !important; }
  .tf-coll-hero h1 { font-size: 24px !important; line-height: 1.06 !important; }
  .tf-coll-hero p { font-size: 13px !important; }

  /* Active-filter chips (Dawn .active-facets-mobile) — pill style */
  .active-facets-mobile { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 8px !important; padding: 4px 0 2px !important; }
  .active-facets-mobile::-webkit-scrollbar { display: none; }
  .active-facets-mobile .active-facets__button-inner { background: var(--tf-pink-soft) !important; color: var(--tf-pink-deep) !important; border: 0 !important; border-radius: 999px !important; font-weight: 800 !important; white-space: nowrap; }

  /* leave room for the fixed bar */
  .tf-coll-container { padding-bottom: 96px !important; }

  /* ---- Sticky Filter & Sort bar (Dawn mobile-facets trigger) ---- */
  .mobile-facets__wrapper { position: static !important; }
  .mobile-facets__disclosure > summary.mobile-facets__open-wrapper {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 45 !important; margin: 0 !important;
    background: #fff !important; border-top: 1px solid var(--tf-line) !important;
    box-shadow: 0 -8px 24px -12px rgba(28,26,26,.18) !important;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 0 !important;
  }
  .mobile-facets__disclosure > summary .mobile-facets__open {
    justify-content: center !important; gap: 8px !important;
    font-size: 14px !important; font-weight: 900 !important; color: var(--tf-ink) !important;
  }
  .mobile-facets__disclosure > summary .mobile-facets__open svg { width: 18px !important; height: 18px !important; }

  /* ---- Filter/sort as a bottom sheet (Dawn mobile-facets__inner) ---- */
  .mobile-facets__wrapper .mobile-facets__inner {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 86vh !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(100%) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1) !important;
    box-shadow: 0 -12px 40px -8px rgba(28,26,26,.3) !important;
  }
  .menu-opening .mobile-facets__inner { transform: translateY(0) !important; }
}

/* ---- Product card: show the listing's 2nd image on hover ----
   Triggered on the whole card (.wbproduct-container) — overlays like the
   quick-add button sit above the image link, so keying the hover to the link
   alone was unreliable. Works for every product with a 2nd image, not just
   ones that happen to have variant images. */
.card__media .media--hover-effect { position: relative; }
.card__media .tf-card-2nd {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 1;
}
@media (hover: hover) {
  .wbproduct-container:hover .tf-card-2nd { opacity: 1; }
}