/* ==========================================================================
   Luxe Product Designer — Front-end styles
   Color/size custom properties (--lpd-*) are injected inline by PHP
   (see LPD_Frontend::build_inline_css) from the admin settings.
   ========================================================================== */

.lpd-card, .lpd-card *{ box-sizing:border-box; }
.lpd-card{ font-family:var(--lpd-body-font, inherit); }
.lpd-card h3{ font-size:var(--lpd-card-title-size); margin:0 0 6px; line-height:1.3; font-family:var(--lpd-heading-font, inherit); }
.lpd-card h3 a{ color:var(--lpd-ink); text-decoration:none; }
.lpd-cat{ font-size:var(--lpd-card-cat-size); letter-spacing:1.5px; text-transform:uppercase; color:var(--lpd-gold-deep); font-weight:700; }
/* WooCommerce's own accessible rating markup, styled as classic gold stars.
   Uses two layered "★★★★★" strings — a muted background row and a gold
   foreground row clipped to the rating percentage — so it never depends
   on an icon font being present (works on every theme). */
.star-rating{
  position:relative; height:1.1em; line-height:1.1; width:5.4em; font-size:14px;
  letter-spacing:2px; overflow:hidden; margin-bottom:8px; display:block; font-family:Georgia, serif;
}
.lpd-info .star-rating, .lpd-card-2 .star-rating{ margin-bottom:8px; }
.star-rating::before{
  content:"\2605\2605\2605\2605\2605"; position:absolute; top:0; left:0; color:var(--lpd-border);
}
.star-rating span{ position:absolute; top:0; left:0; overflow:hidden; height:100%; }
.star-rating span::before{ content:"\2605\2605\2605\2605\2605"; position:absolute; top:0; left:0; color:var(--lpd-gold); }
.lpd-price{ font-weight:700; font-size:var(--lpd-card-price-size); color:var(--lpd-price-color, var(--lpd-ink)); }
.lpd-price del{ color:#a49b86; font-weight:400; font-size:0.85em; }
.lpd-price ins{ text-decoration:none; }

/* Placeholder-safe image frame. Height is responsive: desktop uses the
   "Card image height" slider, tablet/mobile use their own dedicated
   sliders (Sizing & Spacing settings) — see the responsive overrides near
   the end of this file, which intentionally come after every card style's
   base rules so they win the cascade at small screen widths. */
/* Scoped to .lpd-card so this never collides with the single-product-page
   gallery thumbnail-rail buttons below, which reuse the same "lpd-thumb"
   class name in a completely different context. */
.lpd-card .lpd-thumb{ display:block; overflow:hidden; height:var(--lpd-img-h); background:linear-gradient(135deg,#efe8d8,#e4c98f); position:relative; }
.lpd-card .lpd-thumb img.lpd-card-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1); }

/* ---- STYLE 1: Minimal Frame ---- */
.lpd-card-1{
  position:relative; background:#fff; border-radius:var(--lpd-radius); overflow:hidden;
  border:1px solid var(--lpd-border); box-shadow:0 10px 30px -14px rgba(28,26,23,.18);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.lpd-card-1:hover{ transform:translateY(-8px); box-shadow:0 22px 40px -16px rgba(28,26,23,.28); }
.lpd-card-1:hover .lpd-card-img{ transform:scale(1.07); }
.lpd-card-1 .lpd-ribbon{
  position:absolute; top:14px; left:0; background:#a5432f; color:#fff; font-size:11px; font-weight:700;
  letter-spacing:1px; padding:5px 14px 5px 16px; border-radius:0 4px 4px 0; z-index:3;
}
.lpd-card-1 .lpd-body{ padding:var(--lpd-pad); }
/* Always visible + clickable (not hover-only) so Add to Cart works reliably
   on touch devices and doesn't get missed on desktop either. A subtle lift
   on hover is still applied via .lpd-card-1:hover above. */
.lpd-card-1 .lpd-cta-slide{ margin-top:14px; opacity:.92; transition:opacity .25s ease; }
.lpd-card-1:hover .lpd-cta-slide{ opacity:1; }

/* ---- STYLE 2: Overlay Reveal ---- */
.lpd-card-2{ position:relative; border-radius:var(--lpd-radius); overflow:hidden; background:var(--lpd-ink); box-shadow:0 10px 30px -14px rgba(28,26,23,.18); transition:box-shadow .4s ease, transform .4s ease; }
.lpd-card-2:hover{ box-shadow:0 22px 40px -16px rgba(28,26,23,.3); transform:translateY(-6px); }
.lpd-card-2 .lpd-thumb{ height:calc(var(--lpd-img-h) + 40px); }
.lpd-card-2:hover .lpd-card-img{ transform:scale(1.06); }
.lpd-card-2 .lpd-badge-new{ position:absolute; top:14px; left:14px; background:#fff; color:var(--lpd-ink); font-size:10.5px; font-weight:800; letter-spacing:1px; padding:5px 10px; border-radius:20px; z-index:3; }
.lpd-card-2 .lpd-info{ position:absolute; left:0; right:0; bottom:0; padding:18px 20px 20px; z-index:3; background:linear-gradient(to top, rgba(20,18,15,.94), rgba(20,18,15,.55) 65%, transparent); color:#f8f4ec; }
.lpd-card-2 h3 a{ color:#f8f4ec; }
.lpd-card-2 .star-rating::before{ color:rgba(255,255,255,.35); }
.lpd-card-2 .lpd-price{ color:#f8f4ec; }
.lpd-card-2 .lpd-swatches{ display:flex; gap:7px; margin:10px 0; }
.lpd-swatch{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.7); display:inline-block; }
.lpd-swatch.selected{ border-color:var(--lpd-gold-light); }
.lpd-reveal-actions{ display:flex; gap:8px; margin-top:10px; align-items:center; opacity:.94; transition:opacity .25s ease; }
.lpd-card-2:hover .lpd-reveal-actions{ opacity:1; }
.lpd-icon-btn{ width:38px; height:38px; flex-shrink:0; border-radius:8px; border:1.5px solid rgba(255,255,255,.5); background:transparent; color:#f8f4ec; display:flex; align-items:center; justify-content:center; }
.lpd-icon-btn svg{ width:16px;height:16px; stroke:currentColor; fill:none; }

/* ---- STYLE 3: Split Card ---- */
.lpd-card-3{ display:flex; background:#fff; border-radius:var(--lpd-radius); overflow:hidden; border:1px solid var(--lpd-border); box-shadow:0 10px 30px -14px rgba(28,26,23,.18); transition:box-shadow .35s ease, transform .35s ease; }
.lpd-card-3:hover{ box-shadow:0 22px 40px -16px rgba(28,26,23,.28); transform:translateY(-5px); }
.lpd-card-3 .lpd-thumb{ width:42%; height:auto; flex-shrink:0; }
.lpd-card-3 .lpd-info-side{ flex:1; padding:22px 24px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.lpd-stock-label{ font-size:11.5px; color:#a5432f; font-weight:700; margin-bottom:4px; }
.lpd-stock-bar{ height:5px; background:var(--lpd-border); border-radius:6px; overflow:hidden; margin-bottom:6px; }
.lpd-stock-bar span{ display:block; height:100%; background:linear-gradient(90deg,#a5432f,#c9633f); border-radius:6px; }

/* Native WooCommerce add-to-cart buttons, restyled to match the mockup */
.lpd-cta-slide a.button,
.lpd-reveal-actions a.button,
.lpd-info-side a.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:11px; border-radius:9px; border:1.5px solid var(--lpd-ink); background:transparent;
  color:var(--lpd-ink); font-weight:700; font-size:13px; letter-spacing:.4px; text-decoration:none;
  transition:all .25s ease;
}
.lpd-cta-slide a.button:hover, .lpd-info-side a.button:hover{ background:var(--lpd-ink); color:#f8f4ec; }
.lpd-reveal-actions a.button{ background:var(--lpd-gold); border-color:var(--lpd-gold); color:var(--lpd-ink); flex:1; width:auto; }
.lpd-reveal-actions a.button:hover{ background:var(--lpd-gold-deep); }
.lpd-info-side a.button{ width:auto; padding:10px 22px; display:inline-flex; margin-top:8px; }
a.added_to_cart{ display:block; margin-top:8px; font-size:12px; text-align:center; color:var(--lpd-gold-deep); }

/* ==========================================================================
   Grid — number of columns + spacing (Sizing & Spacing settings), applied
   to the main shop/archive grid regardless of what the active theme's own
   product-grid CSS would otherwise do. Desktop uses the admin's chosen
   column count; tablet/mobile always fall back to fewer columns so the
   store stays usable no matter how high the desktop count is set.
   ========================================================================== */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(var(--lpd-columns), 1fr) !important;
  gap:var(--lpd-gap) !important;
}
.woocommerce ul.products li.product{
  width:100% !important; margin:0 !important; float:none !important; clear:none !important;
}
@media (max-width: 980px){
  .woocommerce ul.products{ grid-template-columns:repeat(2, 1fr) !important; }
}
@media (max-width: 560px){
  .woocommerce ul.products{ grid-template-columns:1fr !important; }
}

/* Wishlist heart */
.lpd-wish{ position:absolute; top:12px; right:12px; z-index:3; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.85); backdrop-filter:blur(4px); border:1px solid var(--lpd-border); display:flex; align-items:center; justify-content:center; transition:all .25s ease; cursor:pointer; }
.lpd-wish:hover{ background:var(--lpd-gold); border-color:var(--lpd-gold); }
.lpd-wish svg{ width:16px;height:16px; stroke:var(--lpd-ink); fill:none; transition:all .25s ease; }
.lpd-wish.active svg{ fill:#a5432f; stroke:#a5432f; }

/* ==========================================================================
   Scroll-reveal entrance animation (Advanced → "Enable entrance
   animations"). JS adds .lpd-in-view once an .lpd-reveal element scrolls
   into the viewport. If JS never runs (disabled, or reduced-motion), the
   fallback rule below still shows everything at full opacity — content is
   NEVER hidden permanently by CSS alone.
   ========================================================================== */
.lpd-reveal{ opacity:1; }
body.lpd-animations-on .lpd-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
body.lpd-animations-on .lpd-reveal.lpd-in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  body.lpd-animations-on .lpd-reveal{ opacity:1; transform:none; transition:none; }
}

/* Thin gold-foil divider used under classical headings */
.lpd-divider{ width:64px; height:2px; background:linear-gradient(90deg,var(--lpd-gold),var(--lpd-gold-light)); margin:10px 0 18px; border-radius:2px; }

/* Sale / featured badge shown on the single product gallery */
.lpd-single-badge{
  position:absolute; top:16px; left:16px; z-index:4; font-size:11px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; padding:7px 14px; border-radius:20px; color:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.35);
}
.lpd-single-badge--sale{ background:#a5432f; }
.lpd-single-badge--featured{ background:var(--lpd-gold); color:var(--lpd-ink); }

/* ==========================================================================
   Single product page — shared
   ========================================================================== */
.lpd-gallery-wrap{ position:relative; }
.lpd-single-header .lpd-cat{ font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--lpd-gold-deep); font-weight:700; }
.lpd-single-header{ font-family:var(--lpd-body-font, inherit); }
.lpd-single-header h1.lpd-single-title{ font-size:32px; margin:10px 0 0; line-height:1.25; font-weight:600; font-family:var(--lpd-heading-font, inherit); }
.lpd-single-header .lpd-divider{ margin:14px 0 16px; }
.lpd-single-header .lpd-price{ font-size:24px; margin-bottom:10px; font-weight:700; }
.lpd-stars-row{ display:flex; align-items:center; gap:10px; margin:10px 0 14px; }
.lpd-stars-row .star-rating{ margin:0; }
.lpd-rcount{ font-size:12.5px; color:#3a362f; text-decoration:underline; }
.lpd-short-desc{ color:#3a362f; font-size:14.5px; line-height:1.8; margin-bottom:6px; }

/* Cart row — wraps the native add-to-cart form + the optional WhatsApp
   button so they can sit side by side. Falls back to stacked on narrow
   screens regardless of the "Buttons" layout setting, since a row of two
   full-width buttons never fits comfortably on a phone. */
.lpd-cart-row{ display:flex; align-items:stretch; gap:12px; margin:20px 0; flex-wrap:wrap; }
body.lpd-btn-stacked .lpd-cart-row{ flex-direction:column; align-items:stretch; }
.lpd-cart-row form.cart{ flex:1; min-width:200px; margin:0; }
@media (max-width: 480px){ .lpd-cart-row{ flex-direction:column; } }

/* Native add-to-cart form, restyled with a subtle sheen sweep on hover */
.entry-summary form.cart{ display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; }
.entry-summary form.cart .quantity{ display:flex; align-items:center; border:1.5px solid var(--lpd-border); border-radius:var(--lpd-btn-radius); overflow:hidden; }
.entry-summary form.cart .quantity input.qty{ width:56px; text-align:center; border:none; height:var(--lpd-btn-height); font-weight:700; }
.entry-summary button.single_add_to_cart_button{
  position:relative; overflow:hidden; flex:1; min-width:180px; background:var(--lpd-btn-bg); border:none; border-radius:var(--lpd-btn-radius);
  color:var(--lpd-btn-color); font-weight:800; letter-spacing:.5px; font-size:14px; padding:0 22px; height:var(--lpd-btn-height);
  transition:filter .25s ease, transform .2s ease;
}
.entry-summary button.single_add_to_cart_button:hover{ filter:brightness(0.92); transform:translateY(-1px); }
.entry-summary button.single_add_to_cart_button::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.entry-summary button.single_add_to_cart_button:hover::after{ left:130%; }
.entry-summary table.variations{ width:100%; margin-bottom:14px; }
.entry-summary table.variations select{ width:100%; padding:10px 12px; border-radius:8px; border:1.5px solid var(--lpd-border); font-size:13.5px; }
.entry-summary table.variations label{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#3a362f; }
.entry-summary .woocommerce-variation-price{ margin-bottom:10px; font-weight:700; }

/* Buy Now — a second submit button rendered inside the native cart form,
   right after the native Add to Cart button, so it automatically joins the
   same flex row (.entry-summary form.cart{display:flex}) above. */
.entry-summary button.lpd-buy-now-btn{
  flex:1; min-width:150px; background:var(--lpd-buynow-bg); border:none; border-radius:var(--lpd-btn-radius);
  color:var(--lpd-buynow-color); font-weight:800; letter-spacing:.5px; font-size:14px; padding:0 22px; height:var(--lpd-btn-height);
  cursor:pointer; transition:filter .2s ease, transform .2s ease;
}
.entry-summary button.lpd-buy-now-btn:hover{ filter:brightness(1.15); transform:translateY(-1px); }

/* SKU / category meta row */
.lpd-meta-row{ display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-size:12.5px; color:#6b6255; }
.lpd-meta-label{ font-weight:700; color:#3a362f; margin-right:4px; }

/* Share icons row */
.lpd-share-row{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.lpd-share-label{ font-size:12.5px; font-weight:700; color:#3a362f; margin-right:2px; }
.lpd-share-icon{
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--lpd-border); display:flex; align-items:center;
  justify-content:center; color:#6b6255; transition:all .2s ease; flex-shrink:0;
}
.lpd-share-icon:hover{ border-color:var(--lpd-gold); color:var(--lpd-ink); background:rgba(184,147,90,.08); }

/* WhatsApp order button — sits beside (or under, if stacked) Add to Cart. */
.lpd-whatsapp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; flex:1; min-width:170px;
  height:var(--lpd-btn-height); padding:0 20px; border-radius:var(--lpd-btn-radius); background:var(--lpd-wa-bg);
  color:var(--lpd-wa-color); font-weight:800; font-size:14px; letter-spacing:.3px; text-decoration:none;
  transition:filter .2s ease, transform .2s ease;
}
.lpd-whatsapp-btn:hover{ filter:brightness(0.94); transform:translateY(-1px); color:var(--lpd-wa-color); }
.lpd-whatsapp-btn svg{ flex-shrink:0; }

.lpd-below-cart-row{ margin-top:4px; }
.lpd-wish-inline{
  display:inline-flex; align-items:center; gap:8px; background:none; border:1.5px solid var(--lpd-border); border-radius:9px;
  padding:9px 16px; font-size:12.5px; font-weight:700; color:#3a362f; cursor:pointer; transition:all .2s ease;
}
.lpd-wish-inline:hover{ border-color:var(--lpd-gold); color:var(--lpd-ink); }
.lpd-wish-inline svg{ width:15px; height:15px; stroke:currentColor; fill:none; transition:all .2s ease; }
.lpd-wish-inline.active svg{ fill:#a5432f; stroke:#a5432f; }

.lpd-trust-row{ display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--lpd-border); }
.lpd-trust-item{ display:flex; align-items:center; gap:7px; font-size:12px; color:#3a362f; }
.lpd-trust-item svg{ width:15px; height:15px; stroke:var(--lpd-gold-deep); fill:none; flex-shrink:0; }

/* Accordion (Layout A) — height is set inline by JS (scrollHeight) rather
   than a hardcoded max-height, so long content (e.g. many reviews) is
   never clipped. */
.lpd-acc{ margin-top:16px; border-top:1px solid var(--lpd-border); clear:both; }
.lpd-acc-item{ border-bottom:1px solid var(--lpd-border); }
.lpd-acc-head{ width:100%; background:none; border:none; padding:18px 4px; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:15.5px; cursor:pointer; text-align:left; font-family:var(--lpd-heading-font, inherit); }
.lpd-acc-head svg{ width:14px; height:14px; transition:transform .3s ease; flex-shrink:0; color:var(--lpd-gold-deep); }
.lpd-acc-item.open .lpd-acc-head svg{ transform:rotate(180deg); }
.lpd-acc-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.lpd-acc-body-inner{ padding:0 4px 18px; font-size:14.5px; line-height:1.8; color:#3a362f; }

/* ==========================================================================
   Layout A — Gallery + Sticky Panel
   ========================================================================== */
body.lpd-layout-a .lpd-gallery-wrap{ display:flex; gap:16px; }
body.lpd-layout-a .lpd-thumb-rail{ display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
body.lpd-layout-a .lpd-thumb{ width:74px; height:74px; border-radius:10px; border:2px solid transparent; padding:0; background:#efe8d8; cursor:pointer; overflow:hidden; }
body.lpd-layout-a .lpd-thumb.active{ border-color:var(--lpd-gold); }
body.lpd-layout-a .lpd-thumb img{ width:100%; height:100%; object-fit:cover; }
body.lpd-layout-a .lpd-main-image{ position:relative; border-radius:14px; overflow:hidden; flex:1; background:var(--lpd-cream); }
body.lpd-layout-a .lpd-main-image img{ width:100%; height:var(--lpd-img-h); min-height:320px; object-fit:var(--lpd-gallery-fit); transition:transform .5s ease, opacity .2s ease; }
body.lpd-layout-a.lpd-lightbox-on .lpd-main-image img{ cursor:zoom-in; }
body.lpd-layout-a .lpd-main-image:hover img{ transform:scale(1.04); }
body.lpd-layout-a .lpd-zoom-badge{
  position:absolute; bottom:14px; right:14px; z-index:3; background:rgba(255,255,255,.92); border:none; font-size:11px;
  font-weight:700; padding:7px 14px; border-radius:20px; letter-spacing:.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:background .2s ease;
}
body.lpd-layout-a .lpd-zoom-badge:hover{ background:#fff; }
body.lpd-layout-a .entry-summary{ position:sticky; top:24px; align-self:flex-start; }

@media (max-width: 800px){
  body.lpd-layout-a .lpd-gallery-wrap{ flex-direction:column; }
  body.lpd-layout-a .lpd-thumb-rail{ flex-direction:row; overflow-x:auto; }
  body.lpd-layout-a .lpd-main-image img{ min-height:0; height:340px; }
  body.lpd-layout-a .entry-summary{ position:static; }
}
@media (max-width: 560px){
  body.lpd-layout-a .lpd-main-image img{ height:260px; }
}

/* ==========================================================================
   Layout B — Immersive Hero
   ========================================================================== */
body.lpd-layout-b div.product{ display:block !important; }
body.lpd-layout-b div.product .images,
body.lpd-layout-b div.product .lpd-gallery-wrap{ width:100% !important; float:none !important; margin:0 !important; }
body.lpd-layout-b .lpd-gallery-wrap--b{ position:relative; height:520px; border-radius:18px 18px 0 0; overflow:hidden; background:var(--lpd-ink); }
body.lpd-layout-b .lpd-hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
body.lpd-layout-b .lpd-hero-slide.active{ opacity:1; }
body.lpd-layout-b .lpd-hero-slide img{ width:100%; height:100%; object-fit:var(--lpd-gallery-fit); }
body.lpd-layout-b.lpd-lightbox-on .lpd-hero-slide img{ cursor:zoom-in; }
body.lpd-layout-b .lpd-hero-zoom{
  position:absolute; top:16px; right:16px; z-index:4; width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
body.lpd-layout-b .lpd-hero-zoom:hover{ background:#fff; }
body.lpd-layout-b .lpd-hero-dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:3; }
body.lpd-layout-b .lpd-hero-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:all .2s ease; }
body.lpd-layout-b .lpd-hero-dots span.active{ background:var(--lpd-gold-light); width:20px; border-radius:4px; }

body.lpd-layout-b div.product .summary,
body.lpd-layout-b .entry-summary{
  width:100% !important; float:none !important; margin:-70px 24px 0 !important; position:relative; z-index:5;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-radius:16px; padding:28px 30px 30px;
  box-shadow:0 25px 50px -20px rgba(0,0,0,.35);
}
body.lpd-layout-b .lpd-tabbar-wrap{ margin-top:6px; }
body.lpd-layout-b .lpd-tabbar{ display:flex; gap:22px; border-bottom:1px solid var(--lpd-border); margin-bottom:16px; flex-wrap:wrap; }
body.lpd-layout-b .lpd-tabbar button{ background:none; border:none; padding:10px 2px 14px; font-weight:700; font-size:13.5px; color:#3a362f; position:relative; cursor:pointer; }
body.lpd-layout-b .lpd-tabbar button.active{ color:var(--lpd-ink); }
body.lpd-layout-b .lpd-tabbar button.active::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--lpd-gold); transition:transform .25s ease; }
body.lpd-layout-b .lpd-tabpanel{ display:none; font-size:14.5px; line-height:1.8; color:#3a362f; }
body.lpd-layout-b .lpd-tabpanel.active{ display:block; animation:lpdFadeIn .3s ease; }
@keyframes lpdFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

@media (max-width: 800px){
  body.lpd-layout-b .lpd-gallery-wrap--b{ height:340px; }
  body.lpd-layout-b .entry-summary, body.lpd-layout-b div.product .summary{ margin:-46px 14px 0 !important; padding:20px; }
}
@media (max-width: 560px){
  body.lpd-layout-b .lpd-gallery-wrap--b{ height:280px; }
}

/* ==========================================================================
   Layout C — Classic Split
   Relies on the active theme's own side-by-side ".images"/".summary" split
   (same proven-safe strategy as Layout A) — only the gallery's internal
   arrangement (thumbnails moved below the photo instead of beside it) and
   the header typography are restyled here.
   ========================================================================== */
body.lpd-layout-c .lpd-gallery-wrap{ display:flex; flex-direction:column; gap:14px; }
body.lpd-layout-c .lpd-main-image{ order:1; position:relative; border-radius:10px; overflow:hidden; background:var(--lpd-cream); }
body.lpd-layout-c .lpd-main-image img{ width:100%; height:var(--lpd-img-h); min-height:360px; object-fit:var(--lpd-gallery-fit); transition:transform .5s ease; }
body.lpd-layout-c.lpd-lightbox-on .lpd-main-image img{ cursor:zoom-in; }
body.lpd-layout-c .lpd-thumb-rail{ order:2; display:flex; flex-direction:row; gap:10px; flex-wrap:wrap; }
body.lpd-layout-c .lpd-thumb{ width:64px; height:64px; border-radius:8px; border:2px solid transparent; padding:0; background:#efe8d8; cursor:pointer; overflow:hidden; flex-shrink:0; }
body.lpd-layout-c .lpd-thumb.active{ border-color:var(--lpd-gold); }
body.lpd-layout-c .lpd-thumb img{ width:100%; height:100%; object-fit:cover; }
body.lpd-layout-c .lpd-zoom-badge{
  position:absolute; bottom:14px; right:14px; z-index:3; background:rgba(255,255,255,.92); border:none; font-size:11px;
  font-weight:700; padding:7px 14px; border-radius:20px; letter-spacing:.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
body.lpd-layout-c .entry-summary{ position:sticky; top:32px; align-self:flex-start; }
body.lpd-layout-c .lpd-single-header .lpd-cat{ letter-spacing:3px; }
body.lpd-layout-c .lpd-single-header h1.lpd-single-title{ font-size:30px; line-height:1.3; }
body.lpd-layout-c .lpd-single-header .lpd-divider{ width:100%; max-width:220px; height:1px; background:var(--lpd-border); margin:20px 0; }
body.lpd-layout-c .lpd-short-desc{ font-size:15px; }

@media (max-width: 800px){
  body.lpd-layout-c .lpd-main-image img{ min-height:0; height:340px; }
  body.lpd-layout-c .entry-summary{ position:static; }
}
@media (max-width: 560px){
  body.lpd-layout-c .lpd-thumb{ width:52px; height:52px; }
  body.lpd-layout-c .lpd-main-image img{ height:260px; }
}

/* ==========================================================================
   Layout D — Boutique Minimal
   A single centered narrow column — image, then content, then tabs, all
   stacked with generous white space. Uses the same forced-stacking
   technique already proven safe in Layout B, just without the overlapping
   floating card effect.
   ========================================================================== */
body.lpd-layout-d div.product{ display:block !important; }
body.lpd-layout-d div.product .images,
body.lpd-layout-d div.product .lpd-gallery-wrap,
body.lpd-layout-d div.product .summary,
body.lpd-layout-d .entry-summary{
  width:100% !important; float:none !important; margin:0 auto !important; max-width:640px;
}
body.lpd-layout-d .lpd-gallery-wrap{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px !important; }
body.lpd-layout-d .lpd-main-image{ order:1; position:relative; border-radius:8px; overflow:hidden; background:var(--lpd-cream); }
body.lpd-layout-d .lpd-main-image img{ width:100%; height:var(--lpd-img-h); min-height:320px; object-fit:var(--lpd-gallery-fit); }
body.lpd-layout-d.lpd-lightbox-on .lpd-main-image img{ cursor:zoom-in; }
body.lpd-layout-d .lpd-thumb-rail{ order:2; display:flex; flex-direction:row; justify-content:center; gap:8px; flex-wrap:wrap; }
body.lpd-layout-d .lpd-thumb{ width:48px; height:48px; border-radius:6px; border:2px solid transparent; padding:0; background:#efe8d8; cursor:pointer; overflow:hidden; flex-shrink:0; }
body.lpd-layout-d .lpd-thumb.active{ border-color:var(--lpd-gold); }
body.lpd-layout-d .lpd-thumb img{ width:100%; height:100%; object-fit:cover; }
body.lpd-layout-d .lpd-zoom-badge{
  position:absolute; bottom:12px; right:12px; z-index:3; background:rgba(255,255,255,.92); border:none; font-size:11px;
  font-weight:700; padding:6px 12px; border-radius:18px; letter-spacing:.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
body.lpd-layout-d .lpd-single-header{ text-align:left; }
body.lpd-layout-d .lpd-single-header .lpd-cat{ letter-spacing:2px; }
body.lpd-layout-d .lpd-single-header h1.lpd-single-title{ font-size:26px; line-height:1.3; }
body.lpd-layout-d .lpd-single-header .lpd-divider{ margin:16px 0; }
body.lpd-layout-d .lpd-acc,
body.lpd-layout-d .related.products,
body.lpd-layout-d .lpd-related-section{ max-width:640px; margin-left:auto !important; margin-right:auto !important; }

@media (max-width: 700px){
  body.lpd-layout-d div.product .images,
  body.lpd-layout-d div.product .lpd-gallery-wrap,
  body.lpd-layout-d div.product .summary,
  body.lpd-layout-d .entry-summary{ max-width:100%; padding-left:16px; padding-right:16px; box-sizing:border-box; }
  body.lpd-layout-d .lpd-acc,
  body.lpd-layout-d .related.products,
  body.lpd-layout-d .lpd-related-section{ max-width:100%; padding-left:16px; padding-right:16px; box-sizing:border-box; }
}
@media (max-width: 560px){
  body.lpd-layout-d .lpd-main-image img{ height:260px; }
  body.lpd-layout-d .lpd-thumb{ width:40px; height:40px; }
}

/* ==========================================================================
   Responsive card image height (Sizing & Spacing settings). Placed after
   every card style's base rules on purpose so these win the cascade at
   the matching screen width, regardless of source order elsewhere.
   ========================================================================== */
@media (max-width: 980px){
  .lpd-card .lpd-thumb{ height:var(--lpd-img-h-tablet) !important; }
  .lpd-card-2 .lpd-thumb{ height:calc(var(--lpd-img-h-tablet) + 40px) !important; }
}
@media (max-width: 560px){
  .lpd-card .lpd-thumb{ height:var(--lpd-img-h-mobile) !important; }
  .lpd-card-2 .lpd-thumb{ height:calc(var(--lpd-img-h-mobile) + 30px) !important; }
  .lpd-card-3{ flex-direction:column; }
  .lpd-card-3 .lpd-thumb{ width:100%; height:var(--lpd-img-h-mobile) !important; }
}

/* ==========================================================================
   Reduced motion on mobile (toggle in Advanced settings)
   ========================================================================== */
@media (max-width: 600px){
  body.lpd-reduce-motion .lpd-card-1:hover,
  body.lpd-reduce-motion .lpd-card-2:hover,
  body.lpd-reduce-motion .lpd-card-3:hover{ transform:none; }
}

/* ==========================================================================
   Lightbox — click-to-zoom full photo viewer (Layout & Zoom setting)
   ========================================================================== */
.lpd-lightbox{
  position:fixed; inset:0; z-index:99999; background:rgba(20,18,15,.92); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s ease; padding:40px;
}
.lpd-lightbox.open{ opacity:1; visibility:visible; }
.lpd-lightbox img{ max-width:90vw; max-height:85vh; object-fit:contain; border-radius:6px; box-shadow:0 25px 70px rgba(0,0,0,.5); }
.lpd-lightbox button{ position:absolute; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.35); color:#fff; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.lpd-lightbox button:hover{ background:rgba(255,255,255,.25); }
.lpd-lightbox-close{ top:20px; right:20px; width:42px; height:42px; font-size:20px; }
.lpd-lightbox-prev, .lpd-lightbox-next{ top:50%; transform:translateY(-50%); width:46px; height:46px; font-size:20px; }
.lpd-lightbox-prev{ left:16px; }
.lpd-lightbox-next{ right:16px; }
@media (max-width: 600px){
  .lpd-lightbox{ padding:16px; }
  .lpd-lightbox-prev, .lpd-lightbox-next{ width:38px; height:38px; }
}

/* ==========================================================================
   Related / upsell products — native WooCommerce query and markup, just
   restyled so the heading and spacing match the rest of the page.
   ========================================================================== */
.lpd-related-section{ margin-top:44px; padding-top:32px; border-top:1px solid var(--lpd-border); clear:both; }
.lpd-related-section > h2{
  font-size:22px; font-family:var(--lpd-heading-font, inherit); color:var(--lpd-ink); margin:0 0 22px;
  display:flex; align-items:center; gap:14px;
}
.lpd-related-section > h2::after{ content:''; flex:1; height:1px; background:var(--lpd-border); }

/* ==========================================================================
   Shop-by-category sections (main Shop page only, when enabled)
   ========================================================================== */
.lpd-category-section{ margin-bottom:48px; }
.lpd-category-heading-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.lpd-category-heading{ font-size:24px; margin:0; color:var(--lpd-ink); font-family:var(--lpd-heading-font, inherit); }
.lpd-category-viewall{ font-size:13px; font-weight:700; color:var(--lpd-gold-deep); text-decoration:none; white-space:nowrap; }
.lpd-category-viewall:hover{ text-decoration:underline; }
ul.lpd-products-grid{
  display:grid !important; grid-template-columns:repeat(var(--lpd-columns), 1fr) !important; gap:var(--lpd-gap) !important; list-style:none; margin:0; padding:0;
}
ul.lpd-products-grid li.product{ margin:0; list-style:none; }
@media (max-width: 980px){ ul.lpd-products-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px){ ul.lpd-products-grid{ grid-template-columns:1fr; } }