/* Signed Up shop: category grids, product pages, configurator, cart drawer. Light world. */

.shop-hero{padding:120px 0 40px}
.shop-hero .h2{margin-bottom:12px}
.breadcrumbs{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light-secondary);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.breadcrumbs a{text-decoration:none}
.breadcrumbs a:hover{color:var(--accent)}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{display:flex;flex-direction:column;background:var(--panel-light);border:1px solid var(--line-light);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform var(--dur) var(--ease-out),border-color var(--dur)}
.pcard:hover{transform:translateY(-4px);border-color:var(--accent-muted)}
.pcard .media{aspect-ratio:4/3;background:#EEE8F2 center/cover no-repeat;overflow:hidden}
.pcard .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.pcard:hover .media img{transform:scale(1.04)}
.pcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{font-size:1.15rem}
.pcard .tag{color:var(--text-light-secondary);font-size:.95rem}
.pcard .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:12px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em}
.pcard .meta strong{color:var(--accent);font-size:.95rem}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}

/* promise strip */
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:36px 0 0}
.promise div{border:1px solid var(--line-light);border-radius:var(--radius-sm);padding:14px 16px;background:var(--panel-light)}
.promise strong{display:block;font-family:var(--font-display);font-size:1rem;margin-bottom:2px}
.promise span{color:var(--text-light-secondary);font-size:.9rem}
@media (max-width:900px){.promise{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.promise{grid-template-columns:1fr}}

/* product page */
.product-top{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.gallery{position:sticky;top:96px}
.gallery .main{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#EEE8F2;border:1px solid var(--line-light)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .thumbs{display:flex;gap:10px;margin-top:10px}
.gallery .thumbs img{width:88px;height:66px;object-fit:cover;border-radius:8px;border:1px solid var(--line-light)}
.product-title .h2{margin:8px 0 6px}
.product-title .tag{font-size:1.1rem;color:var(--text-light-secondary)}
.product-title .intro{margin-top:14px;max-width:56ch}
.inbox{margin:22px 0 0;padding:16px 18px;border-radius:var(--radius-sm);background:var(--accent-muted)}
.inbox h4{margin:0 0 8px;color:var(--accent)}
.inbox ul{margin:0;padding-left:18px;columns:2;gap:24px}
.inbox li{font-size:.95rem;break-inside:avoid}
/* the gallery must stay positioned: its halo glow is absolutely positioned and would otherwise spread over the whole page and swallow taps */
@media (max-width:960px){.product-top{grid-template-columns:1fr}.gallery{position:relative;top:auto}.inbox ul{columns:1}}

/* configurator */
.cfg{margin-top:26px;display:grid;gap:22px}
.cfg-group{display:grid;gap:10px}
.cfg-label{display:flex;align-items:baseline;gap:10px}
.cfg-label span{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light-secondary)}
.cfg-label small{color:var(--text-light-secondary);font-size:.82rem}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--line-light);background:var(--panel-light);text-align:left;transition:border-color .3s,box-shadow .3s,transform .3s}
.pill span{font-weight:500;font-size:.95rem}
.pill em{font-style:normal;font-family:var(--font-mono);font-size:.74rem;color:var(--text-light-secondary)}
.pill:hover{border-color:var(--accent-hover)}
.pill.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.pill.on em{color:var(--accent)}
.check,.radio{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line-light);border-radius:10px;background:var(--panel-light);cursor:pointer}
.check input,.radio input{width:18px;height:18px;accent-color:var(--accent)}
.check span,.radio span{flex:1}
.check em{font-style:normal;font-family:var(--font-mono);font-size:.78rem;color:var(--text-light-secondary)}
.check span small{display:block;font-size:.8rem;color:var(--text-light-secondary);margin-top:2px}
.cfg-note{color:var(--text-light-secondary);margin-top:4px}
.qty-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.qty-row label{font-size:.85rem;color:var(--text-light-secondary)}
.qty-row .qty-input{width:110px;padding:9px 12px}
.file-names:not(:empty){display:block;color:var(--accent);margin-top:4px}
.qty-input,.date-input{width:160px;padding:12px 14px;border:1.5px solid var(--line-light);border-radius:10px;font:inherit;background:var(--panel-light)}
.qty-input:focus,.date-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.file-row{margin-top:4px}
.file-row label{font-size:.85rem;color:var(--text-light-secondary)}
.file-row input{font-size:.9rem;padding:8px 0}
.file-row small{display:block;color:var(--text-light-secondary);font-size:.8rem}
.cfg-price{padding:18px 20px;border-radius:var(--radius);background:var(--panel-light);border:1px solid var(--line-light)}
.cfg-total{display:flex;justify-content:space-between;align-items:baseline}
.cfg-total strong{font-family:var(--font-display);font-size:2rem;color:var(--accent)}
.cfg-breakdown{color:var(--text-light-secondary);font-size:.92rem;margin-top:6px}
.cfg-breakdown em{font-style:normal;color:var(--accent)}
.cfg-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cfg-included{color:var(--text-light-secondary)}

