/** Shopify CDN: Minification failed

Line 41:0 All "@import" rules must come first
Line 1840:22 Unexpected "{"
Line 1840:31 Expected ":"

**/
/*
 * ============================================================
 *  FOOTBALL STORE — Visual Overrides
 *  Target base: Impulse Theme v3.0.3 (theme.scss.liquid)
 *  Method: CSS-only additions appended via layout/theme.liquid
 *  Reference: vitrinefutebolistica.com.es
 *
 *  RULE: zero HTML/Liquid changes — only visual overrides.
 * ============================================================
 */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --fc-gold:       #F5C518;
  --fc-gold-dark:  #D4A800;
  --fc-black:      #0A0A0A;
  --fc-dark:       #111111;
  --fc-white:      #FFFFFF;
  --fc-gray-light: #F5F5F5;
  --fc-gray-mid:   #E8E8E8;
  --fc-gray:       #888888;
  --fc-red:        #CC2200;
  --fc-green:      #1E7A34;
  --fc-radius:     4px;
  --fc-radius-lg:  8px;
  --fc-shadow-sm:  0 1px 6px rgba(0,0,0,.08);
  --fc-shadow:     0 4px 18px rgba(0,0,0,.11);
  --fc-shadow-lg:  0 8px 40px rgba(0,0,0,.16);
  --fc-ease:       cubic-bezier(0.4,0,0.2,1);
  --fc-transition: 0.24s cubic-bezier(0.4,0,0.2,1);
}

/* ── 2. GOOGLE FONTS ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800;900&display=swap');

/* ── 3. BODY & BASE ────────────────────────────────────────── */
body {
  background-color: var(--fc-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 4. ANNOUNCEMENT BAR ───────────────────────────────────── */
.announcement-bar {
  background-color: var(--fc-black) !important;
  color: var(--fc-white) !important;
  padding: 9px 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.07em;
}

.announcement-link {
  color: var(--fc-white) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.announcement-link:hover,
.announcement-link:active { opacity: 0.82; color: var(--fc-white) !important; }

.announcement-text {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10.5px;
  display: inline;
}

.announcement-link-text {
  display: inline;
  color: var(--fc-gold) !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none !important;
}
.announcement-link-text a { color: var(--fc-gold) !important; }

/* ── 5. HEADER ─────────────────────────────────────────────── */
.site-header {
  background: var(--fc-white) !important;
  border-bottom: 1px solid var(--fc-gray-mid);
  box-shadow: none;
  transition: box-shadow var(--fc-transition);
}

/* Sticky "stuck" state gets a shadow */
.site-header--stuck,
.site-header--opening {
  box-shadow: 0 2px 22px rgba(0,0,0,.12) !important;
}

/* Keep header sticky wrapper in position */
.header-sticky-wrapper { position: sticky; top: 0; z-index: 200; }
.header-wrapper         { background: var(--fc-white); }

/* Remove the gradient overlay from sticky/overlay header */
.header-wrapper--sticky {
  background: var(--fc-white) !important;
}
.header-wrapper--sticky .site-header:not(.site-header--stuck) {
  background: var(--fc-white) !important;
}

/* ── 6. NAVIGATION LINKS ───────────────────────────────────── */
.site-nav__link {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fc-black) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  position: relative;
  transition: color var(--fc-transition);
}

.site-nav__link:hover { color: var(--fc-black) !important; }

/* Gold underline on hover */
.site-nav__link--underline::after {
  border-bottom-color: var(--fc-gold) !important;
  border-bottom-width: 2px;
}

/* Dropdown parent hover state */
.site-nav--has-dropdown.is-focused > a,
.site-nav--has-dropdown:hover > a {
  color: var(--fc-black) !important;
  background-color: transparent !important;
}

/* Dropdown panel */
.site-nav__dropdown {
  border: 1px solid var(--fc-gray-mid) !important;
  box-shadow: var(--fc-shadow-lg) !important;
  border-radius: 0 0 var(--fc-radius-lg) var(--fc-radius-lg) !important;
  padding: 8px 0 10px !important;
}

.site-nav__dropdown-link {
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fc-black) !important;
  padding: 9px 22px !important;
  transition: padding var(--fc-transition), color var(--fc-transition);
}
.site-nav__dropdown-link:hover {
  color: var(--fc-gold-dark) !important;
  padding-left: 28px !important;
}

/* Icon links (search/cart) */
.site-nav__link--icon {
  padding-left: 11px !important;
  padding-right: 11px !important;
}
.site-nav__link--icon .icon {
  width: 20px;
  height: 20px;
  stroke: var(--fc-black);
  transition: stroke var(--fc-transition);
}
.site-nav__link--icon:hover .icon { stroke: var(--fc-gold-dark); }

/* Cart counter bubble → gold */
.cart-link__bubble--visible {
  background-color: var(--fc-gold) !important;
  border-color: var(--fc-white) !important;
  width: 14px;
  height: 14px;
}

/* ── 7. BUTTONS ─────────────────────────────────────────────── */
/* Primary CTA — gold with black text for football store */
.btn,
.rte .btn {
  border-radius: var(--fc-radius) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 13px 28px !important;
  border-width: 2px !important;
  transition: background var(--fc-transition), color var(--fc-transition),
              border-color var(--fc-transition), transform var(--fc-transition),
              box-shadow var(--fc-transition) !important;
}
.btn:hover,
.rte .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.btn:active { transform: translateY(0); }

/* "Add to Cart" and primary action — gold */
.add-to-cart,
.product-form__cart-submit {
  background-color: var(--fc-gold) !important;
  color: var(--fc-black) !important;
  border-color: var(--fc-gold) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 16px 32px !important;
}
.add-to-cart:hover,
.product-form__cart-submit:hover {
  background-color: var(--fc-gold-dark) !important;
  border-color: var(--fc-gold-dark) !important;
  color: var(--fc-black) !important;
  box-shadow: 0 4px 18px rgba(213,168,0,.38);
}

/* Secondary buttons */
.btn--secondary,
.rte .btn--secondary {
  background-color: transparent !important;
  color: var(--fc-black) !important;
  border-color: var(--fc-black) !important;
}
.btn--secondary:hover,
.rte .btn--secondary:hover {
  background-color: var(--fc-black) !important;
  color: var(--fc-white) !important;
  border-color: var(--fc-black) !important;
  box-shadow: none;
  transform: none;
}

/* Hero CTA buttons */
.hero__link .btn {
  background-color: var(--fc-gold) !important;
  color: var(--fc-black) !important;
  border-color: var(--fc-gold) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 14px 32px !important;
}
.hero__link .btn:hover {
  background-color: var(--fc-white) !important;
  color: var(--fc-black) !important;
  border-color: var(--fc-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(255,255,255,.25);
}
.hero__link .btn + .btn {
  background-color: transparent !important;
  color: var(--fc-white) !important;
  border-color: rgba(255,255,255,.65) !important;
}
.hero__link .btn + .btn:hover {
  background-color: rgba(255,255,255,.18) !important;
}

/* Drawer checkout button */
.drawer__footer .btn {
  background-color: var(--fc-gold) !important;
  color: var(--fc-black) !important;
  border-color: var(--fc-gold) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 15px !important;
  width: 100%;
  display: block;
}
.drawer__footer .btn:hover {
  background-color: var(--fc-gold-dark) !important;
  border-color: var(--fc-gold-dark) !important;
  transform: none;
  box-shadow: none;
}

/* ── 8. SECTION HEADERS ─────────────────────────────────────── */
.section-header {
  margin-bottom: 36px !important;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .section-header { margin-bottom: 48px !important; }
}

.section-header__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  color: var(--fc-black) !important;
  line-height: 1.15 !important;
  margin-bottom: 0 !important;
  position: relative;
  display: inline-block;
}
@media screen and (min-width: 769px) {
  .section-header__title { font-size: 32px !important; }
}

/* Gold underline accent on section titles */
.section-header__title::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--fc-gold);
  margin: 10px auto 0;
  border-radius: 2px;
}
/* Don't add accent to hero titles */
.section-header--hero .section-header__title::after { display: none; }

