/* FabbHome custom overrides — theme.css + fabbhome-vars.css handle base styles */

/* Font face for Sainte Colombe (editorial headings) */
@font-face {
  font-family: 'Sainte Colombe';
  src: url('/fonts/SainteColombe-Light.woff2') format('woff2'),
       url('/fonts/SainteColombe-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Saintecolombe';
  src: url('/fonts/SainteColombe-Light.woff2') format('woff2'),
       url('/fonts/SainteColombe-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Button hover color — matches reference production site */
.button:hover, .btn:hover, [class*="button--"]:hover {
  background-color: #A68945 !important;
  border-color: #A68945 !important;
}
.button--outline:not(.button--subdued) {
  background-color: transparent !important;
  color: rgb(var(--button-background)) !important;
  border-color: rgb(var(--button-background)) !important;
}
.button--outline:not(.button--subdued):hover {
  background-color: rgb(var(--button-background)) !important;
  color: rgb(var(--button-text-color)) !important;
}

/* FH Section heading overrides */
.fh-bestsellers__eyebrow,
.fh-compare__heading,
.fh-cat__heading,
.fh-eb__h,
.fh-sbs__heading {
  text-transform: var(--heading-text-transform, uppercase);
  letter-spacing: var(--heading-letter-spacing, 0.18em);
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight, 400);
}

/* Product card additions */
.fh-card-meta-note {
  font-size: 11px;
  color: rgb(var(--text-color) / 0.55);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.fh-card-colors {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.fh-card-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  display: inline-block;
  transition: transform 0.2s;
}
.fh-card-color:hover { transform: scale(1.2); }
.fh-card-color-more {
  font-size: 10px;
  color: rgb(var(--text-color) / 0.5);
}
.fh-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgb(var(--background-without-opacity, 250 248 246));
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  z-index: 1;
}

/* Collection page */
.fh-coll { padding: 40px 0 80px; }
.fh-coll__head { max-width: 85rem; margin: 0 auto 32px; padding: 0 var(--container-gutter); }
.fh-coll__title { font-family: var(--heading-font-family); font-size: var(--text-h1); font-weight: var(--heading-font-weight); letter-spacing: var(--heading-letter-spacing); text-transform: var(--heading-text-transform); margin-bottom: 8px; }
.fh-coll__count { font-size: var(--text-sm); color: rgb(var(--text-color) / 0.55); }
.fh-coll__grid { max-width: 85rem; margin: 0 auto; padding: 0 var(--container-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media(max-width:999px) { .fh-coll__grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:699px) { .fh-coll__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Product page */
.fh-pdp { padding: 40px 0 80px; }
.fh-pdp__inner { max-width: 85rem; margin: 0 auto; padding: 0 var(--container-gutter); display: grid; grid-template-columns: 0.6fr 0.4fr; gap: 48px; }
.fh-pdp__main-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.fh-pdp__thumbs { display: flex; gap: 8px; margin-top: 12px; }
.fh-pdp__thumb { width: 72px; height: 72px; object-fit: cover; border: 1px solid transparent; cursor: pointer; }
.fh-pdp__thumb:hover, .fh-pdp__thumb.is-active { border-color: rgb(var(--text-color)); }
.fh-pdp__info { position: sticky; top: 120px; align-self: start; }
.fh-pdp__name { font-family: 'Sainte Colombe', 'Saintecolombe', Georgia, serif; font-size: 28px; font-weight: 300; margin-bottom: 8px; }
.fh-pdp__type { font-size: var(--text-xs); color: rgb(var(--text-color) / 0.55); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.fh-pdp__price-note { font-size: var(--text-sm); color: rgb(var(--text-color) / 0.55); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgb(var(--border-color)); }
.fh-pdp__colors-title { font-family: var(--heading-font-family); font-size: var(--text-h6); letter-spacing: var(--heading-letter-spacing); text-transform: uppercase; margin-bottom: 12px; }
.fh-pdp__color-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.fh-pdp__swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; }
.fh-pdp__swatch:hover { transform: scale(1.1); }
.fh-pdp__swatch.is-selected { border-color: rgb(var(--text-color)); }
.fh-pdp__accordion { border-top: 1px solid rgb(var(--border-color)); }
.fh-pdp__acc-item { border-bottom: 1px solid rgb(var(--border-color)); }
.fh-pdp__acc-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-family: var(--heading-font-family); font-size: var(--text-h6); letter-spacing: var(--heading-letter-spacing); text-transform: uppercase; background: none; border: none; cursor: pointer; }
.fh-pdp__acc-trigger::after { content: '+'; font-size: 18px; font-weight: 300; }
.fh-pdp__acc-item.is-open .fh-pdp__acc-trigger::after { content: '\2212'; }
.fh-pdp__acc-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.fh-pdp__acc-item.is-open .fh-pdp__acc-body { max-height: 500px; }
.fh-pdp__acc-content { padding: 0 0 16px; font-size: var(--text-sm); color: rgb(var(--text-color) / 0.55); line-height: 1.7; }
@media(max-width:699px) { .fh-pdp__inner { grid-template-columns: 1fr; gap: 24px; } .fh-pdp__info { position: static; } }


/* ═══ FAZ 7: Hover & Transition Polish ═══ */

/* Product card image crossfade — exact reference behavior */
.product-card__image--primary {
  transition: opacity 0.3s ease-in-out;
}
.product-card__image--secondary {
  transition: opacity 0.3s ease-in-out;
}

/* Quick add button reveal on hover */
.product-card__quick-add-button {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.product-card:hover .product-card__quick-add-button,
.product-card:focus-within .product-card__quick-add-button {
  opacity: 1;
  transform: translateY(0);
}

/* Link-faded hover */
.link-faded {
  transition: color 0.2s ease-in-out;
}
.link-faded:hover {
  opacity: 0.6;
}

/* Button transition effect (reference: background-size animation) */
.features--button-transition .button:not([disabled]):not(.button--subdued) {
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-size 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              background-position 0.45s step-end,
              color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Announcement bar transition */
.announcement-bar {
  transition: transform 0.25s ease-in-out;
}

/* Header hide-on-scroll transition */
fh-header {
  transition: transform 0.3s ease-in-out;
}

/* Scroll-smooth for carousel elements */
.scroll-area {
  scroll-behavior: smooth;
}

/* Accordion smooth open/close */
.accordion__content {
  overflow: hidden;
}

/* Image zoom on hover (features--zoom-image) */
@media (hover: hover) {
  .features--zoom-image .product-card__image--primary {
    transition: opacity 0.3s ease-in-out, transform 5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .features--zoom-image .product-card:hover .product-card__image--primary {
    transform: scale(1.05);
  }
}

/* Mobile: disable hover zoom */
@media (hover: none) {
  .product-card__image--primary {
    transition: opacity 0.3s ease-in-out !important;
  }
}

/* Z-index layering — matches reference */
.announcement-bar { position: relative; z-index: 5; }
fh-header { position: relative; z-index: 4; }
.collection-toolbar { z-index: 2; }

/* Page dots active state */
.page-dots [aria-current="true"] {
  opacity: 1;
}
.page-dots [aria-current="false"] {
  opacity: 0.4;
}

/* Cart drawer z-index */
cart-drawer { z-index: 999; }
header-sidebar { z-index: 999; }
header-search { z-index: 999; }

/* Mobile menu: full height */
@media (max-width: 999px) {
  header-sidebar::part(content) {
    height: 100%;
  }
}

/* Ensure body scroll lock works */
body.scroll-locked {
  overflow: hidden !important;
}

/* FH Bestsellers viewall button */
.fh-bestsellers__viewall {
  text-align: center;
  margin-top: 40px;
}

/* Collection active filter link */
.link-faded.is-active {
  font-weight: 600;
  opacity: 1;
}


/* Mega menu hover — from Woo header inline CSS */
.fh-nav-dropdown__trigger {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  font-size: var(--text-h6);
}


/* Bestsellers VIEW ALL button — from Woo */
.fh-bestsellers__viewall {
  text-align: center;
  margin-top: 40px;
}
.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--heading-font-family);
  font-size: var(--text-sm);
  font-weight: var(--heading-font-weight);
  letter-spacing: var(--button-letter-spacing, 0.18em);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--button-border-radius, 0);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1.65;
}
.fh-btn--primary {
  background: rgb(var(--button-background, 0 58 67));
  color: rgb(var(--button-text-color, 255 255 255));
  border-color: rgb(var(--button-background, 0 58 67));
}
.fh-btn--primary:hover,
.fh-bs-viewall-btn:hover {
  background: #A68945 !important;
  border-color: #A68945 !important;
}

/* Product badges — Woo exact classes */
.product-badges {
  position: absolute;
  z-index: 1;
}
.product-badges--vertical {
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}
.badge--on-sale {
  background: rgb(var(--on-sale-badge-background, 227 44 43));
  color: rgb(var(--on-sale-badge-text, 255 255 255));
}
.badge--sold-out {
  background: rgb(var(--sold-out-badge-background, 250 248 246));
  color: rgb(var(--sold-out-badge-text, 0 0 0 / 0.65));
}