/* product page lower sections */
.pbelow{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:64px}
.specs{width:100%;border-collapse:collapse}
.specs td{padding:10px 0;border-bottom:1px solid var(--line-light);vertical-align:top;font-size:.95rem}
.specs td:first-child{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light-secondary);width:40%;padding-right:12px}
.bestfor{display:flex;flex-wrap:wrap;gap:8px}
.bestfor span{background:var(--accent-muted);color:var(--accent);border-radius:999px;padding:6px 12px;font-size:.88rem}
@media (max-width:900px){.pbelow{grid-template-columns:1fr}}
.related{margin-top:72px}

/* cart */
.cart-btn{position:relative}
.cart-btn [data-cart-count]{position:absolute;top:-6px;right:-8px;min-width:20px;height:20px;border-radius:999px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.cart-veil{position:fixed;inset:0;background:rgba(20,15,26,.5);opacity:0;pointer-events:none;transition:opacity .4s;z-index:150}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--canvas-light);color:var(--text-light-primary);z-index:160;transform:translateX(100%);visibility:hidden;transition:transform .5s var(--ease-out),visibility 0s linear .5s;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(20,15,26,.25)}
body.cart-open .cart-veil{opacity:1;pointer-events:auto}
body.cart-open .cart-drawer{transform:none;visibility:visible;transition:transform .5s var(--ease-out),visibility 0s}
.cart-msg:empty{display:none}
.cart-msg{color:var(--text-light-primary)}
.cart-recap{display:grid;gap:12px;margin-top:14px}
/* the whole drawer scrolls, so the order form is reachable on any screen height */
.cart-drawer{overflow-y:auto;-webkit-overflow-scrolling:touch}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line-light);position:sticky;top:0;background:var(--canvas-light);z-index:1}
.cart-head h3{font-size:1.2rem}
.cart-close{width:40px;height:40px;border-radius:10px;font-size:1.6rem;line-height:1}
.cart-close:hover{background:var(--accent-muted)}
.cart-body{flex:none;padding:16px 22px;display:grid;gap:14px;align-content:start}
@media (max-width:480px){.cart-request .row{grid-template-columns:1fr}}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;padding-bottom:14px;border-bottom:1px solid var(--line-light)}
.cart-line img{width:64px;height:48px;object-fit:cover;border-radius:6px}
.cart-line-right{text-align:right;display:grid;gap:4px}
.cart-foot{flex:none;padding:16px 22px 22px;border-top:1px solid var(--line-light);display:grid;gap:12px}
.cart-total{display:flex;justify-content:space-between;font-size:1.1rem}
.cart-request{display:grid;gap:10px}
.cart-request .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cart-request .field label{color:var(--text-light-secondary)}
.cart-request .field input,.cart-request .field textarea{background:var(--panel-light);border-color:var(--line-light);color:var(--text-light-primary);width:100%}
/* the pickup/ship choices are labels inside a .field, so undo the small-caps field-label look and the full-width input */
.cart-request .field label.radio{font-family:var(--font-body);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--text-light-primary);display:flex;flex-direction:row;align-items:center;gap:12px;margin-top:6px}
.cart-request .field label.radio input{width:18px;height:18px;flex:none;padding:0;margin:0;background:none;border:0}
.cart-request .cfg-label{display:block}
.link{color:var(--accent);text-decoration:underline;background:none}