/* ── 9. INDEX SECTION SPACING ───────────────────────────────── */
.index-section {
  margin-top: 44px !important;
  margin-bottom: 44px !important;
}
@media screen and (min-width: 769px) {
  .index-section {
    margin-top: 72px !important;
    margin-bottom: 72px !important;
  }
}
.index-section + .index-section,
.main-content + .index-section { margin-top: 0 !important; }
.index-section--flush           { margin: 0 !important; }

/* ── 10. HERO / SLIDESHOW ───────────────────────────────────── */
/* Stronger scrim for legibility */
.hero__image-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,.60) 0%,
    rgba(0,0,0,.32) 55%,
    rgba(0,0,0,.12) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.hero__text-content,
.hero__text-wrap { position: relative; z-index: 2; }

/* Hero typography */
.hero__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.06 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.28);
  margin-bottom: 12px !important;
}

.hero__subtitle,
.hero__subtext {
  font-size: 15px !important;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: .9;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
  margin-top: 10px !important;
}
@media screen and (min-width: 769px) {
  .hero__subtitle,
  .hero__subtext { font-size: 18px !important; }
}

.hero__top-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 12px !important;
  color: var(--fc-gold);
  margin-bottom: 14px;
}

/* Slick dots — gold */
.slick-dots li button::before {
  background-color: rgba(255,255,255,.45) !important;
  border-radius: 50%;
  width: 8px !important;
  height: 8px !important;
}
.slick-dots li.slick-active button::before {
  background-color: var(--fc-gold) !important;
  width: 22px !important;
  border-radius: 4px;
}
/* Hero dot bar position */
.hero .slick-dots { bottom: 24px !important; }

/* ── 11. PRODUCT GRID ITEMS ─────────────────────────────────── */
.grid-product__content {
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--fc-gray-mid);
  background: var(--fc-white);
  transition: transform var(--fc-transition), box-shadow var(--fc-transition),
              border-color var(--fc-transition);
}
.grid-product__content:hover {
  transform: translateY(-4px);
  box-shadow: var(--fc-shadow-lg);
  border-color: transparent;
}

/* Image mask subtle zoom on hover */
.grid-product__image-mask { overflow: hidden; }
.grid-product__image {
  transition: transform 0.55s var(--fc-ease) !important;
}
.grid-product__content:hover .grid-product__image {
  transform: scale(1.06);
}

/* Product meta padding */
.grid-product__meta {
  padding: 14px 14px 16px !important;
}

/* Product title */
.grid-product__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--fc-black) !important;
  line-height: 1.35 !important;
  margin-bottom: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Vendor */
.grid-product__vendor {
  font-size: 10px !important;
  color: var(--fc-gray) !important;
  letter-spacing: 0.1em;
  opacity: 1 !important;
  margin-top: 3px;
}

/* Price */
.grid-product__price {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  margin-top: 7px !important;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.grid-product__price--original {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--fc-gray) !important;
  text-decoration: line-through !important;
  margin-right: 0;
}
.grid-product__price--savings {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--fc-red) !important;
  margin-left: 0;
}

/* Sale / sold-out badge */
.grid-product__tag {
  border-radius: 3px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  top: 10px !important;
  right: 10px !important;
}
@media screen and (min-width: 769px) {
  .grid-product__tag {
    font-size: 10px !important;
    padding: 5px 9px !important;
  }
}
.grid-product__tag--sale {
  background-color: var(--fc-gold) !important;
  color: var(--fc-black) !important;
}
.grid-product__tag--sold-out {
  background-color: var(--fc-gray) !important;
  color: var(--fc-white) !important;
}

/* Quick shop button — slide up from bottom */
.quick-product__btn {
  background-color: var(--fc-black) !important;
  color: var(--fc-white) !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 11px 8px !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  transform: translateY(100%) !important;
  transition: transform 0.28s var(--fc-ease), background var(--fc-transition) !important;
  opacity: 1 !important; /* override theme's opacity fade */
}
.grid-product__content:hover .quick-product__btn {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
.quick-product__btn:hover {
  background-color: var(--fc-gold) !important;
  color: var(--fc-black) !important;
}

/* ── 12. COLLECTION GRID ITEMS ──────────────────────────────── */
/* Lift + deeper scrim on hover */
.collection-item {
  border-radius: var(--fc-radius-lg) !important;
  overflow: hidden;
  transition: transform var(--fc-transition), box-shadow var(--fc-transition) !important;
}
.collection-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--fc-shadow-lg) !important;
}

