/* Kazmi Product - editorial single-product layout. Scoped to .kz-p / .kz-bar / .kz-size. */

.woocommerce div.product .kz-p__head { margin: 0 0 26px; }

.kz-p__eyebrow {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: #8A7862; margin-bottom: 18px;
}
.woocommerce div.product h1.kz-p__title,
.kz-p__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300; font-size: clamp(38px, 5vw, 68px);
  line-height: 1.04; letter-spacing: -.02em; color: #241A13; margin: 0 0 18px;
}
.kz-p__priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; }
.kz-p__price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 3vw, 34px); color: #8B6A3C; letter-spacing: .01em;
}
.kz-p__for { font-family: 'Jost', sans-serif; font-size: 13px; color: #8A7862; }

/* --- size cards --- */
.kz-p__sizes { margin: 30px 0 34px; }
.kz-p__label {
  font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: #8A7862; margin-bottom: 14px;
}
.kz-p__sizegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.kz-size {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 16px 14px; cursor: pointer; text-align: left;
  background: #FFFCF6; border: 1px solid #D6C8B2; border-radius: 3px;
  font-family: 'Jost', sans-serif; color: #241A13;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.16,.8,.24,1);
}
.kz-size:hover { transform: translateY(-2px); border-color: #8B6A3C; }
.kz-size:focus-visible { outline: 2px solid #8B6A3C; outline-offset: 2px; }
.kz-size__ft { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; line-height: 1.1; }
.kz-size__meta { font-size: 11px; letter-spacing: .06em; color: #8A7862; }

.kz-size.is-selected { background: #241A13; border-color: #241A13; color: #F6F1E8; }
.kz-size.is-selected .kz-size__meta { color: #CBB99C; }
/* selection is not colour-only: the chosen card is also marked */
.kz-size.is-selected .kz-size__ft::after { content: ' \2713'; font-size: 14px; }

/* --- description + spec --- */
.kz-p__desc { font-family: 'Jost', sans-serif; font-size: 15px; line-height: 1.9; color: #5B4A3A; margin-bottom: 30px; }
.kz-p__desc p { margin: 0 0 16px; }

.kz-p__spec { margin: 0; border-top: 1px solid #E2D7C5; }
.kz-p__specrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid #E2D7C5;
}
.kz-p__specrow dt {
  font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: #8A7862; margin: 0; flex: 0 0 auto;
}
.kz-p__specrow dd {
  font-family: 'Jost', sans-serif; font-size: 14px; color: #241A13;
  margin: 0; text-align: right; min-width: 0;
}

/* --- hide Woo's default variation dropdown, keep the form working --- */
.woocommerce div.product form.variations_form table.variations,
.woocommerce div.product form.variations_form .reset_variations { display: none !important; }
.woocommerce div.product form.variations_form .single_variation_wrap .woocommerce-variation-price { display: none !important; }
.woocommerce div.product form.variations_form { margin: 0; }

/* --- sticky action bar --- */
.kz-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(16px, 3vw, 40px);
  background: rgba(246,241,232,.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid #E2D7C5;
}
.kz-bar__id { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.kz-bar__name {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; color: #241A13;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kz-bar__price { font-family: 'Jost', sans-serif; font-size: 13px; color: #8B6A3C; white-space: nowrap; }
.kz-bar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: flex-end; }

.kz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 13px 26px; border-radius: 100px; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, transform .4s ease;
}
.kz-btn:hover { transform: translateY(-2px); }
.kz-btn:focus-visible { outline: 2px solid #8B6A3C; outline-offset: 3px; }
.kz-btn--solid { background: #241A13; color: #F6F1E8; border: 1px solid #241A13; }
.kz-btn--solid:hover { background: #8B6A3C; border-color: #8B6A3C; color: #FFF8EC; }
.kz-btn--ghost { background: transparent; color: #241A13; border: 1px solid #C8B79A; }
.kz-btn--ghost:hover { border-color: #241A13; color: #241A13; }

/* keep the bar clear of the page bottom and the floating controls */
body.single-product .kazmi-float { bottom: 104px; }

/* --- responsive --- */
@media (max-width: 1023px) {
  .kz-p__sizegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 767px) {
  .kz-p__title { font-size: clamp(30px, 8vw, 40px); }
  .kz-p__price { font-size: 26px; }
  .kz-p__specrow { padding: 13px 0; gap: 14px; }
  .kz-p__specrow dd { font-size: 13px; }

  .kz-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
  .kz-bar__id { justify-content: space-between; }
  .kz-bar__name { font-size: 17px; }
  .kz-bar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kz-btn { min-height: 44px; padding: 12px 14px; font-size: 9px; letter-spacing: .16em; }
  .kz-btn--solid { grid-column: 1 / -1; }

  body.single-product .kazmi-float { bottom: 176px; }
}
@media (max-width: 360px) {
  .kz-p__sizegrid { gap: 8px; }
  .kz-size { padding: 13px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .kz-size, .kz-btn { transition-duration: 1ms; }
}

/* Docked state: the bar leaves the viewport and sits in normal flow at its
   DOM position, which is immediately before Related Products. */


/* --- CTA dock -------------------------------------------------------------
   The slot permanently reserves the bar's height in normal flow, so the
   document height is IDENTICAL in both states. The bar is taken out of flow in
   both states too (fixed, then absolute inside the slot). Nothing the state
   change does can move the element being measured - that is what removes the
   oscillation. The slot sits immediately before Related Products, so the stop
   point comes from the real DOM, never a hardcoded scroll offset.            */
.kz-bar__slot { position: relative; width: 100%; clear: both; }
.kz-bar.is-docked { position: absolute; top: 0; left: 0; right: 0; bottom: auto; }

/* per-size weight: a quiet third line, must not make the card taller than
   the existing two-line cards allow on mobile */
.kz-size__wt { font-size: 10px; letter-spacing: .08em; color: #A2957F; margin-top: -2px; }
.kz-size.is-selected .kz-size__wt { color: #B9A88C; }
@media (max-width: 767px) { .kz-size__wt { font-size: 9px; } }

/* --- product discovery: Related + More to explore -------------------------
   Grid columns and card styling come from the catalogue stylesheet
   (.kzf-grid / .kzf-card): 4 up on desktop, 2 up on mobile, already approved. */
.kz-disc { max-width: 1460px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.kz-disc__head { margin-top: 92px; padding-top: 44px; border-top: 1px solid #E2D7C5; margin-bottom: 34px; }
.kz-disc__head--second { margin-top: 118px; }
.kz-disc__eyebrow { display: block; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #8A7862; margin-bottom: 14px; }
.kz-disc__title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.02em; color: #241A13; margin: 0; }
.kz-disc__note { font-family: 'Jost', sans-serif; font-size: 13px; color: #8A7862; margin: 12px 0 0; }
.kz-disc__grid { row-gap: 48px; }
@media (max-width: 1023px) {
  .kz-disc__head { margin-top: 64px; padding-top: 32px; margin-bottom: 24px; }
  .kz-disc__head--second { margin-top: 76px; }
  .kz-disc__grid { row-gap: 26px; }
}
@media (max-width: 767px) {
  .kz-disc__head { margin-top: 48px; padding-top: 26px; margin-bottom: 20px; }
  .kz-disc__head--second { margin-top: 58px; }
  .kz-disc__note { font-size: 12px; }
  .kz-disc__grid { row-gap: 18px; }
}


/* ==== CTA ACTION AREA =====================================================
   Buy now keeps the full first row as the primary action; Add to cart and
   WhatsApp share the second row at equal width. Add to cart is the real
   WooCommerce button, so the reset below only neutralises theme chrome. */
.kz-bar__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  flex: 0 1 660px;
  align-items: stretch;
}
.kz-bar__actions .kz-btn--solid { grid-column: 1 / -1; }

/* the WooCommerce button, wearing the Kazmi secondary style */
.kz-bar .kz-bar__actions button.kz-cartbtn {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  background: transparent;
  color: #241A13;
  border: 1px solid #C8B79A;
  box-shadow: none;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.kz-bar .kz-bar__actions button.kz-cartbtn:hover {
  background: #241A13;
  color: #F6F1E8;
  border-color: #241A13;
  transform: translateY(-1px);
}
.kz-bar .kz-bar__actions button.kz-cartbtn:focus-visible { outline: 2px solid #8B6A3C; outline-offset: 3px; }
.kz-bar .kz-bar__actions button.kz-cartbtn.disabled,
.kz-bar .kz-bar__actions button.kz-cartbtn:disabled { opacity: .45; pointer-events: none; }

/* substantial secondary buttons from tablet up, per the reference */
@media (min-width: 768px) {
  .kz-bar__actions .kz-btn,
  .kz-bar .kz-bar__actions button.kz-cartbtn {
    min-height: 46px; height: 46px; padding: 0 26px;
  }
  .kz-bar .kz-bar__actions button.kz-cartbtn { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .20em; text-transform: uppercase; }
}

/* mobile keeps the already-approved compact proportions */
@media (max-width: 767px) {
  .kz-bar__actions { gap: 8px; flex: 1 1 auto; }
  .kz-bar .kz-bar__actions button.kz-cartbtn { min-height: 44px; padding: 12px 14px; font-size: 9px; letter-spacing: .16em; }
}

/* ==== DESKTOP CTA BAR FOOTPRINT ==========================================
   Tightens the bar around the 46px buttons. Scoped to >=768px so the
   approved mobile CTA is untouched. */
@media (min-width: 768px) {
  .kz-bar { padding-top: 10px; padding-bottom: 10px; }
  .kz-bar__actions { gap: 12px; }
}