/* Layout that belongs to one page only. Anything reused across pages lives in components.css. */

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.pdp-media{aspect-ratio:4/3;position:sticky;top:calc(var(--hdr-h) + 24px)}
.pdp-info h1{font-size:clamp(2rem,3.6vw,3rem);font-weight:400;letter-spacing:-.015em;margin-top:.2rem}
.pdp-info .price{display:block;margin:.9rem 0 1.2rem;font-size:2.2rem}
.note{background:var(--gallery);padding:.9rem 1.1rem;border-left:3px solid var(--brass);font-size:.92rem;margin-bottom:1.2rem}
.spec-t{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 1.2rem}
.spec-t th{text-align:left;font-weight:500;color:var(--mut);padding:.6rem 1rem .6rem 0;width:38%;vertical-align:top}
.spec-t td{padding:.6rem 0;font-weight:600}
.spec-t tr{border-top:1px solid var(--line)}
.spec-t tr:last-child{border-bottom:1px solid var(--line)}
.pdp-info .bat{margin-bottom:.9rem}
.pdp-info .war{margin-bottom:1.4rem}
.pdp-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.pdp-actions .btn{flex:1 1 160px}
.incl{font-size:.88rem;color:var(--mut);margin-top:1.1rem}
@media (max-width:900px){.pdp{grid-template-columns:1fr}.pdp-media{position:relative;top:0}}
.tested{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-d)}
.tested li{display:flex;gap:.9rem;align-items:flex-start;padding:1.3rem 1.2rem 1.3rem 0;border-bottom:1px solid var(--line-d)}
.tested svg{width:24px;height:24px;flex:none;color:var(--brass);margin-top:.15rem}
.tested b{display:block;font-weight:600}
.tested span{color:var(--ivory-2);font-size:.92rem}
@media (max-width:860px){.tested{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tested{grid-template-columns:1fr}}
.notfound{text-align:center;padding:clamp(3rem,8vw,6rem) 0}
.notfound h1{font-size:clamp(2rem,4vw,3rem);font-weight:400;margin-bottom:1rem}
.notfound p{color:var(--mut);margin-bottom:1.6rem}

/* ---------- cart page ---------- */
.cart-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.cart-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cart-item{display:grid;grid-template-columns:132px 1fr auto;gap:1.2rem;align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.cart-item .ph{width:132px;aspect-ratio:4/3}
.cart-item h3{font-size:1.3rem}
.cart-item h3 a{text-decoration:none}
.cart-item h3 a:hover{text-decoration:underline}
.cart-item p{font-size:.88rem;color:var(--mut);margin-top:.2rem}
.cart-item .price{font-size:1.4rem;text-align:right;color:var(--ink);margin:0}
.rm{background:none;border:0;color:#9b2c22;font-weight:600;font-size:.84rem;text-decoration:underline;padding:.5rem 0 0;display:block;margin-left:auto}
.summary{background:var(--gallery);border-top:3px solid var(--brass);padding:1.8rem;position:sticky;top:calc(var(--hdr-h) + 24px)}
.summary h2{font-size:1.6rem;font-weight:500;margin-bottom:1.2rem}
.summary dl{margin:0 0 1.3rem;display:grid;gap:.6rem}
.summary dl div{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem}
.summary dl .total{border-top:1px solid var(--line);padding-top:.9rem;font-weight:600;font-size:1.1rem}
.summary dl .total dd{font-family:var(--f-display);font-size:1.5rem}
.summary dd{margin:0}
.summary .btn{width:100%}
.summary small{display:block;margin-top:.9rem;color:var(--mut);font-size:.82rem}
@media (max-width:900px){.cart-grid{grid-template-columns:1fr}.summary{position:static}}
@media (max-width:520px){.cart-item{grid-template-columns:96px 1fr}.cart-item .ph{width:96px}.cart-item .price-col{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.rm{margin:0;padding:0}}

/* ---------- sell page ---------- */
.trade-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.trade-grid h2{font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:400;letter-spacing:-.02em}
.trade-grid .lead{margin-top:1.1rem;color:var(--ivory-2);font-size:1.08rem;max-width:32rem}
.steps3{list-style:none;padding:0;margin:2.2rem 0 0;counter-reset:t}
.steps3 li{counter-increment:t;display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start;padding:1.1rem 0;border-top:1px solid var(--line-d)}
.steps3 li::before{content:counter(t);font:400 1.8rem/1 var(--f-display);color:var(--brass)}
.steps3 b{display:block;font-size:1.05rem;font-weight:600}
.steps3 span{color:var(--ivory-2);font-size:.95rem}
@media (max-width:860px){.trade-grid{grid-template-columns:1fr}}

/* ---------- support page ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.info-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brass);padding:1.8rem}
.info-card h3{font-size:1.5rem;margin-bottom:.7rem}
.info-card p{color:var(--mut)}
.info-card p+p{margin-top:.7rem}
@media (max-width:860px){.info-grid{grid-template-columns:1fr}}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact address{font-style:normal;display:grid;gap:.5rem;font-size:1.02rem}
.contact a{color:var(--brand);font-weight:600}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

/* ---------- WhatsApp on product page ---------- */
.pdp-actions .wa-wide{flex:1 1 100%}
.share{margin-top:.9rem;font-size:.9rem}
.share a{color:var(--brand);font-weight:600;text-underline-offset:3px}