/* ═══════════════════════════════════════════════════ Product pages (/product/) — loaded after styles.css, only on those pages. Built from the site's existing pieces: .btn, .size, .qv-facts, .prod cards, .head, .section.light and its table, so nothing here restyles another page. ═══════════════════════════════════════════════════ */ .pdp{padding-top:clamp(1.1rem,2.5vw,2rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)} /* breadcrumb */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:1.5rem; font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim)} .crumbs a:hover{color:var(--chalk)} .crumbs [aria-current]{color:var(--chalk)} .crumbs span[aria-hidden]{opacity:.5} /* two columns: photo left, details right */ .pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,4.5rem);align-items:start} @media(max-width:860px){.pdp-grid{grid-template-columns:1fr;gap:1.75rem}} .pdp-gallery{position:sticky;top:88px} @media(max-width:860px){.pdp-gallery{position:static}} /* the photo tile: a styled placeholder (same look as the shop cards) until a photo exists */ .pdp-photo{position:relative;aspect-ratio:4/5;overflow:hidden; background:linear-gradient(150deg,var(--wool-2),var(--wool) 60%,#0A0D12)} .pdp-photo::after{content:attr(data-slot);position:absolute;left:1.1rem;bottom:1.1rem; font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;color:rgba(230,227,218,.34)} .pdp-photo.has-img::after{display:none} /* on phones, an EMPTY placeholder is a short banner, not a full screen of nothing, so the price, sizes and Add to slip are within a scroll. A real photo keeps its full 4:5 frame. */ @media(max-width:860px){.pdp-photo:not(.has-img){aspect-ratio:16/9}} .pdp-photo img{width:100%;height:100%;object-fit:cover;display:block} .pdp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.5rem} .pdp-thumb{aspect-ratio:1;padding:0;border:1px solid transparent;background:none;cursor:pointer;overflow:hidden} .pdp-thumb[aria-current="true"]{border-color:var(--accent)} .pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block} /* details column */ .pdp-info .eyebrow{margin-bottom:.45rem} .pdp-info h1{font-size:clamp(2.1rem,4.2vw,3.2rem);margin:0 0 .75rem} .pdp-type{font-style:italic;color:var(--accent)} .pdp-price{display:flex;align-items:baseline;gap:.9rem;margin:0 0 .35rem;font-family:var(--display);font-size:1.9rem} .pdp-price small{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim)} .pdp-info .rating-row{margin:.35rem 0 .2rem} .pdp-stock{margin:.4rem 0 1rem;min-height:1.1em;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase} .pdp-stock.low{color:var(--accent)} .pdp-stock.ok{color:#7FA98B} .pdp-fabric{margin:0 0 1rem;color:#B7BCC7;font-size:1.0625rem} .pdp-info .qv-facts{margin-bottom:1.5rem} .pdp-sizehead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem} .pdp-sizehead .mono{color:var(--chalk-dim)} .pdp-sizelink{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase; color:var(--chalk);text-decoration:underline;text-underline-offset:.3em} .pdp-sizelink:hover{color:var(--accent)} .pdp-info .sizes{margin-top:0;margin-bottom:1.25rem} .pdp-info .size{width:3rem;height:3rem;font-size:.875rem} @media(max-width:480px){.pdp-info .size{width:auto;height:3rem}} /* when "Add to slip" is tapped with no size chosen, the sizes shake a little */ .pdp-nudge{animation:pdpNudge .45s ease} @keyframes pdpNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .pdp-actions{display:grid;gap:.6rem;margin-bottom:1.25rem} .pdp-actions .btn{width:100%;padding-block:1rem} .pdp-actions .btn.done{background:#4C7A5C;border-color:#4C7A5C} .pdp-trust{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;list-style:none;margin:0 0 .9rem;padding:1rem 0 0; border-top:var(--hair);font-family:var(--mono);font-size:.625rem;letter-spacing:.12em; text-transform:uppercase;color:var(--chalk-dim)} .pdp-trust li::before{content:"✓";color:var(--accent);margin-right:.45rem} .pdp-check{background:none;border:0;padding:.4rem 0;cursor:pointer;color:var(--chalk);font:inherit; font-size:.8125rem;text-decoration:underline;text-underline-offset:.3em} .pdp-check:hover{color:var(--accent)} /* size guide (.section.light): the row for the chosen size lights up */ #pdpSizeTable tbody tr.is-picked td{background:rgba(193,92,44,.14);font-weight:500} #pdpSizeTable tbody tr{transition:background .2s} /* delivery / exchange / payment cards */ .pdp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} @media(max-width:860px){.pdp-cards{grid-template-columns:1fr}} .pdp-card{border:var(--hair);background:var(--wool);padding:1.4rem 1.4rem 1.2rem} .pdp-card h3{font-size:1.25rem;margin:0 0 .6rem} .pdp-card p{margin:0 0 .9rem;color:#B7BCC7;font-size:.9375rem;line-height:1.6} .pdp-card b{color:var(--chalk);font-weight:500} .pdp-card a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase; color:var(--chalk);text-decoration:underline;text-underline-offset:.3em} .pdp-card a:hover{color:var(--accent)} .pdp-policy{border-top:var(--hair)} .pdp-reviews-wrap{border-top:var(--hair)} .pdp-reviews-wrap[hidden]{display:none} .pdp-more{border-top:var(--hair)} .pdp-all{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase; color:var(--chalk);text-decoration:underline;text-underline-offset:.3em} .pdp-all:hover{color:var(--accent)} /* Share: a round icon laid over the top-right corner of the product photo */ .pdp-media{position:relative} .pdp-share{position:absolute;top:.85rem;right:.85rem;z-index:2;width:44px;height:44px;padding:0;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer;color:#F3F0E8; border:1px solid rgba(243,240,232,.38);background:rgba(18,22,29,.55); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .2s,color .2s,border-color .2s,transform .2s} .pdp-share svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .pdp-share svg circle{fill:currentColor;stroke:none} .pdp-share:hover{background:#F3F0E8;color:#12161D;border-color:#F3F0E8} .pdp-share:active{transform:scale(.94)} .pdp-share:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Complete the look */ .pdp-complete{margin-top:1.75rem;padding-top:1.5rem;border-top:var(--hair)} .pdp-complete h2{font-size:1.5rem;margin:0 0 .25rem} .pdp-complete-sub{margin:0 0 1rem;color:var(--chalk-dim);font-size:.9375rem} .pdp-complete-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem} @media(max-width:560px){ /* a swipe row, so three cards never get squeezed unreadably small */ .pdp-complete-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.7rem;margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none} .pdp-complete-grid::-webkit-scrollbar{display:none} .pdp-cx{flex:0 0 44%;scroll-snap-align:start} } .pdp-cx{display:flex;flex-direction:column;gap:.2rem;color:var(--chalk);position:relative} .pdp-cx-img{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;margin-bottom:.4rem; background:linear-gradient(150deg,var(--wool-2),var(--wool) 60%,#0A0D12);border:var(--hair);transition:border-color .2s} .pdp-cx-img img{width:100%;height:100%;object-fit:cover;display:block} .pdp-cx:hover .pdp-cx-img{border-color:var(--accent)} .pdp-cx-coll{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim)} .pdp-cx-name{font-family:var(--display);font-size:1.05rem;line-height:1.15} .pdp-cx-price{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:#B7BCC7} .pdp-cx.is-out{opacity:.5} .pdp-cx.is-out .pdp-cx-price::after{content:" · sold out"} .pdp-pack{margin:1rem 0 0;padding:.9rem 1rem;border:1px dashed rgba(193,92,44,.55);background:rgba(193,92,44,.06); color:#D4D8E0;font-size:.9375rem;line-height:1.55} .pdp-pack b{color:var(--chalk);font-weight:500} /* archived product (assets/product.js showUnavailable): the page keeps its title and says the item is gone */ .pdp.is-gone .pdp-gallery{opacity:.45;pointer-events:none} .pdp-gone-tag{display:inline-block;margin:.2rem 0 .9rem;padding:.3rem .65rem;border:1px solid var(--accent);color:var(--accent); font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase} .pdp-gone-msg{max-width:46ch;margin:0 0 1.4rem;color:var(--chalk-dim)} .pdp-gone-actions{display:flex;gap:.7rem;flex-wrap:wrap} /* "More details" from the admin (fit, composition, occasion, care, own rows): a quiet label/value list under the facts */ .pdp-details-wrap{margin:0 0 1.5rem} .pdp-details-wrap[hidden]{display:none} .pdp-details-h{margin:0 0 .5rem;color:var(--chalk-dim)} .pdp-details{margin:0;border-top:var(--hair)} .pdp-details div{display:flex;justify-content:space-between;gap:1.25rem;padding:.7rem 0;border-bottom:var(--hair);font-size:.9375rem} .pdp-details dt{flex:none;margin:0;color:var(--chalk-dim)} .pdp-details dd{margin:0;text-align:right;min-width:0;overflow-wrap:anywhere;color:var(--chalk);font-weight:400} /* the live template (product/_item.html, assets/product.js template mode): hidden until it has been filled from the shop data, so the empty placeholder never flashes; the