/* Hygge UK "Pergola Pro" product pages: the few rules the design's stylesheet (pdp.css, generated from the
   UK prototype) does not carry, because the markup here is WooCommerce's rather than the prototype's.
   Loaded after pdp.css and pdp-overrides.css (see inc/uk-pdp.php). */

/* the price row's crossed-out previous price is empty until a size is chosen */
.hg-pdp .hg-pricerow .hg-price s:empty{display:none}
.hg-pdp .hg-rating .hg-tpnote{display:block;font-size:12px;color:var(--muted);margin-top:4px}

/* attribute tiles (freestanding / wall-mounted, with or without blinds, how many panels) mirror WooCommerce's selects */
@media (min-width:561px){.hg-pdp .hg-yn.hg-three{grid-template-columns:repeat(3,1fr)}}
.hg-pdp .hg-attr-tiles .hg-opt .hg-p:empty{display:none}
.hg-pdp .hg-attr-tiles .hg-opt:disabled .hg-p{color:var(--muted);font-weight:500}
.hg-pdp .hg-attr-tiles .hg-opt:disabled{opacity:.55;cursor:not-allowed}

/* free gifts: the renders come through <picture>, and the optional row carries its own tick state */
.hg-pdp .hg-addon picture{width:58px;height:58px;border-radius:4px;overflow:hidden;background:var(--ground)}
.hg-pdp .hg-addon picture img{width:100%;height:100%;object-fit:cover}
.hg-pdp .hg-addon.hg-on .hg-ck{background:var(--green);border-color:var(--green)}
.hg-pdp .hg-addon.hg-on .hg-ck svg{opacity:1}
.hg-pdp .hg-addon .hg-n{background:none;border:0;min-width:0;height:auto;border-radius:0;letter-spacing:0;text-transform:none;font-weight:400;place-items:start}

/* summary: the reserve button's label wraps on phones */
.hg-pdp .hg-cta .hg-btn-ghost{text-align:center;white-space:normal;line-height:1.25;padding:0 14px}
.hg-pdp .hg-cta .hg-btn-ghost .hg-num{font-weight:700}

/* like-for-like table: the theme's table styles stay out */
.hg-pdp .hg-cmp th,.hg-pdp .hg-cmp td{background:none}

/* installation section: two cards, the care questions under both */
.hg-pdp .hg-install-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.hg-pdp .hg-install-two .hg-acc-care{grid-column:1/-1}
.hg-pdp .hg-icard-pro .hg-tag{color:var(--green)}
.hg-pdp .hg-icard .hg-pr small{display:block;margin:4px 0 0}

/* reviews band on products that keep the USA wording */
.hg-pdp .hg-rsum .hg-big.hg-big-tp{font-size:56px;font-weight:500;letter-spacing:-.03em}
.hg-pdp .hg-rsum .hg-big.hg-big-tp small{display:block;font-size:14px;letter-spacing:0;margin:8px 0 0}