/* Overlay — more visible, straight gradient instead of flat tint */
.collection-item:not(.collection-item--below)::after {
  background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.72) 100%) !important;
  opacity: 1 !important;
}
.collection-item:not(.collection-item--below):hover::after {
  opacity: 1 !important; /* keep stable — no extra tint jump */
}

/* Title styles */
.collection-item__title--overlaid {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-white) !important;
  text-shadow: none !important;
  bottom: 16px !important;
}
@media screen and (min-width: 769px) {
  .collection-item__title--overlaid { font-size: 15px !important; }
}

.collection-item__title--overlaid-box > span {
  background-color: rgba(0,0,0,.72) !important;
  color: var(--fc-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 7px 14px !important;
  border-radius: var(--fc-radius);
}

/* ── 13. LOGO BAR ───────────────────────────────────────────── */
.logo-bar__item {
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter var(--fc-transition), opacity var(--fc-transition),
              transform var(--fc-transition);
}
.logo-bar__item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}

/* ── 14. TESTIMONIALS ───────────────────────────────────────── */
.testimonials-slider__text {
  background: var(--fc-white);
  border: 1px solid var(--fc-gray-mid);
  border-radius: var(--fc-radius-lg);
  padding: 30px 28px !important;
  box-shadow: var(--fc-shadow-sm);
  margin: 4px !important; /* so shadow isn't clipped by overflow */
}

.testimonials-slider__text p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #333 !important;
}

.testimonials-slider__text cite {
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--fc-black) !important;
  margin-top: 18px;
  display: block;
}

/* Slick dots inside testimonials */
.testimonials-wrapper .slick-dots li button::before {
  background-color: var(--fc-gray-mid) !important;
}
.testimonials-wrapper .slick-dots li.slick-active button::before {
  background-color: var(--fc-gold) !important;
  width: 18px !important;
  border-radius: 3px;
}

/* ── 15. SITE FOOTER ────────────────────────────────────────── */
.site-footer {
  background-color: var(--fc-dark) !important;
  color: rgba(255,255,255,.68) !important;
  padding-top: 54px !important;
  border-top: none !important;
}

.site-footer a {
  color: rgba(255,255,255,.6) !important;
  font-size: 13px;
  line-height: 2.1;
  transition: color var(--fc-transition);
}
.site-footer a:hover { color: var(--fc-gold) !important; }

.footer__title {
  color: var(--fc-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

/* Footer bottom bar */
.footer__small-text {
  color: rgba(255,255,255,.35) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}

/* Footer separator line */
.site-footer .grid__item::after {
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* Footer newsletter input */
.footer__newsletter-input {
  background-color: rgba(255,255,255,.06) !important;
  color: var(--fc-white) !important;
  border-bottom-color: rgba(255,255,255,.3) !important;
}
.footer__newsletter-input:focus {
  border-bottom-color: var(--fc-gold) !important;
}
.footer__newsletter-input::placeholder { color: rgba(255,255,255,.35); }

/* Footer payment icons */
.payment-icons { opacity: .55; }

/* ── 16. CART DRAWER ────────────────────────────────────────── */
.drawer--right {
  box-shadow: -6px 0 40px rgba(0,0,0,.20) !important;
  z-index: 10002 !important; /* above sticky bar (9999) */
}

.drawer__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.drawer__header {
  border-bottom: 2px solid var(--fc-black) !important;
}

/* Cart line items */
.ajaxcart__product-name {
  font-weight: 700 !important;
  font-size: 13px !important;
}
.ajaxcart__product-meta {
  font-size: 12px !important;
  color: var(--fc-gray) !important;
}
.ajaxcart__price {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* Quantity buttons */
.js-qty__adjust {
  background-color: var(--fc-gray-light) !important;
  transition: background var(--fc-transition);
}
.js-qty__adjust:hover { background-color: var(--fc-gold) !important; }

/* Cart subtotal label */
.ajaxcart__subtotal {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* Footer border */
.drawer__footer {
  border-top: 2px solid var(--fc-black) !important;
  position: relative;
  z-index: 10000; /* must be above #fc-sticky-bar (9999) */
}

/* Ensure all buttons inside drawer footer are always clickable */
.drawer__footer button,
.drawer__footer .btn,
.drawer__footer a,
.drawer__footer .fc-cod-open-btn,
.drawer__footer .fc-bizum-cart-btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 10001;
}

/* ── 17. PRODUCT PAGE ───────────────────────────────────────── */
.product-single__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.18 !important;
  font-size: 22px !important;
}
@media screen and (min-width: 769px) {
  .product-single__title { font-size: 28px !important; }
}

.product-single__vendor {
  font-size: 11px !important;
  letter-spacing: 0.14em;
  opacity: .7;
  margin-bottom: 10px !important;
}

/* Price on product page */
.product__price {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
}
.product__price--compare {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--fc-gray) !important;
  margin-right: 8px;
}
.product__price.on-sale { color: var(--fc-red) !important; }

/* Variant buttons */
.variant-input-wrap .btn {
  background-color: transparent !important;
  color: var(--fc-black) !important;
  border: 2px solid var(--fc-gray-mid) !important;
  padding: 9px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: border-color var(--fc-transition), background var(--fc-transition),
              color var(--fc-transition) !important;
}
.variant-input-wrap .btn:hover,
.variant-input-wrap .btn.is-active {
  border-color: var(--fc-black) !important;
  background-color: var(--fc-black) !important;
  color: var(--fc-white) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Trust / policies text */
.product-single__policies small {
  font-size: 12px !important;
  color: var(--fc-gray) !important;
  line-height: 1.6;
}
.product-single__policies a { color: var(--fc-black) !important; text-decoration: underline; }

/* ── 18. BREADCRUMBS ────────────────────────────────────────── */
.breadcrumb {
  font-size: 11px !important;
  color: var(--fc-gray) !important;
  letter-spacing: 0.04em;
}
.breadcrumb a {
  color: var(--fc-gray) !important;
  text-decoration: none;
  transition: color var(--fc-transition);
}
.breadcrumb a:hover { color: var(--fc-gold-dark) !important; }

/* ── 19. COLLAPSIBLE TABS (product description) ─────────────── */
.collapsible-trigger-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--fc-gray-mid) !important;
  padding: 14px 0 !important;
  transition: color var(--fc-transition);
}
.collapsible-trigger-btn:hover { color: var(--fc-gold-dark) !important; }

/* ── 20. COLLECTION/SEARCH HEADER ──────────────────────────── */
.collection-hero {
  position: relative;
  overflow: hidden;
}
/* Extra scrim over collection hero images */
.collection-hero .hero__image-wrapper::before {
  background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.62) 100%);
  opacity: 1;
}
.collection-hero .section-header__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  color: var(--fc-white) !important;
  letter-spacing: -0.02em !important;
}
.collection-hero .section-header__title::after { display: none; }

