/* ═══════════════════════════════════════
   PRODUCT DETAIL — Kerisite Peptide
   ═══════════════════════════════════════ */

/* ── Section 1: Breadcrumb (Light gray) ── */
.pd-top{background:var(--bg);padding:88px 0 20px;border-bottom:1px solid var(--b2)}
.pd-top .breadcrumb{display:flex;align-items:center;gap:6px}
.pd-top .breadcrumb a{font-size:.78rem;color:var(--t3);transition:color .2s;font-weight:500}
.pd-top .breadcrumb a:hover{color:var(--accent)}
.pd-top .breadcrumb span{font-size:.78rem;color:var(--t1);font-weight:600}
.pd-top .breadcrumb svg{width:10px;height:10px;color:var(--t4);flex-shrink:0;opacity:.5}

/* ── Section 2: Product Core (Two-column) ── */
.pd-core{padding:clamp(40px,6vw,72px) 0;background:var(--white)}
.pd-core-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}

/* Gallery — images fill container */
.pd-gallery{position:sticky;top:88px;align-self:start}
.pd-main-img{aspect-ratio:1/1;border-radius:var(--radius);background:var(--gray);overflow:hidden;position:relative;border:1px solid var(--b2)}
.pd-main-img img{width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease)}
.pd-main-img img.fade{opacity:0}
.pd-main-img .p-badges{position:absolute;top:14px;left:14px;display:flex;gap:4px;z-index:2}
.pd-main-img .p-badge{font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;color:#fff;border-radius:100px}
.pd-main-img .p-badge.hot{background:rgba(255,90,60,.85)}
.pd-main-img .p-badge.new{background:rgba(0,212,170,.85);color:var(--hero-1)}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumb{flex:1;aspect-ratio:1/1;border-radius:var(--radius-xs);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .25s var(--ease);background:var(--gray);min-width:0}
.pd-thumb img{width:100%;height:100%;object-fit:cover;transition:filter .3s}
.pd-thumb:hover img{filter:brightness(.92)}
.pd-thumb.active{border-color:var(--accent)}

/* Info Column */
.pd-info{padding-top:4px}
.pd-info-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pd-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.pd-stock{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600}
.pd-stock-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pd-stock.instock .pd-stock-dot{background:#22C55E;box-shadow:0 0 6px rgba(34,197,94,.4)}
.pd-stock.instock{color:#16A34A}
.pd-stock.preorder .pd-stock-dot{background:#F59E0B;box-shadow:0 0 6px rgba(245,158,11,.4)}
.pd-stock.preorder{color:#D97706}
.pd-name{font-weight:700;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.12;letter-spacing:-.03em;color:var(--t1);margin-bottom:8px}
.pd-cas{font-size:.74rem;font-weight:500;color:var(--t4);letter-spacing:.02em;margin-bottom:14px}
.pd-desc{font-size:.96rem;color:var(--t2);line-height:1.8;margin-bottom:20px;max-width:460px}

/* Meta Row */
.pd-meta{display:flex;align-items:center;gap:18px;padding:16px 0;border-top:1px solid var(--b2);border-bottom:1px solid var(--b2);margin-bottom:24px;flex-wrap:wrap}
.pd-meta-item{display:flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--t1)}
.pd-meta-item svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.pd-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--t4);opacity:.4;flex-shrink:0}

/* Size Selector */
.pd-sizes-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin-bottom:10px}
.pd-sizes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.pd-size{font-family:var(--font);font-size:.82rem;font-weight:600;padding:10px 22px;border-radius:100px;border:1.5px solid var(--b1);background:var(--white);color:var(--t3);cursor:pointer;transition:all .25s var(--ease);min-height:42px;display:flex;align-items:center}
.pd-size:hover{border-color:var(--accent);color:var(--accent)}
.pd-size.active{background:var(--accent);color:var(--hero-1);border-color:var(--accent);font-weight:700}

/* CTA Buttons — horizontal row, icons on right */
.pd-ctas{display:flex;gap:12px;margin-bottom:24px}
.pd-ctas .btn{flex:1;justify-content:center;gap:8px}
.pd-ctas .btn svg{width:16px;height:16px;flex-shrink:0;order:1}
.pd-cta-quote svg{background:rgba(255,255,255,.95);stroke:var(--accent);border-radius:50%;width:12px!important;height:12px!important;padding:4px;box-sizing:content-box}
.pd-cta-wa .wa-icon{width:20px!important;height:20px!important;border-radius:50%}

/* Trust Badges (inline) */
.pd-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pd-trust-item{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--accent-soft);border-radius:var(--radius-xs);font-size:.76rem;font-weight:600;color:var(--t2)}
.pd-trust-item svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}

