/* Palena Studio: product page, "journey of luxury" design.
   Loaded only on single product pages (printed by single-product.php).
   Every rule is scoped to .pdp (or body.single-product for the header and the mobile bar),
   so nothing here can change any other page.

   Fonts: Cormorant Garamond and Jost are already loaded by the theme (palena-fonts.css).
   The two light (300) Cormorant files used for headings are declared here. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond/cormorant-300-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond/cormorant-300-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* The site header floats over the page: on product pages it is a solid dark bar, never a grey band. */
body.single-product .palena-header{--palena-header-surface-bg:#0f0d0b;--palena-header-surface-blur:none;--palena-header-surface-border:rgba(242,237,229,.12)}
/* The theme pads the first block of every page below the floating header; this page does that itself (.first), so the theme's padding is switched off here. */
body #app > .pdp{padding-top:0!important}

.pdp,.pdp *{box-sizing:border-box}
.pdp{
  --day-ground:#ece7df; --day-ink:#1b1815; --day-muted:rgba(27,24,21,.62); --day-rule:rgba(27,24,21,.16); --day-card:#e3ddd3;
  --night-ground:#0f0d0b; --night-ink:#f2ede5; --night-muted:rgba(242,237,229,.64); --night-rule:rgba(242,237,229,.16); --night-card:#191613;
  --bronze:#b8905e; --bronze-deep:#7d5c35; --glow:#ecc995;
  --ground:var(--day-ground); --ink:var(--day-ink); --muted:var(--day-muted); --rule:var(--day-rule); --card:var(--day-card); --accent:var(--bronze-deep);
  --display:'Cormorant Garamond','Cormorant',Garamond,Georgia,serif;
  --body:'Jost','Futura','Century Gothic','Avenir Next',system-ui,sans-serif;
  --hd:calc(var(--palena-header-height,85px) + var(--palena-admin-bar-height,0px));
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  position:relative;margin:0;background:var(--ground);color:var(--ink);
  font:300 16px/1.7 var(--body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  --fade:.9s;
  transition:background-color var(--fade) ease,color var(--fade) ease;color-scheme:light}
.pdp[data-light="on"]{--ground:var(--night-ground);--ink:var(--night-ink);--muted:var(--night-muted);--rule:var(--night-rule);--card:var(--night-card);--accent:var(--glow);color-scheme:dark}
.pdp img{display:block;max-width:100%;height:auto}
.pdp a{color:inherit}
.pdp :focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.pdp h1,.pdp h2,.pdp h3{font-family:var(--display);font-weight:300;text-wrap:balance;margin:0;color:var(--ink);letter-spacing:0;text-transform:none}
.pdp p{margin:0}
.pdp figure{margin:0}
.pdp ul{list-style:none;margin:0;padding:0}
.pdp .label{font:400 11.5px/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase}
.pdp .wrap{max-width:1440px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
@media (min-width:900px){.pdp .wrap{padding-left:max(56px,env(safe-area-inset-left,0px));padding-right:max(56px,env(safe-area-inset-right,0px))}}
.pdp .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pdp .nb{white-space:nowrap}
.pdp button{font-family:var(--body)}

/* First screen: the photograph on the left, the decision panel on the right */
.pdp .first{display:grid;grid-template-columns:minmax(0,1fr);padding-top:var(--hd)}
@media (min-width:1000px){.pdp .first{grid-template-columns:minmax(0,1fr) 480px;min-height:100vh}}
@media (min-width:1280px){.pdp .first{grid-template-columns:minmax(0,1fr) 528px}}
.pdp .stage{position:relative;background:var(--ground);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 0 22px;transition:background var(--fade) ease}
@media (min-width:1000px){.pdp .stage{align-self:start;height:calc(100vh - var(--hd));min-height:560px;position:sticky;top:var(--hd);padding:24px 40px}}
/* The photo keeps its own 3:2 ratio: nothing is cropped, nothing is blurred in to fill space */
/* The slider. Without script the photographs are a row that can be swiped or scrolled (lights-on photographs stay hidden).
   With script (.has-slider) they sit on top of each other and fade into one another, at the same pace as the page turning dark (--fade). */
.pdp .frames{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;position:relative;aspect-ratio:3/2;width:100%;margin-inline:auto}
.pdp .frames::-webkit-scrollbar{display:none}
.pdp .stage .view{position:relative;width:100%;margin-inline:auto}
/* .frames is listed too, so a page the cache still holds in its old markup (photographs outside .view) keeps the same width */
@media (min-width:1000px){.pdp .stage .view,.pdp .stage-ui,.pdp .frames{width:min(100%,calc((100vh - var(--hd) - 112px) * 1.5))}}
.pdp .stage .frame{flex:0 0 100%;min-width:0;margin:0;position:relative;scroll-snap-align:start;scroll-snap-stop:always}
.pdp.has-slider .frames{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);overflow:hidden;scroll-snap-type:none;touch-action:pan-y pinch-zoom}
.pdp.has-slider .stage .frame{grid-area:1 / 1;flex:none;display:none;z-index:1;opacity:0;visibility:hidden;pointer-events:none;scroll-snap-align:none;
  /* the photograph that is leaving stays in place until the new one has faded in over it, then goes at once */
  transition:opacity 0s linear var(--fade),visibility 0s linear var(--fade)}
.pdp.has-slider .stage .frame.is-near{display:block}
.pdp.has-slider .stage .frame.is-active{z-index:2;opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--fade) ease,visibility 0s}
.pdp.slider-init .stage .frame{transition:none!important}
.pdp .stage .frame a{display:block;width:100%;height:100%;cursor:zoom-in}
.pdp .stage .frame img{display:block;width:100%;height:100%;object-fit:contain}
.pdp .stage-ui{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 var(--gr) 0 var(--gl);flex-wrap:wrap;margin-inline:auto}
@media (min-width:1000px){.pdp .stage-ui{padding:0}}
.pdp .switch{display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border:1px solid var(--rule);background:transparent;color:var(--ink);font:400 11.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .9s,border-color .9s;border-radius:0}
.pdp .switch{border-color:var(--muted)}
.pdp:not(.has-slider) .switch{display:none}
.pdp .view .switch{position:absolute;top:16px;right:16px;z-index:6;min-height:44px;gap:11px;padding:8px 16px 8px 10px;
  background:rgba(15,13,11,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#f2ede5;border:1px solid rgba(242,237,229,.4);box-shadow:0 2px 18px rgba(0,0,0,.28);
  transition:color .9s,border-color .9s,background .9s,box-shadow .9s}
.pdp .view .switch .knob{border-color:rgba(242,237,229,.7)}
.pdp .view .switch .knob::after{background:#f2ede5}
.pdp .view .switch:hover{border-color:var(--glow)}
.pdp .view .switch[aria-pressed="true"]{border-color:rgba(236,201,149,.75);box-shadow:0 2px 22px rgba(236,201,149,.22)}
.pdp .view .switch[aria-pressed="true"] .knob{border-color:rgba(236,201,149,.8)}
.pdp .view .switch[aria-pressed="true"] .knob::after{background:var(--glow)}
.pdp .view .switch.hint{border-color:var(--glow)}
.pdp .view .switch:focus-visible{outline:1px solid var(--glow);outline-offset:3px}
.pdp .switch .knob{width:38px;height:20px;border-radius:10px;border:1px solid var(--muted);position:relative;transition:background .4s}
.pdp .switch .knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink);transition:transform .4s ease,background .4s,box-shadow .4s}
.pdp .switch[aria-pressed="true"] .knob{background:rgba(236,201,149,.25)}
.pdp .switch[aria-pressed="true"] .knob::after{transform:translateX(18px);background:var(--glow);box-shadow:0 0 12px 2px rgba(236,201,149,.8)}
/* a short heartbeat when the page opens (two quick beats, three times); the script removes .hint afterwards */
@keyframes pdp-beat{0%,100%{box-shadow:0 0 0 0 rgba(236,201,149,0);transform:scale(1)}12%{box-shadow:0 0 0 0 rgba(236,201,149,.55);transform:scale(1.12)}38%{box-shadow:0 0 0 11px rgba(236,201,149,0);transform:scale(1)}50%{box-shadow:0 0 0 0 rgba(236,201,149,.55);transform:scale(1.12)}76%{box-shadow:0 0 0 11px rgba(236,201,149,0);transform:scale(1)}}
.pdp .switch.hint{border-color:var(--glow)}
.pdp .switch.hint .knob{animation:pdp-beat 2.2s ease-out 1.4s 3}
.pdp .views{display:inline-flex;border:1px solid var(--rule)}
.pdp .views button{font:400 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:none;border:0;padding:13px 14px;cursor:pointer;opacity:.6;border-radius:0}
.pdp .views button[aria-pressed="true"]{opacity:1;box-shadow:inset 0 -1px 0 var(--accent)}
.pdp .count{font:400 11px/1 var(--body);letter-spacing:.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.pdp .stage-ui .nav{display:none;gap:8px}
.pdp.has-slider .stage-ui .nav{display:inline-flex}
.pdp .stage-ui .nav button{width:44px;height:44px;display:grid;place-items:center;padding:0;margin:0;border:1px solid var(--rule);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;transition:border-color .3s,color .3s,opacity .3s}
.pdp .stage-ui .nav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pdp .stage-ui .nav button:disabled{opacity:.35;cursor:default}
.pdp .stage-ui .nav svg{width:18px;height:18px}

/* The decision panel */
.pdp .panel{padding:36px var(--gr) 48px var(--gl);display:grid;align-content:start;gap:22px;min-width:0}
@media (min-width:1000px){.pdp .panel{padding:56px 48px 56px 44px;border-left:1px solid var(--rule)}}
.pdp .crumbs{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted)}
.pdp .crumbs a{text-decoration:none}
.pdp .crumbs a:hover{color:var(--accent)}
.pdp .panel h1{font-size:clamp(34px,3.1vw,46px);line-height:1.02;overflow-wrap:break-word}
.pdp .panel h1 > span:not(.sr){display:block;font-family:var(--display)!important;font-style:italic;font-size:.62em;margin-top:8px;color:var(--muted)}
.pdp .panel .tag{font:italic 300 21px/1.35 var(--display)}
.pdp .mat{display:grid;gap:10px}
.pdp .mat .mrow{display:flex;gap:12px;align-items:center}
.pdp .mat img{width:34px;height:34px;object-fit:cover;border:1px solid var(--rule)}
.pdp .mat .mrow span{font-size:15px;line-height:1.25}
.pdp .mat .mrow small{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--muted);letter-spacing:.01em}
.pdp .cta{display:flex;justify-content:center;align-items:center;gap:12px;padding:18px 26px;border:1px solid var(--ink);border-radius:0;font:400 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--ground);cursor:pointer;width:100%;transition:background .9s,color .9s,border-color .9s}
.pdp .cta:hover{background:transparent;color:var(--ink)}
.pdp .under{font-size:13.5px;color:var(--muted);text-align:center;margin-top:-8px}
.pdp .links{display:flex;flex-direction:column;gap:12px}
.pdp .links > a,.pdp .links > button,.pdp .links .wish > button,.pdp .links .wish > a{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 0;margin:0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;color:var(--ink);text-align:left;text-decoration:none;font:300 15px/1.4 var(--body);cursor:pointer}
.pdp .links > a:hover,.pdp .links > button:hover,.pdp .links .wish > button:hover,.pdp .links .wish > a:hover{color:var(--accent)}
.pdp .links .wish{display:grid;gap:0}
.pdp .links .wish > a{border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--muted)}
.pdp .links svg{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
.pdp .prov{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.pdp .prov .mono{font:400 12px/1.4 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;letter-spacing:.1em;color:var(--accent);padding:3px 6px;border:1px solid var(--rule);white-space:nowrap}

/* The work: up to 2 chosen photographs in a column on the left, the story beside them */
.pdp .work{padding-block:clamp(72px,10vw,140px)}
.pdp .work .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1000px){.pdp .work .grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px}}
.pdp .work .grid.solo{max-width:760px;margin-inline:auto}
@media (min-width:1000px){.pdp .work .grid.solo{grid-template-columns:minmax(0,1fr)}}
.pdp .column{display:grid;gap:18px;align-content:start;min-width:0}
.pdp .column img{width:100%;height:auto;background:var(--card)}
.pdp .column a{display:block;cursor:zoom-in}
.pdp .story{display:grid;gap:22px;align-content:start;min-width:0}
@media (min-width:1000px){.pdp .story{position:sticky;top:calc(var(--hd) + 48px)}}
.pdp .story .label{color:var(--muted)}
.pdp .story .body{display:grid;gap:18px}
.pdp .story .body p{font-size:16px;color:var(--muted);text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}
/* The link to the design narrative is bold, so it reads as a link */
.pdp .story .body a[href*="/story/"]{font-weight:700}