/* Non-image collection header */
.page-content--top .section-header__title,
.section-header--flush .section-header__title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 28px !important;
}

/* ── 21. PAGINATION ─────────────────────────────────────────── */
.pagination__item {
  border: 1.5px solid var(--fc-gray-mid) !important;
  border-radius: var(--fc-radius) !important;
  font-weight: 700;
  font-size: 13px;
  transition: background var(--fc-transition), border-color var(--fc-transition),
              color var(--fc-transition);
}
.pagination__item.is-active,
.pagination__item:hover {
  background: var(--fc-black) !important;
  border-color: var(--fc-black) !important;
  color: var(--fc-white) !important;
}

/* ── 22. NEWSLETTER POPUP ───────────────────────────────────── */
.modal.modal--square .modal__inner {
  border-radius: var(--fc-radius-lg) !important;
  overflow: hidden;
}
.newsletter .h1,
.newsletter .h2,
.newsletter .h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}
.newsletter .input-group {
  border-radius: var(--fc-radius) !important;
  overflow: hidden;
}
.newsletter .input-group-btn .btn {
  background-color: var(--fc-gold) !important;
  color: var(--fc-black) !important;
  border-color: var(--fc-gold) !important;
  border-radius: 0 !important;
}
.newsletter .input-group-btn .btn:hover {
  background-color: var(--fc-gold-dark) !important;
  border-color: var(--fc-gold-dark) !important;
  transform: none !important;
}

/* ── 23. SEARCH ─────────────────────────────────────────────── */
.site-header__search {
  background-color: var(--fc-white) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.14);
}
.site-header__search-input {
  font-size: 16px !important;
  font-family: 'Inter', sans-serif !important;
}
.site-header__search-form {
  border-bottom: 2px solid var(--fc-black) !important;
}
.predictive-results {
  box-shadow: 0 8px 32px rgba(0,0,0,.14) !important;
  border-radius: 0 0 var(--fc-radius-lg) var(--fc-radius-lg) !important;
}

/* ── 24. MOBILE NAV DRAWER ──────────────────────────────────── */
#NavDrawer .drawer__header {
  background-color: var(--fc-black) !important;
}
#NavDrawer .drawer__title { color: var(--fc-white) !important; }

.mobile-nav__link--top-level {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--fc-gray-mid) !important;
  padding: 16px 20px !important;
}

/* ── 25. SECTION DIVIDERS ───────────────────────────────────── */
.section--divider {
  border-top-color: var(--fc-gray-mid) !important;
}
hr.hr--clear { border-color: var(--fc-gray-mid) !important; }

/* ── 26. INPUT / FORM ELEMENTS ──────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
  border-radius: var(--fc-radius) !important;
  border-color: var(--fc-gray-mid) !important;
  transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--fc-black) !important;
  box-shadow: 0 0 0 2px rgba(10,10,10,.10) !important;
  outline: none !important;
}

/* ── 27. PAGE-WIDTH MAX WIDTH ───────────────────────────────── */
/* Slightly tighter max-width for content density closer to reference */
.page-width {
  max-width: 1440px;
}

/* ── 28. PROMO GRID ─────────────────────────────────────────── */
.promo-grid__item,
.content-box {
  border-radius: var(--fc-radius-lg) !important;
  overflow: hidden;
  transition: transform var(--fc-transition), box-shadow var(--fc-transition);
}
.promo-grid__item:hover {
  transform: scale(1.012);
  box-shadow: var(--fc-shadow-lg);
}

/* ── 29. MINI KEYFRAME ANIMATIONS ──────────────────────────── */
@keyframes fc-shine {
  0%   { left: -60%; }
  100% { left: 130%;  }
}

/* Subtle shine sweep on primary buttons */
.btn:not(.btn--secondary):not(.btn--tertiary):not([disabled])::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 45%;
  height: 140%;
  transform: skewX(-20deg);
  background: rgba(255,255,255,.18);
  pointer-events: none;
  transition: none;
}
.btn:not(.btn--secondary):not(.btn--tertiary):not([disabled]):hover::after {
  animation: fc-shine 0.65s ease-out;
}

/* ── 30. RESPONSIVE MOBILE TWEAKS ───────────────────────────── */
@media screen and (max-width: 768px) {
  /* Tighter announcement bar */
  .announcement-bar { padding: 7px 0 !important; }

  /* Header padding */
  .site-header { padding: 6px 0 !important; }

  /* Section titles smaller on mobile */
  .section-header__title { font-size: 20px !important; }

  /* Product grid meta more compact */
  .grid-product__meta { padding: 10px 10px 12px !important; }
  .grid-product__title { font-size: 12px !important; }
  .grid-product__price { font-size: 13px !important; }

  /* Collection item titles */
  .collection-item__title--overlaid { font-size: 11px !important; }

  /* Hero title */
  .hero__title { letter-spacing: -0.02em !important; }

  /* Index sections */
  .index-section {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }

  /* Footer  */
  .site-footer { padding-top: 36px !important; }

  /* Product page */
  .product-single__title { font-size: 20px !important; }
  .product__price         { font-size: 20px !important; }

  /* Add to cart on mobile — full width */
  .add-to-cart { width: 100%; }
}

/* ── 31. SHOPIFY PAYMENT BUTTON (dynamic checkout) ──────────── */
.shopify-payment-button .shopify-payment-button__button--branded {
  border-radius: var(--fc-radius) !important;
  min-height: 48px !important;
}
.shopify-payment-button .shopify-payment-button__button--unbranded {
  background-color: var(--fc-black) !important;
  color: var(--fc-white) !important;
  border-radius: var(--fc-radius) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
.shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--fc-dark) !important;
}

