/* assets/css/makhmal-product.css — WooCommerce single-product page only (enqueued via inc/woocommerce.php on is_product()). */

/* ---- Breadcrumb ---- */
.woocommerce-breadcrumb {
  display: block;
  margin: 0 0 26px;
  padding-block: 10px 20px;
  border-bottom: 1px solid var(--mk-color-border);
  line-height: 2.1;
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-muted);
}

.woocommerce-breadcrumb a {
  color: var(--mk-color-text-soft);
}

.woocommerce-breadcrumb a:hover { color: var(--mk-color-primary-hover); }

.mk-wc-breadcrumb-current {
  color: var(--mk-color-text);
  font-weight: 700;
}

/* the wrapper this sits in has no top padding of its own — give the
   breadcrumb some room instead of touching the header directly */
.dmhouse-woocommerce-content {
  padding-top: 18px;
}

/* ---- Overall layout: gallery | summary, side by side on desktop ---- */
.woocommerce div.product.type-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-block: 24px 60px;
}

/* WooCommerce's own (float-era) layout stylesheet sets width:48% on both of
   these for its own 2-column trick — that's a real percentage, not just
   specificity noise, so it survives alongside my grid-column assignment and
   shrinks each column to 48% of ITS OWN already-halved grid track (roughly
   a quarter of the page). Forcing width:100% here is what actually fixes it. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: 100%;
  min-width: 0;
  float: none;
}

.woocommerce div.product div.images { grid-column: 1; }

/* sticky follows the user on desktop scroll — this works alongside
   align-items:start on the grid (set above the images/summary rule): with
   that, an item's own box is NOT stretched to the row's height, but its
   grid AREA still spans the full row (as tall as the gallery column), so
   there's real room for the sticky element to travel in before it runs out
   of its own containing block at the row's bottom edge. */
.woocommerce div.product div.summary {
  grid-column: 2;
  align-self: start;
  position: sticky;
  top: 110px;
}

@media (max-width: 900px) {
  .woocommerce div.product.type-product {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    grid-column: 1;
  }

  .woocommerce div.product div.summary {
    position: static;
  }
}

/* ---- Gallery: own sizing rules, deliberately NOT relying on WooCommerce's
   optional "default stylesheet" (Settings → Products → can be switched off
   site-wide) — if that's off, the raw gallery markup has no size constraint
   at all and renders at native image resolution, which is exactly what a
   huge unstyled photo bleeding over the header looks like. ---- */
.woocommerce div.product div.images {
  position: relative;
  max-width: 100%;
}

.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--mk-radius-lg);
}

.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 74px;
  height: 74px;
  margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mk-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--mk-transition);
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
  border-color: var(--mk-color-primary);
}

/* the zoom-in cursor / lightbox trigger WC adds via wc-product-gallery-zoom
   theme support only fires once PhotoSwipe's own CSS is present — this
   keeps the trigger visible/clickable even if that CSS is delayed/missing */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  position: absolute;
  z-index: 5;
  top: 14px;
  inset-inline-end: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--mk-shadow-sm);
}

/* ---- Title / price ---- */
.product_title {
  font-size: var(--mk-fs-2xl);
  font-weight: 700;
  color: var(--mk-color-text);
  margin-bottom: 10px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--mk-color-primary-hover);
  font-family: var(--mk-font-heading);
  font-weight: 700;
  font-size: var(--mk-fs-xl);
}

.woocommerce div.product p.price del { color: var(--mk-color-text-muted); opacity: 0.8; }
.woocommerce div.product p.price ins { text-decoration: none; }

/* ---- Badges row (ready-to-ship + expiry), single product ---- */
.mk-wc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 10px;
}

.mk-wc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--mk-radius-pill);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
}

.mk-wc-badge svg { width: 14px; height: 14px; }

.mk-wc-badge--ready {
  background: color-mix(in srgb, #2f9e6a 14%, #fff);
  color: #2f9e6a;
}

.mk-wc-badge--expiry {
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
}

/* ---- Same expiry badge, on the shop-loop card ---- */
.mk-wc-card-expiry {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  color: var(--mk-color-primary-hover);
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: var(--mk-shadow-sm);
}

.mk-wc-card-expiry svg { width: 12px; height: 12px; }

/* ---- Feature list ---- */
.mk-wc-features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.mk-wc-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-soft);
}