/* Description tabs */
.pdp .acc{border-top:1px solid var(--rule)}
.pdp details{border-bottom:1px solid var(--rule)}
.pdp details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;font:400 12px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase}
.pdp details summary::-webkit-details-marker{display:none}
.pdp details summary::after{content:"+";font:300 20px/1 var(--body);color:var(--muted)}
.pdp details[open] summary::after{content:"\2212"}
.pdp details .in{padding-bottom:18px;color:var(--muted);font-size:16px;display:grid;gap:10px}
.pdp details .in p{text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal;margin:0}
.pdp details .in a{color:var(--ink);text-underline-offset:3px}
.pdp details .in ul,.pdp details .in ol{margin:0;padding-left:1.2em;list-style:revert}
.pdp details .in strong,.pdp details .in b{font-weight:400;color:var(--ink)}

/* Dimensions: a block at the top of the decision panel, in inches with a switch to cm */
.pdp .dbox{display:grid;margin-top:-6px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.pdp .dhead{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px;min-height:40px}
.pdp .dhead .label{color:var(--muted)}
.pdp .units{display:none;border:1px solid var(--rule)}
.pdp.has-js .units{display:inline-flex}
.pdp .units button{font:400 12px/1 var(--body);letter-spacing:.08em;color:var(--ink);background:none;border:0;padding:11px 14px;margin:0;cursor:pointer;opacity:.55;border-radius:0;min-width:46px;transition:opacity .3s}
.pdp .units button:hover{opacity:.9}
.pdp .units button[aria-pressed="true"]{opacity:1;box-shadow:inset 0 -1px 0 var(--accent)}
.pdp .dgroup{border-top:1px solid var(--rule)}
.pdp .dgt{font:300 21px/1.2 var(--display);padding-top:14px;color:var(--ink)}
.pdp .dstrip{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin:0;padding:0;list-style:none}
.pdp .dstrip li{min-width:0;padding:14px 0 14px 16px;border-left:1px solid var(--rule)}
.pdp .dstrip li:first-child{border-left:0;padding-left:0}
.pdp .dgt + .dstrip li{padding-top:8px}
.pdp .dl{display:block;font:400 11px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pdp .dv{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:5px}
.pdp .dv b{font:300 clamp(26px,2.1vw,32px)/1.05 var(--display);font-feature-settings:"lnum" 1;font-variant-numeric:lining-nums;color:var(--ink);white-space:nowrap}
.pdp .dv i{font:300 13px/1 var(--body);font-style:normal;letter-spacing:.06em;color:var(--muted)}
.pdp .dsec{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0;padding:0 0 12px;list-style:none}
.pdp .dsec li{display:flex;align-items:baseline;gap:8px;min-width:0}
.pdp .dsec .dl{font-size:10px;letter-spacing:.16em}
.pdp .dsec .dv{display:inline-flex;margin:0;gap:4px}
.pdp .dsec .dv b{font:400 14px/1.2 var(--body);letter-spacing:0;color:var(--ink)}
.pdp .dsec .dv i{font-size:12px}
.pdp .dmore{border-bottom:0;border-top:1px solid var(--rule)}
.pdp .dmore summary{padding-block:12px;font-size:11px;letter-spacing:.18em;color:var(--muted)}
.pdp .dmore summary:hover{color:var(--ink)}
.pdp .dmore .dgroup{border-top:1px solid var(--rule)}
.pdp .dnote{margin-top:2px;padding:8px 0 4px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pdp .dnote + .dnote{padding-top:0}
@media (max-width:699px){
  .pdp .dstrip[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp .dstrip[style*="--n:4"] li:nth-child(odd){border-left:0;padding-left:0}
  .pdp .dstrip[style*="--n:4"] li:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* Materials and finishes */
.pdp .finishes{padding-block:clamp(72px,9vw,128px);border-top:1px solid var(--rule)}
.pdp .finishes .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.pdp .finishes h2{font-size:clamp(28px,3vw,40px);line-height:1.1}
.pdp .finishes .head p{max-width:56ch;color:var(--muted);text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none}
/* One square tile per material; Bespoke is always the last tile, same size; more materials wrap to the next row */
.pdp .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
@media (min-width:900px){.pdp .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px}}
.pdp .swatch{display:block;text-decoration:none;color:inherit;min-width:0}
.pdp .swatch img,.pdp .swatch .sq{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.pdp .swatch b{display:block;margin-top:14px;font:400 24px/1.2 var(--display);color:var(--ink)}
.pdp .swatch > span{display:block;font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:2px;text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}
/* A word that already has a hyphen in it stays on one line (the template wraps it in .nb) */
.pdp .swatch > span .nb{white-space:nowrap}
.pdp button.swatch{display:block;align-self:start;width:100%;padding:0;margin:0;border:0;border-radius:0;background:none;text-align:left;cursor:pointer;font:inherit}
.pdp .swatch.bespoke .sq{display:grid;place-items:center;background:var(--card);border:1px solid var(--rule);transition:background .9s,border-color .4s}
.pdp .swatch.bespoke .plus{font:200 clamp(56px,6vw,84px)/1 var(--display);color:var(--accent);transition:transform .4s ease}
.pdp .swatch.bespoke:hover .sq{border-color:var(--accent)}
.pdp .swatch.bespoke:hover .plus{transform:rotate(90deg)}
.pdp .swatch.bespoke > span{text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:5px}

/* Lifestyle: the lifestyle rows chosen in the product editor, restyled (layouts and slideshows are unchanged) */
.pdp .life{padding-block:0 clamp(72px,9vw,128px)}
.pdp .product-lifestyle-sections{padding:0;max-width:none;margin:0;display:block}
.pdp .product-lifestyle-section{margin:0;min-width:0;max-width:100%}
.pdp .product-lifestyle-section + .product-lifestyle-section{margin-top:clamp(40px,5vw,72px)}
.pdp .product-lifestyle__title{font:300 clamp(28px,3vw,40px)/1.1 var(--display);margin:0 0 28px;color:var(--ink)}
.pdp .product-lifestyle-section + .product-lifestyle-section .product-lifestyle__title{margin-top:0}
.pdp .product-lifestyle__grid{gap:clamp(14px,1.6vw,22px)}
.pdp .product-lifestyle__cell,.pdp .product-lifestyle__slider,.pdp .product-lifestyle__slide{background:var(--card)}
/* A slideshow must never take its width from its slides (Swiper lays the slides out in one long row) */
.pdp .product-lifestyle__slider{width:100%;min-width:0;max-width:100%}
.pdp .product-lifestyle__img{object-fit:cover}

/* Provenance */
.pdp .provenance{background:#0f0d0b;color:#f2ede5;padding-block:clamp(72px,9vw,128px)}
.pdp .provenance .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:900px){.pdp .provenance .grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}}
.pdp .provenance .grid > div{min-width:0}
.pdp .provenance .grid > div:first-child{container-type:inline-size}
.pdp .provenance h2{font-size:clamp(24px,8.4cqw,40px);line-height:1.1;color:#f2ede5;margin-top:16px}
.pdp .provenance .label{color:rgba(242,237,229,.64)}
.pdp .provenance ul{border-top:1px solid rgba(242,237,229,.16)}
.pdp .provenance li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding-block:18px;border-bottom:1px solid rgba(242,237,229,.16)}
.pdp .provenance li b{font:400 12px/1.6 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--glow)}
.pdp .provenance li span{color:rgba(242,237,229,.72);text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none}
@media (max-width:560px){.pdp .provenance li{grid-template-columns:minmax(0,1fr);gap:4px}}
.pdp .provenance a{display:inline-block;margin-top:26px;font:400 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding-block:8px;border-bottom:1px solid var(--bronze);color:#f2ede5}
.pdp .provenance a:hover{color:var(--glow)}

/* Related works */
.pdp .related{padding-block:clamp(72px,9vw,128px)}
.pdp .related h2{font-size:clamp(26px,2.6vw,36px);margin-bottom:28px}
.pdp .rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:760px){.pdp .rel{grid-template-columns:minmax(0,1fr)}}
.pdp .rel a{text-decoration:none;min-width:0}
.pdp .rel img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--card)}
.pdp .rel b{display:block;margin-top:12px;font:400 22px/1.2 var(--display);color:var(--ink)}
.pdp .rel span{font-size:13.5px;color:var(--muted)}
.pdp .rel a:hover b{color:var(--accent)}

/* Mobile action bar */
.pdp .mbar{display:none}
@media (max-width:999px){
  body.single-product{padding-bottom:84px}
  .pdp .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1100;gap:10px;align-items:center;padding:12px var(--gr) calc(12px + env(safe-area-inset-bottom,0px)) var(--gl);background:var(--ground);border-top:1px solid var(--rule);transition:background .9s}
  .pdp .mbar .cta{padding:16px 14px;letter-spacing:.14em;white-space:nowrap;font-size:11px;flex:1}
  /* the lights switch sits inside the photograph, top right, on phones too */
  .pdp .stage-ui{justify-content:space-between;gap:10px;width:100%;box-sizing:border-box}
  @media (max-width:359px){.pdp .stage-ui .count{display:none}}
  .pdp .view .switch{top:10px;right:10px;gap:9px;padding:6px 12px 6px 8px;letter-spacing:.14em;font-size:10.5px}
  /* the bar goes away while the menu is open, so it cannot show through the menu and cut it at the bottom */
  .pdp .mbar{transition:background .9s,transform .25s ease,opacity .25s ease,visibility 0s}
  body.palena-header-open .pdp .mbar{transform:translateY(100%);opacity:0;visibility:hidden;pointer-events:none}
}

