/*
 * Handaran — single product page (PDP) styles.
 * Layered on top of hnd-store.css (shared tokens, glass, buttons, cards,
 * cart drawer, variant sheet). Palette: honey #E8A23C · caramel #C4682A ·
 * cream #FDF4E3 · dark #2C1A0E · success #4ade80.
 */

/* ── Layout shell ─────────────────────────────────────── */
.pdp-main{padding-top:5.5rem;padding-bottom:1rem}
@media(min-width:768px){.pdp-main{padding-top:6.5rem}}
.pdp-crumb-wrap{padding-top:.5rem;padding-bottom:1.25rem}
.shop-crumb a,.shop-crumb span{white-space:nowrap}
.pdp-top{padding-bottom:2.5rem}

.pdp-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:900px){.pdp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3.5rem;align-items:start}}

/* ── Gallery ──────────────────────────────────────────── */
.pdp-gallery{position:relative}
@media(min-width:900px){.pdp-gallery{position:sticky;top:6rem}}
.pdp-stage{
  position:relative;border-radius:1.5rem;overflow:hidden;aspect-ratio:1/1;
  background:rgba(255,248,235,.05);border:1px solid rgba(232,162,60,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.pdp-stage img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.pdp-stage:hover img{transform:scale(1.04)}
.pdp-stage-badge{position:absolute;top:1rem;left:1rem;z-index:3;box-shadow:0 6px 18px rgba(0,0,0,.3)}

.pdp-thumbs{display:flex;gap:.6rem;margin-top:.85rem;flex-wrap:wrap}
.pdp-thumb{
  width:4.25rem;height:4.25rem;border-radius:.85rem;overflow:hidden;cursor:pointer;flex-shrink:0;
  border:2px solid rgba(232,162,60,.14);background:rgba(255,248,235,.04);padding:0;
  transition:border-color .25s,transform .2s;
}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-thumb:hover{transform:translateY(-2px);border-color:rgba(232,162,60,.4)}
.pdp-thumb.is-active{border-color:#E8A23C;box-shadow:0 0 0 1px rgba(232,162,60,.4)}

/* ── Summary column ───────────────────────────────────── */
.pdp-summary{min-width:0}
.pdp-eyebrow{
  display:inline-block;color:#E8A23C;font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;margin-bottom:.6rem;transition:color .2s;
}
.pdp-eyebrow:hover{color:#FDF4E3}
.pdp-title{
  color:#FDF4E3;font-weight:700;line-height:1.08;margin-bottom:.85rem;
  font-size:clamp(1.9rem,4.4vw,3rem);
}

.pdp-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.1rem;margin-bottom:1rem}
.pdp-stars{display:inline-flex;align-items:center;gap:.2rem;color:#E8A23C;font-size:.85rem}
.pdp-rating-count{color:rgba(253,244,227,.45);font-size:.78rem;margin-left:.35rem}
.pdp-stock{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600}
.pdp-stock.is-in{color:#7fd99a}
.pdp-stock.is-in i{color:#4ade80}
.pdp-stock.is-out{color:#f0a3a3}
.pdp-stock.is-out i{color:#f87171}

.pdp-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.pdp-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .7rem;border-radius:9999px;font-size:.72rem;font-weight:600;
  color:rgba(253,244,227,.8);background:rgba(232,162,60,.1);border:1px solid rgba(232,162,60,.2);
}
.pdp-chip i{color:#E8A23C;font-size:.7rem}

/* ── Price ────────────────────────────────────────────── */
.pdp-price-block{
  padding:1.1rem 1.25rem;border-radius:1.1rem;margin-bottom:1.5rem;
  background:rgba(255,248,235,.05);border:1px solid rgba(232,162,60,.14);
}
.pdp-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}
/* Prices use Playfair Display with tabular + lining figures so every digit and
   the currency symbol share one consistent height — balanced, not lopsided. */
.pdp-price-now,.pdp-price-was{font-family:'Playfair Display',Georgia,serif;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.pdp-price-from{color:rgba(253,244,227,.5);font-size:.85rem;font-weight:600}
.pdp-price-now{color:#E8A23C;font-weight:700;font-size:clamp(1.8rem,4vw,2.4rem);line-height:1;letter-spacing:.01em}
.pdp-price-to{color:rgba(253,244,227,.5);font-size:1.1rem;font-weight:600}
.pdp-price-was{color:rgba(253,244,227,.4);text-decoration:line-through;font-size:1.1rem;font-weight:600}
.pdp-price-note{display:block;color:rgba(253,244,227,.42);font-size:.72rem;margin-top:.5rem}

/* ── Short description ────────────────────────────────── */
.pdp-short{color:rgba(253,244,227,.62);font-size:.95rem;line-height:1.7;margin-bottom:1.5rem}
.pdp-short p{margin-bottom:.6rem}

/* ── Variations ───────────────────────────────────────── */
.pdp-variations{margin-bottom:1.5rem}
.pdp-field-label{
  display:flex;align-items:center;gap:.5rem;color:rgba(253,244,227,.55);
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.7rem;
}
.pdp-field-label i{color:#E8A23C}
.pdp-var-grid{display:flex;flex-wrap:wrap;gap:.65rem}
.pdp-var-btn{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  min-width:6.5rem;padding:.7rem 1.1rem;border-radius:.9rem;cursor:pointer;
  background:rgba(255,248,235,.04);border:1.5px solid rgba(232,162,60,.16);
  transition:border-color .22s,background .22s,transform .18s;text-align:left;
}
.pdp-var-btn:hover{border-color:rgba(232,162,60,.45);background:rgba(255,248,235,.08);transform:translateY(-2px)}
.pdp-var-btn.is-selected{border-color:#E8A23C;background:rgba(232,162,60,.12);box-shadow:0 6px 18px rgba(232,162,60,.18)}
.pdp-var-name{color:#FDF4E3;font-weight:700;font-size:.9rem;text-transform:capitalize}
.pdp-var-price{color:#E8A23C;font-weight:700;font-size:.82rem}
.pdp-var-btn.is-disabled,.pdp-var-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.pdp-var-btn.is-disabled:hover{transform:none;border-color:rgba(232,162,60,.16);background:rgba(255,248,235,.04)}
.pdp-var-oos{font-size:.62rem;color:#f0a3a3;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
@keyframes pdpShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.pdp-shake{animation:pdpShake .42s ease}

/* ── Add-ons (extra toppings / sides / drinks) ─────────────── */
.pdp-addons{margin:1.25rem 0 .25rem;display:flex;flex-direction:column;gap:1rem}
.pdp-addon-group{display:flex;flex-direction:column;gap:.55rem}
.pdp-addon-hint{margin-left:.4rem;color:#E8A23C;font-weight:700;font-size:.72rem;letter-spacing:.01em}
.pdp-addon-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.pdp-addon-chip{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:1px solid rgba(232,162,60,.22);background:rgba(255,248,235,.05);
  border-radius:9999px;padding:.42rem .8rem;
  transition:border-color .2s,background .2s,transform .15s;
}
.pdp-addon-chip:hover{border-color:rgba(232,162,60,.5);background:rgba(255,248,235,.08);transform:translateY(-1px)}
.pdp-addon-chip .pdp-addon-name{color:#FDF4E3;font-weight:600;font-size:.82rem;text-transform:capitalize}
.pdp-addon-chip .pdp-addon-price{color:rgba(253,244,227,.5);font-weight:700;font-size:.72rem}
.pdp-addon-chip.is-on{border-color:#E8A23C;background:rgba(232,162,60,.16);box-shadow:0 4px 14px rgba(232,162,60,.16)}
.pdp-addon-chip.is-on .pdp-addon-name{color:#fff}
.pdp-addon-chip.is-on .pdp-addon-price{color:#E8A23C}
.pdp-addon-chip.is-on::before{content:"\2713";color:#E8A23C;font-weight:900;font-size:.78rem;margin-right:-.15rem}
.pdp-addon-total{color:#E8A23C;font-weight:700;font-size:.82rem;margin-top:.15rem}

/* ── Buy row ──────────────────────────────────────────── */
.pdp-buy-row{display:flex;align-items:stretch;gap:.75rem;margin-bottom:.75rem}
.pdp-qty{
  display:flex;align-items:center;border-radius:.9rem;flex-shrink:0;
  background:rgba(255,248,235,.05);border:1.5px solid rgba(232,162,60,.18);overflow:hidden;
}
.pdp-qty-btn{
  width:2.7rem;align-self:stretch;display:flex;align-items:center;justify-content:center;
  color:rgba(253,244,227,.75);background:transparent;border:none;cursor:pointer;font-size:.8rem;transition:color .2s,background .2s;
}
.pdp-qty-btn:hover{color:#E8A23C;background:rgba(232,162,60,.08)}
.pdp-qty-input{
  width:3rem;text-align:center;background:transparent;border:none;outline:none;
  color:#FDF4E3;font-weight:700;font-size:1rem;font-family:'Inter','Inter Fallback',sans-serif;-moz-appearance:textfield;
}
.pdp-qty-input::-webkit-outer-spin-button,.pdp-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-add-btn{
  flex:1;justify-content:center;gap:.6rem;padding:0 1.4rem;min-height:3.4rem;
  border-radius:.9rem;font-size:.95rem;font-weight:700;
}
.pdp-add-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.pdp-add-btn.pdp-need-choice{background:linear-gradient(135deg,#C4682A,#7A3A14)}
.pdp-view-cart{
  display:inline-flex;align-items:center;gap:.5rem;color:rgba(253,244,227,.5);
  background:none;border:none;cursor:pointer;font-size:.82rem;font-weight:600;padding:.35rem 0;margin-bottom:1.6rem;transition:color .2s;
}
.pdp-view-cart:hover{color:#E8A23C}
.pdp-view-cart i{color:#E8A23C}

/* ── Meta list ────────────────────────────────────────── */
.pdp-meta-list{list-style:none;margin:0 0 1.5rem;padding:1.1rem 0 0;border-top:1px solid rgba(232,162,60,.12)}
.pdp-meta-list li{display:flex;gap:1rem;font-size:.82rem;padding:.32rem 0}
.pdp-meta-list .k{color:rgba(253,244,227,.42);min-width:5.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;padding-top:.1rem}
.pdp-meta-list .v{color:rgba(253,244,227,.78)}
.pdp-meta-list .v a{color:#E8A23C;text-decoration:none}
.pdp-meta-list .v a:hover{text-decoration:underline}

/* ── Mini trust ───────────────────────────────────────── */
.pdp-mini-trust{display:flex;flex-wrap:wrap;gap:1.4rem;padding-top:.3rem}
.pdp-mini-trust div{display:flex;align-items:center;gap:.5rem;color:rgba(253,244,227,.55);font-size:.78rem;font-weight:600}
.pdp-mini-trust i{color:#E8A23C}

/* ── Detail tabs ──────────────────────────────────────── */
.pdp-details{padding:2.5rem 1rem 1rem}
@media(min-width:640px){.pdp-details{padding:3rem 1.5rem 1rem}}
.pdp-tabs{
  display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.75rem;
  border-bottom:1px solid rgba(232,162,60,.14);padding-bottom:.1rem;
}
.pdp-tab{
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;cursor:pointer;
  background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  color:rgba(253,244,227,.5);font-size:.85rem;font-weight:600;font-family:'Inter','Inter Fallback',sans-serif;
  transition:color .2s,border-color .2s;white-space:nowrap;
}
.pdp-tab i{color:rgba(232,162,60,.55);font-size:.8rem}
.pdp-tab:hover{color:#FDF4E3}
.pdp-tab.is-active{color:#E8A23C;border-bottom-color:#E8A23C}
.pdp-tab.is-active i{color:#E8A23C}

.pdp-panel{display:none;animation:pdpFade .3s ease both}
.pdp-panel.is-active{display:block}
@keyframes pdpFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pdp-panel-title{color:#FDF4E3;font-weight:700;font-size:1.15rem;margin-bottom:1rem;font-family:'Playfair Display',serif;display:flex;align-items:center;gap:.5rem}
.pdp-panel-sub{color:rgba(253,244,227,.42);font-size:.8rem;font-weight:400;font-family:'Inter','Inter Fallback',sans-serif}

.pdp-prose{color:rgba(253,244,227,.72);font-size:1rem;line-height:1.8;max-width:46rem}
.pdp-prose p{margin-bottom:1rem}
.pdp-prose strong{color:#FDF4E3}

/* Ingredients / option chips */
.pdp-ingredient-chips{display:flex;flex-wrap:wrap;gap:.6rem;max-width:46rem}
.pdp-ing{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:.75rem;
  background:rgba(255,248,235,.05);border:1px solid rgba(232,162,60,.14);
  color:rgba(253,244,227,.82);font-size:.85rem;font-weight:500;
}
.pdp-ing i{color:#6b8c6a;font-size:.78rem}

.pdp-fineprint{color:rgba(253,244,227,.4);font-size:.78rem;line-height:1.6;margin-top:1.25rem;max-width:46rem}

/* Nutrition / additional tables */
.pdp-nutri{width:100%;max-width:34rem;border-collapse:collapse;border-radius:1rem;overflow:hidden;background:rgba(255,248,235,.04)}
.pdp-nutri tr{border-bottom:1px solid rgba(232,162,60,.1)}
.pdp-nutri tr:last-child{border-bottom:none}
.pdp-nutri th{text-align:left;padding:.85rem 1.2rem;color:rgba(253,244,227,.85);font-weight:600;font-size:.9rem}
.pdp-nutri td{text-align:right;padding:.85rem 1.2rem;color:#E8A23C;font-weight:700;font-size:.9rem;white-space:nowrap}

/* Allergens */
.pdp-aller-h{font-size:1rem}
.pdp-aller-h i{color:#E8A23C}
.pdp-allergens{display:flex;flex-wrap:wrap;gap:.6rem;max-width:46rem}
.pdp-allergen{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:.75rem;
  font-size:.85rem;font-weight:600;
}
.pdp-allergen.is-contains{background:rgba(196,104,42,.16);border:1px solid rgba(232,162,60,.4);color:#f4c98a}
.pdp-allergen.is-contains i{color:#E8A23C}
.pdp-allergen.is-may{background:rgba(255,248,235,.04);border:1px dashed rgba(232,162,60,.3);color:rgba(253,244,227,.65)}
.pdp-allergen.is-may i{color:rgba(232,162,60,.55)}
.pdp-callout{
  display:flex;gap:.85rem;margin-top:1.75rem;padding:1.1rem 1.25rem;border-radius:1rem;max-width:46rem;
  background:rgba(196,104,42,.07);border:1px solid rgba(232,162,60,.18);
}
.pdp-callout i{color:#E8A23C;margin-top:.15rem;flex-shrink:0}
.pdp-callout p{color:rgba(253,244,227,.6);font-size:.85rem;line-height:1.65;margin:0}

/* ── Related ──────────────────────────────────────────── */
.pdp-related{padding:3rem 1rem}
@media(min-width:640px){.pdp-related{padding:3.5rem 1.5rem}}
.pdp-related-head{margin-bottom:1.75rem}
.pdp-related-head .section-label{margin-bottom:.4rem}
.pdp-related-head h2{color:#FDF4E3;font-weight:700;font-size:clamp(1.5rem,3vw,2rem)}

/* ── Sticky mobile buy bar ────────────────────────────── */
.pdp-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;align-items:center;gap:.85rem;padding:.7rem 1rem;
  background:rgba(18,10,4,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-top:1px solid rgba(232,162,60,.18);
  transform:translateY(110%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
}
.pdp-sticky.is-visible{transform:translateY(0)}
.pdp-sticky-info{display:flex;flex-direction:column;min-width:0;flex:1}
.pdp-sticky-name{color:rgba(253,244,227,.7);font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-sticky-price{color:#E8A23C;font-weight:700;font-size:1.1rem;font-family:'Playfair Display',Georgia,serif;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.pdp-sticky-btn{flex-shrink:0;gap:.5rem;padding:.8rem 1.5rem;border-radius:.8rem;font-weight:700;font-size:.9rem}
@media(min-width:900px){.pdp-sticky{display:none!important}}