/* Dab Sloth 2.0 — shop page furniture built on the design tokens (site.css holds the design system itself). */ @layer components { /* Product page */ .site-product{border-bottom:var(--border) solid var(--ink);padding:36px 0 88px} .site-crumbs{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 32px;padding:0;list-style:none} .site-crumbs li{display:flex;gap:10px;align-items:center} .site-crumbs li+li::before{content:"/"} .site-crumbs a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} .site-crumbs a:hover{text-decoration-thickness:4px} .site-crumbs a:focus-visible{outline:3px solid var(--aqua);outline-offset:3px} .site-product__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:start} .site-product__media{position:sticky;top:24px;padding:0 8px 10px 0} .site-product__thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:26px} .site-product__thumb{all:unset;box-sizing:border-box;cursor:pointer;display:block;border:var(--border-thin) solid var(--ink);box-shadow:var(--shadow-hard-sm);transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap)} .site-product__thumb:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .site-product__thumb[aria-pressed="true"]{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);border-color:var(--ink);outline:3px solid var(--pink);outline-offset:0} .site-product__thumb:focus-visible{outline:4px solid var(--aqua);outline-offset:4px} .site-product__title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(2.75rem,5.6vw,5.25rem);line-height:.9;margin:18px 0 16px;text-wrap:balance} .site-product__lead{margin:0 0 24px;max-width:44ch;font-size:var(--fs-body-lg);line-height:1.45;font-weight:500;text-wrap:pretty} .site-product__price{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 30px} .site-product__price s{font-weight:700;font-size:var(--fs-body-lg);color:var(--text-muted);text-decoration-thickness:2px} .site-product__field{display:grid;gap:10px;margin:0 0 22px} .site-product__options{display:flex;gap:12px;flex-wrap:wrap} .site-product__qty{justify-self:start;border-width:var(--border);box-shadow:var(--shadow-hard-sm)} .site-product__qty button{width:48px;height:48px} .site-product__qty button:disabled{cursor:not-allowed;opacity:.4} .site-product__qty button:disabled:hover{background:none} .site-product__qty output{min-width:52px;font-size:24px;line-height:48px;border-left-width:var(--border);border-right-width:var(--border)} .site-product__info .site-form__note{margin-top:22px;font-weight:500} .site-product__details{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:start} .site-product__details .ds-limited-drop__title{margin-bottom:24px} .site-product__details .ds-info{margin:0} .site-product__details .site-tag-list{margin:0} .site-product__copy p{font-size:var(--fs-body-lg);line-height:1.5;margin:0 0 18px;max-width:52ch;text-wrap:pretty} .site-product__copy p:last-child{margin-bottom:0} /* Home hero gallery on phones: the design overlaps the three cards; give each one room instead. */ @media (max-width:767px){ .ds-gallery{gap:22px 16px;padding:4px 8px 14px 2px;align-items:start} .ds-gallery__item--main{transform:rotate(-1deg)} .ds-gallery__item--photo{margin-top:0;transform:rotate(-2deg)} .ds-gallery__item--a{margin-top:0;transform:rotate(2deg)} .ds-gallery__shape{display:none} } /* About hero collage on phones: same treatment, a full-width card with two beneath it. */ @media (max-width:767px){ .site-collage{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 16px;align-items:start;padding:4px 8px 14px 2px} .site-collage__card,.site-collage__card:nth-child(n){position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto} .site-collage__card:nth-child(1){grid-column:1/-1;transform:rotate(-1deg)} .site-collage__card:nth-child(2){transform:rotate(-2deg)} .site-collage__card:nth-child(3){transform:rotate(2deg)} .site-collage__shape{display:none} } /* Dropdowns: Safari draws its own glossy control unless told not to. Flat fill plus our own arrow, everywhere. */ .ds-select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23080808' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 8px} .site-form .ds-select{height:62px;padding:0 44px 0 18px;border-width:var(--border);box-shadow:var(--shadow-hard);font-size:17px;font-weight:700;background-position:right 18px center;background-size:14px 9px} .site-form .ds-select:focus-visible{outline:4px solid var(--aqua);outline-offset:4px} /* Next-drop countdown: four tiles (days, hours, minutes, seconds). */ .ds-countdown--four .ds-countdown__tile{max-width:112px} @media (max-width:767px){.ds-countdown--four{gap:8px}.ds-countdown--four .ds-countdown__num{font-size:30px}.ds-countdown--four .ds-eyebrow{font-size:11px}} /* Cart: drawer extras and the full cart page */ .ds-line__name a{color:inherit;text-decoration:none} .ds-line__name a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} .ds-line__name a:focus-visible{outline:3px solid var(--aqua);outline-offset:2px} .ds-stepper button:disabled{cursor:not-allowed;opacity:.35} .ds-stepper button:disabled:hover{background:none} .ds-textbtn:disabled{cursor:not-allowed;opacity:.5} /* Links styled as block buttons: anchors are content-box, unlike