.mk-wc-features li svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: #2f9e6a;
}

/* ---- Stock quantity ---- */
.mk-wc-stock-qty {
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-soft);
  margin-block: 6px;
}

/* ---- Category ---- */
.mk-wc-category {
  display: block;
  margin: 10px 0 4px;
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-soft);
}

/* ---- Trust row: a grid of boxes, sits below the add-to-cart form ---- */
.mk-wc-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.mk-wc-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
  color: var(--mk-color-text-soft);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
}

.mk-wc-trust__item svg {
  width: 20px;
  height: 20px;
  color: var(--mk-color-primary);
}

@media (max-width: 560px) {
  .mk-wc-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---- Shipping info ---- */
.mk-wc-shipping {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
}

.mk-wc-shipping__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--mk-color-text);
  margin-bottom: 10px;
}

.mk-wc-shipping__head svg { width: 16px; height: 16px; color: var(--mk-color-primary); }

.mk-wc-shipping__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-wc-shipping__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--mk-fs-sm);
}

.mk-wc-shipping__list li span:first-child {
  color: var(--mk-color-text-muted);
}

.mk-wc-shipping__list li span:last-child {
  color: var(--mk-color-text);
  font-weight: 700;
  text-align: end;
}

/* ---- Return policy ---- */
.mk-wc-return {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 14px 0 24px;
  font-size: var(--mk-fs-xs);
  line-height: 1.9;
  color: var(--mk-color-text-muted);
}

.mk-wc-return svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--mk-color-accent-2); }

/* ---- Spec table (description tab) ---- */
/* display:table + table-layout:fixed for the same reason as the attributes
   table below — see the long note there; the parent theme resets all
   tables to display:block, which silently breaks column widths. */
.mk-wc-spec-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 22px;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
}

.mk-wc-spec-table tr:not(:last-child) th,
.mk-wc-spec-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--mk-color-border);
}

.mk-wc-spec-table th,
.mk-wc-spec-table td {
  padding: 12px 16px;
  font-size: var(--mk-fs-sm);
  text-align: start;
}

.mk-wc-spec-table th {
  width: 34%;
  background: var(--mk-color-bg-soft);
  color: var(--mk-color-text-muted);
  font-weight: 700;
}

.mk-wc-spec-table td {
  color: var(--mk-color-text);
}

/* ---- Tabs ----
   WooCommerce's own stylesheet draws its classic "paper folder" tab look on
   these same <li>/<a> elements using ::before/::after (rounded corner
   cutouts + its own background/border). Since that's a different plugin's
   CSS, not ours, neutralising it with !important is the pragmatic fix —
   fighting it with pure specificity would mean guessing WC's exact
   selectors, which changes between WC versions. */
.woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  margin: 0 0 20px !important;
  list-style: none !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--mk-color-border) !important;
}

.woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li a::before,
.woocommerce-tabs ul.tabs li a::after {
  display: none !important;
  content: none !important;
}

