/* 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;}
}

/* ---- Category / listing page (store/category.tpl) reskin layer — fab5-cat* scope only ----
   Same additive contract: only the fab5-cat* hooks added to category.tpl structural wrappers.
   The product grid's children are .product-card.fab5-card (already styled above). */
.fab5-cat-header{margin:0 0 6px;}
.fab5-cat-title{
  font-family:'Fraunces',Georgia,serif;color:var(--fab5-plum);
  font-size:30px;line-height:1.18;margin:0 0 4px;
}
.fab5-cat-desc{color:#5b4d57;font-size:15px;line-height:1.65;margin:0 0 18px;max-width:760px;}
.fab5-cat-filter{margin:0 0 18px;}
.fab5-cat-filter span{color:#7a6b75;font-size:13px;font-weight:600;margin-right:8px;}
.fab5-cat-filter input{
  border:1px solid #e4d8df;border-radius:9px;padding:9px 14px;
  font-family:'Quicksand',sans-serif;font-size:14px;min-width:220px;
}
.fab5-cat-subnav{margin:0 0 24px;}
.fab5-cat-subnav h4{color:var(--fab5-midnight);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;}
.fab5-cat-subnav nav{display:flex;flex-wrap:wrap;gap:8px;}
.fab5-cat-subnav nav a{
  display:inline-block;background:var(--fab5-cream);color:var(--fab5-plum);
  font-size:13px;font-weight:600;padding:6px 14px;border-radius:20px;
  text-decoration:none;transition:background .15s ease,color .15s ease;
}
.fab5-cat-subnav nav a:hover{background:var(--fab5-plum);color:#fff;}
.fab5-cat-subhead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin:28px 0 14px;padding-bottom:10px;border-bottom:1px solid #f0e8ed;
}
.fab5-cat-sectitle{
  font-family:'Fraunces',Georgia,serif;color:var(--fab5-midnight);
  font-size:22px;line-height:1.2;margin:0;
}
.fab5-cat-subhead .subcategory-top{color:var(--fab5-mauve);font-size:12px;
  font-weight:600;text-decoration:none;white-space:nowrap;}
.fab5-cat-subhead .subcategory-top:hover{color:var(--fab5-plum);}
.fab5-cat-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
@media(max-width:760px){
  .fab5-cat-title{font-size:24px;}
  .fab5-cat-grid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
}

/* ---- Home / listing sections (store/products_list.tpl) reskin layer — fab5-plist* scope only ----
   Renders product_card (fab5-card, styled above). Additive: only fab5-plist* hooks added to the
   section/title/grid/see-more wrappers; the legacy .products maxHeight JS still targets .products. */
.fab5-plist{padding:14px 0;}
.fab5-plist-title{
  font-family:'Fraunces',Georgia,serif;color:var(--fab5-midnight);
  font-size:22px;line-height:1.2;margin:0 0 16px;
  text-transform:none;letter-spacing:0;
}
/* NB: fab5-plist-grid is intentionally layout-NEUTRAL. The legacy .products container keeps its
   own layout because home.tpl's collapse JS reads .product-card:first outerHeight + marginBottom
   and sets .products maxHeight to fold NEW/POPULAR sections. Forcing display:grid/gap here would
   change that fold math = a behavior regression. Card visuals come from .fab5-card; this hook is
   reserved for safe, non-layout polish only. */
.fab5-plist-grid{/* layout-neutral by design — see note above */}
.fab5-plist-more{
  display:inline-block;margin-top:16px;
  color:var(--fab5-plum);font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:14px;text-decoration:none;cursor:pointer;
}
.fab5-plist-more:hover{color:var(--fab5-midnight);text-decoration:underline;}