/* Jewellery page: toolbar, large card grid. Cards follow the home page product card. */
.shop{max-width:1400px;margin:0 auto;padding:0 var(--gutter) clamp(56px,9vh,112px)}
.shop__head{padding:clamp(36px,6vh,72px) 0 clamp(20px,3vh,32px);text-align:center}
.shop__head h1{font-size:var(--fs-h1);line-height:1.05}
.shop__head p{margin:14px auto 0;max-width:46ch;color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shop__bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:5;padding:12px 0;background:var(--white)}
.dd{position:relative}
.dd>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--rule);background:var(--white);cursor:pointer;list-style:none;font-size:var(--fs-small)}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary::after{content:"";width:7px;height:7px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.dd[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.dd[open]>summary,.dd>summary:hover{border-color:var(--ink)}
.dd.has>summary{background:var(--ink);border-color:var(--ink);color:var(--white)}
.dd__menu{position:absolute;left:0;top:calc(100% + 4px);z-index:6;min-width:200px;padding:8px 16px;background:var(--white);border:1px solid var(--ink)}
.dd__menu label{position:relative;display:block;cursor:pointer}
.dd__menu input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.dd__menu span{display:flex;align-items:center;gap:12px;min-height:40px;font-size:var(--fs-small)}
.dd__menu span::before{content:"";flex:none;width:18px;height:18px;border:1px solid var(--ink);background:var(--white) center/12px no-repeat}
.dd__menu input:checked+span::before{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5'/%3E%3C/svg%3E")}
.dd__menu input:focus-visible+span::before{outline:2px solid var(--ink);outline-offset:2px}
.shop__clear{padding:0 4px;min-height:44px;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;font:400 13px/1 var(--sans);color:var(--ink-2);text-decoration:underline;text-underline-offset:4px}
.shop__search{display:flex;align-items:center;gap:10px;flex:1 1 260px;max-width:420px;margin-left:auto;min-height:44px;padding:0 14px;background:#f4f4f2;color:var(--ink-3)}
.shop__search input{flex:1;min-width:0;border:0;background:none;font:400 var(--fs-small)/1.4 var(--sans);color:var(--ink);outline:0}
.shop__search:focus-within{box-shadow:0 0 0 2px var(--ink)}
.shop__count{margin:16px 0 0;font-size:var(--fs-small);color:var(--ink-3)}
.pgrid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(12px,1.6vw,24px)}
.pcard[hidden]{display:none}
.pcard a{display:block;text-decoration:none;color:inherit}
.pcard__img{position:relative;display:block;aspect-ratio:4/5;background:var(--ivory);overflow:hidden}
.pcard__img img{display:block;width:100%;height:100%;object-fit:cover}
.pcard .pc__top{margin-top:14px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.pcard .pc__top b{font-family:var(--serif);font-weight:400;font-size:var(--fs-title);line-height:1.25}
.pcard .pc__sub{margin-top:8px}
.pcard .pc__view{margin-top:12px;padding-top:0;border-top:0}
.pcard a:hover .pc__view{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.pcard a:hover .arrow{transform:translateX(4px)}
.shop__empty{margin:48px 0;text-align:center;color:var(--ink-2)}
.shop__empty .tlink{background:none;border-width:0 0 1px;border-style:solid;cursor:pointer;font-family:var(--sans)}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop__search{flex-basis:100%;max-width:none;margin-left:0}.dd__menu{min-width:180px}}
@media (prefers-reduced-motion:reduce){.pcard__img img,.dd>summary::after{transition:none}}

/* piece page */
.pc__one{display:block;margin-top:4px;font-size:13px;color:var(--bronze)}
.pdp__promise{margin-top:14px;padding-top:0;border-top:0}
.pgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dd__menu--price{display:grid;gap:12px;padding:16px;min-width:220px}
.dd__menu--price label{display:grid;gap:6px;font-size:var(--fs-small);color:var(--ink-2)}
.dd__menu--price input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--rule);background:var(--white);font:400 var(--fs-body)/1 var(--sans);color:var(--ink);border-radius:0}
.pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,4vw,64px);align-items:start;padding-top:clamp(24px,4vh,48px)}
.pp__gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pp__fig{margin:0;background:var(--ivory)}
.pp__fig img,.pp__fig video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.pp__fig--video{grid-column:1/-1}
.pp__fig--video video{aspect-ratio:4/3;background:#000}
.pp__gal .pp__fig:only-child{grid-column:1/-1}
.pp__side{position:sticky;top:20px}
.pp__cat{margin:0 0 8px;font:600 var(--fs-label)/1.2 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze)}
.pp__side h1{font-size:min(var(--fs-h2),2.4rem);line-height:1.15}
.pp__price{margin:12px 0 0;font-size:var(--fs-title)}
.pp__meta{margin:8px 0 0;color:var(--ink-2);font-size:var(--fs-small)}
.pp__desc{margin:20px 0 0;color:var(--ink-2);font-size:var(--fs-small);line-height:1.7}
.pp__side .btn{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:24px}
.pp__note{margin:12px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}
.pp__side .pdp__cover{margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.related{margin-top:clamp(48px,8vh,96px)}
.related h2{font-size:var(--fs-h2);margin-bottom:20px}
@media (max-width:900px){.pp{grid-template-columns:1fr}.pp__side{position:static}.pgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pdp__promise{list-style:none;margin:32px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:var(--fs-small);color:var(--ink-2)}
.pdp__promise li{display:flex;align-items:center;gap:12px}
.pdp__promise img{flex:none;width:32px;height:32px;object-fit:contain}
.pdp__hint{margin-top:8px}
.pdp__cover{margin-top:32px}
.pdp__h{font-family:var(--sans);font-size:var(--fs-small);font-weight:500;letter-spacing:0;text-transform:none}
.pdp__cover .pdp__promise{margin-top:14px;padding-top:0;border-top:0}
.pdp__cover+.acc{margin-top:28px}
/* order details: what happens next, on an ivory band */
.path{margin-top:clamp(48px,8vh,96px);padding:clamp(40px,6vw,72px) 0 0;border-top:1px solid var(--rule)}
.path__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.path__lab{margin:0 0 8px;font:600 var(--fs-label)/1.2 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze)}
.path h2{font-size:min(var(--fs-h2),2.25rem);line-height:1.15}
.path__head p:last-child{max-width:38ch;margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.path__steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.path__steps li{position:relative;padding:28px 24px 0 0}
.path__steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.path__steps li::after{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.path__steps small{display:block;margin-bottom:6px;font:600 var(--fs-label)/1 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze)}
.path__steps b{display:block;margin-bottom:8px;font:400 var(--fs-title)/1.25 var(--serif)}
.path__steps p{margin:0;font-size:var(--fs-small);line-height:1.65;color:var(--ink-2)}
.path__incl{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;margin:40px 0 0;padding:24px 0 0;border-top:1px solid var(--rule)}
.path__incl li{display:flex;align-items:center;gap:10px;font-size:var(--fs-small)}
@media (max-width:860px){.path__steps{grid-template-columns:1fr 1fr;gap:28px 0}}
@media (max-width:480px){.path__steps{grid-template-columns:1fr}}
/* each row is as tall as its tallest card, no taller: the cards share the row's lines (image, name, category and price, note) */
.pgrid{row-gap:0}
.pcard{display:grid;grid-row:span 4;grid-template-rows:subgrid;margin-bottom:clamp(28px,4vw,56px)}
.pcard>a{display:grid;grid-row:1/-1;grid-template-rows:subgrid;width:100%}
.pcard .pc__top{align-items:flex-start}
.pcard .pc__one{margin-top:6px}
/* price on the category line */
.pcard .pc__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px}
.pcard .pc__row .pc__sub{margin-top:0}
.pcard .pc__row .pc__price{flex:none}
@media (max-width:1150px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* hover: the next photo of the piece fades in over the first (the base photo stays solid, so two rings never show together) */
.pcard__alt{position:absolute;inset:0;background:var(--ivory);opacity:0;filter:blur(2px);transition:opacity 280ms cubic-bezier(.23,1,.32,1),filter 280ms cubic-bezier(.23,1,.32,1);pointer-events:none;will-change:opacity}
@media (hover:hover) and (pointer:fine){
  .pcard>a:hover .pcard__alt,.pcard>a:focus-visible .pcard__alt{opacity:1;filter:blur(0)}
}
@media (prefers-reduced-motion:reduce){.pcard__alt{transition:none;filter:none}}
/* Show more under the grid */
.shop__more{display:flex;justify-content:center;margin-top:clamp(8px,2vw,24px)}
.shop__more .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 32px;cursor:pointer}
.shop__more .btn[hidden]{display:none}

/* call to action: the workshop photo across the band, darkened, centred text */
.shop__cta{position:relative;display:grid;place-items:center;min-height:clamp(340px,42vw,460px);margin-top:clamp(56px,9vh,112px);color:var(--white);text-align:center;background:var(--ink);overflow:hidden}
.shop__cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop__cta::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}
.shop__cta-c{position:relative;z-index:2;max-width:640px;padding:48px 16px}
.shop__cta-lab{margin:0 0 12px;font:600 var(--fs-label)/1.2 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:#e8d9b0}
.shop__cta h2{font-size:var(--fs-h2)}
.shop__cta p:not(.shop__cta-lab){margin:14px 0 26px;color:#f0ece2}
.shop__cta .btn{display:inline-flex;align-items:center;min-height:48px}

/* hero: the photo across the page, title and line at the bottom left (after Cullen's category pages) */
.shop-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(260px,30vw,420px);color:var(--white);background:#d8cfbf;overflow:hidden}
.shop-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.shop-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 80%)}
.shop-hero__c{position:relative;z-index:2;width:100%;max-width:1400px;margin:0 auto;padding:0 var(--gutter) clamp(24px,4vw,44px)}
.shop-hero h1{font-size:var(--fs-h1);line-height:1.05;color:var(--white)}
.shop-hero p{margin:10px 0 0;max-width:52ch;color:#f6f2e8;font-size:var(--fs-body)}
.shop{padding-top:clamp(16px,3vh,28px)}

/* Filters button and the drawer (left), after Cullen and the Build Your Ring drawer */
.shop__filters{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;background:var(--ink);color:var(--white);border:1px solid var(--ink);cursor:pointer;font:500 var(--fs-small)/1 var(--sans)}
.shop__filters:hover{background:var(--white);color:var(--ink)}
.sdrawer{margin:0;inset:0 auto 0 0;width:min(380px,92vw);max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;background:var(--white);color:var(--ink);overflow:hidden;transform:translateX(-100%);transition:transform .45s var(--ease),overlay .45s allow-discrete,display .45s allow-discrete}
.sdrawer[open]{display:flex;transform:none}
.sdrawer::backdrop{background:rgba(17,17,17,0);transition:background .45s var(--ease),overlay .45s allow-discrete,display .45s allow-discrete}
.sdrawer[open]::backdrop{background:rgba(17,17,17,.5)}
@starting-style{.sdrawer[open]{transform:translateX(-100%)}.sdrawer[open]::backdrop{background:rgba(17,17,17,0)}}
.sdrawer__in{display:flex;flex-direction:column;width:100%;min-height:0}
.sdrawer__head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 24px;border-bottom:1px solid var(--rule)}
.sdrawer__head h2{font-size:var(--fs-h2);line-height:1.1}
.sdrawer__x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--ink)}
.sdrawer__body{flex:1;overflow:auto;padding:0 24px}
.sd__sec{padding:22px 0;border-bottom:1px solid var(--rule)}
.sd__lab{display:block;margin:0 0 12px;font:500 var(--fs-label)/1.2 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3)}
.sd__sec select{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--rule);background:var(--white);font:400 var(--fs-body)/1 var(--sans);color:var(--ink);border-radius:0}
.sd__list label{position:relative;display:block;cursor:pointer}
.sd__list input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sd__list span{display:flex;align-items:center;gap:12px;min-height:40px;font-size:var(--fs-small)}
.sd__list span::before{content:"";flex:none;width:18px;height:18px;border:1px solid var(--ink);background:var(--white) center/12px no-repeat}
.sd__list input:checked+span::before{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5'/%3E%3C/svg%3E")}
.sd__list input:focus-visible+span::before{outline:2px solid var(--ink);outline-offset:2px}
.sd__price{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sd__price label{display:grid;gap:6px;font-size:var(--fs-small);color:var(--ink-2)}
.sd__price input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--rule);background:var(--white);font:400 var(--fs-body)/1 var(--sans);color:var(--ink);border-radius:0}
.sdrawer__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--rule)}
.sdrawer__foot .btn{display:inline-flex;align-items:center;min-height:48px;cursor:pointer}
.sdrawer__foot .shop__clear{display:inline-block}
@media (prefers-reduced-motion:reduce){.sdrawer,.sdrawer::backdrop{transition:none}}