/* ==========================================================================
   HAYDAR — Single Product page enhancements
   Design tokens: bg #F5EFDF / surface #F5EFDF / ink #100E0C / accent #CBA968
   Sharp corners everywhere, hairline dividers, no shadows.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.elementor-element-6e52bef {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(16,14,12,0.55);
}
.elementor-element-6e52bef a { color: rgba(16,14,12,0.55); text-decoration: none; }
.elementor-element-6e52bef a:hover { color: #CBA968; }
.haydar-crumb-current { color: #100E0C; }

/* ---------- Gallery: thumbnails as a vertical rail on the left ---------- */
.xpro-product-image-wrapper .woocommerce-product-gallery {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 14px;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__wrapper {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__wrapper.haydar-no-photo {
  background: radial-gradient(130% 110% at 25% 10%, #F5EFDF 0%, #E7D9B4 50%, #CBA968 100%);
}
.xpro-product-image-wrapper .woocommerce-product-gallery__wrapper.haydar-no-photo .woocommerce-product-gallery__image img {
  opacity: 0;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__image {
  aspect-ratio: 3 / 4;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the WooCommerce placeholder image itself is handled via JS detection
   (see .haydar-no-photo above), so real uploaded photos are never hidden.

   NOTE: WooCommerce's own stylesheet ships
   ".woocommerce div.product div.images .flex-control-thumbs li { width:25% }"
   which is MORE specific than a plain ".flex-control-thumbs li" rule, so it
   always won and produced tiny ~21px thumbnails. Rather than fight WC's
   native flexslider thumb-nav on specificity, we hide it completely and
   render our own thumbnail rail (built in JS from the same images, see
   product-page.js) that proxies clicks back to flexslider's real controls. */
.xpro-product-image-wrapper ol.flex-control-nav.flex-control-thumbs {
  display: none !important;
}

.haydar-thumb-rail {
  display: flex;
  flex-direction: column;
  flex: 0 0 84px;
  width: 84px;
  gap: 10px;
  max-height: 560px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  /* hide the native scrollbar on every breakpoint (desktop's vertical rail
     and tablet alike) - not just the mobile horizontal strip */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.haydar-thumb-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.haydar-thumb-rail li {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  list-style: none;
}
.haydar-thumb-rail button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(16,14,12,0.14);
  background: none;
  cursor: pointer;
  line-height: 0;
}
.haydar-thumb-rail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .75;
  transition: opacity .15s ease;
}
.haydar-thumb-rail button:hover img { opacity: .9; }
.haydar-thumb-rail button.is-active { border-color: #100E0C; }
.haydar-thumb-rail button.is-active img { opacity: 1; }

/* ---------- Info column ---------- */
.elementor-element-4c247be { padding-left: 8px; }

.haydar-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #CBA968;
  margin-bottom: 10px;
}

.xpro-woo-product-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  color: #100E0C;
  margin: 0 0 14px;
}

.elementor-element-af18308 .woocommerce-Price-amount {
  font-family: "Space Grotesk", monospace;
  font-size: 22px;
  color: #CBA968;
}

.elementor-element-9aac7ab .xpro-woo-product-desc-cls {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(16,14,12,0.75);
  max-width: 46ch;
}

/* ---------- Variations table -> swatch buttons ---------- */
.variations_form table.variations {
  border: none;
  margin: 22px 0 4px;
}
.variations_form table.variations tr { display: block; margin-bottom: 16px; }
.variations_form table.variations td,
.variations_form table.variations th {
  display: block;
  border: none;
  padding: 0;
  text-align: left;
}
.variations_form table.variations th.label {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #100E0C;
  margin-bottom: 10px;
}
.variations_form table.variations th.label label { margin-right: 12px; }

/* Xpro already renders functional swatches (.xpro_swatches .swatch) wired
   to the hidden <select> with its own selected/disabled state logic.
   We restyle those native elements instead of duplicating them. */
.xpro_swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.xpro_swatches .swatch {
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(16,14,12,0.3);
  background: #F5EFDF;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #100E0C;
  transition: border-color .15s ease, background-color .15s ease, outline-color .15s ease;
}
.xpro_swatches .swatch.swatch_label {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.xpro_swatches .swatch.swatch_color {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 0;
  color: transparent;
  overflow: hidden;
  border-color: rgba(16,14,12,0.35);
  box-shadow: inset 0 0 0 1px rgba(16,14,12,0.08);
}
.xpro_swatches .swatch.selected.swatch_label {
  background: #6E5138 !important; /* selected size: leather brown, per request */
  border-color: #CBA968 !important;
  color: #F5EFDF !important;
}
.xpro_swatches .swatch.selected.swatch_color {
  outline: 2px solid #CBA968 !important;
  outline-offset: 3px !important;
  border-color: #CBA968 !important;
}
.xpro_swatches .swatch.disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}
.xpro_swatches .xpro_swatch__tooltip { display: none; }

.variations_form a.reset_variations {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #CBA968;
  margin-left: 10px;
}

.haydar-size-guide-link {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #CBA968;
  text-decoration: underline;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}

/* ---------- Quantity stepper ---------- */
.woocommerce div.quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(16,14,12,0.3);
  height: 42px;
  margin: 18px 0;
}
.woocommerce div.quantity .qty {
  width: 46px;
  text-align: center;
  border: none;
  height: 40px;
  font-family: "Space Grotesk", monospace;
  background: transparent;
}
.haydar-qty-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #100E0C;
  font-size: 16px;
  cursor: pointer;
}
.haydar-qty-btn:hover { background: rgba(16,14,12,0.06); }

/* ---------- CTA buttons ---------- */
.single_variation_wrap .woocommerce-variation-add-to-cart,
.elementor-element-efb6290 form.cart { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }

.single_add_to_cart_button.button {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  background: #3C2D1F !important;
  color: #F5EFDF !important;
  border: 1px solid #3C2D1F !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  width: 100%;
  text-align: center;
}
.single_add_to_cart_button.button:hover { background: #F7F3EC !important; color: #17130F !important; border-color: #CBA968 !important; box-shadow: inset 0 0 0 1px #CBA968; }
.single_add_to_cart_button.disabled { opacity: .4 !important; cursor: not-allowed !important; }

.haydar-buy-now-btn {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  color: #100E0C;
  border: 1px solid #100E0C;
  border-radius: 0;
  padding: 16px 20px;
  width: 100%;
  max-width: 420px;
  cursor: pointer;
  margin-top: -4px;
}
.haydar-buy-now-btn:hover { background: rgba(16,14,12,0.06); }

/* ---------- Trust badges ---------- */
.haydar-trust-badges {
  display: flex;
  flex-wrap: nowrap; /* single line - the info column has room now that tabs moved under the gallery */
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(16,14,12,0.14);
  max-width: 100%;
}
.haydar-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(16,14,12,0.7);
  white-space: nowrap;
}
.haydar-badge svg {
  width: 26px;
  height: 26px;
  min-width: 26px;
  color: #CBA968;
  flex-shrink: 0;
  overflow: visible;
}
@media (max-width: 480px) {
  .haydar-trust-badges {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .haydar-badge { font-size: 11.5px; }
  .haydar-badge svg { width: 22px; height: 22px; min-width: 22px; }
}

.haydar-size-guide-link { display: inline-block; margin-top: 2px; }

/* ---------- Tabs ---------- */
.elementor-element-3fb0bcd .elementor-tabs-content-wrapper {
  border-top: 1px solid rgba(16,14,12,0.14);
}
.elementor-element-3fb0bcd .elementor-tab-title {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(16,14,12,0.55) !important;
  padding: 16px 6px !important;
}
.elementor-element-3fb0bcd .elementor-tab-content {
  padding: 24px !important;
  line-height: 1.7 !important;
}
.elementor-element-3fb0bcd .elementor-tab-title.elementor-active,
.elementor-element-3fb0bcd .elementor-tab-title[aria-selected="true"] {
  color: #100E0C !important;
  border-bottom-color: #CBA968 !important;
  box-shadow: inset 0 -2px 0 #CBA968;
}
.elementor-element-3fb0bcd .elementor-tab-title:focus,
.elementor-element-3fb0bcd .elementor-tab-title:hover {
  color: #100E0C !important;
}

/* ---------- Reviews section (full-bleed) ---------- */
.haydar-fullbleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
.haydar-reviews-section {
  background: #F5EFDF;
  padding: 24px 0 56px;
  margin-top: 8px;
}
.haydar-inner { max-width: min(1600px, 90vw); margin: 0 auto; padding: 0 32px; }

.haydar-reviews-top {
  display: flex;
  justify-content: space-between;
  align-items: center; /* was flex-start: the button sat pinned to the top
                           instead of centered against the whole rating block */
  gap: 24px;
  flex-wrap: wrap;
  max-width: 900px; /* keep the rating block and the button close together
                        instead of stretching across the now much wider page */
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(16,14,12,0.14);
  margin-bottom: 32px;
}
.haydar-reviews-label {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(16,14,12,0.6);
  margin-bottom: 6px;
}
.haydar-reviews-score {
  font-family: "Cormorant Garamond", serif;
  font-size: 40px;
  color: #CBA968;
  line-height: 1;
}
.haydar-stars-static { color: #CBA968; margin: 6px 0; font-size: 15px; letter-spacing: 2px; }
.haydar-reviews-count {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: rgba(16,14,12,0.6);
  margin-bottom: 16px;
}
.haydar-rating-bars { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.haydar-rating-bar-row { display: flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-size: 12px; color: rgba(16,14,12,0.6); }
.haydar-bar-label { width: 24px; }
.haydar-bar-track { flex: 1; height: 4px; background: rgba(16,14,12,0.1); }
.haydar-bar-fill { height: 100%; background: #CBA968; }
.haydar-bar-count { width: 32px; text-align: right; }

.haydar-write-review-btn {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid #100E0C;
  color: #100E0C;
  padding: 14px 22px;
  cursor: pointer;
  white-space: nowrap;
}
.haydar-write-review-btn:hover { background: #100E0C; color: #F5EFDF; border-color: #CBA968; }

.haydar-review-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.haydar-review-card {
  border: 1px solid rgba(16,14,12,0.14);
  padding: 22px;
  background: #F5EFDF;
}
.haydar-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.haydar-review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(203,169,104,0.5);
  flex-shrink: 0;
}
.haydar-review-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.haydar-review-head-text .haydar-review-author {
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
}
.haydar-review-stars { color: #CBA968; font-size: 13px; letter-spacing: 2px; }
.haydar-review-text {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #100E0C;
  margin: 0 0 14px;
}
.haydar-review-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(16,14,12,0.5);
}
.haydar-review-author { color: #100E0C; font-weight: 600; }
.haydar-review-verified { color: #CBA968; }

.haydar-review-form-wrap {
  display: none;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(16,14,12,0.14);
  max-width: 560px;
}
.haydar-review-form-wrap.is-open { display: block; }
.haydar-review-form-wrap #commentform p { margin: 0 0 14px; }
.haydar-review-form-wrap input:not([type=submit]),
.haydar-review-form-wrap textarea {
  width: 100%;
  border: 1px solid rgba(16,14,12,0.3);
  background: #F5EFDF;
  padding: 10px 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
.haydar-review-form-wrap .haydar-submit-review,
.haydar-review-form-wrap input[type=submit],
#submit.haydar-submit-review {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  background: #3C2D1F !important;
  color: #F5EFDF !important;
  border: 1px solid #3C2D1F !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  cursor: pointer;
}
#submit.haydar-submit-review:hover { background: #F7F3EC !important; color: #17130F !important; border-color: #CBA968 !important; }

/* ---------- Related products grid ---------- */
.elementor-element-0527bf5 .xpro-woo-product-grid-item {
  background: #F5EFDF;
}
.elementor-element-0527bf5 .xpro-woo-product-img-section {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.elementor-element-0527bf5 img.xpro-woo-product-grid-img {
  aspect-ratio: 3/4;
  object-fit: cover;
}
/* JS detects WooCommerce's broken/missing placeholder.png (404 on this
   install) and adds this class - only then do we hide the img and show
   the gradient behind it. Real uploaded photos are left untouched. */
.elementor-element-0527bf5 .xpro-woo-product-img-section.haydar-no-photo {
  background: radial-gradient(130% 110% at 25% 10%, #F5EFDF 0%, #E7D9B4 50%, #CBA968 100%);
}
.elementor-element-0527bf5 .xpro-woo-product-img-section.haydar-no-photo img {
  opacity: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .xpro-woo-product-title { font-size: 30px; }
  .haydar-review-cards { grid-template-columns: 1fr; }
  .haydar-reviews-top { flex-direction: column; }

  /* Gallery: main image on top, thumbnail rail as a horizontal strip below it
     (desktop uses a left-hand vertical rail via row-reverse; mobile needs its
     own stacked layout instead). */
  .xpro-product-image-wrapper .woocommerce-product-gallery {
    flex-direction: column;
    gap: 10px;
  }

  /* Main photo: on the narrow mobile viewport, a fixed 3:4 crop with
     object-fit:cover often cuts off the subject (whatever isn't dead-center
     in the original photo). Switch to a taller box + object-fit:contain so
     the ENTIRE photo is always visible - the cream background fills any
     letterboxing, which reads as an intentional matte frame, not a bug. */
  .xpro-product-image-wrapper .woocommerce-product-gallery__image {
    aspect-ratio: 4 / 5;
  }
  .xpro-product-image-wrapper .woocommerce-product-gallery__image img {
    object-fit: contain;
    background: #F5EFDF;
  }
  .haydar-thumb-rail {
    flex-direction: row;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 4px; /* small buffer so the active border never clips */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    /* hide the native scrollbar - the fade edges below signal scrollability instead */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .haydar-thumb-rail::-webkit-scrollbar {
    display: none;
    height: 0;
  }
  .haydar-thumb-rail li {
    flex: 0 0 68px;
    width: 68px;
    scroll-snap-align: start;
  }

  /* soft fade on the right edge hints there's more to scroll, without a
     visible scrollbar competing with the rest of the page's minimalism */
  .haydar-product-image-wrapper,
  .xpro-product-image-wrapper {
    position: relative;
  }
  .xpro-product-image-wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 76px;
    background: linear-gradient(to right, rgba(245,239,223,0), #F5EFDF 85%);
    pointer-events: none;
  }

  /* full-bleed the gallery slightly on very small screens so the main photo
     reads bigger without fighting the page's side padding */
  .woocommerce-product-gallery__image {
    border-radius: 0;
  }
}

/* ---------- Gallery: subtle hover zoom (click-to-zoom lightbox is native WC/PhotoSwipe) ---------- */
.woocommerce-product-gallery__image {
  overflow: hidden;
}
.woocommerce-product-gallery__image img {
  transition: transform .5s ease;
  will-change: transform;
}
.woocommerce-product-gallery__image:hover img {
  transform: scale(1.045);
}

/* ---------- Info column: gentle fade-up on load ---------- */
@keyframes haydarFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.elementor-element-4c247be {
  animation: haydarFadeUp .5s ease both;
}

/* ---------- Buttons: soft transition ---------- */
.single_add_to_cart_button.button,
.haydar-buy-now-btn,
.haydar-write-review-btn {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* ---------- Mobile: larger touch targets, no horizontal overflow ---------- */
@media (max-width: 767px) {
  .xpro_swatches .swatch.swatch_label { min-width: 46px; height: 46px; }
  .xpro_swatches .swatch.swatch_color { width: 38px; height: 38px; }
  .variations_form table.variations,
  .xpro_swatches { max-width: 100%; }
  .elementor-element-efb6290 form.cart,
  .single_variation_wrap .woocommerce-variation-add-to-cart { max-width: 100%; }
  .haydar-buy-now-btn { max-width: 100%; }
  .woocommerce-product-gallery__image:hover img { transform: none; } /* no hover-zoom on touch */
}
/* ---------- Layout width fix: Astra's global .ast-container caps at 1240px,
   leaving huge blank gutters on wide screens. Widen it on product pages only
   (site-wide header/footer are outside .ast-container and unaffected). ---------- */
@media (min-width: 992px) {
  .single-product .ast-container {
    max-width: min(1880px, 96vw) !important;
  }
}
/* ---------- Kill the white sliver at the page edges ----------
   .ast-container is now min(1880px, 96vw), leaving ~2% viewport as gutter
   on each side; the reviews band bleeds to true 100vw. Where the two meet,
   the body's default white background showed through as a thin white seam
   down both edges. Painting the page base itself cream removes it for good,
   regardless of any future width tweaks to either section. */
body.single-product,
body.single-product #page,
body.single-product #content {
  background-color: #F5EFDF;
}
/* ---------- Size guide popup ---------- */
.haydar-size-guide-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16,14,12,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.haydar-size-guide-overlay.is-open {
  display: flex;
}
.haydar-size-guide-box {
  position: relative;
  background: #F5EFDF;
  border: 1px solid rgba(16,14,12,0.14);
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px 32px 32px;
  animation: haydarFadeUp .25s ease both;
}
.haydar-size-guide-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #100E0C;
  cursor: pointer;
  padding: 4px;
}
.haydar-size-guide-box h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 500;
  color: #100E0C;
  margin: 0 0 12px;
}
.haydar-size-guide-note {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(16,14,12,0.7);
  margin: 0 0 24px;
}
.haydar-size-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}
.haydar-size-guide-table th,
.haydar-size-guide-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(16,14,12,0.12);
}
.haydar-size-guide-table th {
  color: #CBA968;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 11px;
}
.haydar-size-guide-table td:first-child {
  color: #100E0C;
  font-weight: 600;
}
@media (max-width: 480px) {
  .haydar-size-guide-box { padding: 32px 20px 24px; }
  .haydar-size-guide-table { font-size: 12px; }
}
/* ---------- Gallery photo counter ("2 / 6"), overlaid on the main image ---------- */
.haydar-gallery-counter {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(16,14,12,0.72);
  color: #F5EFDF;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: .05em;
  padding: 5px 10px;
  pointer-events: none;
  z-index: 2;
  display: none; /* shown only on mobile - the desktop thumb rail already makes this obvious */
}
@media (max-width: 767px) {
  .haydar-gallery-counter {
    display: block;
  }
}
/* ---------- Safety net: never allow page-level horizontal scroll on the
   product page (a clicked thumbnail should never shift the whole layout) ---------- */
body.single-product {
  overflow-x: hidden;
  max-width: 100vw;
}