/* ============================================================================
   LuxePalace™ — WooCommerce bridge layer
   ----------------------------------------------------------------------------
   styles.css is the approved design system and is kept byte-identical to the
   static prototype. This file is the ONLY place where WooCommerce-specific
   markup gets reshaped to fit it. Keeping the two apart means the design can be
   re-synced from the prototype without losing the store plumbing.

   Woo's own stylesheets are dequeued (see functions.php §12c), so anything Woo
   renders that the design didn't already cover is styled here.
   ========================================================================== */

/* --- Woo notices ("… added to your cart", errors, info) -------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 20px;
  border-radius: var(--lp-radius-sm);
  background: var(--lp-charcoal-2);
  border: 1px solid var(--lp-line);
  border-left: 3px solid var(--lp-gold);
  color: #d8d8d8;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.woocommerce-error { border-left-color: #e06464; }
.woocommerce-info  { border-left-color: var(--lp-gold-soft); }
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a { color: var(--lp-gold); text-decoration: underline; }
/* Woo slips a "View cart" / "Continue shopping" button into notices — render it
   as a quiet outline button rather than the stock blue one. */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  margin-left: auto;
  font-family: var(--lp-font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 2px;
  border: 1px solid var(--lp-line); color: var(--lp-gold);
  transition: all .25s var(--lp-ease);
}
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover { background: var(--lp-gold); color: var(--lp-black); }

/* --- Screen-reader text (Woo emits a lot of it) ---------------------------- */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}

/* --- Price: Woo wraps every amount in its own spans ------------------------
   lp_price_html() emits .lp-price > .lp-price__now/.__was/.__off, but the
   amount inside each is Woo's <span class="woocommerce-Price-amount"><bdi>…</bdi></span>.
   Make those spans transparent so the design's colours/sizes win.            */
.lp-price .woocommerce-Price-amount,
.lp-price bdi { color: inherit; font: inherit; text-decoration: inherit; }
.lp-price__was .woocommerce-Price-amount { text-decoration: line-through; }
.woocommerce-Price-currencySymbol { font: inherit; }

/* --- Single product -------------------------------------------------------- */
/* The design's product column is the second grid cell; give it a name so the
   markup reads clearly (styles.css targets `.lp-product > div`). */
.lp-product__summary { min-width: 0; }
/* .lp-product__desc carries the 28px bottom margin. A rich (wpautop'd)
   description would otherwise add its own trailing <p> margin on top of it. */
.lp-product__desc > p:last-child { margin-bottom: 0; }
/* min-width:0 lets the real WooCommerce photo (a flex item in .lp-product__stage)
   shrink to the column on phones; without it the image held its intrinsic pixel
   width and pushed the whole product page wider than the screen — the "zoomed-in,
   scroll-sideways, nothing lines up" symptom. */
.lp-product__media img { width: auto; max-width: 100%; min-width: 0; height: auto; max-height: 540px; margin: 0 auto; object-fit: contain; }

/* --- Product image gallery: main stage + thumbnail strip -----------------
   The featured photo is the big stage image (inherits the rule above); the
   Product-gallery images become clickable thumbnails. theme.js swaps the stage
   src on click / arrow / swipe. Single-image products skip all of this. */
.lp-product__gallery { display: flex; flex-direction: column; gap: 16px; }
/* Bounded photo box — the main image occupies the SAME square footprint on every
   product and is letterboxed inside it (object-fit:contain), exactly like the
   product cards (.lp-card__media). This is what keeps the photo a consistent size
   across products AND makes horizontal overflow impossible: a width:100%/height:100%
   image can't exceed its box on any browser. The old width:auto + max-height:540px
   sizing let a WIDE (landscape) photo compute a width past the column on iOS Safari
   — Safari sized it from max-height × aspect-ratio and failed to re-clamp to
   max-width:100%, so the page overflowed sideways and the whole thing zoomed out
   (tiny header, over-wide media "card", mis-sized "More from this collection" cards
   below). Square/portrait photos stayed in-bounds — hence "some products, not others". */
