/* Women's: a fabric swatch book on plum wool (the berry of the women's fleece). Each pinked sample is a close crop of a piece
   we carry in that fabric; desktop fans the samples out of the book's spine into a row, a phone scrolls them as a rail.
   Mobile first; tokens, .rail, .h2, .lede and data-reveal from main.css. */

.swatches { --cg: 16px; --tooth: 6px; --plum: #4a1640; position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: var(--pad) 0; background: radial-gradient(circle at 86% 0%, rgba(255, 214, 236, .26), transparent 42%), radial-gradient(circle at 0% 100%, rgba(20, 0, 16, .35), transparent 55%), linear-gradient(150deg, #3a1031 0%, #66214f 50%, #8f3468 100%); }
/* the ground's own weave: a fine wool twill, still */
.swatches__weave { position: absolute; inset: 0; z-index: -1; opacity: .9; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .07) 0 1.5px, transparent 1.5px 5px); }
.swatches__head { display: grid; justify-items: center; text-align: center; margin-inline: auto; margin-bottom: 26px; }
.swatches .h2 { text-shadow: 0 4px 24px rgba(0, 0, 0, .25); }
.swatches .lede { color: #fff; }

/* The list: one column per sample, four rows shared by subgrid (sample, text, piece, button) so the buttons line up */
.swatches__list { grid-auto-columns: 76%; grid-template-rows: repeat(4, auto); gap: 14px var(--cg); list-style: none; margin: 0; padding: 6px 2px 10px; }
.swatch { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; align-content: start; }

/* The sample: the cloth, pinked on all four sides by four intersecting conic masks, with its name on a sewn label */
.swatch__sample { position: relative; display: grid; transform-origin: 0 50%; }
.swatch__cloth { display: block; filter: drop-shadow(0 14px 14px rgba(25, 0, 20, .45)) drop-shadow(0 2px 2px rgba(25, 0, 20, .3)); transition: transform var(--slow) var(--ease); }
.swatch__cut { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #2a0c24;
	-webkit-mask: conic-gradient(from 135deg at 50% 0, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / calc(2 * var(--tooth)) 100% round, conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) 0 100% / calc(2 * var(--tooth)) 100% round, conic-gradient(from 45deg at 0 50%, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / 100% calc(2 * var(--tooth)) round, conic-gradient(from 225deg at 100% 50%, #0000, #000 1deg 89deg, #0000 90deg) 100% 0 / 100% calc(2 * var(--tooth)) round;
	-webkit-mask-composite: source-in;
	mask: conic-gradient(from 135deg at 50% 0, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / calc(2 * var(--tooth)) 100% round, conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) 0 100% / calc(2 * var(--tooth)) 100% round, conic-gradient(from 45deg at 0 50%, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / 100% calc(2 * var(--tooth)) round, conic-gradient(from 225deg at 100% 50%, #0000, #000 1deg 89deg, #0000 90deg) 100% 0 / 100% calc(2 * var(--tooth)) round;
	mask-composite: intersect; }
.swatch__cut img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swatch__cut img.is-zoom { transform: scale(2.6); } /* no crop made yet: the shop photo, zoomed into the garment */
.swatch__cut::after { content: ""; position: absolute; inset: 0; background: linear-gradient(128deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 30%, transparent 52%, rgba(20, 0, 16, .22) 100%); pointer-events: none; } /* the sheen of cloth under a lamp */
.swatch:hover .swatch__cloth { transform: translateY(-6px) rotate(-1.5deg); }
/* The label: cream twill tape over the cloth's lower edge, one dashed stitch line where it is sewn on */
.swatch__name { position: relative; z-index: 2; justify-self: start; max-width: calc(100% - 12px); margin: -20px 0 0 12px; padding: 12px 13px 8px; font: 700 16px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .04em; color: var(--plum); background: #f4ecdc repeating-linear-gradient(45deg, rgba(74, 22, 64, .05) 0 1px, transparent 1px 4px); box-shadow: 0 8px 16px -8px rgba(20, 0, 16, .6), inset 0 -2px 0 rgba(74, 22, 64, .08); }
.swatch__name::before { content: ""; position: absolute; left: 7px; right: 7px; top: 5px; border-top: 1.5px dashed rgba(74, 22, 64, .5); }

/* What the fabric does, the maker's page as a small note, then the piece and a real button */
.swatch__text { display: grid; gap: 8px; align-content: start; margin-top: 4px; }
.swatch__line { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .95); }
.swatch__source { justify-self: start; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .78); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; transition: color var(--fast), text-decoration-color var(--fast); }
.swatch__source:hover { color: #fff; text-decoration-color: #fff; }
.swatch__piece { display: grid; gap: 4px; align-content: start; padding-top: 4px; }
.swatch__product { font: 600 14.5px/1.35 var(--f-body); color: #fff; transition: color var(--fast); }
.swatch__product:hover { color: #ffd6ec; }
.swatch .price { font-weight: 700; font-size: 15px; color: #fff; }
.swatch .price del { color: rgba(255, 255, 255, .7); margin-left: 6px; }
.swatch .price ins { color: #ffe08a; text-decoration: none; }
.swatch__shop { align-self: end; color: var(--plum); }

.swatches .rail__bar { background: rgba(255, 255, 255, .3); }
.swatches .rail__bar span { background: #fff; }

/* Reveal, phone: each sample drops onto the table in turn, then its words */
.js .swatches__book .swatch__sample { opacity: 0; transform: translateY(28px) rotate(-5deg); transition: opacity .7s var(--ease), transform 1s var(--ease); transition-delay: calc(.2s + var(--i) * .1s); }
.js .swatches__book .swatch > :not(.swatch__sample) { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(.6s + var(--i) * .1s); }
.js .swatches__book.is-in .swatch__sample { opacity: 1; transform: none; }
.js .swatches__book.is-in .swatch > :not(.swatch__sample) { opacity: 1; }

@media (min-width: 600px) { .swatches__list { grid-auto-columns: calc((100% - var(--cg) * 2) / 2.6); } }

@media (min-width: 900px) {
	.swatches { --cg: 22px; --tooth: 7px; }
	.swatches__head { max-width: 860px; margin-bottom: 34px; }
	/* the book: its spine first, then the samples in one row */
	.swatches__book { container-type: inline-size; }
	.swatches__list { --spine: 60px; grid-template-columns: var(--spine) repeat(var(--n), minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 0; }
	.swatches__list::before { content: ""; grid-column: 1; grid-row: 1; align-self: start; height: calc((100cqw - var(--spine) - var(--n) * var(--cg)) / var(--n)); border-radius: 5px 2px 2px 5px; background: radial-gradient(circle at 50% 16%, #fff3c4 0 2px, #d8b45a 3px 6px, #7c5a1a 7px, transparent 8px), radial-gradient(circle at 50% 84%, #fff3c4 0 2px, #d8b45a 3px 6px, #7c5a1a 7px, transparent 8px), linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(255, 255, 255, .14) 28%, rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .35) 100%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px), #2c0b25; box-shadow: 0 18px 28px -14px rgba(20, 0, 16, .7), inset 0 1px 0 rgba(255, 255, 255, .12); } /* cloth-bound, two brass binding posts */
	.swatches .rail__bar { display: none; }
	.swatch__name { letter-spacing: .03em; }
	/* Reveal, desktop: the samples start fanned on the spine, pivoting on their bound edge, then spread into the row */
	.js .swatches__book .swatch__sample { opacity: 1; transform: translateX(calc(var(--i) * (-100% - var(--cg)) - var(--cg) - 30px)) rotate(calc(var(--i) * 6deg - 12deg)) scale(.94); transition: transform 1.3s var(--ease); transition-delay: calc(.55s + var(--i) * .07s); }
	.js .swatches__book .swatch > :not(.swatch__sample) { transition-delay: calc(1.25s + var(--i) * .09s); }
}

@media (prefers-reduced-motion: reduce) {
	.js .swatches__book .swatch__sample, .js .swatches__book .swatch > :not(.swatch__sample) { opacity: 1; transform: none; transition: none; }
}

/* Women's brands band: the deep teal of the women's ThermoBall and Polartec jackets */
.dbrands--womens { background: radial-gradient(circle at 92% 0%, rgba(255, 255, 255, .2), transparent 40%), radial-gradient(circle at 0% 100%, rgba(0, 0, 0, .28), transparent 50%), linear-gradient(120deg, #0a3f4c 0%, #0f6270 45%, #1b8a8b 100%); }
.dbrands--womens .btn--light { color: #0a3f4c; }