.pgrid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:start }
.gal-main{ background:linear-gradient(165deg,#ffffff,#d6ecea); border-radius:26px; height:520px;
           display:flex; align-items:center; justify-content:center; border:1px solid var(--line) }
.gal-main img{ max-height:82%; filter:drop-shadow(0 30px 40px rgba(14,60,52,.25)) }
.thumbs{ display:flex; gap:12px; margin-top:14px }
.thumb{ width:82px; height:82px; border-radius:14px; background:linear-gradient(165deg,#ffffff,#e2f1ee);
        border:1.5px solid rgba(14,117,104,.2); cursor:pointer; display:flex; align-items:center; justify-content:center }
.thumb.on{ border-color:var(--teal) }
.thumb img{ max-height:72% }
.buy .stars{ font-size:15px }
.opts{ display:flex; flex-direction:column; gap:12px; margin:26px 0 }
.badge{ display:inline-block; background:rgba(14,117,104,.12); color:var(--teal); font-size:11px; font-weight:700;
        letter-spacing:.08em; text-transform:uppercase; border-radius:100px; padding:4px 12px; margin-left:8px }
.incl{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px }
.incl .card{ padding:16px 16px 20px; text-align:center }
.incl img{ height:130px; object-fit:contain }
.incl .nm{ font-weight:700; font-size:14px; margin-top:10px }
.incl .wh{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--teal); margin-top:3px }
.chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.chip2{ display:flex; gap:14px; align-items:center; padding:18px 20px }
.chip2 img{ width:34px; height:34px }
.chip2 .t{ font-size:14px; font-weight:600; line-height:1.4 }
@media (max-width:980px){
  .pgrid{ grid-template-columns:minmax(0,1fr); gap:34px }
  .gal-main{ height:380px }
  .thumbs{ flex-wrap:wrap }
  .incl{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .chips{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .thumb{ width:58px; height:58px; border-radius:11px }
}
.addbtn{ display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .15s ease, background .2s ease }
.addbtn .ab-ring{ width:18px; height:18px; opacity:0; transition:opacity .2s }
.addbtn .ab-ring circle{ stroke-dasharray:56.5; stroke-dashoffset:56.5 }
.addbtn.adding{ transform:scale(.98) }
.addbtn.adding .ab-ring{ opacity:1 }
.addbtn.adding .ab-ring circle{ stroke-dashoffset:0; transition:stroke-dashoffset .5s ease }
.shipline{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-top:14px }
.shipline b{ color:var(--teal) }
.shipline .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); animation:shipPulse 2.2s ease-in-out infinite }
@keyframes shipPulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(242,248,247,.95);
         border-top:1px solid var(--line); transform:translateY(110%); transition:transform .35s cubic-bezier(.22,.8,.3,1) }
.buybar.on{ transform:none }
.buybar-in{ display:flex; align-items:center; gap:18px; padding-top:12px; padding-bottom:12px }
.buybar .nm{ font-weight:700; font-size:14.5px }
.buybar .pr{ font-family:'Instrument Serif',serif; font-size:22px; color:var(--teal); margin-left:auto }
.buybar .pill{ padding:12px 26px; font-size:13.5px }
.fine-list{ padding:30px 34px }
.fine-list .fl{ display:flex; gap:12px; align-items:baseline; font-size:14px; line-height:1.6; color:#3d4f4b;
                padding:9px 0; border-bottom:1px solid rgba(14,117,104,.12) }
.fine-list .fl:last-child{ border-bottom:none }
.fine-list .fl span{ color:var(--teal); font-weight:700 }
.drawer-ov{ position:fixed; inset:0; z-index:110; background:rgba(7,13,12,.5); opacity:0; pointer-events:none; transition:opacity .3s ease }
.drawer-ov.on{ opacity:1; pointer-events:auto }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:120; width:min(420px,92vw); background:var(--paper-hi);
         border-left:1px solid var(--line); box-shadow:-20px 0 60px rgba(14,60,52,.15);
         transform:translateX(105%); transition:transform .4s cubic-bezier(.22,.8,.3,1);
         display:flex; flex-direction:column; padding:26px 28px }
.drawer.on{ transform:none }
.drawer .dh{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px }
.drawer .dh .t{ font-weight:700; font-size:16px }
.drawer .dx{ background:none; border:none; font-size:26px; color:var(--muted); cursor:pointer; line-height:1; padding:4px }
.drawer .item{ display:flex; gap:16px; align-items:center; padding:18px; background:rgba(255,255,255,.7);
               border:1px solid var(--line); border-radius:18px }
.drawer .th{ flex:none; width:76px; height:76px; border-radius:14px; background:linear-gradient(165deg,#ffffff,#e2f1ee);
             display:flex; align-items:center; justify-content:center }
.drawer .th img{ max-height:82% }
.drawer .nm{ font-weight:700; font-size:14.5px }
.drawer .pl{ font-size:12.5px; color:var(--muted); margin-top:3px }
.drawer .pr{ font-family:'Instrument Serif',serif; font-size:21px; color:var(--teal); margin-left:auto }
.drawer .ship{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--muted); margin:16px 2px }
.drawer .ship b{ color:var(--teal) }
.drawer .foot{ margin-top:auto }
.drawer .srow{ display:flex; justify-content:space-between; font-size:14.5px; padding:8px 0; color:#3d4f4b }
.drawer .srow.total{ border-top:1px solid rgba(14,117,104,.25); padding-top:14px; font-weight:700; color:var(--ink); font-size:16px }

.dqty{ display:none; align-items:center; justify-content:space-between; margin:0 2px 6px; font-size:14px; color:#3d4f4b }