/* ── Section 3: Product Description ── */
.pd-description{padding:var(--sec) 0;background:var(--bg)}
.pd-desc-grid{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,5vw,56px);align-items:start}
.pd-desc-body{margin-top:clamp(20px,3vw,32px)}
.pd-desc-body p{font-size:.94rem;color:var(--t2);line-height:1.85;margin-bottom:18px}
.pd-desc-body h3{font-size:1.05rem;font-weight:700;color:var(--t1);margin:28px 0 10px;letter-spacing:-.01em}
.pd-desc-body h3:first-of-type{margin-top:20px}
.pd-desc-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.pd-side-card{background:var(--white);border:1px solid var(--b2);border-radius:var(--radius);padding:24px}
.pd-side-card h4{font-size:.88rem;font-weight:700;color:var(--t1);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--b2)}
.pd-side-card ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.pd-side-card li{font-size:.84rem;color:var(--t2);line-height:1.5;padding-left:18px;position:relative}
.pd-side-card li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.5}

/* ── Section 4: Specs Tabs ── */
.pd-specs{padding:var(--sec) 0;background:var(--white)}
.pd-tabs-head{display:flex;gap:0;border-bottom:2px solid var(--b2);margin-bottom:clamp(28px,4vw,44px);position:relative}
.pd-tab-btn{font-family:var(--font);font-size:.88rem;font-weight:600;color:var(--t3);padding:14px 28px;background:none;border:none;cursor:pointer;transition:color .2s;position:relative;min-height:48px}
.pd-tab-btn:hover{color:var(--t1)}
.pd-tab-btn.active{color:var(--accent)}
.pd-tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--accent);border-radius:1px}
.pd-tab-panel{display:none}
.pd-tab-panel.active{display:block}

/* Spec Table */
.pd-spec-table{width:100%;border-collapse:collapse;border-radius:var(--radius);overflow:hidden;border:1px solid var(--b2)}
.pd-spec-table tr:nth-child(even){background:var(--white)}
.pd-spec-table tr:nth-child(odd){background:var(--bg)}
.pd-spec-table td{padding:14px 20px;font-size:.88rem;border-bottom:1px solid var(--b2)}
.pd-spec-table td:first-child{color:var(--t3);font-weight:500;width:200px;white-space:nowrap}
.pd-spec-table td:last-child{color:var(--t1);font-weight:600}

/* Doc Cards */
.pd-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pd-doc-card{background:var(--bg);border:1px solid var(--b2);border-radius:var(--radius);padding:24px;text-align:center;transition:all .3s var(--ease)}
.pd-doc-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.pd-doc-icon{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin:0 auto 14px}
.pd-doc-icon svg{width:22px;height:22px;color:var(--accent)}
.pd-doc-card h4{font-size:.92rem;font-weight:600;color:var(--t1);margin-bottom:6px}
.pd-doc-card p{font-size:.78rem;color:var(--t3);margin-bottom:14px}

/* Storage List */
.pd-storage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pd-storage-item{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--bg);border:1px solid var(--b2);border-radius:var(--radius-sm)}
.pd-storage-icon{width:36px;height:36px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center;flex-shrink:0}
.pd-storage-icon svg{width:16px;height:16px;color:var(--accent)}
.pd-storage-item h5{font-size:.82rem;font-weight:600;color:var(--t1);margin-bottom:3px}
.pd-storage-item p{font-size:.78rem;color:var(--t3);line-height:1.55}

