/* Catherine D. Gemstones — Criações (2026-10-17): featured carousel and the product grid on criacoes.html,
   plus the way back from historias.html. Loaded by those two pages only, after pages.css. Same tokens, typefaces and paper-card shadow as the rest of the site. */

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------ featured carousel ------------------------------ */
.showcase{position:relative;isolation:isolate;overflow:hidden;background:var(--forest);color:var(--ivory-text);padding:132px var(--gutter) 72px}
.showcase-botanical{position:absolute;right:-180px;top:-150px;width:560px;opacity:.16;z-index:-1;pointer-events:none;transform:scaleY(-1) rotate(8deg)}
.carousel,.slide{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px}
.slides{grid-column:1/-1;display:grid;row-gap:96px}
.slide{align-items:end}
.slide-media{margin:0;height:clamp(320px,calc(100svh - 330px),640px);display:flex;align-items:flex-end;justify-content:center}
.slide-media a{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%}
.slide-media img{width:auto;height:auto;max-width:100%;max-height:100%;box-shadow:var(--card-shadow-dark)}
.slide-text{max-width:460px;padding-bottom:4px}
.slide-kind{font-size:13px;letter-spacing:.5px;color:#c0b286;margin-top:12px}
.slide-text h2{font-size:clamp(56px,5.4vw,84px);letter-spacing:-1.6px;line-height:.96}
.slide-line{font:italic 27px/1.3 var(--serif);color:#c0b286;margin-top:20px}
.slide-desc{font-size:17px;line-height:1.75;color:#e7e1d0;margin-top:20px}
.showcase .cta-row{margin-top:30px}

/* one slide at a time once the script is running; without it the three stack */
.carousel.is-ready .slides{row-gap:0}
.carousel.is-ready .slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.carousel.is-ready .slide.is-active{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.carousel.is-ready .slide-media img{transform:scale(.985);transition:transform 1.6s cubic-bezier(.2,.6,.3,1)}
.carousel.is-ready .slide.is-active .slide-media img{transform:none}

.carousel-nav{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;border-top:1px solid #c0b28640}
.carousel-tabs{display:flex;flex-wrap:wrap;gap:0 28px}
.carousel-tab{position:relative;min-width:44px;min-height:48px;padding:12px 0 10px;font:italic 20px/1.2 var(--serif);color:#b9b49e;transition:color .3s}
.carousel-tab:hover,.carousel-tab[aria-current="true"]{color:var(--ivory-text)}
.carousel-progress{position:absolute;left:0;right:0;top:-1px;height:1px;overflow:hidden}
.carousel-progress::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.carousel-tab[aria-current="true"] .carousel-progress::after{animation:carousel-progress var(--carousel-delay,7s) linear forwards}
.carousel.is-paused .carousel-tab[aria-current="true"] .carousel-progress::after{animation-play-state:paused}
.carousel.is-stopped .carousel-tab[aria-current="true"] .carousel-progress::after{animation:none;transform:none}
@keyframes carousel-progress{to{transform:none}}
.carousel-pause{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-12px;color:#cfc7ad}
.carousel-pause:hover{color:var(--ivory-text)}
.carousel-pause svg{width:18px;height:18px;stroke-width:1.4;stroke-linejoin:round}
.carousel-pause .i-play,.carousel.is-stopped .carousel-pause .i-pause{display:none}
.carousel.is-stopped .carousel-pause .i-play{display:block}

/* ------------------------------ product grid ------------------------------ */
.collection{background:var(--stone);padding:120px var(--gutter) 112px}
.collection-head{margin-bottom:64px}
.collection-head h2{font-size:clamp(50px,5vw,72px);letter-spacing:-1.4px;line-height:.98}
.collection-head p{font-size:18px;line-height:1.72;max-width:34em;margin-top:24px}
.product-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 32px}
.product{display:flex}
.product-card{position:relative;flex:1;display:flex;flex-direction:column;background:#fbf8f1;padding:14px 14px 20px;box-shadow:var(--card-shadow);transition:transform .5s cubic-bezier(.2,.6,.3,1),box-shadow .5s}
.product-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 #dcd4c3,0 30px 56px -30px rgba(59,52,38,.72)}
.product-photo{position:relative;aspect-ratio:4/5;background:#fdfbf6;overflow:hidden}
.product-photo::after{content:"";position:absolute;inset:8px;border:1px solid #c0b28659;pointer-events:none}
.product-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.3,1)}
.product-card:hover .product-photo img{transform:scale(1.03)}
.product-card h3{font-size:26px;line-height:1.1;letter-spacing:-.2px;margin-top:20px;padding:0 4px}
.product-kind{font-size:13px;letter-spacing:.4px;color:#6b7057;margin:6px 0 16px;padding:0 4px}
.product-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;margin:auto 4px 0;padding:12px 0 8px;font-size:13px;line-height:1.4;letter-spacing:.25px;text-align:left;border-bottom:1px solid currentColor}
.product-cta::before{content:"";position:absolute;inset:0;cursor:pointer} /* the whole card is the button */
.product-cta svg{width:22px;transition:transform .2s}
.product-cta:hover svg{transform:translateX(4px)}
.collection-note{font-size:13px;line-height:1.6;color:#5b604d;margin-top:56px}

/* ------------------------------ historias.html ------------------------------ */
/* the section a page belongs to (Criações) stays marked while reading its stories */
.desktop-nav a[aria-current="true"]{border-bottom:1px solid currentColor}
.mobile-nav a[aria-current="true"]{color:var(--gold)}
.back-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin:-10px 0 16px;font-size:14px;letter-spacing:.2px;color:#59614c}
.back-link svg{width:24px;transition:transform .2s}
.back-link:hover{color:var(--ink)}
.back-link:hover svg{transform:translateX(-4px)}

/* short laptop screens: keep the whole first slide and its controls in view */
@media(max-height:760px) and (min-width:701px){.slide-desc{display:none}}

/* ------------------------------ tablet ------------------------------ */
@media(max-width:1150px) and (min-width:701px){
  .carousel,.slide{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:40px}
  .slide-media{height:clamp(340px,56svh,520px)}
  .slide-text h2{font-size:52px;letter-spacing:-1.2px}
  .slide-line{font-size:23px}
  .slide-desc{font-size:16px}
  .carousel-tabs{gap:0 20px}
  .carousel-tab{font-size:18px}
  .collection{padding:100px var(--gutter) 96px}
  .product-grid{gap:44px 22px}
  .product-card h3{font-size:22px}
}
@media(max-width:900px) and (min-width:701px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
  .product-card h3{font-size:26px}
}

/* ------------------------------ phone ------------------------------ */
@media(max-width:700px){
  .showcase{padding:108px 24px 56px}
  .showcase-botanical{width:300px;right:-170px;top:-90px;opacity:.12}
  .carousel{display:block}
  .slide{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .slide-media,.slide-media a{align-items:center}
  .slide-media{height:clamp(240px,46svh,400px)}
  .slide-text h2{font-size:46px;letter-spacing:-1px}
  .slide-kind{margin-top:8px}
  .slide-line{font-size:21px;margin-top:14px}
  .slide-desc{display:none}
  .showcase .cta-row{margin-top:20px}
  .carousel-nav{margin-top:28px}
  .carousel-tabs{gap:0 16px}
  .carousel-tab{font-size:17px}
  .collection{padding:76px 24px 72px}
  .collection-head{margin-bottom:40px}
  .collection-head h2{font-size:44px;letter-spacing:-1px}
  .collection-head p{font-size:16px;margin-top:18px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
  .product-card{padding:8px 8px 14px}
  .product-photo::after{inset:5px}
  .product-card h3{font-size:20px;margin-top:14px;padding:0 2px}
  .product-kind{font-size:12px;margin:4px 0 10px;padding:0 2px}
  .product-cta{font-size:12px;margin:auto 2px 0}
  .product-cta svg{display:none}
  .collection-note{margin-top:40px}
  .back-link{margin:-10px 0 8px}
}
@media(max-width:380px){
  .carousel-tabs{gap:0 12px}
  .carousel-tab{font-size:16px}
}

/* ------------------------------ catalogue (2026-10-23) ------------------------------ */
/* the decorative sprig overflows the dark band; clip it so nothing can scroll it into view */
.showcase{overflow:clip}
.collection-head{margin-bottom:36px}
.collection-filter{display:flex;flex-wrap:wrap;gap:0 28px;margin-bottom:44px}
.collection-filter button{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:10px 0 8px;font:italic 21px/1.2 var(--serif);color:#5b604d;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.collection-filter button:hover{color:var(--ink)}
.collection-filter button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.filter-count{font:13px/1 var(--sans);letter-spacing:.3px;color:#5b604d}
.product.is-shown{animation:product-in .5s ease both}
@keyframes product-in{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.product.is-shown{animation:none}}
/* piece view: the homepage's piece dialog, with the story link beside the consultation */
.piece-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;margin-top:26px}
.piece-information .piece-actions .text-link{margin-top:0}
@media(max-width:700px){
  .collection-head{margin-bottom:24px}
  .collection-filter{gap:0 18px;margin-bottom:28px}
  .collection-filter button{font-size:18px;gap:6px}
  .filter-count{font-size:12px}
  .piece-actions{margin-top:18px}
}

/* recheck fixes (2026-10-23) */
.inline-link{border-bottom:1px solid currentColor;padding-bottom:1px}
.inline-link:hover{border-bottom-color:var(--gold)}
#piece-dialog.is-text-only{width:620px}
#piece-dialog.is-text-only .piece-view{display:block}
/* phones: the categories run in one line that scrolls sideways; the half-visible last one shows there is more */
@media(max-width:700px){
  .collection-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .collection-filter::-webkit-scrollbar{display:none}
  .collection-filter button{flex:none}
}

/* ------------------------------ catalogue P1 (2026-10-23) ------------------------------ */
/* colour: a second, quieter row under the categories; a second press clears it */
.collection-colors{display:flex;flex-wrap:wrap;gap:0 24px;margin:-30px 0 40px}
.collection-colors button{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:13px;letter-spacing:.3px;color:#5b604d;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.collection-colors button:hover{color:var(--ink)}
.collection-colors button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.collection-colors .dot{width:14px;height:14px}
.collection-empty{font-size:15px;line-height:1.7;color:#5b604d;margin:0 0 40px}
.collection-empty .inline-link{font-size:inherit;color:var(--ink)}
/* piece view: specs (shown only when confirmed), ring-size link, related pieces */
.piece-specs{margin:22px 0 0;max-width:440px;border-top:1px solid #c0b28659}
.piece-specs div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid #c0b28640;font-size:13px;line-height:1.5}
.piece-specs dt{color:#5b604d}
.piece-specs dd{margin:0;color:var(--ink)}
.piece-specs .is-pending{color:#766b46}
.piece-related{margin-top:30px;padding-top:22px;border-top:1px solid #c0b28659}
.piece-related h3{font-size:22px;line-height:1.2;margin-bottom:16px}
.piece-related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.related-piece{display:block;width:100%;text-align:left}
.related-piece img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#fdfbf6;box-shadow:var(--card-shadow)}
.related-piece span{display:block;font:16px/1.3 var(--serif);margin-top:9px;color:var(--ink)}
.related-piece:hover span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){
  .collection-colors{flex-wrap:nowrap;overflow-x:auto;margin:-18px -24px 28px;padding-inline:24px;scrollbar-width:none;gap:0 18px}
  .collection-colors::-webkit-scrollbar{display:none}
  .collection-colors button{flex:none}
  .piece-specs div{grid-template-columns:100px minmax(0,1fr)}
  .piece-related ul{gap:10px}
  .related-piece span{font-size:14px}
}

/* ------------------------------ ring-size guide (medidas.html) ------------------------------ */
.md-head{padding:168px var(--gutter) 64px;max-width:980px}
.md-head h1{font-size:clamp(60px,6.4vw,96px);letter-spacing:-2px;line-height:.94}
.md-head h1 em{display:block}
.md-head .lede{margin-top:30px;max-width:520px}
.md-methods{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:0 var(--gutter) 96px}
.md-method{background:#fbf8f1;box-shadow:var(--card-shadow);padding:40px 42px 38px}
.md-method svg{display:block;width:150px;height:110px;color:#9b8659;fill:none;stroke:currentColor;stroke-width:1.2;margin-bottom:26px}
.md-method h2{font-size:38px;line-height:1.05;letter-spacing:-.6px}
.md-method p{font-size:17px;line-height:1.75;margin-top:16px;max-width:30em}
.md-table{background:var(--stone);padding:104px var(--gutter);display:grid;grid-template-columns:1fr 1.25fr;gap:72px;align-items:start}
.md-table h2,.md-tips h2{font-size:clamp(46px,4.6vw,66px);letter-spacing:-1.3px;line-height:.98}
.md-table-intro p{font-size:17px;line-height:1.75;margin-top:22px;max-width:28em}
.md-table table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;background:#fbf8f1;box-shadow:var(--card-shadow)}
.md-table th,.md-table td{text-align:left;padding:11px 22px;border-bottom:1px solid #c0b28640}
.md-table thead th{font-size:13px;letter-spacing:.3px;color:#5b604d;font-weight:400;border-bottom-color:#c0b28699}
.md-table tbody th{font-weight:500;color:var(--ink)}  /* lining figures: Cormorant's old-style digits read poorly in a table */
.md-note{font-size:13px;line-height:1.6;color:#5b604d;margin-top:18px}
.md-tips{padding:110px var(--gutter) 40px;max-width:1100px}
.md-tips ul{list-style:none;margin:36px 0 0;padding:0;columns:2;column-gap:56px}
.md-tips li{break-inside:avoid;font-size:17px;line-height:1.7;padding:14px 0 14px 30px;position:relative;border-top:1px solid #c0b28659}
.md-tips li::before{content:"";position:absolute;left:0;top:25px;width:12px;height:12px;border-radius:50%;background:var(--gold);opacity:.7}
@media(max-width:1150px) and (min-width:701px){
  .md-table{grid-template-columns:1fr;gap:40px}
}
@media(max-width:700px){
  .md-head{padding:140px 24px 44px}
  .md-head h1{font-size:50px;letter-spacing:-1.3px}
  .md-methods{grid-template-columns:1fr;gap:20px;padding:0 24px 72px}
  .md-method{padding:30px 26px}
  .md-method h2{font-size:32px}
  .md-method p{font-size:16px}
  .md-table{display:block;padding:72px 24px}
  .md-table h2,.md-tips h2{font-size:42px}
  .md-table-intro p{font-size:16px}
  .md-table table{margin-top:30px;font-size:14px}
  .md-table th,.md-table td{padding:10px 14px}
  .md-tips{padding:76px 24px 20px}
  .md-tips ul{columns:1}
  .md-tips li{font-size:16px}
}

/* ------------------------------ compact showcase (2026-10-23) ------------------------------ */
/* the featured band takes about 55% of the screen, so the categories and the first row of pieces show on arrival;
   the longer descriptions live on historias.html */
.showcase{padding-top:104px;padding-bottom:36px}
.slide-media{height:clamp(180px,calc(55svh - 212px),380px)}
.slide-text h2{font-size:clamp(44px,3.9vw,60px);letter-spacing:-1.1px}
.slide-line{font-size:22px;margin-top:12px}
.slide-desc{display:none}
.showcase .cta-row{margin-top:20px}
.carousel-nav{margin-top:20px}
@media(min-width:701px){
  .collection{padding-top:56px}
  .collection-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 56px;margin-bottom:20px}
  .collection-head h2{font-size:clamp(40px,3.6vw,52px);letter-spacing:-1px}
  .collection-head p{font-size:16px;max-width:36em;margin-top:0}
  /* categories and colours share one line when there is room */
  .collection-filter,.collection-colors{display:inline-flex;vertical-align:middle}
  .collection-filter{margin:0 40px 0 0}
  .collection-colors{margin:0;padding-left:28px;border-left:1px solid #c0b28659}
  .product-grid{margin-top:28px}
  .collection-empty{margin:24px 0 0}
}
@media(max-width:700px){
  .showcase{padding:92px 24px 28px}
  .slide{grid-template-columns:minmax(0,11fr) minmax(0,10fr);column-gap:18px;row-gap:0;align-items:center}
  .slide-media{height:clamp(170px,30svh,260px)}
  .slide-text h2{font-size:32px;letter-spacing:-.6px}
  .slide-kind{margin-top:6px}
  .slide-line{font-size:17px;line-height:1.35;margin-top:10px}
  .showcase .cta-row{flex-direction:column;align-items:flex-start;gap:0;margin-top:10px}
  .carousel-nav{margin-top:16px}
  .collection{padding-top:44px}
  .collection-head{margin-bottom:20px}
  .collection-head h2{font-size:36px}
  .collection-head p{font-size:14px;line-height:1.65;margin-top:10px}
}
@media(max-width:380px){.slide-line{display:none}}
/* short laptop screens: a slimmer band, so the first row of pieces still peeks in */
@media(max-height:700px) and (min-width:701px){
  .showcase{padding-top:92px}
  .slide-media{height:clamp(150px,calc(55svh - 200px),380px)}
  .slide-line{display:none}
}
@media(max-width:700px){.showcase .cta-row .quiet-link{text-align:left}}
@media(max-width:380px){.showcase .cta-row .text-link{gap:8px}.showcase .cta-row .text-link svg{width:18px}}

/* ------------------------------ piece pages (peca-*.html, 2026-10-24) ------------------------------ */
.pd{padding:132px var(--gutter) 96px}
.pd-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center;margin-top:8px}
.pd-media{margin:0;background:#fbf8f1;padding:18px;box-shadow:var(--card-shadow)}
.pd-media img{display:block;width:100%;height:auto;max-height:min(72svh,720px);object-fit:contain}
.pd-media.is-pending{max-width:460px;justify-self:center;width:100%}
.pd-kind{font-size:13px;letter-spacing:.5px;color:#6b7057}
.pd-info h1{font-size:clamp(50px,5vw,78px);letter-spacing:-1.6px;line-height:.98;margin-top:10px}
.pd-desc{font-size:17px;line-height:1.75;margin-top:24px;max-width:30em}
.pd-info .piece-actions{margin-top:30px}
.pd-related{background:var(--stone);padding:84px var(--gutter) 104px}
.pd-related h2{font-size:clamp(36px,3.4vw,48px);letter-spacing:-.8px;line-height:1.05;margin-bottom:40px}
.pd-related-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px}
@media(max-width:1150px) and (min-width:701px){.pd-layout{gap:44px}}
@media(max-width:700px){
  .pd{padding:100px 24px 60px}
  .pd-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .pd-media{padding:10px}
  .pd-media img{max-height:62svh}
  .pd-info h1{font-size:44px;letter-spacing:-1px}
  .pd-desc{font-size:16px}
  .pd-related{padding:56px 24px 72px}
  .pd-related h2{margin-bottom:28px}
  .pd-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-related-grid li:nth-child(3){display:none}
}
.piece-specs:not(:has(div:not([hidden]))){display:none}
/* the paper frame hugs the photograph instead of filling the column */
.pd-media{justify-self:center;width:fit-content;max-width:100%}
.pd-media img{width:auto;max-width:100%}
.pd-media.is-pending img{width:100%}

/* ------------------------------ piece photo galleries (2026-10-24) ------------------------------ */
/* studio picture first, real photographs after it; small arrows at the image edges (gallery.js) */
[data-gallery]{position:relative}
.gallery-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track>img{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start}
.product-photo .gallery-track{position:absolute;inset:0}
.gallery-prev,.gallery-next{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;color:var(--ink);opacity:0;transition:opacity .25s}
.gallery-prev{left:2px}
.gallery-next{right:2px}
.gallery-prev svg,.gallery-next svg{width:30px;height:30px;padding:8px;border-radius:50%;background:#fbf8f1e6;box-shadow:0 1px 3px #3b342633;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
[data-gallery]:hover :is(.gallery-prev,.gallery-next),[data-gallery]:focus-within :is(.gallery-prev,.gallery-next){opacity:1}
@media(hover:none){.gallery-prev,.gallery-next{opacity:1}}
.gallery-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gallery-dots i{width:5px;height:5px;border-radius:50%;background:#fbf8f1;box-shadow:0 0 0 1px #3b342640;opacity:.75;transition:background .25s,opacity .25s}
.gallery-dots i.is-on{background:var(--gold);opacity:1}
/* the cards keep their hover zoom on the picture in view */
.product-card:hover .product-photo .gallery-track img{transform:none}
/* piece page: a square frame, whole photographs */
.pd-media{justify-self:stretch;width:100%;max-width:640px}
.pd-gallery .gallery-track{aspect-ratio:1/1}
.pd-gallery .gallery-track>img{object-fit:contain;max-height:none}
.pd-media.is-pending .pd-gallery .gallery-track>img{object-fit:cover}
.pd-gallery .gallery-prev{left:6px}
.pd-gallery .gallery-next{right:6px}
.pd-gallery .gallery-dots{bottom:10px}
@media(max-width:700px){.product-photo .gallery-dots{bottom:9px}.product-photo .gallery-prev{left:-2px}.product-photo .gallery-next{right:-2px}}

/* ------------------------------ compact catalogue cards (2026-10-24) ------------------------------ */
/* Criações: two rows of four fit one screen below the filters on desktop. Square photos, smaller type, and the grid
   never wider than the screen height allows: card ≈ width + 100px of text, two rows + gap ≤ 100svh − 140px. */
@media(min-width:701px){
  .collection .product-grid{gap:24px 22px;max-width:max(760px,calc(200svh - 600px))}
  .collection .product-card{padding:10px 10px 12px}
  .collection .product-photo{aspect-ratio:1/1}
  .collection .product-photo::after{inset:6px}
  .collection .product-card h3{font-size:20px;line-height:1.15;margin-top:12px;padding:0 2px}
  .collection .product-kind{font-size:12px;margin:2px 0 8px;padding:0 2px}
  .collection .product-cta{padding:6px 0 3px;margin:auto 2px 0;font-size:12px;gap:10px}
  .collection .product-cta svg{width:18px}
  .collection .product-photo .gallery-dots{bottom:9px}
}

/* ------------------------------ twelve pieces (2026-10-24) ------------------------------ */
/* the grid fills the row again: six per row on wide screens (two rows = twelve), four in between, two on phones */
@media(min-width:701px){.collection .product-grid{max-width:none}}
@media(min-width:1340px){
  .collection .product-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 20px}
  .collection .product-card h3{font-size:19px}
}
@media(min-width:901px) and (max-width:1339px){.collection .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ------------------------------ colours above the categories (2026-10-24) ------------------------------ */
/* the colour swatches open the catalogue, right under the heading; the categories follow on their own line */
.collection-colors{display:flex;flex-wrap:wrap;gap:0 26px;margin:0 0 6px;padding-left:0;border-left:0}
@media(min-width:701px){
  .collection-filter{display:flex;margin:0}
  .collection-colors{display:flex;margin:0 0 4px;padding-left:0;border-left:0}
}
@media(max-width:700px){.collection-colors{margin:0 -24px 4px}}

/* ------------------------------ catalogue heading as one left column (2026-10-24) ------------------------------ */
/* heading, its note, the colours and the categories all start on the same left edge, from large to small */
@media(min-width:701px){
  .collection{padding-top:48px}
  .collection-head{display:block;margin-bottom:22px}
  .collection-head p{font-size:15px;line-height:1.7;max-width:46em;margin-top:8px;color:#4b5343}
}
@media(min-width:701px){
  .collection{padding-top:36px}
  .collection-head{margin-bottom:16px}
  .collection-head p{max-width:64em;margin-top:6px}
  .collection-colors{margin-bottom:0}
  .collection .product-grid{margin-top:20px}
}
@media(max-width:700px){.collection-colors{padding-inline:24px}}

/* ------------------------------ first screen ends at the first row's names (2026-10-24) ------------------------------ */
/* wide screens (six pieces per row): the featured band takes what is left after the catalogue heading, the filters
   and the first row of cards down to their names. Measured: heading to name ≈ 175px + 20vw; band ≈ photo + 209px. */
@media(min-width:1340px){
  .slide-media{height:clamp(150px,calc(100svh - 20vw - 416px),380px)}
}
@media(min-width:1340px) and (max-height:960px){.slide-line,.slide-original{display:none}}

/* ------------------------------ a taller featured band (2026-10-24, replaces the rule above) ------------------------------ */
/* desktop: the band fills the first screen except for the catalogue heading and the two filter rows (≈ 222px);
   the piece photos start just below the fold. Band ≈ photo + 209px. */
@media(min-width:701px){
  .slide-media{height:clamp(180px,calc(100svh - 451px),620px)}
}
@media(min-width:701px) and (min-height:701px){.slide-line,.slide-original{display:block}}
/* round 2 (2026-10-24): taller still; below the band only the "Peças do acervo" heading shows (≈ 87px), the rest
   of the catalogue (note, colours, categories, pieces) starts below the fold */
@media(min-width:701px){
  .slide-media{height:clamp(180px,calc(100svh - 322px),820px)}
  .collection-head p{margin-top:44px}
}
/* 2026-10-27: the pictures slide sideways as the carousel turns: the new one comes in from the side it is moving
   towards (criacoes.js sets --dir to 1 or -1), the old one leaves the other way */
.carousel.is-ready .slide-media img{transform:translateX(calc(var(--dir,1) * -14%));transition:transform .9s cubic-bezier(.3,.6,.3,1)}
.carousel.is-ready .slide.is-entering .slide-media img{transform:translateX(calc(var(--dir,1) * 14%));transition:none}
.carousel.is-ready .slide.is-active .slide-media img{transform:none}
@media(prefers-reduced-motion:reduce){.carousel.is-ready .slide-media img,.carousel.is-ready .slide.is-entering .slide-media img{transform:none;transition:none}}

/* ------------------------------ carousel layout, round 3 (2026-10-27) ------------------------------ */
/* the photo is a paper card floating over the green. The text column is exactly as tall as the photo: the words sit
   centred in it and the tabs close it at the photo's bottom edge. */
.slide-media img{padding:12px;background:#fbf8f1;outline:1px solid rgba(192,178,134,.38);outline-offset:-20px;
  box-shadow:0 1px 0 rgba(192,178,134,.22),0 28px 50px -26px rgba(0,0,0,.7),0 70px 110px -50px rgba(0,0,0,.6);
  transition:transform .9s cubic-bezier(.3,.6,.3,1),translate .6s cubic-bezier(.3,.6,.3,1),box-shadow .6s ease}
.carousel.is-ready .slide.is-active .slide-media img{animation:slide-float 7s ease-in-out infinite alternate}
@keyframes slide-float{from{translate:0 0}to{translate:0 -7px}}
.slide-media a:hover img{animation-play-state:paused;translate:0 -10px;
  box-shadow:0 1px 0 rgba(192,178,134,.3),0 40px 64px -28px rgba(0,0,0,.75),0 90px 130px -56px rgba(0,0,0,.62)}
@media(prefers-reduced-motion:reduce){.carousel.is-ready .slide.is-active .slide-media img{animation:none}.slide-media a:hover img{translate:none}}
@media(min-width:701px){
  /* 2026-10-27, round 4: same lines as the header and the product grid below. The band splits into the grid's two
     halves (same gap as the grid): the text starts on the left margin, under "Criações" and "Peças do acervo", and the
     tabs run to the end of the left half; the photo sits centred in the right half, never closer than 72px to it. */
  .showcase{padding-top:118px;padding-bottom:40px}
  .carousel,.slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px}
  .slide{align-items:stretch}
  .slides,.carousel-nav{grid-row:1}
  /* as tall as the screen allows, but no taller than the right half is wide (less 72px each side), so the square
     photo always fills it and its bottom meets the tabs */
  .slide-media{grid-column:2;grid-row:1;height:clamp(180px,min(calc(100svh - 340px),calc(50vw - var(--gutter) - 155px)),820px)}
  .slide-media,.slide-media a{justify-content:center;align-items:center}
  .slide-media img{max-width:calc(100% - 144px)}
  .slide-text{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;max-width:520px;padding:0 0 84px}
  .slide-text h2{line-height:1}
  .slide-kind{margin-top:14px}
  .slide-original{margin-top:8px}
  .slide-line{margin-top:18px}
  .showcase .cta-row{margin-top:30px}
  .carousel-nav{grid-column:1;align-self:end;margin:0;position:relative;z-index:1}
  .carousel-pause{margin-right:0}
}
@media(min-width:1340px){.carousel,.slide{column-gap:20px}}
@media(min-width:701px) and (min-height:820px){
  .slide-desc{display:block;max-width:34em;font-size:16px;line-height:1.75;color:#ddd6c3;margin-top:16px}
}
@media(max-width:700px){.slide-media img{padding:6px;outline-offset:-12px}}

/* ---- UI review round (2026-10-27) ----
   3. On the phone the showcase stacks, photograph above the words: side by side the text column was about 150px wide.
   13. The colour filter stays on one line and slides, like the categories; both fade at the right edge, a hint that
       there is more to slide to. */
@media(max-width:700px){
  .slide{grid-template-columns:minmax(0,1fr);row-gap:22px;align-items:start}
  .slide-media{height:clamp(220px,34svh,300px)}
  .slide-text h2{font-size:36px}
  .slide-line{display:block}
  .showcase .cta-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 26px;margin-top:14px}
  .collection-colors{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 18px}
  .collection-colors::-webkit-scrollbar{display:none}
  .collection-colors button{flex:none}
  .collection-filter,.collection-colors{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
}

/* privacy note (2026-11-03): the size guide's heading, then two short paragraphs */
.privacy-head{padding-bottom:40px}
.privacy-text{padding:0 var(--gutter) 128px;max-width:980px}
.privacy-text p{font-size:17px;line-height:1.75;max-width:34em}
.privacy-text p+p{margin-top:22px}
@media(max-width:700px){
  .privacy-head{padding-bottom:28px}
  .privacy-text{padding:0 24px 96px}
  .privacy-text p{font-size:16px}
}
/* the note is short: the footer still sits at the bottom of a tall window */
body:is(.page-privacidade,.page-404){display:flex;flex-direction:column;min-height:100svh}
:is(.page-privacidade,.page-404) main{flex:1}
.nf-head{padding-bottom:128px}
.nf-head .cta-row{margin-top:36px}
@media(max-width:700px){.nf-head{padding-bottom:96px}}

/* price note on the piece pages (2026-11-03): one quiet line under the consultation button, no figures */
.pd-price{margin-top:16px;font-size:13px;line-height:1.6;color:#5b604d;max-width:32em}