/* Incisions echo the supplied iris: narrow, tapered wedges rather than noise.
   Only display lettering is masked. Logos, product facts and form labels stay whole. */
.cut-word{display:inline-block;white-space:nowrap}
.cut-letter{display:inline-block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.cut-letter--a{-webkit-mask-image:url('incisions-a.svg');mask-image:url('incisions-a.svg')}
.cut-letter--b{-webkit-mask-image:url('incisions-b.svg');mask-image:url('incisions-b.svg')}
.cut-letter--c{-webkit-mask-image:url('incisions-c.svg');mask-image:url('incisions-c.svg')}
/* Uneven cuts belong to the paper surface, not the garment photograph. */
.ring-card .float-card{clip-path:polygon(0 0,19% 0,19.8% 1.8%,20.5% 0,100% 0,100% 45%,97.5% 46%,100% 46.7%,100% 100%,77% 100%,76.4% 98.3%,75.5% 100%,0 100%,0 74%,1.8% 73.1%,0 72.7%);box-shadow:none}
.ring-card:nth-child(3n+2) .float-card{clip-path:polygon(0 0,72% 0,72.6% 1.6%,73.5% 0,100% 0,100% 67%,98% 67.6%,100% 68.5%,100% 100%,24% 100%,23.6% 98.4%,22.7% 100%,0 100%,0 38%,2.2% 37.3%,0 36.6%)}
.ring-card .card-tag{clip-path:polygon(0 0,70% 0,72% 17%,74% 0,100% 0,100% 100%,20% 100%,19% 82%,17% 100%,0 100%);letter-spacing:.12em}
.ring-card .add-button{position:relative;isolation:isolate;background:transparent;border-radius:2px}
.ring-card .add-button::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);clip-path:polygon(2% 3%,30% 0,30.5% 16%,31.5% 0,97% 2%,100% 25%,98.5% 92%,70% 100%,69.3% 80%,68.5% 99%,1% 96%,0 60%);transition:background .18s}
.ring-card .add-button:hover::before{background:#7c1441}
.ring-card .fixed-piece span{border-width:0 0 1px;padding-inline:0;border-color:#a77a8e}
.collection-screen .filter-group button{border-radius:2px 9px 3px 7px}
.collection-screen .filter-group button[aria-pressed=true]{border-color:transparent;position:relative;isolation:isolate;background:transparent}
.collection-screen .filter-group button[aria-pressed=true]::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--pale);clip-path:polygon(2% 2%,64% 0,66% 16%,69% 0,100% 3%,98% 100%,24% 98%,23% 84%,20% 100%,0 95%)}
.ring-arrow{background:transparent;border:0;backdrop-filter:none;isolation:isolate;border-radius:0;color:var(--ink);opacity:.9}
.ring-arrow::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--soft);clip-path:polygon(5% 2%,68% 0,70% 20%,74% 1%,100% 6%,96% 96%,28% 100%,26% 82%,22% 99%,0 93%)}
.ring-arrow:hover,.ring-arrow:focus-visible{background:transparent}
.ring-viewport.dragging,.ring-viewport.coasting{user-select:none;-webkit-user-select:none}
.ring-card img{-webkit-user-drag:none;user-select:none}
@media(forced-colors:active){.cut-letter{-webkit-mask-image:none;mask-image:none}.ring-card .float-card{clip-path:none}.ring-card .add-button,.collection-screen .filter-group button[aria-pressed=true],.ring-arrow{border:1px solid ButtonText}.ring-card .add-button::before,.collection-screen .filter-group button::before,.ring-arrow::before{display:none}}
@media(prefers-reduced-motion:reduce){.ring-card .add-button::before{transition:none}}

.collection-screen{padding-bottom:calc(10px + var(--local-notice-height,0px))}

.ring-viewport{touch-action:pan-y pinch-zoom}

/* A sold piece stays in the ring: readable text and a pink strip across the corner. */
.ring-card .sold-ribbon{position:absolute;z-index:2;top:25px;right:-49px;width:190px;padding:9px 0;transform:rotate(45deg);background:var(--pink);color:var(--pale);font:800 13px/1.2 Anybody,Arial,sans-serif;letter-spacing:.1em;text-align:center;box-shadow:0 2px 0 #17131733;pointer-events:none}
.ring-card.is-sold .card-index{display:none}
.ring-card.is-sold .add-button{opacity:1;cursor:not-allowed}
.ring-card.is-sold .add-button::before{background:var(--edge)}
@media(forced-colors:active){.ring-card .sold-ribbon{background:Canvas;color:CanvasText;border:2px solid CanvasText}}
.ring-card .card-info-header h3{flex:1;min-width:0;overflow-wrap:anywhere}
.ring-card .card-info-header .card-price{flex:none;white-space:nowrap}

/* Portrait product photography is the main event. Full copy lives on the product page. */
.collection-screen{--piece-width:min(30vw,410px);--piece-info-height:280px;--piece-photo-height:calc(var(--piece-width) * 1.5);height:auto;min-height:calc(100svh - var(--header));grid-template-rows:auto auto minmax(calc(var(--piece-photo-height) + var(--piece-info-height) + 20px),1fr) auto}
.ring-shell{min-height:calc(var(--piece-photo-height) + var(--piece-info-height) + 20px)}
.product-ring{width:var(--piece-width);height:calc(var(--piece-photo-height) + var(--piece-info-height));min-height:0;max-height:none}
.ring-card .card-image{height:var(--piece-photo-height);flex:none}
.ring-card .card-photo-link{display:block;width:100%;height:100%}
.ring-card .card-photo-link:focus-visible{outline-offset:-4px}
.ring-card .card-image img{width:100%;height:100%;object-fit:contain;object-position:center}
.ring-card .card-info{min-height:0;padding:16px;gap:0;flex:1}
.ring-card .card-info>*{flex-shrink:0}
.ring-card .card-info-header{gap:12px;margin-bottom:16px}
.ring-card .card-info h3{font-size:26px;line-height:1.08}
.ring-card .card-price{font-size:16px;line-height:1.4}
.ring-card .fixed-piece{margin:0 0 16px;gap:12px}
.ring-card .fixed-piece span{font-size:11px;padding:6px 0}
.ring-card .fixed-piece strong{font-size:16px;line-height:1.3}
.ring-card .add-button{min-height:46px}
.carousel-footer{padding-top:10px;padding-bottom:12px}
@media(max-width:1023px){
 .collection-screen{--piece-width:clamp(260px,72vw,390px);--piece-info-height:300px;padding-top:22px}
 .collection-screen .screen-header h2{line-height:1.02;margin:10px 0 12px}
 .collection-screen .screen-header p{font-size:14px;line-height:1.5}
 .piece-filters{padding-top:18px;padding-bottom:16px;gap:10px}
}

/* Product facts and CTA follow each other naturally; no empty reserved panel. */
.ring-card .float-card{height:auto}
.ring-card .card-info{flex:none}
.ring-card .add-button{margin-top:0}

/* Match heading and fact rows across the ring without a blank area above the CTA. */
.ring-card .card-info-header{min-height:var(--piece-heading-height,0px)}
.ring-card .fixed-piece{min-height:var(--piece-facts-height,0px)}