/* ── 32. AOS / SECTION ANIMATION REFINEMENT ────────────────── */
/* Slightly faster, smoother reveal */
[data-aos] { transition-duration: 0.55s !important; }

/* ============================================================
 *  MOBILE RESPONSIVENESS FIXES
 *  Breakpoint: 320px – 768px
 *  Desktop layout: UNCHANGED
 *  All rules wrapped in max-width: 768px media queries only.
 * ============================================================ */

/* ── FIX 1: Prevent horizontal page overflow globally on mobile ── */
@media screen and (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Ensure .page-width never causes horizontal scroll */
  .page-width {
    box-sizing: border-box;
    width: 100%;
  }
}

/* ── FIX 2: Product slider card width in grid-overflow-wrapper ──
 *
 *  Root cause: theme.scss sets .grid__item { width: 39vw; flex: 0 0 39vw }
 *  inside .grid-overflow-wrapper at the $small breakpoint.
 *  39vw on a 375px phone = ~146px wide → ~2.5 cards visible at once.
 *  We need ~78vw (1.25 cards peeking) for a proper touch-swipe experience.
 *
 *  fc-best-sellers and featured-collection both use this mechanism.
 *  Override is scoped to the fc-bestsellers wrapper AND the global
 *  grid-overflow-wrapper at the small breakpoint.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  /* Global fix for ALL sections using grid-overflow-wrapper */
  .grid-overflow-wrapper .grid__item {
    width: 78vw !important;
    flex: 0 0 78vw !important;
    min-width: 0;
  }
}

/* On slightly larger phones (400–768px) show 1.3 cards */
@media screen and (min-width: 400px) and (max-width: 768px) {
  .grid-overflow-wrapper .grid__item {
    width: 72vw !important;
    flex: 0 0 72vw !important;
  }
}

@media screen and (max-width: 768px) {

  /* Ensure the overflow wrapper scrolls smoothly and never wraps */
  .grid-overflow-wrapper {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    /* prevent inner content from creating page-level horizontal scroll */
    max-width: 100vw;
  }

  /* Snap each card into view */
  .grid-overflow-wrapper .grid__item {
    scroll-snap-align: start;
  }

  /* Ensure grid inside wrapper stays as a flex row, never wraps */
  .grid-overflow-wrapper .grid {
    flex-wrap: nowrap !important;
    display: flex !important;
  }

  /* Fix: product image must not overflow the card */
  .grid-overflow-wrapper .grid-product__content {
    width: 100%;
    box-sizing: border-box;
  }

  .grid-overflow-wrapper .grid__image-ratio,
  .grid-overflow-wrapper .image-wrap,
  .grid-overflow-wrapper .grid-product__image-mask {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}

/* ── FIX 3: Product titles and prices inside cards on mobile ──
 *
 *  Root cause: .grid-product__price uses display:flex with gap which
 *  can force content outside the card on narrow widths.
 *  .grid-product__title has -webkit-line-clamp:2 which is correct
 *  but the font-size was set to 12px which is fine — just ensure
 *  it never overflows.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .grid-product__content {
    /* Force content to stay within card */
    overflow: hidden;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .grid-product__meta {
    padding: 10px 10px 12px !important;
    min-width: 0;
    overflow: hidden;
  }

  .grid-product__title {
    font-size: 12px !important;
    line-height: 1.4 !important;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
  }

  /* Price row: allow wrapping at narrow widths but cap font */
  .grid-product__price {
    font-size: 13px !important;
    flex-wrap: wrap;
    gap: 3px !important;
    align-items: baseline;
    overflow: hidden;
  }

  .grid-product__price--original {
    font-size: 11px !important;
  }

  .grid-product__price--savings {
    font-size: 10px !important;
  }
}

/* ── FIX 4: Club logos slider — mobile logo sizing ──────────
 *
 *  Root cause: .fc-clubs__item uses padding: 0 {{ gap }}px where
 *  gap defaults to 45px. On mobile this makes each item ~210px wide
 *  showing ~1.7 logos at once on 375px. Fix by reducing gap and
 *  logo max-width. The animation still plays — no JS needed.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  /* Reduce gap between logos */
  [class*="fc-clubs--"] .fc-clubs__item {
    padding: 0 16px !important;
  }

  /* Reduce logo max-width to show 3–4 per visible viewport width */
  [class*="fc-clubs--"] .fc-clubs__img {
    height: 36px !important;
    max-width: 72px !important;
  }

  [class*="fc-clubs--"] .fc-clubs__placeholder {
    height: 36px !important;
    width: 60px !important;
  }

  /* Reduce fade edge width on mobile */
  [class*="fc-clubs--"] .fc-clubs__track-outer::before,
  [class*="fc-clubs--"] .fc-clubs__track-outer::after {
    width: 32px !important;
  }
}

/* ── FIX 5: Featured Collections grid — mobile ───────────────
 *
 *  Root cause: .fc-fc__grid has `grid-template-columns: 1fr 1fr`
 *  hardcoded at base level (no @media guard). On 320px phones
 *  each cell is only ~148px wide. Fix: force single column below
 *  480px and keep 2-col for 480–768px.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  [class*="fc-feat-cols--"] .fc-fc__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Remove span:2 overrides on single column */
  [class*="fc-feat-cols--"] .fc-fc__item:first-child,
  [class*="fc-feat-cols--"] .fc-fc__item:last-child {
    grid-column: span 1 !important;
  }

  /* Adjust card ratio: 80% of card width (was e.g. 80%) but on
     single column the card is full width so ratio is fine as-is.
     Just ensure the body text doesn't overflow. */
  [class*="fc-feat-cols--"] .fc-fc__body {
    bottom: 12px;
    left: 12px;
    right: 12px;
  }

  [class*="fc-feat-cols--"] .fc-fc__title {
    font-size: 13px;
    margin-bottom: 4px;
  }

  [class*="fc-feat-cols--"] .fc-fc__cta {
    font-size: 10px;
  }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  [class*="fc-feat-cols--"] .fc-fc__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Remove span:2 overrides on 2-col — don't let featured items
     break the even grid on small screens */
  [class*="fc-feat-cols--"] .fc-fc__item:first-child,
  [class*="fc-feat-cols--"] .fc-fc__item:last-child {
    grid-column: span 1 !important;
  }
}