/* Phones: the lights switch is smaller and sits in the bottom right corner of the photograph (tablets keep it top right) */
@media (max-width:767px){
  .pdp .view .switch{top:auto;bottom:10px;right:10px;min-height:32px;gap:7px;padding:4px 10px 4px 6px;letter-spacing:.12em;font-size:9.5px}
  .pdp .view .switch::before{content:"";position:absolute;inset:-6px} /* the touch area stays generous */
  .pdp .view .switch .knob{width:30px;height:16px;border-radius:8px}
  .pdp .view .switch .knob::after{top:2px;left:2px;width:10px;height:10px}
  .pdp .view .switch[aria-pressed="true"] .knob::after{transform:translateX(14px);box-shadow:0 0 9px 2px rgba(236,201,149,.8)}
}

@media (prefers-reduced-motion:reduce){
  .pdp .switch.hint .knob{animation:none}
  .pdp{--fade:.6s}
  .pdp .stage img,.pdp .cta,.pdp .mbar{transition:none}
  .pdp .swatch.bespoke .plus{transition:none}
}

/* A product with no photograph: the panel stands alone */
.pdp .first.no-stage{min-height:0}
@media (min-width:1000px){
  .pdp .first.no-stage{grid-template-columns:minmax(0,1fr)}
  .pdp .first.no-stage .panel{max-width:720px;margin-inline:auto;border-left:0;padding-inline:44px}
}