/* fable5-store.css — Fable-5 "Circle" reskin layer for SL-Store cards.
   web-ops-head 2026-06-16, program tq-1781650268510-269c.
   Scoped to .fab5-* hooks ONLY — never redefines legacy purple.theme classes,
   so it is additive and cannot regress un-reskinned pages. Loads AFTER purple.theme.css. */

:root{
  --fab5-cream:#F5F0EB; --fab5-plum:#5B2E5A; --fab5-midnight:#352040;
  --fab5-mauve:#C4A9B5; --fab5-gold:#F2C53D; --fab5-ink:#2A1E2A;
}

.product-card.fab5-card{
  background:#fff;
  border:1px solid #ece3e8;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 14px rgba(91,46,90,.07);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  display:flex; flex-direction:column;
}
.product-card.fab5-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(91,46,90,.16);
  border-color:var(--fab5-mauve);
}
.fab5-card .fab5-card-inner{display:flex;flex-direction:column;height:100%;}

.fab5-card .fab5-thumb{display:block;aspect-ratio:3/2;background:var(--fab5-cream);}
.fab5-card .fab5-thumb .inner-block{
  display:block;width:100%;height:100%;
  background-size:cover;background-position:center;
}

.fab5-card .fab5-link{text-decoration:none;padding:16px 18px 4px;}
.fab5-card .fab5-name{
  font-family:'Fraunces',Georgia,serif;
  color:var(--fab5-plum);
  font-size:18px;line-height:1.25;margin:0;
}
.fab5-card .fab5-desc{
  padding:6px 18px 0;color:#5b4d57;font-size:14px;line-height:1.55;
  flex:1 1 auto;
}

.fab5-card .fab5-action{
  padding:14px 18px 18px;display:flex;flex-direction:column;gap:8px;margin-top:auto;
}
.fab5-card .fab5-save{
  display:inline-block;align-self:flex-start;
  background:var(--fab5-gold);color:var(--fab5-ink);
  font-weight:700;font-size:12px;padding:3px 10px;border-radius:20px;
}
.fab5-card .fab5-access{color:#7a6b75;font-size:13px;font-weight:600;}
.fab5-card .fab5-buy{margin-top:4px;}
/* Buy button HTML is emitted by Helpers_Product::btn_BuyNow (theme-independent — FINDING A).
   Restyle whatever class it outputs from here so the helper stays theme-agnostic. */
.fab5-card .fab5-buy a,
.fab5-card .fab5-buy button,
.fab5-card .fab5-buy .btn{
  display:inline-block;width:100%;text-align:center;
  background:var(--fab5-plum);color:#fff;border:none;
  padding:11px 18px;border-radius:9px;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;
  text-decoration:none;cursor:pointer;transition:background .15s ease;
}
.fab5-card .fab5-buy a:hover,
.fab5-card .fab5-buy button:hover,
.fab5-card .fab5-buy .btn:hover{background:var(--fab5-midnight);}

/* ---- Full PDP (store/product.tpl) reskin layer — fab5-pdp* scope only ----
   Same additive contract as the card: never redefines legacy purple.theme classes,
   only the fab5-pdp* hooks added to product.tpl structural wrappers. */
.fab5-pdp{display:block;}
.fab5-pdp .fab5-pdp-card{
  background:#fff;border:1px solid #ece3e8;border-radius:16px;
  box-shadow:0 2px 18px rgba(91,46,90,.07);
  padding:24px;display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;
}
.fab5-pdp .fab5-pdp-image{
  flex:0 0 280px;max-width:280px;border-radius:12px;overflow:hidden;
  background:var(--fab5-cream);
}
.fab5-pdp .fab5-pdp-image img{width:100%;height:auto;display:block;}
.fab5-pdp .fab5-pdp-details{flex:1 1 360px;min-width:280px;}
.fab5-pdp .fab5-pdp-title{
  font-family:'Fraunces',Georgia,serif;color:var(--fab5-plum);
  font-size:28px;line-height:1.2;margin:0 0 12px;
}
.fab5-pdp .fab5-pdp-subhead{
  display:flex;gap:22px;align-items:baseline;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid #f0e8ed;margin-bottom:8px;
}
.fab5-pdp .fab5-pdp-subhead .current-price{
  font-family:'Fraunces',Georgia,serif;color:var(--fab5-midnight);
  font-size:26px;font-weight:640;
}
.fab5-pdp .fab5-pdp-subhead .old-price{color:#9b8a94;text-decoration:line-through;font-size:16px;}
.fab5-pdp .fab5-pdp-subhead .for-free{color:var(--fab5-plum);font-weight:700;font-size:22px;}
.fab5-pdp .fab5-pdp-subhead .price-label{color:#7a6b75;font-size:13px;font-weight:600;}
.fab5-pdp .fab5-pdp-subhead .access-label{color:#7a6b75;font-size:13px;font-weight:600;}

/* Buy / add-to-cart buttons (FINDING A: helper-emitted) styled standalone below alongside
   the fly-panel, since fab5-pdp-buy appears both inside .fab5-pdp and in the sidebar aside. */

/* fly-panel/aside hooks scoped on their OWN fab5 token (NOT under .fab5-pdp) because
   the sidebar <aside> is a SIBLING of <main> in product.tpl, not a descendant of the
   section.fab5-pdp. Tokens are fab5-unique so standalone scoping stays additive. */
.fab5-pdp-fly{
  background:#fff;border:1px solid #ece3e8;border-radius:14px;
  padding:18px;box-shadow:0 2px 14px rgba(91,46,90,.07);margin-bottom:18px;
}
.fab5-pdp-fly .current-price{
  font-family:'Fraunces',Georgia,serif;color:var(--fab5-midnight);font-size:24px;font-weight:640;
}
.fab5-pdp-fly .for-free{color:var(--fab5-plum);font-weight:700;font-size:20px;}
.fab5-pdp-fly .old-price{color:#9b8a94;text-decoration:line-through;font-size:14px;}
.fab5-pdp-buy a,.fab5-pdp-buy button,.fab5-pdp-buy .btn{
  display:inline-block;text-align:center;flex:1 1 auto;min-width:140px;
  background:var(--fab5-plum);color:#fff;border:none;
  padding:12px 20px;border-radius:9px;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;
  text-decoration:none;cursor:pointer;transition:background .15s ease;
}
.fab5-pdp-buy{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
.fab5-pdp-buy a:hover,.fab5-pdp-buy button:hover,.fab5-pdp-buy .btn:hover{background:var(--fab5-midnight);}
.fab5-pdp .fab5-pdp-desc{
  margin-top:22px;color:#4a3f46;font-size:15px;line-height:1.7;
}
.fab5-pdp-aside{margin-top:0;}
@media(max-width:760px){
  .fab5-pdp .fab5-pdp-card{padding:16px;gap:18px;}
  .fab5-pdp .fab5-pdp-image{flex-basis:100%;max-width:100%;}
  .fab5-pdp .fab5-pdp-title{font-size:23px;}
}