/* ── FIX 6: Featured Categories grid — mobile card ratio ────
 *
 *  Root cause: .fc-cat__card has padding-bottom: {{ card_ratio }}%
 *  (default 130%). In a 2-col grid on 320px, each card is 148px wide
 *  meaning height = 192px. This is OK but the label at bottom
 *  needs enough room. The real problem is on 5-col presets—
 *  on mobile the grid already switches to 2-col (hardcoded in section).
 *  Fix: cap card ratio at 110% on mobile so tall cards aren't cut.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  [class*="fc-categories--"] .fc-categories__grid {
    gap: 10px !important;
  }

  /* Cap height so cards are not excessively tall on small phones */
  [class*="fc-categories--"] .fc-cat__card {
    /* Override the Liquid-rendered padding-bottom with a max */
    max-height: 200px;
    padding-bottom: 0 !important;
    height: 160px !important;
  }

  [class*="fc-categories--"] .fc-cat__label {
    bottom: 10px;
    left: 8px;
    right: 8px;
  }

  [class*="fc-categories--"] .fc-cat__label span {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }
}

/* ── FIX 7: Hero banner — mobile height ──────────────────────
 *
 *  Root cause: fc-hero-banner uses min-height from settings
 *  (e.g. 600px). On a 320–375px phone 600px = very tall banner.
 *  Fix: cap to 85vw height equivalent on mobile, allow parallax
 *  scroll (already disabled for mobile in section CSS).
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  [class*="fc-hero--"] {
    min-height: 420px !important;
  }

  [class*="fc-hero--"] .fc-hero__inner {
    padding: 44px 0 !important;
  }

  [class*="fc-hero--"] .fc-hero__title {
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
  }

  [class*="fc-hero--"] .fc-hero__subtitle {
    font-size: 14px !important;
    margin-bottom: 22px !important;
  }

  [class*="fc-hero--"] .fc-hero__eyebrow {
    font-size: 10px !important;
    margin-bottom: 10px;
  }

  [class*="fc-hero--"] .fc-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Center actions when text is center-aligned */
  [class*="fc-hero--"] .fc-hero__inner[style*="center"] .fc-hero__actions,
  [class*="fc-hero--"] .fc-hero__title-wrap[style*="center"] ~ .fc-hero__actions {
    align-items: center;
  }

  [class*="fc-hero--"] .fc-hero__actions .btn {
    padding: 12px 24px !important;
    font-size: 11px !important;
    width: auto;
    white-space: nowrap;
  }

  /* Gold stripe accent */
  [class*="fc-hero--"] .fc-hero__title-wrap::before {
    width: 32px;
    height: 3px;
    margin-bottom: 12px;
  }
}

/* ── FIX 8: Promo banner — mobile height ─────────────────────
 *
 *  Root cause: fc-promo-banner uses fixed min-height setting.
 *  On mobile 420px banner is too tall.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  [class*="fc-promo--"] {
    min-height: 280px !important;
  }

  [class*="fc-promo--"] .fc-promo__inner {
    padding: 40px 0 !important;
  }

  [class*="fc-promo--"] .fc-promo__title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }

  [class*="fc-promo--"] .fc-promo__subtitle {
    font-size: 13px !important;
    margin-bottom: 20px !important;
  }

  [class*="fc-promo--"] .fc-promo__label {
    font-size: 9px !important;
    margin-bottom: 12px;
  }

  [class*="fc-promo--"] .fc-promo__actions {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  /* Countdown units */
  [class*="fc-promo--"] .fc-cd__unit {
    padding: 8px 10px;
    min-width: 52px;
  }

  [class*="fc-promo--"] .fc-cd__num {
    font-size: 22px !important;
  }
}

/* ── FIX 9: Reviews grid — mobile single-column tightening ──
 *
 *  The fc-reviews grid is already 1fr on mobile (correct) but
 *  the card padding is generous. Tighten for small screens.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  [class*="fc-reviews--"] .fc-rev__card {
    padding: 18px 16px !important;
    gap: 10px !important;
  }

  [class*="fc-reviews--"] .fc-rev__card-text {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  [class*="fc-reviews--"] .fc-rev__avg {
    font-size: 40px !important;
  }

  [class*="fc-reviews--"] .fc-rev__summary {
    margin-bottom: 28px !important;
  }

}

/* Allow 2-col on 480px+ phones for reviews */
@media screen and (min-width: 480px) and (max-width: 768px) {
  [class*="fc-reviews--"] .fc-rev__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── FIX 10: Trust badges — mobile wrapping ─────────────────
 *
 *  Trust grid is already 2-col on mobile (correct). But item
 *  border-right logic (desktop only) can bleed. Ensure items
 *  don't overflow and borders are stripped on mobile.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  [class*="fc-trust--"] .fc-trust__item {
    border-right: none !important;
    padding: 0 !important;
  }

  [class*="fc-trust--"] .fc-trust__grid {
    gap: 24px 16px !important;
  }

  [class*="fc-trust--"] .fc-trust__icon {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0;
  }

  [class*="fc-trust--"] .fc-trust__icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  [class*="fc-trust--"] .fc-trust__title {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }

  [class*="fc-trust--"] .fc-trust__desc {
    font-size: 11px !important;
  }
}

/* ── FIX 11: Best Sellers section-specific mobile slider ─────
 *
 *  When mobile_scrollable is enabled in fc-best-sellers,
 *  the theme's grid-overflow-wrapper kicks in and the override
 *  in FIX 2 handles card width. Add padding/spacing specifics here.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  /* Section container should not overflow page */
  [class*="fc-bestsellers--"] {
    overflow: hidden;
    max-width: 100vw;
  }

  [class*="fc-bestsellers--"] .grid-overflow-wrapper {
    /* Visible scrollbar looks bad on mobile — hide it */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [class*="fc-bestsellers--"] .grid-overflow-wrapper::-webkit-scrollbar {
    display: none;
  }

  /* Tab bar wrapping */
  [class*="fc-bestsellers--"] .fc-bs__tab-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    margin-bottom: 20px !important;
  }
  [class*="fc-bestsellers--"] .fc-bs__tab-bar::-webkit-scrollbar { display: none; }

  [class*="fc-bestsellers--"] .fc-bs__tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 11px;
  }
}

