/* Production photo preview overlay; fallback SVG and all existing controls remain available. */
.preview-svg-wrap{position:relative}
.preview.hg-photo-layout .preview-svg-wrap{display:flex;flex-direction:column;align-items:stretch;justify-content:center;width:100%;height:auto;min-height:0;max-width:none;margin-top:0;flex:0 0 auto}
.hg-photo-live-canvas{display:block;width:100%;height:405px;min-height:0;max-width:none;flex:0 0 auto;object-fit:contain}
.hg-photo-live-canvas[hidden]{display:none!important}
.preview.hg-photo-ready #handleSvg{display:none!important}
.preview:not(.hg-photo-ready) .hg-photo-live-canvas{display:none}
.preview.hg-photo-layout .hg-photo-live-note{width:100%;box-sizing:border-box}
.hg-photo-live-note{align-self:stretch;width:100%;box-sizing:border-box;margin:5px 0 0;text-align:center;color:var(--wh-text-light,#756b5b);font-size:.68rem;line-height:1.4}
.hg-photo-live-note[hidden]{display:none!important}
.hg-photo-live-note .hg-note-phone{display:none}
.wood-swatch.hg-photo-wood-swatch{background-size:cover;background-position:center}
.wood-swatch.hg-photo-wood-swatch>svg{display:none!important}
.hg-photo-option-swatch{background-size:cover!important;background-position:center!important}
/* 2026-10-05: the Random tile, split - black horn on the left half, marbled across the rest (configurator.js setSplitSwatch). */
.hg-photo-option-swatch.hg-photo-split{background-size:50% 100%,cover!important;background-position:left center,center!important;background-repeat:no-repeat!important}
#configurator .hg-photo-live-canvas,#configurator .hg-photo-wood-swatch,#configurator .hg-photo-option-swatch,
.hg-mini-material img.hg-mini-landscape{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
@media(max-width:960px){
  body.page-template-page-configure .hg-mini-material .hg-mini-art{min-width:0}
  /* 2026-10-08 (owner, on the sticky bar at the top: "only on the sticky bar at the top to be double"): the landscape
     render is drawn at twice its old scale (48 -> 96 px tall, natural 1040x300 aspect), centred in the unchanged 52 px
     strip. The handle fills only the middle 42% of the render's height, so the strip shows all of it; only plain
     backdrop above, below and (on narrow phones) beside it is trimmed by the strip's overflow:hidden. */
  body.page-template-page-configure .hg-mini-material .hg-mini-art img.hg-mini-landscape{position:absolute;left:50%;top:50%;width:auto;height:96px;max-width:none;object-fit:contain;transform:translate(-50%,-50%)}
  body.page-template-page-configure .hg-mini-material .hg-mini-art img[hidden]{display:none!important}
}
@media(min-width:961px){#configurator.hg-photo-configurator{grid-template-columns:minmax(330px,.9fr) minmax(0,1.4fr)}}
@media(max-width:768px){
  body #configurator .preview.hg-photo-layout{grid-template-columns:42% minmax(0,1fr);gap:8px;padding:15px 14px!important;align-items:center}
  body #configurator .preview.hg-photo-layout .preview-svg-wrap{grid-column:1;grid-row:1 / span 2;align-self:stretch;width:100%;height:auto}
  body #configurator .preview.hg-photo-layout.hg-photo-note-visible .preview-svg-wrap{grid-row:1 / span 3}
  body #configurator .preview.hg-photo-layout .hg-photo-live-canvas{height:215px;min-height:215px}
  body #configurator .preview.hg-photo-layout .preview-summary{grid-column:2;grid-row:1;margin:18px 0 0;text-align:left}
  body #configurator .preview.hg-photo-layout .price-display{grid-column:2;grid-row:2;margin:0}
  body #configurator .preview.hg-photo-layout .hg-photo-live-note{grid-column:1 / -1;grid-row:3;margin:0 2px;font-size:10px}
  body #configurator .preview.hg-photo-layout .preview-glyph{top:0;right:0}
  body #configurator .preview.hg-photo-note-visible .hg-photo-live-note{grid-column:1 / -1;grid-row:3;margin:0 2px;font-size:10px}
  /* 2026-10-05 (owner report d61de632, phone): the photo spans rows 1-3 while the note shows, so the note sits beside it
     in column 2, under the price, instead of across both columns where the handle covered its first words. */
  body #configurator .preview.hg-photo-layout.hg-photo-note-visible .hg-photo-live-note{grid-column:2;text-align:left;align-self:start;margin:0}
  /* 2026-10-16 (owner: "too many words on /configure/ => it look quite messy on phone"): fewer words on phones, nothing
     added; desktop unchanged. The random-horn note shows its first words; "You save $X on this build" goes (the struck
     regular price beside the price says it, under "15% off your build"); "Regular price:" goes, the struck price stays
     at its size; the price disclaimer stays hidden up to 768 px (the theme hid it up to 640); the decorative Japanese
     sub-label ("ki · 木") goes from every tab head; the wood note drops its middle clause. Overrides the offer plugin's
     #savingsAmount{display:block!important} by specificity. */
  body #configurator .hg-photo-live-note .hg-note-full{display:none}
  body #configurator .hg-photo-live-note .hg-note-phone{display:inline}
  body #configurator #savingsAmount:not([hidden]){display:none!important}
  body #configurator .preview #standardPrice{font-size:0}
  body #configurator .preview #standardPrice del{font-size:.58rem}
  body #configurator #priceDisclaimer{display:none}
  body.page-template-page-configure #configurator .section-head .section-jp{display:none}
  body #configurator .wood-availability-note .hg-cfg-long{display:none}
}