
#gg-product-preview {
  --paper:light-dark(#fbf8ef,#22291f);
  --ink:light-dark(#243e30,#f1eddf);
  --muted:light-dark(#4b5b4d,#c0c9b7);
  --line:light-dark(#a7ac97,#8b987d);
  --divider:light-dark(#dedccd,#424e3c);
  --chip:light-dark(#f3efe2,#2d362a);
  --on:light-dark(#264535,#d7e6bd);
  --on-text:light-dark(#fff9ed,#213025);
  --focus:light-dark(#1b6044,#d6edab);
  color-scheme:light dark;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--divider);
  border-radius:22px;
  padding:clamp(14px,4vw,30px);
  font:400 15px/1.5 system-ui,sans-serif;
}
#gg-product-preview *, #gg-product-preview *::before, #gg-product-preview *::after {box-sizing:border-box}
#gg-product-preview [hidden] {display:none !important}
#gg-product-preview p, #gg-product-preview h2, #gg-product-preview h3 {margin:0}
#gg-product-preview .gg-heading {text-align:center}
#gg-product-preview .gg-kicker {
  color:var(--muted); text-transform:uppercase; letter-spacing:.17em;
  font-size:11px; font-weight:650;
}
#gg-product-preview h2 {
  font:400 clamp(30px,6.1vw,54px)/1.08 Georgia,serif;
  letter-spacing:-.045em; margin:7px 0 18px; text-wrap:balance;
}
#gg-product-preview h3 {
  font:400 clamp(23px,4.4vw,34px)/1.13 Georgia,serif;
  letter-spacing:-.026em; overflow-wrap:anywhere;
}
#gg-product-preview fieldset {min-width:0; border:0; padding:0; margin:0}
#gg-product-preview .gg-hidden-label, #gg-product-preview .gg-radio {
  position:absolute; inline-size:1px; block-size:1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:-1px;
}
#gg-product-preview .gg-categories {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  max-width:430px; margin:0 auto 18px;
}
#gg-product-preview .gg-category, #gg-product-preview .gg-arrow,
#gg-product-preview select, #gg-product-preview .gg-thumb, #gg-product-preview summary {
  font:inherit; color:var(--ink); border:1px solid var(--line); background:var(--paper);
  min-inline-size:44px; min-block-size:44px; transition:background-color .16s, transform .16s;
}
#gg-product-preview .gg-category {
  display:grid; place-items:center; padding:6px 8px; border-radius:100px;
  font-size:13px; font-weight:650; line-height:1.25; text-align:center;
}
#gg-product-preview input:checked + .gg-category {
  color:var(--on-text); background:var(--on); border-color:var(--on);
}
#gg-product-preview :is(button, select, summary):focus-visible,
#gg-product-preview input:focus-visible + label {
  outline:3px solid var(--focus); outline-offset:3px;
}
#gg-product-preview :is(.gg-arrow,.gg-category,.gg-thumb,summary):active {transform:scale(.96)}
@media(hover:hover) {
  #gg-product-preview .gg-radio:not(:checked) + label:hover,
  #gg-product-preview .gg-arrow:hover {background:var(--chip)}
}
#gg-product-preview .gg-stage {
  position:relative; isolation:isolate; display:grid; place-items:center;
  height:clamp(185px,41vw,317px); border-radius:16px; overflow:hidden;
  background:
    linear-gradient(120deg,transparent 22%,light-dark(#ac966412,#0a140c27) 22.6%,transparent 41%),
    radial-gradient(ellipse at 49% 16%,light-dark(#fff9e9,#59614a),light-dark(#e6dac1,#313b2d) 76%);
}
#gg-product-preview .gg-count {
  position:absolute; z-index:4; top:12px; left:13px; border-radius:100px;
  border:1px solid var(--divider); background:var(--paper); padding:3px 9px;
  color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
#gg-product-preview .gg-shelf {
  position:absolute; z-index:1; bottom:13%; width:80%; height:9%; border-radius:50%;
  background:linear-gradient(light-dark(#fffaec,#899176),light-dark(#cec1a3,#48543d));
  border:1px solid light-dark(#d0c1a2,#737e62);
  box-shadow:0 10px 15px light-dark(#4a392333,#10180f70),0 2px 0 light-dark(#baaa8d,#4c5842);
}
#gg-product-preview .gg-product-art {
  position:absolute; z-index:2; bottom:17.7%; left:25%; width:50%; height:77%;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 7px 5px #18291c35);
}
#gg-product-preview .gg-peek {
  z-index:1; left:8%; width:25%; height:49%; bottom:19%; opacity:.52;
  filter:saturate(.7) drop-shadow(0 5px 5px #18291c26);
}
#gg-product-preview .gg-peek:last-of-type {left:auto; right:8%}
#gg-product-preview .gg-stage--door {
  color-scheme:light;
}
#gg-product-preview .gg-stage--door .gg-product-art {left:9%; width:82%; height:68%}
#gg-product-preview .gg-stage--door .gg-catalog-art {
  mix-blend-mode:multiply;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),
             linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect;
}
#gg-product-preview .gg-stage--door .gg-photo-art {
  left:22%; width:56%; border-radius:12px; object-fit:cover; object-position:center;
}
#gg-product-preview .gg-info {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:13px 0;
}
#gg-product-preview .gg-desc {color:var(--muted); margin-top:3px}
#gg-product-preview .gg-arrows {display:flex; gap:8px}
#gg-product-preview .gg-arrow {width:44px; border-radius:50%; font-size:21px; line-height:1; padding:0}
#gg-product-preview .gg-thumbs {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
}
#gg-product-preview .gg-thumb {
  display:grid; grid-template-rows:40px auto; justify-items:center; align-items:center;
  gap:4px; padding:6px; border-radius:11px; text-align:center; min-width:0;
  font-size:12px; line-height:1.3; font-weight:600;
}
#gg-product-preview .gg-thumb img {width:44px; height:40px; object-fit:contain}
#gg-product-preview input:checked + .gg-thumb {
  background:var(--chip); border-color:var(--on); box-shadow:inset 0 0 0 1px var(--on);
}
#gg-product-preview input:checked + .gg-thumb span {text-decoration:underline; text-underline-offset:3px}
#gg-product-preview .gg-select-label {display:grid; gap:5px; color:var(--muted); font-size:13px; font-weight:650}
#gg-product-preview select {
  width:100%; border-radius:9px; padding:7px 10px; font-weight:400; font-size:16px;
}
#gg-product-preview .gg-enquiry {margin-top:15px; padding-top:13px; border-top:1px solid var(--divider)}
#gg-product-preview summary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  color:var(--on-text); background:var(--on); border-color:var(--on); border-radius:100px;
  padding:8px 14px; font-size:14px; font-weight:650; list-style:none;
}
#gg-product-preview summary::-webkit-details-marker {display:none}
#gg-product-preview summary span {display:inline-block; transition:transform .18s}
#gg-product-preview summary:is(:hover,:focus-visible) span {transform:translate(2px,-2px)}
#gg-product-preview .gg-message {
  padding:12px 14px; margin-top:9px; border:1px solid var(--divider); border-radius:10px;
  background:var(--chip); color:var(--ink);
}
#gg-product-preview .gg-message p + p {margin-top:5px}
#gg-product-preview .gg-grow {
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:clamp(14px,3vw,24px);
  align-items:center; background:var(--chip); border-radius:16px; overflow:hidden;
}
#gg-product-preview .gg-grow img {display:block; width:100%; height:246px; object-fit:cover; object-position:center 52%}
#gg-product-preview .gg-grow-copy {padding:15px 16px 15px 0}
#gg-product-preview .gg-grow h3 {margin:4px 0 6px}
#gg-product-preview .gg-grow-options {margin:11px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
#gg-product-preview .gg-grow-options li {
  padding:3px 8px; border:1px solid var(--line); border-radius:100px; font-size:12px;
}
#gg-product-preview .gg-terms {margin-top:17px; padding:14px 16px; border:1px solid var(--divider); border-radius:12px}
#gg-product-preview .gg-terms h4 {font-size:16px; margin:0}
#gg-product-preview .gg-terms ul {padding-left:19px; margin:7px 0 8px}
#gg-product-preview .gg-terms li + li {margin-top:4px}
#gg-product-preview .gg-terms p {color:var(--muted)}
@media(max-width:520px) {
  #gg-product-preview .gg-grow {grid-template-columns:1fr; gap:0}
  #gg-product-preview .gg-grow-copy {padding:14px}
  #gg-product-preview .gg-grow img {height:210px}
}
@media(max-width:440px) {
  #gg-product-preview .gg-info {grid-template-columns:1fr; gap:8px}
  #gg-product-preview .gg-arrows {justify-content:flex-end}
  #gg-product-preview .gg-thumbs {grid-template-columns:repeat(2,minmax(0,1fr))}
  #gg-product-preview .gg-thumb {grid-template-columns:30px 1fr; grid-template-rows:auto; text-align:left}
  #gg-product-preview .gg-thumb img {width:30px; height:34px}
}
@media(prefers-reduced-motion:reduce) {
  #gg-product-preview *, #gg-product-preview *::before, #gg-product-preview *::after {
    animation:none !important; transition:none !important;
  }
  #gg-product-preview :is(.gg-arrow,.gg-category,.gg-thumb,summary):active,
  #gg-product-preview summary:is(:hover,:focus-visible) span {transform:none}
}
@media(forced-colors:active) {
  #gg-product-preview input:checked + label {border:2px solid Highlight; text-decoration:underline}
  #gg-product-preview :is(button, select, summary):focus-visible,
  #gg-product-preview input:focus-visible + label {outline-color:Highlight}
}
/* The product stage carries the visual weight. Keep browsing below the shelf. */
#gg-product-preview {
  --ink:light-dark(#173426,#f7f3e7);
  --muted:light-dark(#3e5747,#d3dfcc);
  --hero-light:light-dark(#f5f3dc,#64715b);
  --hero-shadow:light-dark(#becbb2,#273b30);
  padding:clamp(14px,3.5vw,26px);
}
#gg-product-preview .gg-heading {padding:clamp(12px,3vw,24px) 0 18px}
#gg-product-preview h2 {
  color:var(--ink);
  font-size:clamp(37px,7.7vw,66px);
  line-height:1.02;
  margin:8px 0 10px;
}
#gg-product-preview h2 em {color:var(--muted);font-weight:400}
#gg-product-preview .gg-hero-intro {color:var(--muted);max-width:37ch;margin-inline:auto}
#gg-product-preview .gg-categories {margin-bottom:14px}
#gg-product-preview .gg-stage {
  height:clamp(275px,62vw,445px);
  background:
    radial-gradient(ellipse at 51% 46%,var(--hero-light),transparent 64%),
    linear-gradient(155deg,var(--hero-shadow),var(--hero-light) 63%,var(--hero-shadow));
}
#gg-product-preview .gg-stage::before {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(119deg,transparent 15%,#ffffff24 16%,transparent 34%,transparent 62%,#ffffff13 63%,transparent 83%);
}
#gg-product-preview .gg-stage--door {
  --hero-light:#f5f3dc;
  --hero-shadow:#becbb2;
}
#gg-product-preview .gg-stage .gg-product-art:not(.gg-peek) {
  left:19%;width:62%;height:80%;bottom:13.5%;
}
#gg-product-preview .gg-stage--door .gg-product-art:not(.gg-peek) {left:7%;width:86%;height:69%}
#gg-product-preview .gg-stage--door .gg-photo-art:not(.gg-peek) {left:23%;width:54%;height:73%}
#gg-product-preview .gg-stage .gg-peek {height:41%;opacity:.29;bottom:15%}
#gg-product-preview .gg-shelf {
  bottom:10%;width:86%;height:7%;
  background:linear-gradient(light-dark(#fffae8,#9eac8b),light-dark(#c3c6a8,#4a614e));
}
#gg-product-preview .gg-info {padding-block:16px}
#gg-product-preview .gg-info h3 {color:var(--ink)}
#gg-product-preview .gg-info .gg-desc {color:var(--muted)}
#gg-product-preview .gg-enquiry summary {
  background-image:linear-gradient(165deg,#ffffff24,transparent 68%);
  box-shadow:inset 0 1px 0 #ffffff42,0 3px 8px #102b2420;
}
@media(max-width:440px) {
  #gg-product-preview .gg-heading {padding-top:12px}
  #gg-product-preview .gg-stage .gg-peek {opacity:.18}
  #gg-product-preview .gg-stage:not(.gg-stage--door) .gg-product-art:not(.gg-peek) {left:14%;width:72%}
  #gg-product-preview .gg-arrows {justify-content:flex-start}
}

/* Let the hero surface show through the product panels in either host theme. */
#gg-product-preview > article[data-panel] {
  background:transparent !important;
}