/* ── FIX 12: Featured-collection (existing theme section) mobile
 *
 *  The existing featured-collection section also uses
 *  grid-overflow-wrapper. FIX 2 already handles card width globally.
 *  Add the same scrollbar hiding here.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  #CollectionSection-featured-collection .grid-overflow-wrapper,
  [id^="CollectionSection-"] .grid-overflow-wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [id^="CollectionSection-"] .grid-overflow-wrapper::-webkit-scrollbar {
    display: none;
  }
}

/* ── FIX 13: Logo list (theme section) — mobile ─────────────
 *
 *  The theme's logo-bar section uses a flex row.
 *  .logo-bar__item has flex: 0 1 110px (small) and 0 1 160px (medium+).
 *  On mobile the items may overflow if too many. Ensure wrapping.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .logo-bar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px 24px !important;
    margin-bottom: 0 !important;
  }

  .logo-bar__item {
    flex: 0 1 80px !important;
    margin: 0 !important;
  }

  .logo-bar__image {
    max-height: 36px !important;
    max-width: 72px !important;
  }
}

/* ── FIX 14: Testimonials slider — mobile card sizing ────────
 *
 *  Theme testimonials use Slick slider. The card text may overflow.
 * ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .testimonials-slider__text {
    padding: 20px 18px !important;
    margin: 2px !important;
  }

  .testimonials-slider__text p {
    font-size: 13px !important;
  }
}

/* ── FIX 15: Page-width flush on mobile — prevent outer edge bleed */
@media screen and (max-width: 768px) {
  .page-width--flush-small {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }

  /* Slideshow hero must not overflow horizontally */
  .slideshow-wrapper,
  .hero,
  .hero__image-wrapper {
    max-width: 100vw;
    overflow: hidden;
  }
}