/* the drawer and checkout: a free gift's price */
.hg-free{font-weight:700;color:var(--status,#39825d)}

@media (max-width:560px){
	.hg-pdp .hg-addon picture{width:46px;height:46px;align-self:start;margin-top:2px}
}
@media (max-width:980px){
	.hg-pdp .hg-install-two{grid-template-columns:1fr}
}

/* the prototype's transitions name an easing token it never defines */
.hg-pdp{--ease:cubic-bezier(.2,.7,.2,1)}
/* size tabs: one column per size this listing comes in (two, four, or one) */
.hg-pdp .hg-sizetabs{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

/* the three tiles under the price never spill into their neighbours */
.hg-pdp .hg-included b,.hg-pdp .hg-included span{overflow:hidden;text-overflow:ellipsis}

/* the order bar eases in and out (it hides while the page scrolls and returns when the scrolling stops) */
.hg-pdp .hg-stickybar{transition:transform .36s cubic-bezier(.22,.61,.36,1)}

/* the order bar's button never spills its words on a phone */
@media (max-width:980px){.hg-pdp .hg-stickybar .hg-btn{flex:0 0 auto;max-width:62%;padding:0 16px;overflow:hidden;text-overflow:ellipsis}.hg-pdp .hg-stickybar .hg-p{flex:1 1 auto;min-width:0}}

/* the order buttons while the add is under way: a spinner in place of the words, no second press */
.hg-pdp .hg-btn.hg-busy,.hg-pdp .hg-dep.hg-busy{position:relative;pointer-events:none;color:transparent!important}
.hg-pdp .hg-btn.hg-busy *{color:transparent!important}
.hg-pdp .hg-btn.hg-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:hgspin .7s linear infinite}
.hg-pdp .hg-btn-ghost.hg-busy::after,.hg-pdp .hg-dep.hg-busy::after{border-color:rgba(27,31,29,.2);border-top-color:var(--ink)}
.hg-pdp .hg-dep.hg-busy{opacity:.5}
@keyframes hgspin{to{transform:rotate(360deg)}}
/* a gift's name opens its listing */
.hg-pdp .hg-addon .hg-t a,.hg-pdp .hg-row .hg-rt b a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.hg-pdp .hg-addon .hg-t a:hover,.hg-pdp .hg-row .hg-rt b a:hover{text-decoration-color:var(--ink)}

/* the size tabs on a phone: the size on one line, the posts under it */
.hg-pdp .hg-sizetabs .hg-t,.hg-pdp .hg-sizetabs .hg-s{display:block}
@media (max-width:560px){
.hg-pdp .hg-sizetabs button{padding:14px 10px}
.hg-pdp .hg-sizetabs .hg-t{font-size:20px;white-space:nowrap}
.hg-pdp .hg-sizetabs .hg-s{font-size:12px}
}

/* the other order buttons wait while one is busy */
.hg-pdp .hg-btn.hg-wait,.hg-pdp .hg-dep.hg-wait{pointer-events:none;opacity:.55}
/* a step that waits for the ones before it */
.hg-pdp .hg-card .hg-step.hg-locked .hg-step-body{display:none}
.hg-pdp .hg-card .hg-step.hg-locked{padding:12px 0;opacity:.6}
.hg-pdp .hg-card .hg-step.hg-locked .hg-step-head h3{font-size:15px;font-weight:400;color:var(--muted)}
.hg-pdp .hg-card .hg-step.hg-locked .hg-step-head .hg-n{background:var(--card);color:var(--muted);border:1px solid var(--line)}
.hg-pdp .hg-card .hg-step.hg-locked .hg-val .hg-muted{font-size:12.5px;color:var(--muted)}

/* ---- a quantity step (glass side panels to fit): five narrow tiles, a sentence above them ---- */
.hg-pdp .hg-step-intro{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.hg-pdp .hg-step-intro b{color:var(--ink);font-weight:600}
.hg-pdp .hg-yn.hg-qty{grid-template-columns:repeat(5,1fr);gap:6px}
.hg-pdp .hg-yn.hg-qty .hg-opt{padding:12px 6px 12px;justify-items:center;text-align:center}
.hg-pdp .hg-yn.hg-qty .hg-opt>span:first-child{display:grid;justify-items:center}
.hg-pdp .hg-yn.hg-qty .hg-opt .hg-t{font-size:14px}
.hg-pdp .hg-yn.hg-qty .hg-opt .hg-p{font-size:12.5px;white-space:nowrap}
.hg-pdp .hg-yn.hg-qty .hg-opt .hg-chk{top:6px;right:6px;width:14px;height:14px}
@media (max-width:560px){.hg-pdp .hg-yn.hg-qty{grid-template-columns:repeat(3,1fr)}}
/* the tick follows its own row, not the gift box: an unticked gift shows an empty ring even while the box is "on" */
.hg-pdp .hg-addwrap.hg-on .hg-addon:not(.hg-on) .hg-ck{background:var(--card);border-color:var(--line-strong)}
.hg-pdp .hg-addwrap.hg-on .hg-addon:not(.hg-on) .hg-ck svg{opacity:0}

.hg-pdp .hg-addon:not(.hg-on) .hg-ck{background:var(--card);border-color:var(--line-strong)}
.hg-pdp .hg-addon:not(.hg-on) .hg-ck svg{opacity:0}


/* ---- trust marks: the badge row under the order buttons, the seal band under the card ---- */
/* the trust strip beneath the buy box, no frame of its own: two by two on a card, one row across on a wide screen */
.hg-pdp .hg-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;margin-top:12px;padding:0 4px;text-align:left}
@media (min-width:1760px){.hg-pdp .hg-cfgcard .hg-badges{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px}}
.hg-pdp .hg-cfgcard .hg-badges{margin:10px 2px 0}
.hg-pdp .hg-badge{display:flex;align-items:center;gap:7px;min-width:0}
.hg-pdp .hg-badge>svg{width:16px;height:16px;flex:none;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hg-pdp .hg-badge .hg-t{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-pdp .hg-badge .hg-t b{font-size:12px;line-height:1.3;font-weight:600;color:var(--ink-2);font-family:var(--body)}
.hg-pdp .hg-badge .hg-t span{display:none}
/* six stat tiles on the pergola pages: six across on a wide screen, then the usual three and two */
@media (min-width:981px){.hg-pdp .hg-trust .hg-wrap:has(> div:nth-child(6)){grid-template-columns:repeat(6,1fr)}.hg-pdp .hg-trust .hg-wrap:has(> div:nth-child(6)) > div{padding:18px 14px 18px 0;margin-right:14px}.hg-pdp .hg-trust .hg-wrap:has(> div:nth-child(6)) b{font-size:24px}}
@media (max-width:980px){.hg-pdp .hg-trust .hg-wrap:has(> div:nth-child(6)) > div:nth-child(5){grid-column:auto;border-right:1px solid var(--line)}}
/* the free heater row: a square photo, the tick a ring at the top right like the option tiles, the price on its own line */
.hg-pdp .hg-addon.hg-giftrow{grid-template-columns:58px 1fr auto;gap:12px 14px;align-items:center;padding:12px 44px 12px 14px}
.hg-pdp .hg-addon.hg-giftrow img{width:58px;height:58px;border-radius:8px;align-self:center;margin:0;object-fit:cover}
.hg-pdp .hg-addon.hg-giftrow .hg-ck{position:absolute;top:12px;right:14px;width:20px;height:20px;border-radius:50%}
.hg-pdp .hg-addon.hg-giftrow .hg-t{display:block;padding-right:0}
.hg-pdp .hg-addon.hg-giftrow .hg-s{margin-top:2px}
.hg-pdp .hg-addon.hg-giftrow .hg-p{white-space:nowrap;text-align:right;font-size:15px;line-height:1.2}
.hg-pdp .hg-addon.hg-giftrow .hg-p b{font-weight:700;color:var(--green-ink)}
.hg-pdp .hg-addon.hg-giftrow .hg-p s{color:var(--faint);font-weight:400;font-size:12px;margin-left:4px}
.hg-pdp .hg-addon.hg-giftrow .hg-p span{display:none}
@media (max-width:560px){
.hg-pdp .hg-addon.hg-giftrow{grid-template-columns:64px 1fr;gap:3px 12px;padding:12px 40px 12px 12px}
.hg-pdp .hg-addon.hg-giftrow img{width:64px;height:64px;grid-row:1/3}
.hg-pdp .hg-addon.hg-giftrow .hg-tx{grid-column:2}
.hg-pdp .hg-addon.hg-giftrow .hg-p{grid-column:2;text-align:left;font-size:13px;margin-top:1px}
.hg-pdp .hg-addon.hg-giftrow .hg-p span{display:inline;color:var(--muted);font-size:12px}
.hg-pdp .hg-addon.hg-giftrow .hg-p s{margin-left:0}
.hg-pdp .hg-addon.hg-giftrow .hg-ck{top:12px;right:12px}
}
/* a mounting the chosen size cannot take is hidden; the one left spans the row */
.hg-pdp .hg-attr-tiles .hg-opt[hidden]{display:none}
.hg-pdp .hg-seg.hg-single{grid-template-columns:1fr}
/* the inspiration carousel: a scroll-snap track, four in view on a wide screen, three on a laptop, two on a tablet, one and a bit on a phone */
.hg-pdp .hg-inspo{position:relative}
.hg-pdp .hg-inspo-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.hg-pdp .hg-inspo-track::-webkit-scrollbar{display:none}
.hg-pdp .hg-inspo-track:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.hg-pdp .hg-inspo figure{flex:0 0 calc((100% - 30px)/4);margin:0;scroll-snap-align:start;border-radius:var(--r);overflow:hidden;background:var(--ground)}
.hg-pdp .hg-inspo figure button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.hg-pdp .hg-inspo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--ease)}
.hg-pdp .hg-inspo figure:hover img{transform:scale(1.03)}
.hg-pdp .hg-inspo-nav{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.hg-pdp .hg-inspo-count{font-size:12.5px;color:var(--muted);margin-right:4px}
.hg-pdp .hg-inspo-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s ease,border-color .15s ease}
.hg-pdp .hg-inspo-btn:hover{background:var(--green-wash);border-color:var(--green)}
.hg-pdp .hg-inspo-btn:disabled{opacity:.35;cursor:default;background:var(--card);border-color:var(--line-strong)}
.hg-pdp .hg-inspo-btn svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hg-pdp #hg-inspoPrev svg{transform:rotate(180deg)}
@media (max-width:1240px){.hg-pdp .hg-inspo figure{flex-basis:calc((100% - 20px)/3)}}
@media (max-width:980px){.hg-pdp .hg-inspo{margin:0 calc(-1*var(--gutter))}.hg-pdp .hg-inspo-track{padding-left:var(--gutter);padding-right:var(--gutter);scroll-padding-left:var(--gutter)}.hg-pdp .hg-inspo figure{flex-basis:calc((100% - 10px)/2)}}
@media (max-width:560px){.hg-pdp .hg-inspo-track{gap:8px}.hg-pdp .hg-inspo figure{flex-basis:76%}}
/* the size tabs on phones: two by two, an odd last one across the row */
@media (max-width:980px){.hg-pdp .hg-sizetabs{grid-template-columns:1fr 1fr}.hg-pdp .hg-sizetabs button{padding:14px 12px;border-right:1px solid var(--line)}.hg-pdp .hg-sizetabs button:nth-child(2n){border-right:0}.hg-pdp .hg-sizetabs button:nth-child(n+3){border-top:1px solid var(--line)}.hg-pdp .hg-sizetabs button:last-child:nth-child(odd){grid-column:1/-1;border-right:0}.hg-pdp .hg-sizetabs .hg-t{font-size:20px}}