.lp-product__stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0; aspect-ratio: 1 / 1;
}
.lp-product__stage .lp-product__main {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  min-width: 0; margin: 0; object-fit: contain;
}
.lp-product__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 2; cursor: pointer; color: var(--lp-white);
  background: rgba(8,8,8,.55); border: 1px solid var(--lp-line-soft); border-radius: 50%;
  transition: background .2s, border-color .2s, color .2s;
}
.lp-product__nav:hover { background: rgba(8,8,8,.85); border-color: var(--lp-gold); color: var(--lp-gold); }
.lp-product__nav svg { width: 20px; height: 20px; }
.lp-product__nav--prev { left: 0; }
.lp-product__nav--next { right: 0; }
.lp-product__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-product__thumb {
  flex: 0 0 auto; width: 72px; height: 72px; padding: 0; cursor: pointer; overflow: hidden;
  background: #0e0e0e; border: 1px solid var(--lp-line-soft); border-radius: 12px;
  opacity: .7; transition: border-color .2s, opacity .2s;
}
.lp-product__thumb:hover { opacity: 1; }
.lp-product__thumb.is-active { border-color: var(--lp-gold); opacity: 1; }
/* Small thumbs must ignore the big-image sizing/drop-shadow rule above. */
.lp-product__thumb img { width: 100%; height: 100%; max-width: 100%; max-height: none; margin: 0; object-fit: cover; filter: none; display: block; }
@media (max-width: 620px) {
  /* One swipeable row on phones rather than several stacked thumbnail rows. */
  .lp-product__thumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .lp-product__thumb { width: 62px; height: 62px; }
}

/* Woo's add-to-cart form is our .lp-buyrow — kill the browser's default form margin. */
form.cart.lp-buyrow { margin: 0 0 14px; }
/* Out-of-stock / backorder notes inside the cart rows. */
.backorder_notification { color: var(--lp-muted); font-size: 12.5px; margin: 6px 0 0; }

/* --- Shop toolbar: Woo's ordering <form> dressed as the design's .lp-sort --- */
.lp-toolbar .woocommerce-ordering { display: flex; align-items: center; gap: 10px; margin: 0; }
.lp-toolbar .woocommerce-ordering::before {
  content: "Sort";
  font-family: var(--lp-font-ui); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lp-muted);
}
.lp-toolbar .woocommerce-ordering select.orderby {
  font-family: var(--lp-font-ui); font-size: 13px;
  background: var(--lp-charcoal-2); color: var(--lp-white);
  border: 1px solid var(--lp-line); border-radius: 2px;
  padding: 11px 16px; cursor: pointer;
}
.lp-toolbar .woocommerce-ordering select.orderby:focus { outline: none; border-color: var(--lp-gold); }
/* Woo hides its own result count; ours (.lp-count) is rendered in functions.php. */
.woocommerce-result-count { display: none; }

/* --- Cart ------------------------------------------------------------------
   The <form> IS the .lp-cart grid (see woocommerce/cart/cart.php), so it needs
   the grid's own display rules — a bare <form> would stack.                   */