/* ── FIX 16: Index section margin reduction on very small phones */
@media screen and (max-width: 374px) {
  .index-section {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  .section-header {
    margin-bottom: 20px !important;
  }

  .section-header__title {
    font-size: 18px !important;
  }

  /* Even smaller card width on 320px: nearly full screen */
  .grid-overflow-wrapper .grid__item {
    width: 84vw !important;
    flex: 0 0 84vw !important;
  }

  [class*="fc-hero--"] {
    min-height: 360px !important;
  }

  [class*="fc-promo--"] {
    min-height: 240px !important;
  }
}

/* ============================================================
 *  MOBILE CAROUSEL / TOUCH SLIDER — ALL FOUR SECTIONS
 *  Breakpoint: max-width 767px (phones only)
 *  Desktop layout: UNTOUCHED (all rules use max-width guard)
 *  Technique: CSS scroll-snap (no new JS library needed —
 *  Slick is already bundled but overkill for single-row scrollers)
 * ============================================================ */

/* ── CAROUSEL 1: FC Featured Categories ────────────────────── */
/*  Replaces 2-col grid with a horizontal peekaboo slider.
 *  Shows 1.2 cards on 320-399px, 1.4 cards on 400-767px.     */
@media screen and (max-width: 767px) {

  /* Remove the fixed-height cap from previous fix — carousel
     handles sizing now */
  [class*="fc-categories--"] .fc-cat__card {
    max-height: none !important;
    height: 0 !important;          /* reset */
    padding-bottom: 110% !important; /* restore ratio-based height */
  }

  /* Outer: allow the track to bleed past page-width padding */
  [class*="fc-categories--"] .page-width {
    overflow: visible;
  }

  /* Convert grid → horizontal scroll container */
  [class*="fc-categories--"] .fc-categories__grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 4px; /* room for scrollbar on some browsers */
    /* Negative margin trick — let slider visually extend to screen edge */
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    box-sizing: border-box;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [class*="fc-categories--"] .fc-categories__grid::-webkit-scrollbar {
    display: none;
  }

  /* Each card: fixed width so 1.2 show at a time */
  [class*="fc-categories--"] .fc-cat__card {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    scroll-snap-align: start;
    border-radius: 8px;
  }
}

/* 400px+ phones: show 1.4 cards */
@media screen and (min-width: 400px) and (max-width: 767px) {
  [class*="fc-categories--"] .fc-cat__card {
    flex: 0 0 68vw !important;
    width: 68vw !important;
  }
}


/* ── CAROUSEL 2: FC Best Sellers (product grid) ─────────────── */
/*  The section already uses grid-overflow-wrapper + data-aos
 *  overflow__animation. We enhance those existing CSS hooks so
 *  the cards are the right size and snap correctly.
 *  FIX 2 (above) already does most of this — we add snap & sizing
 *  tuning specifically for fc-bestsellers.                       */
@media screen and (max-width: 767px) {

  [class*="fc-bestsellers--"] .grid-overflow-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px) !important;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [class*="fc-bestsellers--"] .grid-overflow-wrapper::-webkit-scrollbar {
    display: none;
  }

  [class*="fc-bestsellers--"] .grid-overflow-wrapper .grid {
    flex-wrap: nowrap !important;
    display: flex !important;
    gap: 12px;
  }

  /* 1.2 cards */
  [class*="fc-bestsellers--"] .grid-overflow-wrapper .grid__item {
    flex: 0 0 76vw !important;
    width: 76vw !important;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* keep badge positioned correctly */
  [class*="fc-bestsellers--"] .grid__item {
    position: relative;
  }
}

@media screen and (min-width: 400px) and (max-width: 767px) {
  /* 1.5 cards on larger phones */
  [class*="fc-bestsellers--"] .grid-overflow-wrapper .grid__item {
    flex: 0 0 62vw !important;
    width: 62vw !important;
  }
}


/* ── CAROUSEL 3: FC Featured Collections ───────────────────── */
/*  Current mobile: 1col (<480px) or 2col (480-767px).
 *  New: horizontal swipe carousel on all phones < 768px.
 *  Shows 1.3 cards so the next card peeks.                     */
@media screen and (max-width: 767px) {

  [class*="fc-feat-cols--"] .page-width {
    overflow: visible;
  }

  /* Override previous fixes that set grid-template-columns */
  [class*="fc-feat-cols--"] .fc-fc__grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 4px;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [class*="fc-feat-cols--"] .fc-fc__grid::-webkit-scrollbar {
    display: none;
  }

  /* Each collection card item */
  [class*="fc-feat-cols--"] .fc-fc__item {
    flex: 0 0 74vw !important;
    width: 74vw !important;
    min-width: 0;
    scroll-snap-align: start;
    /* Reset any span:2 desktop rules */
    grid-column: unset !important;
  }

  /* The card itself fills its item */
  [class*="fc-feat-cols--"] .fc-fc__card {
    width: 100%;
    display: block;
    padding-bottom: 110% !important; /* consistent aspect ratio */
  }
}

@media screen and (min-width: 400px) and (max-width: 767px) {
  [class*="fc-feat-cols--"] .fc-fc__item {
    flex: 0 0 64vw !important;
    width: 64vw !important;
  }
}


/* ── CAROUSEL 4: Featured Collection (theme default section) ── */
/*  This section already has mobile_scrollable → grid-overflow-wrapper.
 *  We scope the same scroll-snap treatment used above.          */
@media screen and (max-width: 767px) {

  #CollectionSection-{{ section.id }} .grid-overflow-wrapper,
  .index-section[data-section-type="collection-template"] .grid-overflow-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* The generic grid-overflow-wrapper rules (FIX 2) already handle
     card width and snap-align — this section benefits automatically. */
}


/* ── Shared: smooth scroll momentum for all carousels ───────── */
@media screen and (max-width: 767px) {
  [class*="fc-categories--"] .fc-categories__grid,
  [class*="fc-bestsellers--"] .grid-overflow-wrapper,
  [class*="fc-feat-cols--"] .fc-fc__grid,
  .grid-overflow-wrapper {
    scroll-behavior: smooth;
  }
}


/* ================================================================
   FC CUSTOM — v5 CLEAN
   ================================================================ */

/* 1. Product page: hide dynamic checkout + Releasit green button */
.shopify-payment-button,
.shopify-payment-button__button--branded,
.shopify-payment-button__button--unbranded,
.shopify-payment-button__more-options,
[data-shopify="payment-button"],
.payment-buttons,
.additional-checkout-buttons {
  display: none !important;
}

/* 2. Add to Cart: always gold */
.add-to-cart,
.btn.add-to-cart,
.btn--full.add-to-cart {
  background-color: var(--fc-gold) !important;
  color: var(--fc-black) !important;
  border-color: var(--fc-gold) !important;
  font-weight: 800 !important;
}
.add-to-cart:hover {
  background-color: var(--fc-gold-dark) !important;
  border-color: var(--fc-gold-dark) !important;
}

/* 3. Hide Releasit injected buttons everywhere */
[data-releasit-btn],
[id*="rof-btn"],
[class*="rof-btn"],
[class*="releasit-btn"],
[id*="releasit-btn"],
.rof-button,
#rof-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 4. Hide Releasit floating/sticky on mobile
   (we show our own sticky bar) */
@media screen and (max-width: 768px) {
  [class*="rof-sticky"],
  [class*="rof-float"],
  [class*="rof-bottom"],
  [class*="releasit-sticky"],
  [class*="releasit-float"] {
    display: none !important;
  }
  /* Also hide Releasit default mobile bottom bar */
  .rof-sticky-container,
  .rof-mobile-bar,
  div[class*="releasit"][class*="mobile"] {
    display: none !important;
  }
}

/* 5. Cart offer popup box */
.fc-cart-popup {
  background: #0a0a0a;
  border: 1.5px solid var(--fc-gold, #F5C518);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0 10px;
  text-align: center;
}
.fc-cart-popup__title {
  color: var(--fc-gold, #F5C518);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fc-cart-popup__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0;
}
.fc-cart-popup__badge {
  background: var(--fc-gold, #F5C518);
  color: #0a0a0a;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
}
.fc-cart-popup__text { color: #fff; font-size: 13px; }
.fc-cart-popup__cod {
  margin-top: 8px;
  background: #1a1a1a;
  border-radius: 5px;
  padding: 7px 10px;
  color: var(--fc-gold, #F5C518);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
}

/* 6. PAGAR CONTRA REEMBOLSO button */
.fc-cod-open-btn {
  background-color: var(--fc-gold, #F5C518) !important;
  color: #0a0a0a !important;
  border-color: var(--fc-gold, #F5C518) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  font-size: 13px !important;
  margin-top: 10px !important;
}
.fc-cod-open-btn:hover {
  background-color: var(--fc-gold-dark, #D4A800) !important;
  border-color: var(--fc-gold-dark, #D4A800) !important;
}

/* 7. Bizum cart button */
.fc-bizum-cart-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  margin-top: 8px;
  background: #0a0a0a;
  color: #fff;
  border: 2px solid #00A3E0;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s;
}
.fc-bizum-cart-btn:hover { background: #001f2e; }
.fc-bizum-icon {
  background: #00A3E0;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 5px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}
.fc-bizum-cart-btn__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fc-bizum-cart-btn__sub {
  font-size: 10px;
  color: #00A3E0;
  font-weight: 600;
}

/* 8. Mobile: hide PAGAR CONTRA REEMBOLSO on mobile
   (keep only FINALIZAR PEDIDO sticky bar) */


/* 9. Sticky mobile bar */
#fc-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: #0a0a0a;
  border-top: 2px solid var(--fc-gold, #F5C518);
  padding: 10px 16px 14px;
  box-sizing: border-box;
}
@media screen and (min-width: 769px) {
  #fc-sticky-bar,
  #fc-sticky-bar.is-visible {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  #fc-sticky-bar.is-visible {
    display: block;
  }
  .site-footer { padding-bottom: 72px !important; }
  .drawer__footer {
    padding-bottom: 80px !important; /* clear the 74px sticky bar */
    position: relative;
    z-index: 10000 !important;
  }
}
.fc-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fc-sticky-bar__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.fc-sticky-bar__label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fc-sticky-bar__price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--fc-gold, #F5C518);
  line-height: 1;
}
.fc-sticky-bar__btn {
  flex: 1;
  background: var(--fc-gold, #F5C518);
  color: #0a0a0a;
  border: none;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.fc-sticky-bar__btn:active {
  background: var(--fc-gold-dark, #D4A800);
}
/* Hide Releasit green button on product page only */
._rsi-buy-now-button-product {
  display: none !important;
}
/* Fix product grid price alignment */
.grid-product__price {
  justify-content: center !important;
  text-align: center !important;
}