/* A merchant gallery, not a scaled screenshot. Shared by Discover and Studio. */
.merchant-store{--m-paper:#19181d;--m-ink:#f2eee8;--m-muted:#c0b9c5;--m-accent:#cbb8d6;--m-line:#e2d9e22b;--m-serif:'Cormorant Garamond',Georgia,serif;--m-gutter:clamp(20px,3cqw,54px);position:relative;height:auto;background:radial-gradient(ellipse at 0 100%,#65546d12,transparent 65%),var(--m-paper);color:var(--m-ink);font-family:'Archivo',Arial,sans-serif;line-height:1.5;container-type:inline-size}
.merchant-store button{font-family:inherit;cursor:pointer;color:inherit}
.merchant-store button:focus-visible{outline:2px solid var(--m-accent);outline-offset:4px}
/* Browser chrome stays neutral, independent of each merchant's palette. */
.merchant-address{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;padding:7px var(--m-gutter);border-bottom:1px solid #dedede;background:#f3f3f3;color:#454545;font-size:13px;line-height:1.3}
.merchant-url{display:flex;align-items:center;gap:9px;min-width:0}
.merchant-url .ui-icon{height:13px;width:13px;color:#707070}
.merchant-url strong{font-weight:400;color:inherit}
.merchant-url>[data-store-path],.merchant-url>span:last-child:not(:first-child){display:none}
.domain-note{font-size:12px;white-space:nowrap}
.merchant-header{display:flex;align-items:center;gap:24px;min-height:90px;padding:20px var(--m-gutter);margin:0;border-bottom:1px solid var(--m-line)}
.merchant-identity{display:flex;align-items:center;gap:15px;min-width:0}
.merchant-logo{display:block;width:44px;height:44px;object-fit:cover;border-radius:2px;outline:1px solid var(--m-line);outline-offset:4px;flex:none}
.merchant-name{font:500 clamp(30px,3cqw,44px)/1 var(--m-serif);letter-spacing:-.035em;white-space:nowrap;margin:0}
.merchant-name>span{font:inherit;color:inherit}
.merchant-tagline{font:italic 500 clamp(19px,1.6cqw,24px)/1.2 var(--m-serif);color:var(--m-muted);margin-top:7px;letter-spacing:.005em}
.merchant-nav{display:flex;align-items:center;gap:24px;margin-left:auto;white-space:nowrap}
.merchant-nav button{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;background:none;border:0;font-size:14px;font-weight:400;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;transition:text-decoration-color .2s}
.merchant-nav button:hover{text-decoration-color:var(--m-accent)}
.merchant-bag{display:flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;font-size:14px;white-space:nowrap;padding:8px 0;margin:0}
.merchant-bag .ui-icon{width:19px;height:19px}
.merchant-bag b{font-size:13px;font-weight:400;margin-left:4px;color:var(--m-muted)}
.merchant-breadcrumb{display:none;align-items:center;gap:10px;padding:16px var(--m-gutter);font-size:13px;color:var(--m-muted)}
.merchant-breadcrumb button{padding:0;background:none;border:0;text-underline-offset:4px;font:inherit}
.merchant-breadcrumb button:hover{text-decoration:underline}
.merchant-breadcrumb [aria-current]{color:var(--m-ink)}
.merchant-origin{margin-left:auto;font-size:13px}
/* A photographic spread: still on the left, motion on the right. */
.merchant-body{--m-stage-height:clamp(540px,52cqw,820px);position:relative;isolation:isolate;display:grid;grid-template-columns:64% 36%;grid-template-rows:var(--m-stage-height);gap:0;padding:0}
.merchant-media,.merchant-media-placeholder{grid-column:1/-1;grid-row:1;position:relative;min-width:0}
.merchant-media{height:100%}
.merchant-pair{height:100%;display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr);gap:1px}
.merchant-pair figure{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;border-radius:0;background:#0f1013}
.merchant-pair figure:has(video){grid-column:2;grid-row:1}
.merchant-pair figure:has(img){grid-column:1;grid-row:1}
.merchant-pair img,.merchant-pair video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 43%}
.merchant-store .merchant-photo img{object-fit:cover;background:#111216}
.merchant-store .merchant-media::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0d101629,transparent 30%),linear-gradient(0deg,#101217ed,#101217b3 24%,#10121780 46%,#10121726 62%,transparent 78%)}
.merchant-store .merchant-media::before{content:'';position:absolute;inset:0 0 0 64%;pointer-events:none;z-index:1;background:linear-gradient(0deg,#10121755,#101217b3 35%,#10121780 62%,transparent 92%)}
/* One compact dock, attached to the photograph it controls. */
.merchant-media-control{display:flex;align-items:stretch;gap:10px;width:fit-content;max-width:100%;margin:12px auto 0;padding:9px 11px;border:1px solid #f3efe747;border-radius:2px;background:#ffffff06;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:auto}
.merchant-store .merchant-media-control{position:absolute;z-index:2;top:auto;bottom:28px;left:auto;right:calc(36% + var(--m-gutter));max-width:calc(64% - var(--m-gutter)*2);margin:0;background:#15141b66;box-shadow:0 2px 12px #0002;border-color:#ffffff3d}
.merchant-photo-control,.merchant-video-control{display:flex;align-items:center;flex-direction:column;gap:7px}
.merchant-control-label{font-size:12px;line-height:1.2;color:#f1eee9;font-weight:400;white-space:nowrap}
.merchant-video-control{border-left:1px solid #f3efe733;padding-left:10px}
.merchant-video-control .film-toggle{width:44px;height:44px;margin-block:auto;flex:none;background:#ffffff09;border:1px solid #f3efe780;color:#f5f3e9;box-shadow:none}
.merchant-video-control .film-toggle:hover{background:#ffffff18;border-color:#f3efe7c0}
.merchant-video-control .film-toggle .ui-icon{width:18px;height:18px}
.merchant-media-control button:focus-visible{outline:2px solid var(--m-accent,#d7ef83);outline-offset:3px}
.merchant-thumbs{display:flex;gap:6px}
.merchant-thumbs button{padding:2px;background:#ffffff09;border:1px solid #f3efe747;border-radius:3px;width:48px;height:48px;flex:none;overflow:hidden;opacity:.72;transition:border-color .2s,opacity .2s,box-shadow .2s}
.merchant-thumbs button:hover{opacity:1;border-color:#f3efe7b3}
.merchant-thumbs button[aria-pressed=true]{border-color:var(--m-accent,#d7ef83);box-shadow:0 0 0 1px var(--m-accent,#d7ef83);opacity:1}
.merchant-thumbs img{height:100%;width:100%;object-fit:cover;border-radius:1px}
/* Product story and a compact purchase-and-details group share the spread. */
.merchant-information{display:contents}
.merchant-story,.merchant-shopping{position:relative;z-index:1;min-width:0;align-self:end;padding:0 var(--m-gutter) 40px;color:#fffdf7}
.merchant-story{grid-column:1;grid-row:1;max-width:680px;padding-bottom:158px}
.merchant-shopping{grid-column:2;grid-row:1;padding-left:clamp(24px,3cqw,54px)}
.merchant-eyebrow{color:var(--m-accent);font-size:13px;line-height:1.5;letter-spacing:.08em;font-weight:500;text-transform:uppercase}
.merchant-story .merchant-eyebrow{color:#e8e3ef}
.merchant-information h3{font:500 clamp(42px,5.2cqw,82px)/.98 var(--m-serif);letter-spacing:-.025em;margin:10px 0 18px;text-wrap:balance;color:inherit}
.merchant-information h3 em{font:inherit}
.merchant-description{font-size:clamp(16px,1.25cqw,20px);line-height:1.55;color:#f4f0eddf;max-width:46ch;margin:0}
.merchant-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.merchant-price strong{font:500 clamp(32px,3.3cqw,48px)/1.1 var(--m-serif);color:inherit}
.merchant-price s,.merchant-price del{color:#e4dbe5bd;font-size:14px}
.merchant-price>span{font-size:13px;color:#f3e5f5;border:0;background:none;padding:0;border-radius:0}
.merchant-information .merchant-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;max-width:430px;margin:26px 0 0;padding:22px 0 0;border-top:1px solid #fff4;background:none}
.merchant-facts>div{min-width:0;line-height:1.35}
.merchant-facts dt{font:400 14px/1.4 'Archivo',Arial,sans-serif;letter-spacing:.02em;color:#e8e3ddd9;margin-bottom:7px}
.merchant-facts dd{margin:0;font:500 clamp(20px,1.65cqw,25px)/1.15 var(--m-serif);color:#fffdf7;text-wrap:balance}
/* One purchase component for the storefront, Studio, Full Screen and bag. */
button.merchant-purchase-button{display:inline-flex;justify-content:space-between;align-items:center;gap:42px;width:fit-content;min-width:210px;max-width:100%;min-height:60px;padding:17px 26px;background:var(--m-button,#f4efdf);color:var(--m-button-ink,#14231d)!important;border:1px solid var(--m-button,#f4efdf);border-radius:var(--m-button-radius,2px);outline:var(--m-button-stitch,none);outline-offset:-5px;filter:none;font:500 17px/1.3 'Archivo',Arial,sans-serif;text-shadow:none;box-shadow:0 5px 24px #0002;cursor:pointer;transition:box-shadow .2s,transform .2s}
button.merchant-purchase-button:not(:disabled):hover{box-shadow:0 7px 28px #0004;transform:translateY(-1px)}
button.merchant-purchase-button .ui-icon{width:20px;height:20px}

button.merchant-purchase-button:focus-visible{outline:2px solid var(--m-button);outline-offset:4px}
button.merchant-purchase-button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
button.merchant-purchase-button .ui-icon{flex:none}
#utility-dialog[data-commerce] .merchant-purchase-button{width:100%}
@media(max-width:640px){#utility-dialog[data-commerce] .merchant-purchase-button{font-size:16px;min-height:54px;padding:14px 20px;gap:24px;min-width:0}}
@media(prefers-reduced-motion:reduce){button.merchant-purchase-button{transition:none}}
.merchant-availability{text-align:left;color:#f3efe8;margin:18px 0 0;max-width:none;font:400 16px/1.5 'Archivo',Arial,sans-serif;text-wrap:pretty}
.merchant-availability strong{display:block;margin-bottom:4px;font:italic 500 24px/1.2 var(--m-serif);color:inherit}
.merchant-availability span{display:block;max-width:32ch;text-wrap:balance}
.merchant-panel{position:absolute;z-index:5;top:136px;right:var(--m-gutter);width:min(480px,calc(100% - var(--m-gutter)*2));max-height:min(calc(100% - 165px),calc(100dvh - 130px));overflow:auto;background:var(--m-paper);padding:32px;border:1px solid var(--m-line);border-radius:2px;box-shadow:0 12px 40px #0007}
.merchant-panel-close{position:absolute;right:16px;top:12px;background:none;font-size:27px;padding:4px;width:40px;height:40px}
.merchant-panel h4{font:500 34px/1.1 var(--m-serif);margin:15px 0}
.merchant-panel>p:not(.merchant-eyebrow){font-size:16px;line-height:1.7;color:var(--m-muted)}
.merchant-panel-action{display:block;margin-top:24px;min-height:44px;padding:9px 0;background:none;font-size:15px;border-bottom:1px solid var(--m-accent);color:var(--m-ink)}
.merchant-collection-item{display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:center;width:100%;text-align:left;border:1px solid var(--m-line);background:none;padding:12px;margin-top:20px}
.merchant-collection-item img{width:100px;height:118px;object-fit:cover}.merchant-collection-item strong{display:block;font:500 24px/1.2 var(--m-serif)}.merchant-collection-item span{display:block;margin-top:10px;font-size:16px;color:var(--m-muted)}
.transformation:not([data-reveal=redesign]) .merchant-panel{display:none}
/* Indigo cloth has a different identity, grounded in its stitched label. */
.merchant-store[data-merchant=atelier]{--m-paper:#142131;--m-ink:#f0e9dc;--m-muted:#b8c1ca;--m-accent:#d3c098;--m-line:#b8c4d02e;--m-serif:Georgia,serif;background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 3px),var(--m-paper)}
.merchant-monogram{position:relative;padding:9px 10px;border:1px dashed #d3c098b3;font:600 22px/1.05 'Archivo',Arial,sans-serif;letter-spacing:.03em;transform:rotate(-3deg);white-space:nowrap;flex:none}
.merchant-monogram::after{content:'';position:absolute;inset:4px;border:1px dashed #d3c09899;pointer-events:none}
.merchant-monogram>b{font-weight:800;margin-left:.14em}.merchant-monogram small{font-size:.48em;letter-spacing:.15em}
[data-merchant=atelier] .merchant-name{font:600 clamp(22px,2.4cqw,36px)/1.1 'Archivo',Arial,sans-serif;letter-spacing:.065em}
[data-merchant=atelier] .merchant-name>span{font-weight:400;letter-spacing:.02em}
[data-merchant=atelier] .merchant-header{border-bottom-style:dashed}
[data-merchant=atelier] .merchant-photo img{object-fit:cover;object-position:center 40%;background:#101a26}
[data-merchant=atelier] .merchant-information h3{font-size:clamp(36px,3.7cqw,60px);line-height:1.1;letter-spacing:-.04em}

@container (min-width:641px) and (max-width:1000px){.merchant-body{--m-stage-height:680px}.merchant-shopping{padding-inline:24px}.merchant-information .merchant-facts{grid-template-columns:1fr;gap:12px}.merchant-facts>div{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:baseline}.merchant-facts dd{font-size:21px}.merchant-facts dt{margin:0}.merchant-availability span{max-width:none}}
/* The composition responds to the shop width, including the Studio sidebar. */
@container (max-width:800px){
 .merchant-header{flex-wrap:wrap;gap:14px;padding-block:20px}
 .merchant-identity{flex:1}.merchant-nav{order:3;width:auto;margin:0;gap:26px}
 .merchant-header>.merchant-bag{margin-left:auto}
 .merchant-body{--m-stage-height:680px}
 .merchant-story{padding-bottom:150px}.merchant-shopping{padding-bottom:30px}
 .merchant-information h3{font-size:48px}
 .merchant-description{font-size:16px}
 .merchant-information .merchant-facts{gap:16px 18px}
 .merchant-origin{display:none}
}
@container (max-width:640px){
 .merchant-body{--m-stage-height:400px;grid-template-columns:1fr;grid-template-rows:var(--m-stage-height) auto auto}
 .merchant-pair{grid-template-columns:1fr 1fr}
 .merchant-story{grid-column:1;grid-row:2;max-width:none;padding:28px var(--m-gutter) 0;color:var(--m-ink)}
 .merchant-story .merchant-eyebrow{color:var(--m-accent)}
 .merchant-description{color:var(--m-muted)}
 .merchant-shopping{grid-column:1;grid-row:3;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:24px var(--m-gutter) 28px;color:var(--m-ink)}
 .merchant-price{margin:0;gap:5px 10px}.merchant-price strong{width:100%;font-size:34px}
 .merchant-price s,.merchant-price del{color:var(--m-muted)}.merchant-price>span{color:var(--m-accent)}
 button.merchant-buy,#opening #shop .merchant-buy{width:auto;min-width:172px;min-height:54px;gap:24px;padding:14px 20px;font-size:16px}
 .merchant-availability{grid-column:1/-1;color:var(--m-muted);margin:0;max-width:none}
 .merchant-information .merchant-facts{grid-column:1/-1;grid-row:auto;width:100%;max-width:none;margin:6px 0 0;padding-top:22px;border-color:var(--m-line)}
 .merchant-facts dt{color:var(--m-muted)}.merchant-facts dd{color:var(--m-ink);font-size:22px}
 .merchant-store .merchant-media-control{top:auto;bottom:16px;left:var(--m-gutter);right:auto;max-width:calc(100% - var(--m-gutter)*2);gap:8px;padding:9px 8px;background:#15141b91}
 .merchant-control-label{font-size:11px}.merchant-video-control{padding-left:8px}
 .merchant-thumbs button{width:42px;height:44px}.merchant-thumbs{gap:4px}
 .merchant-store .merchant-media::after{background:linear-gradient(0deg,#10121775,transparent 35%)}
 .merchant-store .merchant-media::before{display:none}
}
@container (max-width:540px){
 .merchant-address{font-size:13px;padding-inline:20px}.domain-note{font-size:11px}
 .merchant-header{padding:22px 20px 14px;gap:10px 14px}
 .merchant-identity{gap:11px;flex-basis:100%}.merchant-logo{width:38px;height:38px;outline-offset:3px}
 .merchant-name{font-size:clamp(23px,7.2cqw,28px)}.merchant-tagline{font-size:19px;max-width:30ch}
 .merchant-nav{gap:24px;order:3;width:auto;flex:1}.merchant-nav button{font-size:14px}
 .merchant-header>.merchant-bag{order:4;font-size:14px}
 .merchant-information h3{font-size:46px;margin-top:10px}
 .merchant-monogram{font-size:20px}.merchant-name>span{white-space:nowrap}
 [data-merchant=atelier] .merchant-name{font-size:21px;letter-spacing:.045em}
 [data-merchant=atelier] .merchant-tagline{font-size:17px}
 [data-merchant=atelier] .merchant-information h3{font-size:38px}
 .merchant-panel{top:148px;padding:28px 22px}
}
@container (max-width:350px){
 .merchant-body{--m-stage-height:350px}
 .merchant-information h3{font-size:40px}
 .merchant-shopping{gap:12px}
 .merchant-store .merchant-media-control{left:10px;max-width:calc(100% - 20px);gap:6px;padding-inline:6px}
 .merchant-thumbs button{width:36px;height:40px}.merchant-video-control{padding-left:6px}
}
@media(prefers-reduced-motion:reduce){.merchant-store button{transition:none}}

@container (max-width:320px){.merchant-shopping{grid-template-columns:1fr}button.merchant-buy,#opening #shop .merchant-buy{width:100%;min-width:0}.merchant-price strong{width:auto}}

@container (min-width:641px) and (max-width:720px){button.merchant-buy,#opening #shop .merchant-buy{min-width:0;width:100%;padding-inline:18px;gap:16px}}

@container (min-width:641px) and (max-width:760px){.merchant-facts>div:first-child{display:block}.merchant-facts>div:first-child dt{margin-bottom:7px}}

/* Each demonstration has its own identity; the purchase tokens follow it into fullscreen. */
[data-merchant=paper] .merchant-name{font-weight:350;letter-spacing:-.035em}
[data-merchant=toys] .merchant-name{font-family:'Archivo',Arial,sans-serif;font-weight:550;letter-spacing:-.05em}
[data-merchant=toys] .merchant-tagline{font-style:normal;font-weight:400}