/* ---------- breadcrumbs ---------- */
.crumbs{border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-mute)}
.crumbs .container{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:11px}
.crumbs a{color:var(--link)}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:#bbb}
.crumbs .shop-more{margin-inline-start:auto;font-weight:600}

/* ---------- product head ---------- */
.pdp{padding-block:22px 10px}
.pdp__title{font-size:clamp(1.25rem,2.3vw,1.65rem);font-weight:700;line-height:1.3;color:var(--navy);margin-bottom:12px}
.pdp__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;font-size:13.5px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}
.pdp__meta dt{color:var(--ink-mute);display:inline}
.pdp__meta dd{display:inline;margin:0;font-weight:700;color:var(--navy)}
.pdp__meta a{color:var(--link);font-weight:600}
.pdp__meta a:hover{text-decoration:underline}
.pdp__rev{display:flex;align-items:center;gap:7px}

/* ---------- layout ---------- */
.pdp__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:34px;align-items:start}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;position:relative}
.gal__flag{position:absolute;top:0;right:0;z-index:3;background:var(--accent);color:#fff;font-weight:700;font-size:14px;padding:5px 12px;border-radius:3px}
.gal__thumbs{display:flex;flex-direction:column;gap:9px}
.gal__thumb{width:74px;height:74px;border:1px solid var(--line);border-radius:3px;background:var(--surface-alt);display:grid;place-items:center;font-family:var(--font-display);font-size:15px;color:#b9c4d8;text-align:center;line-height:1;padding:4px}
.gal__thumb[aria-current="true"]{border-color:var(--navy);border-width:2px}
.gal__thumb:hover{border-color:var(--accent)}
.gal__main{aspect-ratio:1;border:1px solid var(--line);border-radius:4px;background:var(--surface-alt);display:grid;place-items:center;text-align:center;padding:24px}
.gal__main span{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.4rem);color:#b9c4d8;text-transform:uppercase;line-height:1.05}

/* ---------- buy box ---------- */
.buy{border:1px solid var(--line);border-radius:6px;padding:18px}
.buy__drop{display:inline-block;font-size:12px;font-weight:700;color:var(--success);background:var(--success-bg);border-radius:999px;padding:3px 11px;margin-bottom:9px}
.buy__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.buy__now{font-size:32px;font-weight:700;color:var(--ink);line-height:1}
.buy__was{font-size:15px;color:var(--ink-mute);text-decoration:line-through}
.buy__unit{font-size:13px;color:var(--ink-mute)}
.buy__row{display:flex;gap:10px;margin:16px 0 12px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;flex:0 0 auto}
.qty button{width:38px;height:46px;font-size:19px;color:var(--navy);background:var(--surface-alt)}
.qty button:hover{background:var(--navy);color:#fff}
.qty input{width:50px;height:46px;border:0;text-align:center;font-size:16px;font-weight:700;color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.btn-cart{flex:1;background:var(--accent);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:15px;border-radius:var(--radius);min-height:46px}
.btn-cart:hover{background:#d63700}
.buy__eta{font-size:13px;color:var(--ink);margin-bottom:12px}
.buy__eta b{color:var(--navy)}
.autoship{border:1px solid var(--line);border-radius:4px;padding:12px 14px;margin-bottom:12px;background:#f7faff}
.autoship p{font-size:12.5px;color:var(--ink);margin-bottom:9px}
.autoship a{color:var(--link);font-weight:600}
.buyopt{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:6px 0}
.buyopt b{font-size:16px}
.buyopt span{color:var(--ink-mute)}
.buy__facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.instock{color:var(--success);font-weight:700}
.buy__links{display:flex;gap:16px;font-size:13px;margin-top:10px}
.buy__links button{color:var(--link);font-weight:600}
.buy__links button:hover{text-decoration:underline}
.quote{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px dashed var(--line);border-radius:4px;padding:10px 13px;margin-top:12px;font-size:13.5px}
.quote a{color:var(--link);font-weight:700}

/* ---------- signin banner ---------- */
.signin{background:var(--navy);color:#fff;border-radius:6px;padding:16px 18px;margin-top:14px;text-align:center}
.signin h3{font-family:var(--font-display);font-size:23px;text-transform:uppercase;line-height:1.05}
.signin h3 em{font-style:normal;color:var(--accent)}
.signin p{font-size:12.5px;color:#cfdcf5;margin:4px 0 10px}
.signin a{display:inline-block;background:var(--accent);color:#fff;font-weight:700;text-transform:uppercase;font-size:13px;padding:9px 20px;border-radius:var(--radius)}

/* ---------- trust badges ---------- */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
.trust div{border:1px solid var(--line);border-radius:4px;padding:9px 5px;text-align:center;font-size:11px;font-weight:700;color:var(--navy);line-height:1.25}
.trust i{display:block;font-style:normal;font-size:17px;margin-bottom:3px}

/* ---------- details bullets ---------- */
.details{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.details h3{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px}
.details li{position:relative;padding-inline-start:17px;font-size:13.5px;margin-bottom:6px;line-height:1.5}
.details li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- section tabs ---------- */
.ptabs{position:sticky;top:0;z-index:30;background:#fff;border-block:1px solid var(--line);margin-top:26px}
.ptabs .container{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ptabs .container::-webkit-scrollbar{display:none}
.ptabs a{padding:13px 15px;font-size:14px;font-weight:600;color:var(--ink-mute);white-space:nowrap;border-bottom:3px solid transparent}
.ptabs a:hover{color:var(--navy)}
.ptabs a.is-on{color:var(--navy);border-bottom-color:var(--accent)}

/* ---------- spec table ---------- */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 40px}
.specs div{display:grid;grid-template-columns:minmax(140px,42%) 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.specs dt{color:var(--ink-mute)}
.specs dd{margin:0;font-weight:600;color:var(--ink)}

/* ---------- q and a ---------- */
.qa__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.qa__ask{background:var(--navy);color:#fff;font-weight:700;text-transform:uppercase;font-size:13px;padding:10px 18px;border-radius:var(--radius)}
.qa__ask:hover{background:var(--accent)}
.qa li{border-bottom:1px solid var(--line);padding:13px 0}
.qa__q{font-weight:700;font-size:14.5px;color:var(--navy);margin-bottom:5px}
.qa__q b{color:var(--accent);margin-inline-end:6px}
.qa__a{font-size:13.5px;color:var(--ink);padding-inline-start:18px}
.qa__a b{color:var(--success);margin-inline-end:6px}

/* ---------- reviews ---------- */
.rev{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:34px;align-items:start}
.rev__score{text-align:center;border:1px solid var(--line);border-radius:6px;padding:18px}
.rev__num{font-family:var(--font-display);font-size:58px;line-height:1;color:var(--navy)}
.rev__out{font-size:13px;color:var(--ink-mute);margin-bottom:6px}
.rev__bars{margin-top:14px;text-align:start}
.rev__bar{display:grid;grid-template-columns:44px 1fr 48px;align-items:center;gap:9px;font-size:12px;color:var(--ink-mute);margin-bottom:6px}
.rev__track{height:8px;background:var(--surface-alt);border-radius:999px;overflow:hidden}
.rev__fill{height:100%;background:#f5a623}
.rev__write{display:block;margin-top:14px;background:var(--navy);color:#fff;font-weight:700;text-transform:uppercase;font-size:13px;padding:10px;border-radius:var(--radius)}
.rev__write:hover{background:var(--accent)}
.rev__item{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.rev__who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;margin-bottom:5px}
.rev__who b{color:var(--navy);font-size:14px}
.rev__who time{color:var(--ink-mute)}
.rev__item p{font-size:13.5px;line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .pdp__grid{grid-template-columns:1fr;gap:26px}
  .rev{grid-template-columns:1fr;gap:22px}
}
@media (max-width:640px){
  .gal{grid-template-columns:1fr}
  .gal__thumbs{flex-direction:row;overflow-x:auto;order:2}
  .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .specs div{grid-template-columns:1fr;gap:2px}
  .crumbs .shop-more{margin-inline-start:0;flex-basis:100%}
}