form.woocommerce-cart-form.lp-cart { margin: 0; }
.lp-cart__items { min-width: 0; }
.lp-cart__actions { padding: 20px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* Hidden by theme.js once JS is available (the stepper auto-submits instead);
   it stays visible without JS so the cart still works. */
.lp-cart__update { flex: 0 0 auto; }
.lp-cart__actions .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lp-cart__actions .coupon .lp-select { min-width: 170px; }
/* Woo's remove link is an <a>; the design styled a <button>. Same look. */
a.lp-remove { display: inline-block; }

/* --- Out of stock ----------------------------------------------------------
   Driven entirely by WooCommerce's live stock status (is_in_stock()) in the
   templates, so these states appear and clear THEMSELVES as products sell out
   and get restocked in wp-admin — no theme edit is ever needed.

   Covered:
     • grid card  — dimmed photo + corner "Out of stock" badge, no "+" quick-add
     • product pg — no Add-to-Cart and no pre-filled WhatsApp order (enquiry only)
     • cart       — per-item flag + WhatsApp checkout disabled until it's removed
   (Adding an out-of-stock product to the cart is refused by WooCommerce core.) */

/* Grid card */
.lp-card.is-oos .lp-card__media img { opacity: .4; filter: grayscale(.35); }
.lp-badge--oos {                       /* sits top-RIGHT, clear of the tier badge */
  left: auto; right: 14px;
  background: rgba(8, 8, 8, .82); color: #e8e8e8;
  border: 1px solid var(--lp-line-soft);
}
.lp-card__soldout {                    /* replaces the "+" in the card foot */
  font-family: var(--lp-font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted);
}

/* Cart row that has gone out of stock while sitting in the basket */
.lp-cartitem.is-oos { opacity: .72; }
.lp-oos-flag {
  display: inline-block; margin-top: 8px;
  font-family: var(--lp-font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #e0a4a4;
}

/* Disabled button — the WhatsApp checkout when the basket holds an OOS item */
.lp-btn.is-disabled,
.lp-btn:disabled {
  background: var(--lp-charcoal-2); color: var(--lp-muted);
  border-color: var(--lp-line); cursor: not-allowed;
  pointer-events: none; box-shadow: none; transform: none;
}
.lp-btn.is-disabled:hover,
.lp-btn:disabled:hover {
  background: var(--lp-charcoal-2); color: var(--lp-muted);
  transform: none; box-shadow: none;
}
.lp-oos-hint {
  margin: 12px 0 0; text-align: center;
  color: var(--lp-muted); font-size: 12.5px; line-height: 1.5;
}

/* --- Pagination ------------------------------------------------------------ */
.woocommerce-pagination { margin-top: 46px; text-align: center; }
.woocommerce-pagination ul.page-numbers {
  display: inline-flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center;
}
.woocommerce-pagination .page-numbers li { list-style: none; }
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  font-family: var(--lp-font-ui); font-size: 13px; letter-spacing: .06em;
  border: 1px solid var(--lp-line-soft); border-radius: 2px;
  color: var(--lp-muted); transition: all .25s var(--lp-ease);
}
.woocommerce-pagination a.page-numbers:hover { border-color: var(--lp-gold); color: var(--lp-gold); }
.woocommerce-pagination span.page-numbers.current {
  background: var(--lp-gold); border-color: var(--lp-gold); color: var(--lp-black); font-weight: 600;
}

/* --- Bits of Woo the design has no place for ------------------------------- */
/* The grid's "+" already gives instant feedback (plus a toast), so Woo's
   trailing "View cart" link would only clutter the card. */
.lp-card__foot .added_to_cart { display: none; }
/* No star ratings anywhere in the approved design. */
.woocommerce-product-rating,
.star-rating,
.woocommerce-review-link { display: none; }
/* Belt-and-braces: the client's decision is enforced in PHP (functions.php),
   but if a future template ever reintroduces it, keep it hidden. */
.woocommerce-product-details__short-description { display: none; }

/* --- Blog / prose pagination (index.php) ----------------------------------- */
.navigation.pagination .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  font-family: var(--lp-font-ui); font-size: 13px;
  border: 1px solid var(--lp-line-soft); border-radius: 2px; color: var(--lp-muted);
}
.navigation.pagination .page-numbers.current { background: var(--lp-gold); color: var(--lp-black); border-color: var(--lp-gold); }

/* --- Responsive fixes for the Woo-specific bits ---------------------------- */
@media (max-width: 860px) {
  /* styles.css already collapses .lp-cart to one column; the form must follow. */
  form.woocommerce-cart-form.lp-cart { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .lp-toolbar .woocommerce-ordering { width: 100%; }
  .lp-toolbar .woocommerce-ordering select.orderby { flex: 1; }
  .lp-cart__actions { flex-direction: column; align-items: stretch; }
  .lp-cart__actions .coupon { flex-direction: column; align-items: stretch; }
}