/* ── Section 5: Applications ── */
.pd-apps{padding:var(--sec) 0;background:var(--bg)}
.pd-apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(28px,4vw,44px)}
.pd-app-card{padding:28px 24px;background:var(--white);border:1px solid var(--b2);border-radius:var(--radius)}
.pd-app-icon{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:16px}
.pd-app-icon svg{width:20px;height:20px;color:var(--accent)}
.pd-app-card h4{font-size:.92rem;font-weight:600;color:var(--t1);margin-bottom:6px;line-height:1.3}
.pd-app-card p{font-size:.82rem;color:var(--t3);line-height:1.65}

/* ── Section 6: Related Products ── */
.pd-related{padding:var(--sec) 0;background:var(--white)}
.pd-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(28px,4vw,44px)}
.pd-related .p-item{border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--b2);box-shadow:var(--sh-sm);transition:all .4s var(--ease);cursor:pointer;position:relative}
.pd-related .p-link{position:absolute;inset:0;z-index:3}
@media(hover:hover){.pd-related .p-item:hover{box-shadow:var(--sh-lg);transform:translateY(-4px)}}
.pd-related .p-img{aspect-ratio:1/1;overflow:hidden;background:var(--gray);position:relative}
.pd-related .p-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.65);transition:all .6s var(--ease)}
@media(hover:hover){.pd-related .p-item:hover .p-img img{filter:saturate(.85);transform:scale(1.04)}}
.pd-related .p-info{padding:16px 18px}
.pd-related .p-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:5px}
.pd-related .p-name{font-size:.96rem;font-weight:600;color:var(--t1);line-height:1.3;margin-bottom:4px}
.pd-related .p-cas{font-size:.66rem;font-weight:500;color:var(--t4);letter-spacing:.02em;margin-bottom:6px}
.pd-related .p-desc{font-size:.84rem;color:var(--t3);line-height:1.6;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pd-related .p-meta{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--b2)}
.pd-related .p-purity{font-size:.82rem;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:5px}
.pd-related .p-purity svg{width:14px;height:14px;color:var(--accent)}
.pd-related .p-stock{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;margin-left:auto}
.pd-related .p-stock-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pd-related .p-stock.instock .p-stock-dot{background:#22C55E;box-shadow:0 0 6px rgba(34,197,94,.4)}
.pd-related .p-stock.instock{color:#16A34A}


/* ── Section 8: Trust Bar (reuse) ── */
.trust-bar{background:var(--bg);border-top:1px solid var(--b2)}
.trust-bar-in{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);padding:clamp(28px,4vw,44px) 0;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:500;color:var(--t2)}
.trust-item svg{width:20px;height:20px;color:var(--accent);flex-shrink:0}
.trust-item strong{font-weight:700;color:var(--t1)}

/* ═══════════════════════════════════
   QUOTE MODAL
   ═══════════════════════════════════ */
.quote-overlay{position:fixed;inset:0;z-index:500;background:rgba(17,29,46,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:all .3s var(--ease);display:flex;align-items:flex-start;justify-content:center;padding-top:min(10vh,80px);overflow-y:auto}
.quote-overlay.open{opacity:1;visibility:visible}
.quote-modal{width:min(640px,calc(100% - 32px));background:var(--white);border-radius:var(--radius);box-shadow:var(--sh-xl);transform:translateY(-20px) scale(.97);transition:all .35s var(--ease);margin-bottom:40px}
.quote-overlay.open .quote-modal{transform:translateY(0) scale(1)}
.quote-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 28px 20px;border-bottom:1px solid var(--b2)}
.quote-modal-head h3{font-size:1.1rem;font-weight:700;color:var(--t1);margin-bottom:2px}
.quote-modal-head p{font-size:.8rem;color:var(--t3);font-weight:500}
.quote-modal-close{width:36px;height:36px;border-radius:var(--radius-xs);border:1px solid var(--b1);background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--t4);transition:all .2s;flex-shrink:0}
.quote-modal-close:hover{border-color:var(--accent);color:var(--accent)}
.quote-modal-close svg{width:14px;height:14px}
.quote-modal-body{padding:24px 28px 28px}