.woocommerce-tabs ul.tabs li a {
  display: inline-flex !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  border-radius: var(--mk-radius-pill) var(--mk-radius-pill) 0 0 !important;
  background: none !important;
  color: var(--mk-color-text-soft) !important;
  font-size: var(--mk-fs-sm) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.woocommerce-tabs ul.tabs li.active a {
  background: var(--mk-color-bg-muted) !important;
  color: var(--mk-color-primary-hover) !important;
}

/* the active tab's pill sits flush against the underline above; give the
   whole panel breathing room so nothing collides with it */
.woocommerce-tabs .woocommerce-Tabs-panel {
  padding-top: 18px;
}

.woocommerce-tabs table.woocommerce-product-attributes {
  /* the parent theme's style.css resets `pre, table { display: block }` so
     wide tables scroll inside themselves. A display:block table is not a
     table box: width:100% then sizes only the OUTER box (looks full width)
     while the rows inside form an anonymous table that shrink-wraps to
     content (measured: 600px box, 239px rows) — and table-layout:fixed is
     ignored entirely. Restoring display:table is what actually makes the
     columns fill; our width:100%+fixed layout means it can't overflow, so
     the reset's scroll behaviour isn't needed here. */
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-top: 18px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.woocommerce-tabs table.woocommerce-product-attributes tr:not(:last-child) th,
.woocommerce-tabs table.woocommerce-product-attributes tr:not(:last-child) td {
  border-bottom: 1px solid var(--mk-color-border);
}

/* WooCommerce's own stylesheet sets a background directly on th/td (via
   .woocommerce-product-attributes-item__label / __value) — a background on
   the <tr> alone paints BEHIND that and never shows through, which is why
   the zebra stripe was only covering half the row (whichever cell WC
   hadn't opaqued). Target both cells directly instead of the row. */
.woocommerce-tabs table.woocommerce-product-attributes tr:nth-child(even) th,
.woocommerce-tabs table.woocommerce-product-attributes tr:nth-child(even) td {
  background: var(--mk-color-bg-soft);
}

.woocommerce-tabs table.woocommerce-product-attributes th,
.woocommerce-tabs table.woocommerce-product-attributes td {
  padding: 13px 18px;
  border: none;
  font-size: var(--mk-fs-sm);
}

.woocommerce-tabs table.woocommerce-product-attributes th {
  width: 34%;
  color: var(--mk-color-text);
  font-weight: 700;
}

.woocommerce-tabs table.woocommerce-product-attributes td {
  color: var(--mk-color-text-soft);
}

.woocommerce-tabs table.woocommerce-product-attributes td p {
  margin: 0;
}

/* ---- Reviews: simple single card look, no photo upload ---- */
#reviews .comment_container {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

#reviews .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

#reviews .comment-text { flex: 1; min-width: 0; }

#reviews .woocommerce-review__author {
  font-weight: 700;
  color: var(--mk-color-text);
}

#reviews .woocommerce-review__dash { color: var(--mk-color-text-muted); }

.mk-wc-review-pet {
  display: block;
  margin-top: 2px;
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-primary-hover);
}

.comment-form-pet-name label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text-soft);
}

.comment-form-pet-name input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-bg-soft);
}

/* ---- Related products heading ---- */
.related.products > h2 {
  font-size: var(--mk-fs-xl);
  font-weight: 700;
  color: var(--mk-color-text);
  margin-bottom: 20px;
}

/* ---- Quantity stepper (+/- buttons injected by makhmal-product.js) ---- */
.woocommerce div.product form.cart {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
}

/* narrower than the add-to-cart button (which takes the rest of the row via
   its own flex:1) — flex-grow:0 keeps it from stretching wider than 170px,
   flex-shrink:1 still lets it shrink on narrow rows */
.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  flex: 0 1 170px;
  align-items: stretch;
  justify-content: space-between;
  margin: 0 !important;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft);
  overflow: hidden;
}

.woocommerce div.product form.cart .quantity .qty {
  flex: 1;
  -moz-appearance: textfield;
  appearance: textfield;
  width: 48px;
  padding: 13px 4px;
  border: none;
  background: transparent;
  color: var(--mk-color-text);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  text-align: center;
}

.woocommerce div.product form.cart .quantity .qty:focus {
  outline: none;
}

.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mk-wc-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: none;
  background: transparent;
  color: var(--mk-color-primary-hover);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: background var(--mk-transition);
}

.mk-wc-qty-btn:hover {
  background: var(--mk-color-bg-muted);
}

.mk-wc-qty-btn:disabled {
  color: var(--mk-color-text-muted);
  cursor: not-allowed;
}

/* ---- Gallery click affordance ---- */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  cursor: zoom-in;
}

/* ---- Add-to-cart button: shares the row 50/50 with the quantity box ---- */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit {
  flex: 1;
  padding: 14px 30px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-weight: 700;
  border: none;
  box-shadow: var(--mk-shadow-md);
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}

.woocommerce div.product form.cart .button:hover {
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(-2px);
}