/* Hand-written adjustments layered over the generated pdp.css (keep edits here). */
.hg-pdp .hg-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hg-pdp .hg-select-wrap select{width:100%}
.hg-pdp .hg-step[hidden],.hg-pdp .hg-step-next[hidden],.hg-pdp .hg-sidecfg[hidden],.hg-pdp .hg-picker[hidden]{display:none!important}
.hg-pdp .hg-lightbox[hidden]{display:none!important}
.hg-pdp .hg-install-one{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.hg-pdp .hg-install-one .hg-acc{margin-top:0}
.hg-pdp .hg-cta .single_add_to_cart_button.disabled,.hg-pdp .hg-cta .single_add_to_cart_button:disabled{opacity:.55;cursor:not-allowed}
.hg-pdp .hg-cta .wc-variation-selection-needed{opacity:.55}
.hg-pdp .woocommerce-variation-price,.hg-pdp .woocommerce-variation-availability{display:none}
.hg-pdp .hg-form .hg-cta > *{min-width:0}
.hg-pdp .hg-form .hg-cta .quantity{display:none}
.hg-pdp .hg-cta .cidw-deposit-wrapper,.hg-pdp .hg-cta .deposit-wrapper,.hg-pdp .hg-cta .bayna-deposit{margin-bottom:10px;font-size:13.5px}
.hg-pdp .hg-cta .cidw-deposit-wrapper label{display:flex;align-items:center;gap:8px}
@media (max-width:980px){.hg-pdp .hg-install-one{grid-template-columns:1fr}}
/* Minimog sizes generic buttons (45×45 icon buttons, uppercase, letter-spacing); neutralise inside the PDP. */
.hg-pdp button{width:auto;height:auto;min-width:0;min-height:0;line-height:inherit;letter-spacing:inherit;text-transform:none;border-radius:0;box-shadow:none;transition:none}
.hg-pdp .hg-grid4 button,.hg-pdp .hg-mob-track button{width:100%;display:block;padding:0;border:0}
.hg-pdp .hg-grid4 button{height:auto}
.hg-pdp .hg-crail button,.hg-pdp .hg-sizetabs button{width:100%;text-align:left}
.hg-pdp .hg-sizetabs button{text-align:center}
.hg-pdp .hg-opt,.hg-pdp .hg-qs,.hg-pdp .hg-big,.hg-pdp .hg-choice,.hg-pdp .hg-qtile,.hg-pdp .hg-pick{width:100%}
.hg-pdp .hg-btn{border-radius:var(--r)}
.hg-pdp .hg-sidecard .hg-rm{width:auto}
/* Bayna deposit selector inside the summary CTA (10% deposit or pay in full). */
.hg-pdp .hg-cta .deposits-frontend-wrapper{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.hg-pdp .hg-cta .deposit-notice{margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.hg-pdp .hg-cta .deposits-input-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hg-pdp .hg-cta .deposits-input-wrapper .pretty{margin:0;font-size:inherit;line-height:1.2;white-space:normal}
.hg-pdp .hg-cta .deposits-input-wrapper .pretty .state{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--card);cursor:pointer;min-height:44px}
.hg-pdp .hg-cta .deposits-input-wrapper .pretty .state label{font-size:14px;font-weight:600;color:var(--ink);text-indent:0;margin:0;position:static}
.hg-pdp .hg-cta .deposits-input-wrapper .pretty .state label::before,.hg-pdp .hg-cta .deposits-input-wrapper .pretty .state label::after{position:static;display:inline-block;flex:none;width:16px;height:16px;border-radius:50%;margin:0;top:auto;left:auto;transform:none}
.hg-pdp .hg-cta .deposits-input-wrapper .pretty input:checked~.state{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--green-wash)}
.hg-pdp .hg-cta .deposits-input-wrapper .pretty .state img.image{display:none}
/* <picture> wrappers around bundled images must not become layout boxes. */
.hg-pdp picture{display:contents}
/* Phones: let the stock line and series label wrap instead of clipping. */
@media (max-width:520px){
.hg-pdp .hg-stock{white-space:normal;line-height:1.35}
.hg-pdp .hg-toprow{align-items:flex-start}
.hg-pdp .hg-card .hg-series{white-space:normal}
}
/* Generic products: WooCommerce description rendered as the overview, and attribute steps as labelled selects. */
.hg-pdp .hg-prose{max-width:820px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.hg-pdp .hg-prose h2,.hg-pdp .hg-prose h3,.hg-pdp .hg-prose h4{font-family:var(--display);font-weight:400;color:var(--ink);margin:28px 0 10px;line-height:1.2}
.hg-pdp .hg-prose h2{font-size:28px}.hg-pdp .hg-prose h3{font-size:22px}.hg-pdp .hg-prose h4{font-size:18px}
.hg-pdp .hg-prose p{margin:0 0 14px}.hg-pdp .hg-prose ul,.hg-pdp .hg-prose ol{margin:0 0 14px 20px;padding:0}
.hg-pdp .hg-prose img{border-radius:var(--r);height:auto}
.hg-pdp .hg-prose table{width:100%;border-collapse:collapse;font-size:14px}.hg-pdp .hg-prose td,.hg-pdp .hg-prose th{padding:8px 10px;border-top:1px solid var(--line);text-align:left}
.hg-pdp .hg-step-attr .hg-select-wrap{margin-top:4px}
.hg-pdp .hg-step-attr select.hg-select{width:100%;height:48px;padding:0 40px 0 14px;border:1px solid var(--line-strong);border-radius:6px;background:var(--card);font:inherit;font-size:15px;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2E2E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
/* Laptop zoom-out: the layout is drawn for a wide desktop, so between 981 and 1599px the product
   wrapper is scaled the way browser zoom would (the prototype's fitScale, in steps so it applies
   at first paint). 1440px lands on .9. The site header, sticky bar and lightbox are not scaled. */
@media (min-width:981px) and (max-width:1359px){.hg-pdp.product{zoom:.85}}
@media (min-width:1360px) and (max-width:1439px){.hg-pdp.product{zoom:.87}}
@media (min-width:1440px) and (max-width:1519px){.hg-pdp.product{zoom:.9}}
@media (min-width:1520px) and (max-width:1599px){.hg-pdp.product{zoom:.95}}
/* Overview facts: let the figure column grow for words wider than 128px ("Included"). */
.hg-pdp .hg-fact{grid-template-columns:minmax(128px,auto) 1fr}
/* <source> elements have a box in Chrome; with the <picture> wrapper set to display:contents they
   would become empty grid/flex items (this pushed the size-card image out of its column). */
.hg-pdp picture>source{display:none}
/* Feature-spread clips fill the main image slot exactly like the still. */
.hg-pdp .hg-spread .hg-media .hg-main video{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--ground)}
/* Click-to-zoom: the Sizes drawings open large in the lightbox (data-hg-zoom / data-hg-full). */
.hg-pdp .hg-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.hg-pdp .hg-sizepanel .hg-diagram{position:relative}
.hg-pdp .hg-sizepanel .hg-diagram .hg-zoom{position:relative}
.hg-pdp .hg-zoom-hint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(14,16,15,.72);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;pointer-events:none;transition:background .15s}
.hg-pdp .hg-zoom-hint svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hg-pdp .hg-zoom:hover .hg-zoom-hint{background:rgba(14,16,15,.9)}
.hg-pdp .hg-zoom:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hg-pdp .hg-sizepanel .hg-space .hg-zoom{width:88px;height:88px;border-radius:4px;overflow:hidden}
.hg-pdp .hg-sizepanel .hg-space .hg-zoom img{object-fit:contain}
.hg-pdp .hg-zoomlink{display:inline-block;padding:0;border:0;background:none;font:inherit;font-size:13px;cursor:pointer;margin-top:6px}
.hg-pdp .hg-lightbox.hg-single .hg-pv,.hg-pdp .hg-lightbox.hg-single .hg-nx{display:none}
.hg-pdp .hg-lightbox.hg-single .hg-lb-layer{background:#fff}
/* Installation: one self-assembly card (no installation service is offered) beside the care accordion. */
.hg-pdp .hg-istats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.hg-pdp .hg-istats>div{padding:14px 16px;border-left:1px solid var(--line);min-width:0}
.hg-pdp .hg-istats>div:first-child{border-left:0}
.hg-pdp .hg-istats b{display:block;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.hg-pdp .hg-istats span{display:block;margin-top:5px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.hg-pdp .hg-icard .hg-foot .hg-btn{height:46px;padding:0 18px;font-size:14px}
.hg-pdp .hg-acc .hg-acc-head{padding:26px 24px 18px}
.hg-pdp .hg-acc .hg-acc-head .hg-tag{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.hg-pdp .hg-acc .hg-acc-head h3{font-size:28px;margin-top:10px}
/* Full bleed: Minimog wraps the product in .container-fluid > .row > .page-main-content (15px gutters, an
   uneven negative margin) and gives #page-content a 60px bottom margin. The design runs edge to edge and
   the last section meets the footer directly. */
.single-product .entry-product-page-content>.container-fluid,.single-product .entry-product-page-content>.container{padding:0;margin:0;max-width:none;width:100%}
.single-product .entry-product-page-content>.container-fluid>.row,.single-product .entry-product-page-content>.container>.row{margin:0}
.single-product .entry-product-page-content .page-main-content{padding:0;flex:0 0 100%;max-width:100%;width:100%}
.single-product #page-content.page-content{margin-bottom:0}
/* ---- Gallery: hover, "View full gallery" pill, and the full-screen viewer (extends the prototype lightbox, no library) ---- */
.hg-pdp .hg-grid-wrap{position:relative}
.hg-pdp .hg-grid4 button{cursor:pointer}
.hg-pdp .hg-grid4 button::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,16,15,.24),rgba(14,16,15,0) 45%);opacity:0;transition:opacity .45s ease;pointer-events:none}
.hg-pdp .hg-grid4 button:hover::after,.hg-pdp .hg-grid4 button:focus-visible::after{opacity:1}
.hg-pdp .hg-grid4 button:hover img{transform:scale(1.035)}
.hg-pdp .hg-grid4 button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hg-pdp .hg-grid4 .hg-cap{z-index:1}
.hg-pdp .hg-viewall{position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 14px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.01em;box-shadow:0 8px 22px -10px rgba(14,16,15,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .25s ease,background .25s ease,box-shadow .25s ease;cursor:pointer}
.hg-pdp .hg-viewall svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hg-pdp .hg-viewall small{font-size:12px;font-weight:500;color:var(--muted)}
.hg-pdp .hg-viewall:hover{background:#fff;transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(14,16,15,.65)}
.hg-pdp .hg-viewall:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hg-pdp .hg-mob-track button{cursor:pointer}
.hg-pdp .hg-mob-count{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.hg-pdp .hg-mob-count svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.hg-pdp .hg-lightbox{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;background:rgba(14,16,15,.98);opacity:0;transition:opacity .28s ease;z-index:100000}
.hg-pdp .hg-lightbox.hg-open{opacity:1}
.hg-pdp .hg-lb-bar{flex:none;display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 16px 0 22px}
.hg-pdp .hg-lb-count{color:#fff;font-size:15px;letter-spacing:.02em;min-width:64px}
.hg-pdp .hg-lb-tools{display:flex;gap:4px}
.hg-pdp .hg-lightbox .hg-lb-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#fff;transition:background .2s ease}
.hg-pdp .hg-lightbox .hg-lb-btn:hover{background:rgba(255,255,255,.12)}
.hg-pdp .hg-lightbox .hg-lb-btn[hidden]{display:none}
.hg-pdp .hg-lightbox .hg-lb-btn svg{width:22px;height:22px}
.hg-pdp .hg-lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:none}
.hg-pdp .hg-lb-frame{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;width:100%;height:100%;padding:8px 96px;transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .32s ease}
.hg-pdp .hg-lb-frame.hg-drag{transition:none}
.hg-pdp .hg-lightbox .hg-lb-layer{grid-area:1/1;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;opacity:0;transform:scale(.985);transition:opacity .4s ease,transform .55s cubic-bezier(.2,.7,.2,1);user-select:none;-webkit-user-drag:none;pointer-events:none;background:transparent}
.hg-pdp .hg-lightbox .hg-lb-layer.hg-on{opacity:1;transform:none}
.hg-pdp .hg-lightbox .hg-lb-layer:not([src]){display:none}
.hg-pdp .hg-lb-spin{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;opacity:0;transition:opacity .2s ease .4s;animation:hg-spin .8s linear infinite;pointer-events:none}
.hg-pdp .hg-lb-stage:has(.hg-loading) .hg-lb-spin{opacity:1}
@keyframes hg-spin{to{transform:rotate(360deg)}}
.hg-pdp .hg-lightbox .hg-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3);z-index:2;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.hg-pdp .hg-lightbox .hg-lb-nav:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.65);transform:translateY(-50%) scale(1.04)}
.hg-pdp .hg-lightbox .hg-lb-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hg-pdp .hg-lightbox .hg-lb-nav.hg-pv{left:22px;right:auto}
.hg-pdp .hg-lightbox .hg-lb-nav.hg-nx{right:22px;left:auto}
.hg-pdp .hg-lb-cap{flex:none;text-align:center;color:#C9CDC6;font-size:13px;letter-spacing:.03em;min-height:22px;padding:4px 20px 0}
.hg-pdp .hg-lb-thumbs{flex:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:12px 20px calc(18px + env(safe-area-inset-bottom,0px))}
.hg-pdp .hg-lb-thumbs::-webkit-scrollbar{display:none}
.hg-pdp .hg-lb-thumbs>div{display:flex;gap:10px;margin:0 auto}
.hg-pdp .hg-lightbox .hg-lb-thumbs button{flex:none;width:96px;height:72px;border-radius:10px;overflow:hidden;scroll-snap-align:center;opacity:.5;background:rgba(255,255,255,.06);transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease;cursor:pointer}
.hg-pdp .hg-lightbox .hg-lb-thumbs button:hover{opacity:.85}
.hg-pdp .hg-lightbox .hg-lb-thumbs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hg-pdp .hg-lightbox .hg-lb-thumbs button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px #0E100F,0 0 0 4px #fff}
.hg-pdp .hg-lightbox .hg-lb-thumbs img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0;display:block}
.hg-pdp .hg-lightbox.hg-single .hg-lb-thumbs,.hg-pdp .hg-lightbox.hg-single .hg-lb-nav,.hg-pdp .hg-lightbox.hg-single .hg-lb-count{display:none}
@media (max-width:980px){
.hg-pdp .hg-lb-bar{height:52px;padding:0 8px 0 16px}
.hg-pdp .hg-lb-frame{padding:4px 14px}
.hg-pdp .hg-lightbox .hg-lb-nav{width:40px;height:40px;background:rgba(14,16,15,.35)}
.hg-pdp .hg-lightbox .hg-lb-nav.hg-pv{left:10px}
.hg-pdp .hg-lightbox .hg-lb-nav.hg-nx{right:10px}
.hg-pdp .hg-lightbox .hg-lb-nav svg{width:18px;height:18px}
.hg-pdp .hg-lb-thumbs{padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px))}
.hg-pdp .hg-lightbox .hg-lb-thumbs button{width:64px;height:48px;border-radius:8px}
.hg-pdp .hg-lightbox .hg-lb-thumbs button[aria-current="true"]{box-shadow:0 0 0 2px #0E100F,0 0 0 3px #fff}
}
@media (prefers-reduced-motion:reduce){
.hg-pdp .hg-lightbox,.hg-pdp .hg-lb-frame,.hg-pdp .hg-lightbox .hg-lb-layer,.hg-pdp .hg-lightbox .hg-lb-thumbs button,.hg-pdp .hg-grid4 img,.hg-pdp .hg-grid4 button::after,.hg-pdp .hg-viewall{transition:none}
.hg-pdp .hg-lightbox .hg-lb-layer{transform:none}
}
/* Side-wall profiles: option cards can link to sibling products; a note under the add-to-cart button. */
.hg-pdp a.hg-optcard{display:block;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hg-pdp a.hg-optcard:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(14,16,15,.5);border-color:var(--line-strong)}
.hg-pdp .hg-optcard.hg-current{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.hg-pdp .hg-ctanote{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.hg-pdp .hg-ctanote a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Overview: a still can stand in for the clip; with no media the facts take the full width. */
.hg-pdp .hg-vid img{width:100%;height:100%;object-fit:cover;display:block}
.hg-pdp .hg-overview.hg-overview-solo{grid-template-columns:1fr}
/* The mobile sticky build bar (86px) sits over the end of the page: give the footer room for it. */
@media (max-width:980px){.single-product .hg-chrome footer.hg-site{padding-bottom:calc(28px + 86px + env(safe-area-inset-bottom,0px))}}
/* Configurator option renders are square (320×320) with the pergola filling the frame; the 4:3 boxes cropped
   its roof and feet. Square boxes show the whole pergola. */
.hg-pdp .hg-choice .hg-im,.hg-pdp .hg-big .hg-im,.hg-pdp .hg-sw .hg-im{aspect-ratio:1/1}
.hg-pdp .hg-chosen .hg-im{width:64px;height:64px}
.hg-pdp .hg-card .hg-qs .hg-im{aspect-ratio:1/1}
.hg-pdp .hg-card .hg-sidecard .hg-im{width:46px;height:46px}
/* Photo sets per variation: tiles beyond the set are hidden; the phone strip holds every photo and wraps. */
.hg-pdp .hg-grid4 button[hidden],.hg-pdp .hg-grid4 .hg-cap[hidden],.hg-pdp .hg-mob-dots[hidden]{display:none}
.hg-pdp .hg-mob-track{scroll-behavior:auto}
/* Until a variation is chosen WooCommerce disables the button; let the tap reach the wrapper, which nudges the open step. */
.hg-pdp .hg-cta .single_add_to_cart_button:disabled,.hg-pdp .hg-cta .single_add_to_cart_button.disabled{pointer-events:none}
/* Size step: the four renders share one camera and are shown whole, square, at the same size, so the footprint
   difference is what changes. Two cards per row on every screen. */
.hg-pdp .hg-sizes{grid-template-columns:1fr 1fr}
.hg-pdp .hg-sizegrid .hg-opt,.hg-pdp #hg-sizeGrid .hg-opt{grid-template-columns:84px 1fr}
.hg-pdp #hg-sizeGrid .hg-opt img{width:84px;height:84px;object-fit:cover;border-radius:4px}
@media (max-width:980px){
.hg-pdp .hg-sizes{grid-template-columns:1fr 1fr;gap:8px}
.hg-pdp .hg-sizegrid .hg-opt,.hg-pdp #hg-sizeGrid .hg-opt{grid-template-columns:64px 1fr;gap:10px;padding:10px 10px 10px 8px}
.hg-pdp #hg-sizeGrid .hg-opt img{width:64px;height:64px}
}
@media (max-width:400px){
.hg-pdp .hg-sizegrid .hg-opt,.hg-pdp #hg-sizeGrid .hg-opt{grid-template-columns:56px 1fr}
.hg-pdp #hg-sizeGrid .hg-opt img{width:56px;height:56px}
}

/* Sides step waits for a size: shown faded rather than hidden, so the next step is always in view */
.hg-pdp .hg-step .hg-step-body{transition:opacity .25s ease}
.hg-pdp .hg-step.hg-step-locked .hg-step-body{opacity:.38;pointer-events:none;user-select:none}
.hg-pdp .hg-step.hg-step-locked .hg-step-head h3{color:var(--muted)}
.hg-pdp .hg-step.hg-step-locked .hg-step-head .hg-n{background:var(--line-strong);color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.hg-pdp .hg-step .hg-step-body{transition:none}}

/* Answered steps: the header stays tappable, the chosen value and "Change" sit on one line */
.hg-pdp .hg-card .hg-step.hg-answered .hg-step-head:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
.hg-pdp .hg-card .hg-step.hg-answered .hg-step-head .hg-val{margin-left:auto;white-space:nowrap}
.hg-pdp .hg-card .hg-step.hg-answered .hg-step-head h3{min-width:0}
/* Chat / call line under the add-to-cart button */
.hg-pdp .hg-talk{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.hg-pdp .hg-talk a{color:var(--ink-2);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hg-pdp .hg-talk a:hover{color:var(--ink)}

/* Keyframes from the prototype. The port kept every animation reference but dropped the single-line
 * @keyframes blocks, so the step highlight, the stock pulse and the side-plan pulse never ran. */
@keyframes hg-stepflash{0%{background:transparent}20%{background:#eaf5ef;box-shadow:0 0 0 12px #eaf5ef}100%{background:transparent;box-shadow:0 0 0 12px transparent}}
@keyframes hg-stockpulse{0%{transform:scale(.6);opacity:.55}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
@keyframes sidepulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.035);opacity:0}100%{transform:scale(1.035);opacity:0}}
/* A highlighted step gets a little room so the glow clears the neighbours and the card edge. */
.hg-pdp .hg-step.hg-flash{border-radius:8px;position:relative;z-index:1}

/* ---------- Sides step: the pergola in 3D at the top, the ready-made looks at the end ---------- */
.hg-pdp .hg-sidecfg .hg-3d{margin:14px 14px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.hg-pdp .hg-3d-scene{position:relative;height:300px;background:linear-gradient(180deg,#F2F3EE 0%,#E4E7E0 100%);touch-action:none;user-select:none;-webkit-user-select:none}
.hg-pdp .hg-3d-scene canvas{display:block;width:100%;height:100%;cursor:grab}
.hg-pdp .hg-3d-scene.dragging canvas{cursor:grabbing}
.hg-pdp .hg-3d-pins{position:absolute;inset:0;pointer-events:none}
/* full screen (desktop): the block, its two control rows and the side tiles/picker move into this overlay */
.hg-pdp .hg-3d-bar #hg3dFull{margin-left:auto}
@media (max-width:980px){.hg-pdp .hg-3d-bar #hg3dFull{display:none}}
html.hg-3d-fs-open,html.hg-3d-fs-open body{overflow:hidden;overscroll-behavior:none}
.hg-pdp.hg-3d-fs{display:none;position:fixed;inset:0;z-index:100000;margin:0;padding:0;background:linear-gradient(180deg,#F2F3EE 0%,#E4E7E0 100%)}
.hg-pdp.hg-3d-fs.is-open{display:block}
.hg-pdp.hg-3d-fs.is-night{background:radial-gradient(120% 90% at 50% 100%,#2A3340 0%,#151B23 55%,#0C1016 100%)}
.hg-pdp.hg-3d-fs .hg-3d-fs-stage{position:absolute;inset:0}
.hg-pdp.hg-3d-fs .hg-3d{position:absolute;inset:0;margin:0;border:0;border-radius:0;background:transparent}
.hg-pdp.hg-3d-fs .hg-3d-scene{position:absolute;inset:0;height:auto;background:transparent}
.hg-pdp.hg-3d-fs .hg-3d-fs-top{position:absolute;left:0;right:0;top:0;height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:3;pointer-events:none}
.hg-pdp.hg-3d-fs .hg-3d-fs-top>*{pointer-events:auto}
.hg-pdp.hg-3d-fs .hg-3d-fs-ttl{display:flex;flex-direction:column;gap:2px}
.hg-pdp.hg-3d-fs .hg-3d-fs-ttl b{font:600 15px/1.2 var(--display);color:var(--ink)}
.hg-pdp.hg-3d-fs .hg-3d-fs-ttl span{font-size:12.5px;color:var(--muted)}
.hg-pdp.hg-3d-fs.is-night .hg-3d-fs-ttl b{color:#fff}.hg-pdp.hg-3d-fs.is-night .hg-3d-fs-ttl span{color:#B9C0BB}
.hg-pdp.hg-3d-fs .hg-3d-fs-exit{height:38px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--display);box-shadow:0 2px 10px rgba(27,31,29,.1);cursor:pointer}
.hg-pdp.hg-3d-fs .hg-3d-fs-exit svg{width:16px;height:16px}
.hg-pdp.hg-3d-fs .hg-3d-fs-exit kbd{font:600 10.5px/1 var(--display);color:var(--muted);border:1px solid var(--line-strong);border-radius:5px;padding:3px 5px 2px;background:var(--green-wash)}
.hg-pdp.hg-3d-fs .hg-3d-fs-bar{position:absolute;left:calc((100% - 412px) / 2);bottom:20px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;max-width:calc(100% - 452px)}
.hg-pdp.hg-3d-fs .hg-3d-fs-bar .hg-3d-bar,.hg-pdp.hg-3d-fs .hg-3d-fs-bar .hg-3d-play{border:1px solid var(--line);border-radius:999px;background:var(--card);box-shadow:0 6px 24px rgba(27,31,29,.14);padding:8px 10px;flex-wrap:nowrap;white-space:nowrap}
.hg-pdp.hg-3d-fs .hg-3d-bar .hg-3d-cap,.hg-pdp.hg-3d-fs #hg3dFull,.hg-pdp.hg-3d-fs .hg-3d-play .hg-3d-try{display:none}
@media (max-width:1400px){.hg-pdp.hg-3d-fs .hg-3d-fs-bar{flex-direction:column;align-items:center}}
.hg-pdp.hg-3d-fs .hg-3d-fs-panel{position:absolute;right:20px;top:76px;bottom:88px;width:372px;z-index:3;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 36px rgba(27,31,29,.14);display:flex;flex-direction:column;overflow:hidden}
.hg-pdp.hg-3d-fs .hg-3d-fs-size{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.hg-pdp.hg-3d-fs .hg-3d-fs-lab{font:600 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.hg-pdp.hg-3d-fs .hg-3d-fs-chip{height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-2);font:600 12px/1 var(--display);cursor:pointer;white-space:nowrap}
.hg-pdp.hg-3d-fs .hg-3d-fs-chip:hover:not(:disabled){border-color:var(--green)}
.hg-pdp.hg-3d-fs .hg-3d-fs-chip[aria-pressed="true"]{background:var(--green-wash);border-color:var(--green);color:var(--green-ink)}
.hg-pdp.hg-3d-fs .hg-3d-fs-chip:disabled{opacity:.4;cursor:default}
.hg-pdp.hg-3d-fs .hg-3d-fs-ph{border-bottom:1px solid var(--line)}
.hg-pdp.hg-3d-fs .hg-3d-fs-ph .hg-sidesum{border-top:0;padding:12px 16px}
.hg-pdp.hg-3d-fs .hg-3d-fs-pb{flex:1;overflow:auto;padding:0 0 8px;border:0;border-radius:0;box-shadow:none;background:var(--card)}
.hg-pdp.hg-3d-fs .hg-3d-fs-pb .hg-sidecfg{display:block;margin:0;border:0}
.hg-pdp.hg-3d-fs .hg-3d-fs-pb::before,.hg-pdp.hg-3d-fs .hg-3d-fs-pb::after{display:none}
.hg-pdp.hg-3d-fs .hg-3d-fs-pf{border-top:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card)}
.hg-pdp.hg-3d-fs .hg-3d-fs-tot{display:flex;flex-direction:column;min-width:0}
.hg-pdp.hg-3d-fs .hg-3d-fs-tot small{font:600 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hg-pdp.hg-3d-fs .hg-3d-fs-tot b{font:600 20px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.hg-pdp.hg-3d-fs .hg-3d-fs-tot b s{font-size:13px;color:var(--muted);font-weight:400;margin-right:6px}
.hg-pdp.hg-3d-fs .hg-3d-fs-tot b s:empty{display:none}
.hg-pdp.hg-3d-fs .hg-3d-fs-tot em{font-style:normal;font-size:12px;color:var(--green);font-weight:700}
.hg-pdp.hg-3d-fs .hg-3d-fs-add{height:42px;padding:0 18px;border-radius:8px;border:0;background:var(--green-ink);color:#fff;font:600 14px/1 var(--display);cursor:pointer;white-space:nowrap}
/* the expand button over the scene (phones and tablets; desktop uses the bar's Full screen button) */
.hg-pdp .hg-3d-expand{position:absolute;right:8px;top:8px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.94);color:var(--ink-2);display:none;place-items:center;padding:0;box-shadow:0 1px 4px rgba(27,31,29,.14);cursor:pointer}
.hg-pdp .hg-3d-expand svg{width:16px;height:16px}
@media (max-width:980px){.hg-pdp .hg-3d-expand{display:grid}}
.hg-pdp.hg-3d-fs .hg-3d-expand{display:none}
/* full screen on phones: the panel is a bottom sheet under the model */
.hg-pdp.hg-3d-fs .hg-3d-fs-grab{display:none;flex:none;width:100%;height:22px;border:0;background:transparent;padding:0;cursor:grab;position:sticky;top:0;z-index:2}
.hg-pdp.hg-3d-fs .hg-3d-fs-grab i{display:block;width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:9px auto 0}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-top{height:56px;padding:0 12px 0 16px}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-ttl b{font-size:14px}.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-ttl span{display:none}.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-ttl{padding-right:136px;min-width:0}.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-ttl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-exit{width:36px;height:36px;padding:0;justify-content:center;font-size:0;gap:0}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-exit kbd{display:none}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-bar{left:12px;bottom:calc(43% + 12px);transform:none;flex-direction:row;max-width:none}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-bar .hg-3d-bar{padding:6px;gap:6px;background:rgba(255,255,255,.92)}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-bar button{font-size:0;width:32px;height:32px;min-width:0;padding:0;justify-content:center;border-radius:50%}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-bar button svg{width:14px;height:14px}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-panel{left:0;right:0;top:auto;bottom:0;width:auto;height:43%;border-radius:16px 16px 0 0;border:0;box-shadow:0 -10px 30px rgba(27,31,29,.16);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:block;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.hg-pdp.hg-3d-fs.is-mobile.is-up .hg-3d-fs-panel{height:88%}
.hg-pdp.hg-3d-fs.is-mobile.is-up .hg-3d-fs-bar{opacity:0;pointer-events:none}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-grab{display:block;background:var(--card);touch-action:none}
.hg-pdp.hg-3d-fs .hg-3d-fs-hint{display:none;position:absolute;right:12px;bottom:calc(43% + 20px);z-index:3;height:30px;padding:0 11px;border-radius:999px;border:0;background:rgba(255,255,255,.9);color:var(--ink-2);font:600 11.5px/1 var(--display);box-shadow:0 2px 8px rgba(27,31,29,.12);cursor:pointer}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-hint{display:inline-flex;align-items:center}
.hg-pdp.hg-3d-fs.is-mobile.is-up .hg-3d-fs-hint{display:none}
.hg-pdp.hg-3d-fs.is-night .hg-3d-fs-hint{background:rgba(27,31,29,.75);color:#D8DDD6}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-size{padding:6px 12px 10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-size::-webkit-scrollbar{display:none}
.hg-pdp.hg-3d-fs .hg-3d-fs-playslot:empty{display:none}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-panel .hg-3d-play{border-top:0;border-bottom:1px solid var(--line);padding:10px 12px 12px}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-pb{overflow:visible;flex:none}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-pf{position:sticky;bottom:0;padding:10px 12px}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-tot b{font-size:18px}
.hg-pdp.hg-3d-fs.is-mobile .hg-3d-fs-add{height:40px;padding:0 16px}
/* the live chat pill in full screen: top right, beside the exit */
.hg-pdp.hg-3d-fs .hg-chat{position:absolute;left:auto;right:222px;top:9px;bottom:auto;z-index:4;opacity:1;transform:none;margin:0;height:46px;background:#2C342B;color:#fff;border:0;border-radius:999px;padding:0 18px 0 7px;text-align:left;font:600 14px/1 var(--display)}
.hg-pdp.hg-3d-fs .hg-chat:hover{background:#3A4335}
.hg-pdp.hg-3d-fs .hg-chat.is-open{opacity:0;pointer-events:none}
.hg-pdp.hg-3d-fs.is-mobile .hg-chat{right:58px;top:10px;height:36px;padding:0 13px 0 5px;font-size:12.5px}
.hg-pdp.hg-3d-fs.is-mobile .hg-chat .hg-chat-short{display:inline}.hg-pdp.hg-3d-fs.is-mobile .hg-chat .hg-chat-full,.hg-pdp.hg-3d-fs.is-mobile .hg-chat .hg-chat-s{display:none}
.hg-pdp.hg-3d-fs.is-mobile .hg-chat .hg-chat-av{width:28px;height:28px}
/* Stripe's express checkout (Apple Pay / Google Pay) under the summary: hidden until the build is complete, then a quiet card */
body:not(.hg-build-ready) .hg-pdp #wc-stripe-express-checkout-element{display:none!important}
.hg-pdp #wc-stripe-express-checkout-element{margin:12px 0 0!important;padding:14px 14px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.hg-pdp #wc-stripe-express-checkout-element::before{content:"Or pay in one tap";display:block;font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hg-pdp #wc-stripe-express-checkout-button-separator{display:none!important}
/* while Stripe re-prices after a change it blocks its box with a white overlay and WooCommerce's spinner: the flash goes; the
   buttons dim and a thin line runs along the top of the card until the new figure is in */
.hg-pdp #wc-stripe-express-checkout-element{position:relative}
.hg-pdp #wc-stripe-express-checkout-element .blockUI.blockOverlay{opacity:0!important;background:transparent!important;cursor:default!important}
.hg-pdp #wc-stripe-express-checkout-element .blockUI.blockOverlay::before,.hg-pdp #wc-stripe-express-checkout-element .blockUI.blockOverlay::after{display:none!important}
.hg-pdp #wc-stripe-express-checkout-element>:not(.blockUI){transition:opacity .2s}
.hg-pdp #wc-stripe-express-checkout-element:has(.blockOverlay)>:not(.blockUI){opacity:.55}
.hg-pdp #wc-stripe-express-checkout-element::after{content:"";position:absolute;top:0;left:8px;width:38%;height:2px;border-radius:0 0 2px 2px;background:var(--green);opacity:0;pointer-events:none}
.hg-pdp #wc-stripe-express-checkout-element:has(.blockOverlay)::after{opacity:1;animation:hg-sync 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hg-sync{from{left:8px}to{left:calc(62% - 8px)}}
@media (prefers-reduced-motion:reduce){.hg-pdp #wc-stripe-express-checkout-element:has(.blockOverlay)::after{animation:none;left:8px;width:calc(100% - 16px)}}
/* a short green pulse round the scene the first time a side is set */
.hg-pdp .hg-3d.is-live .hg-3d-scene{animation:hg3dLive 1.6s ease}
@keyframes hg3dLive{0%{box-shadow:0 0 0 0 rgba(85,96,82,0)}30%{box-shadow:0 0 0 4px rgba(85,96,82,.5)}100%{box-shadow:0 0 0 0 rgba(85,96,82,0)}}
/* side tags: the letter of the tile below, on the paving in front of the side; green once the side is set */
.hg-pdp .hg-3d-pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.94);border:1.5px solid var(--green);color:var(--green-ink);display:grid;place-items:center;font:700 11px/1 var(--display);box-shadow:0 1px 3px rgba(27,31,29,.2);padding:0;transition:transform .12s ease,opacity .2s ease}
.hg-pdp .hg-3d-pin.set{background:var(--green-ink);border-color:var(--green-ink);color:#fff}
.hg-pdp .hg-3d-pin.on{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 0 3px rgba(85,96,82,.28)}
.hg-pdp .hg-3d-pin.back-face{opacity:0;pointer-events:none}
.hg-pdp .hg-3d-pin:hover{transform:translate(-50%,-50%) scale(1.15)}
.hg-pdp .hg-3d-load{position:absolute;inset:0;display:grid;place-items:center;font:600 13px/1 var(--display);color:var(--muted);background:rgba(244,244,241,.6);pointer-events:none;transition:opacity .3s}
.hg-pdp .hg-3d-load.off{opacity:0}
.hg-pdp .hg-3d-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
/* the buttons keep their size and icons; the caption sits on its own line under them (the column is ~400px on desktop) */
.hg-pdp .hg-3d-bar button{flex:0 0 auto;height:30px;min-width:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--display);white-space:nowrap}
.hg-pdp .hg-3d-bar button:hover{border-color:var(--green);color:var(--green-ink)}
.hg-pdp .hg-3d-bar svg{flex:none;width:14px;height:14px}
.hg-pdp .hg-3d-bar .hg-3d-cap{flex:1 0 100%;order:9;margin:0;font-size:11.5px;line-height:1.3}
.hg-pdp .hg-sidecfg .hg-sc-head{border-top:1px solid var(--line);padding-top:14px;flex-direction:column;align-items:flex-start;gap:2px}
.hg-pdp .hg-sidecfg .hg-sc-head .hg-sub{font-size:12.5px;color:var(--muted)}
.hg-pdp .hg-sidecfg .hg-quick{padding-bottom:14px}
/* dusk when the lights come on; a soft vignette around the model */
.hg-pdp .hg-3d-scene::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 100%,#2A3340 0%,#151B23 55%,#0C1016 100%);opacity:0;transition:opacity .7s ease;pointer-events:none}
.hg-pdp .hg-3d-scene.is-night::before{opacity:1}
.hg-pdp .hg-3d-scene::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 70px rgba(27,31,29,.12);pointer-events:none;z-index:2}
.hg-pdp .hg-3d-scene canvas,.hg-pdp .hg-3d-pins{position:relative;z-index:1}
.hg-pdp .hg-3d-pins{position:absolute}
.hg-pdp .hg-3d-load{z-index:3}
.hg-pdp .hg-3d-scene.is-night .hg-3d-pin{box-shadow:0 1px 4px rgba(0,0,0,.4)}
/* the controls that work the product */
.hg-pdp .hg-3d-play{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px 10px;border-top:1px solid var(--line)}
.hg-pdp .hg-3d-play .hg-3d-try{font:600 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.hg-pdp .hg-3d-play button{height:34px;padding:0 12px 0 9px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--display);transition:background .15s,border-color .15s,color .15s}
.hg-pdp .hg-3d-play button svg{width:15px;height:15px}
.hg-pdp .hg-3d-play button b{font-weight:400;color:var(--muted)}
.hg-pdp .hg-3d-play button .hg-on{display:none}
.hg-pdp .hg-3d-play button[aria-pressed="true"]{background:var(--green-wash);border-color:var(--green);color:var(--green-ink)}
.hg-pdp .hg-3d-play button[aria-pressed="true"] b{color:var(--green-ink)}
.hg-pdp .hg-3d-play button[aria-pressed="true"] .hg-on{display:inline}
.hg-pdp .hg-3d-play button[aria-pressed="true"] .hg-off{display:none}
.hg-pdp .hg-3d-play button:hover:not(:disabled){border-color:var(--green)}
.hg-pdp .hg-3d-play button:disabled{opacity:.4;cursor:default}
/* the colour dots appear once the lights are on; the first fades through the colours */
.hg-pdp .hg-3d-colors{display:none;gap:6px;align-items:center;margin-left:2px}
.hg-pdp .hg-3d-play.has-lights .hg-3d-colors{display:inline-flex;animation:hg3dDots .25s ease}
@keyframes hg3dDots{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.hg-pdp .hg-3d-play .hg-3d-dot{width:18px;height:18px;min-width:0;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line-strong);padding:0;cursor:pointer}
.hg-pdp .hg-3d-play .hg-3d-dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--green-ink)}
/* phones: the four controls as a tab bar - icon, name, state - and the colours centred underneath */
@media (max-width:640px){
.hg-pdp .hg-3d-scene{height:250px}.hg-pdp .hg-3d-bar .hg-3d-cap{display:none}.hg-pdp .hg-3d-play .hg-3d-try{display:none}
.hg-pdp .hg-3d-play{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 10px 10px}
.hg-pdp .hg-3d-play button:not(.hg-3d-dot){height:auto;min-height:58px;padding:7px 2px 6px;border-radius:12px;flex-direction:column;justify-content:center;gap:3px;font-size:12px;line-height:1.1;text-align:center}
.hg-pdp .hg-3d-play button:not(.hg-3d-dot) svg{width:18px;height:18px;margin-bottom:1px}
.hg-pdp .hg-3d-play button:not(.hg-3d-dot) b{font-size:10.5px}
.hg-pdp .hg-3d-play .hg-3d-colors{grid-column:1/-1;justify-content:center;gap:10px;margin:2px 0 0}
.hg-pdp .hg-3d-play .hg-3d-dot{width:24px;height:24px}
}