/* Form Fields */
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.qf-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.qf-row .qf-group{margin-bottom:0}
.qf-label{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.qf-input{font-family:var(--font);font-size:.88rem;padding:11px 14px;border:1.5px solid var(--b1);border-radius:var(--radius-xs);background:var(--white);color:var(--t1);transition:border-color .2s;outline:none}
.qf-input:focus{border-color:var(--accent)}
.qf-input::placeholder{color:var(--t4)}
.qf-textarea{resize:vertical;min-height:72px}

/* Size radio group */
.qf-sizes{display:flex;gap:8px;flex-wrap:wrap}
.qf-size-opt{cursor:pointer}
.qf-size-opt input{display:none}
.qf-size-opt span{display:inline-block;padding:8px 18px;border-radius:100px;border:1.5px solid var(--b1);font-size:.82rem;font-weight:600;color:var(--t3);transition:all .2s}
.qf-size-opt:hover span{border-color:var(--accent);color:var(--accent)}
.qf-size-opt input:checked+span{background:var(--accent);color:var(--hero-1);border-color:var(--accent)}

/* Submit */
.qf-submit{width:100%;justify-content:center;gap:8px;margin-top:4px}
.qf-submit svg{width:16px;height:16px}

/* Success state */
.qf-success{display:none;text-align:center;padding:32px 0 8px}
.qf-success.show{display:block}
.qf-success svg{width:48px;height:48px;color:var(--accent);margin-bottom:12px}
.qf-success p{font-size:1rem;font-weight:600;color:var(--t1)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .pd-apps-grid{grid-template-columns:1fr 1fr}
  .pd-related-grid{grid-template-columns:repeat(3,1fr)}
  .pd-docs{grid-template-columns:1fr 1fr}
  .pd-desc-grid{grid-template-columns:1fr 280px}
}
@media(max-width:900px){
  .pd-core-grid{grid-template-columns:1fr;gap:32px}
  .pd-gallery{position:static}
  .pd-related-grid{grid-template-columns:1fr 1fr}
  .pd-storage{grid-template-columns:1fr}
  .pd-desc-grid{grid-template-columns:1fr}
  .pd-desc-side{position:static;flex-direction:row}
  .pd-desc-side .pd-side-card{flex:1}
}
@media(max-width:640px){
  .pd-top{padding:80px 0 16px}
  .pd-thumbs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
  .pd-thumbs::-webkit-scrollbar{display:none}
  .pd-thumb{min-width:56px}
  .pd-trust{grid-template-columns:1fr}
  .pd-apps-grid{grid-template-columns:1fr}
  .pd-related-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pd-related .p-desc{-webkit-line-clamp:1;font-size:.8rem}
  .pd-related .p-cas{display:none}
  .pd-related .p-info{padding:12px 14px}
  .pd-tab-btn{padding:12px 16px;font-size:.82rem}
  .pd-spec-table td:first-child{width:120px;font-size:.8rem}
  .pd-spec-table td{padding:10px 14px;font-size:.82rem}
  .pd-docs{grid-template-columns:1fr}
  .pd-desc-side{flex-direction:column}
  .trust-bar-in{gap:16px 28px}.trust-item{font-size:.78rem}
  .pd-sizes{gap:6px}.pd-size{padding:8px 16px;font-size:.78rem;min-height:38px}
  .pd-ctas .btn{font-size:.82rem;padding:12px 10px}
  .pd-meta{gap:10px 14px}
  .pd-meta-dot{display:none}
  .qf-row{grid-template-columns:1fr}
  .quote-modal-body{padding:20px 20px 24px}
  .quote-modal-head{padding:20px 20px 16px}
}
@media(max-width:374px){
  .pd-related-grid{grid-template-columns:1fr}
}