/* Kit picker in the bag buy box (approved mockup docs/offers-review/kit-addons-6-vs-9.html): Fill the Bag tiles or
   Swatches, the "In your bag" list, and the "What's inside" dialog. Lato body, Montserrat titles, purple selection. */
.gbo-kits,.gbo-wi,.gbo-inbag{--o:#ff6824;--o-ink:#c2410c;--o-tint:#fff6f0;--pu:#8224e3;--pu-tint:#f6f0fd;--ink:#242424;--mute:#6b6763;--line:#e6e3df;--bg:#f4f2ef;--paper:#fffefc;--white:#fffffd;--ok:#2f7d32;--ease:cubic-bezier(.22,1,.36,1)}
.gbo-kits{margin:4px 0 16px;font:15px/1.5 Lato,sans-serif;color:var(--ink);text-align:left}
.gbo-kits[hidden],.gbo-wi[hidden]{display:none!important}
.gbo-kits *,.gbo-wi *,.gbo-inbag *{box-sizing:border-box}
/* Woodmart styles every button; these are plain controls. */
.gbo-kits button,.gbo-wi button{margin:0;min-height:0;font-weight:400;box-shadow:none;letter-spacing:normal;text-transform:none;line-height:1.2;color:inherit;font-family:inherit}
.gbo-kits :focus-visible,.gbo-wi :focus-visible{outline:2px solid var(--pu);outline-offset:2px}
/* Woodmart draws its own !important dotted focus outline from these variables: make it our solid purple ring. */
.gbo-kits,.gbo-wi{--wd-otl-width:2px;--wd-otl-style:solid;--wd-otl-color:var(--pu);--wd-otl-offset:2px}
.gbo-wi .wi-h h3:focus{outline:none}
/* Rings show only after a key press (the script sets .gbo-kb); after a tap or click nothing is ever outlined. */
.gbo-kits:not(.gbo-kb) *,.gbo-kits:not(.gbo-kb) *:focus,.gbo-kits:not(.gbo-kb) *:focus-visible,.gbo-wi:not(.gbo-kb),.gbo-wi:not(.gbo-kb) *,.gbo-wi:not(.gbo-kb) *:focus,.gbo-wi:not(.gbo-kb) *:focus-visible{outline:none!important}
/* A tap focuses the control and the theme draws a dotted box around it: show focus only for the keyboard, and on the
   swatch circle itself rather than the whole button. */
.gbo-kits button,.gbo-kits a,.gbo-wi button,.gbo-wi a{-webkit-tap-highlight-color:transparent}
.gbo-kits :focus:not(:focus-visible),.gbo-wi :focus:not(:focus-visible){outline:none!important}
.gbo-kits .k9 .sw:focus-visible{outline:none!important}
.gbo-kits .k9 .sw:focus-visible .c{outline:2px solid var(--pu);outline-offset:3px}
.gbo-kits .lab{margin:0;font:600 12px/1.3 Montserrat,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.gbo-kits .lab b{font-weight:600;letter-spacing:0;text-transform:none;font-size:13.5px}
.gbo-kits .help{margin:3px 0 10px;font-size:13px;color:var(--mute)}
.gbo-kits .was{color:var(--mute);font:400 12.5px Lato,sans-serif;text-decoration:line-through}
.gbo-kits .now{font:600 14.5px Montserrat,sans-serif;color:var(--o-ink)}
.gbo-kits .inside{font-size:12.5px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.gbo-kits .trust,.gbo-wi .trust{display:flex;gap:8px;align-items:center;margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--mute)}
.gbo-kits .trust svg,.gbo-wi .trust svg{flex:none;color:var(--ok)}
/* A true circle: fixed equal sides, no padding, never shrinks. */
.gbo-kits .dot,.gbo-wi .dot,.gbo-inbag .dot{flex:none;display:grid;place-items:center;width:var(--s,22px);height:var(--s,22px);aspect-ratio:1;padding:0;border-radius:50%;line-height:1}

/* "In your bag": where quantity lives */
.gbo-kits .sel{margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.gbo-kits .sel li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 10px;align-items:center;margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.gbo-kits .sel li.new,.gbo-inbag.new{animation:gbo-k-in .3s var(--ease)}
.gbo-kits-nopao #product-addons-total{display:none!important}
/* Stripe express checkout posts only addon-* and wc_* fields, so it would drop picked kits: hidden while a kit is picked. */
.gbo-kits-noxp #wc-stripe-express-checkout-element,.gbo-kits-noxp #wc-stripe-express-checkout-button-separator,.gbo-kits-noxp #wc-stripe-payment-request-wrapper,.gbo-kits-noxp #wc-stripe-payment-request-button-separator{display:none!important}
@keyframes gbo-k-in{from{opacity:0;transform:translateY(-4px)}}
.gbo-kits .sel img{width:44px;height:44px;object-fit:contain;background:var(--white);border:1px solid var(--line);border-radius:6px}
.gbo-kits .sel .nm{font:600 13.5px/1.3 Montserrat,sans-serif}
.gbo-kits .sel .who{display:block;font-size:12.5px;color:var(--mute);line-height:1.35}
.gbo-kits .sel .r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.gbo-kits .step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:var(--white)}
.gbo-kits .step button{width:36px;height:34px;padding:0;border:0;background:none;font:600 17px Montserrat,sans-serif;cursor:pointer}
.gbo-kits .step button:hover{color:var(--o-ink);background:none}
.gbo-kits .step button:disabled{color:#c9c4be;cursor:default}
.gbo-kits .step output{min-width:22px;text-align:center;font:600 14px Montserrat,sans-serif}
.gbo-kits .sel .meta{grid-column:2/4;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:12.5px}
.gbo-kits .rm{padding:0;border:0;background:none;color:var(--mute);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:12.5px}
.gbo-kits .rm:hover,.gbo-kits .inside:hover,.gbo-kits .insidebtn:hover{color:var(--o-ink);background:none}
.gbo-kits .note{margin:8px 0 0;font-size:12.5px;line-height:1.4;color:var(--mute)}
.gbo-kits .sum{display:flex;justify-content:space-between;gap:10px;margin:8px 0 0;font-size:14px;color:#5b5862}
.gbo-kits .sum b{font:600 14.5px Montserrat,sans-serif;color:var(--ink)}

/* Fill the Bag: the main photo shows what is in the bag */
.gbo-inbag-host{position:relative}
.gbo-inbag{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;background:rgba(36,36,36,.5);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);color:var(--white);font:600 12px Montserrat,sans-serif;letter-spacing:.03em;pointer-events:none}
.gbo-inbag-host:has(.product-additional-galleries .wd-gallery-btn) .gbo-inbag{left:72px}
.gbo-inbag-host.wd-carousel-inner .gbo-inbag{bottom:28px} /* clear of the slide dots */
.gbo-inbag .th{position:relative;--s:34px;background:var(--white);overflow:visible}
.gbo-inbag .th img{width:100%;height:100%;object-fit:contain;border-radius:50%;padding:3px}
.gbo-inbag .x{position:absolute;top:-6px;right:-6px;--s:18px;background:var(--o);color:var(--white);font:600 10px/1 Montserrat,sans-serif}
.gbo-kits .k6 .strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.gbo-kits .k6 .kt{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px 7px;border:1px solid var(--line);border-radius:10px;background:var(--white);cursor:pointer;text-align:center;transition:border-color .2s,background-color .2s}
.gbo-kits .k6 .kt:hover{border-color:#cfc9c2;background:var(--white)}
.gbo-kits .k6 .kt img{width:100%;height:96px;margin:0 0 4px;object-fit:contain}
.gbo-kits .k6 .kt b{font:600 12.5px/1.2 Montserrat,sans-serif}
.gbo-kits .k6 .kt small{font-size:11.5px;line-height:1.25;color:var(--mute)}
.gbo-kits .k6 .kt .pr{font:600 12px Montserrat,sans-serif;color:var(--o-ink)}
.gbo-kits .k6 .kt[aria-pressed=true]{border-color:var(--pu);box-shadow:inset 0 0 0 1px var(--pu);background:var(--pu-tint)}
.gbo-kits .k6 .kt .ck{position:absolute;top:-7px;right:-7px;--s:22px;background:var(--pu);color:var(--white);box-shadow:0 0 0 2px var(--paper);transform:scale(0);transition:transform .25s var(--ease)}
.gbo-kits .k6 .kt[aria-pressed=true] .ck{transform:scale(1)}

/* Swatches */
.gbo-kits .k9 .ksw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 8px}
.gbo-kits .k9 .sw{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;cursor:pointer;text-align:center}
.gbo-kits .k9 .sw:hover{background:none}
.gbo-kits .k9 .sw .c{--s:96px;border:1px solid var(--line);background:var(--white);overflow:hidden;transition:box-shadow .2s}
.gbo-kits .k9 .sw .c img{width:100%;height:100%;object-fit:contain;padding:8px}
.gbo-kits .k9 .sw:hover .c{border-color:#cfc9c2}
.gbo-kits .k9 .sw[aria-pressed=true] .c{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--pu)}
.gbo-kits .k9 .sw b{display:block;font:600 11.5px/1.2 Montserrat,sans-serif}
.gbo-kits .k9 .sw small{display:block;font-size:11px;line-height:1.25;color:var(--mute)}
.gbo-kits .k9 .sw .pr{font:600 11.5px Montserrat,sans-serif;color:var(--o-ink)}
.gbo-kits .k9 .sw[aria-pressed=true] b{color:var(--pu)}
.gbo-kits .k9 .hint{min-height:2.7em;margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--o-tint);font-size:13px;line-height:1.35}
.gbo-kits .k9 .hint b{font-family:Montserrat,sans-serif}
.gbo-kits .k6 .kt .was,.gbo-kits .k9 .sw .was{font:400 11px Lato,sans-serif}
.gbo-kits .kt:disabled,.gbo-kits .sw:disabled{opacity:.5;cursor:not-allowed}
.gbo-kits button.insidebtn{margin:8px 0 0;padding:0;border:0;background:none;font-size:12.5px;text-decoration:underline!important;text-underline-offset:2px;cursor:pointer}
@media (max-width:600px){.gbo-kits .k9 .sw .c{--s:60px}.gbo-kits .k6 .kt img{height:64px}}

/* What's inside: one dialog, a tab per kit, a tile per supply */
dialog.gbo-wi{width:min(1040px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(36,36,36,.28);font:15px/1.5 Lato,sans-serif;overflow:auto}
dialog.gbo-wi::backdrop{background:rgba(36,36,36,.55)}
dialog.gbo-wi[open]{animation:gbo-k-pop .28s var(--ease)}
@keyframes gbo-k-pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.gbo-wi .wi-h{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:16px 18px 12px;background:var(--paper);border-bottom:1px solid var(--line)}
.gbo-wi .wi-h img{width:56px;height:56px;object-fit:contain;background:var(--white);border:1px solid var(--line);border-radius:8px}
.gbo-wi .wi-h h3{margin:0;font:600 17px/1.25 Montserrat,sans-serif;color:var(--ink);text-transform:none}
.gbo-wi .wi-h p{margin:2px 0 0;font-size:13px;color:var(--mute)}
.gbo-wi .wi-x{--s:36px;border:1px solid var(--line);background:var(--white);cursor:pointer;font:400 20px/1 Lato,sans-serif}
.gbo-wi .wi-x:hover{border-color:var(--ink);background:var(--white)}
.gbo-wi .wi-tabs{grid-column:1/4;display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.gbo-wi .wi-tabs button{padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--white);cursor:pointer;font:600 12px Montserrat,sans-serif}
.gbo-wi .wi-tabs button[aria-pressed=true]{border-color:var(--pu);background:var(--pu-tint);color:var(--pu)}
.gbo-wi .wi-grid{list-style:none;margin:0;padding:16px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.gbo-wi .wi-grid li{display:flex;margin:0}
.gbo-wi .wi-grid .it{position:relative;flex:1;display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-size:12.5px;line-height:1.3;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;transition:border-color .2s}
.gbo-wi .wi-grid a.it:hover{border-color:var(--o);color:var(--ink)}
.gbo-wi .wi-grid .ph{display:grid;place-items:center;aspect-ratio:1;border-radius:6px;background:#fff;overflow:hidden}
.gbo-wi .wi-grid .ph img{width:100%;height:100%;object-fit:contain}
.gbo-wi .wi-grid .ph.no{background:var(--bg);color:#b5aea6}
.gbo-wi .wi-grid .q{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:999px;background:var(--pu);color:var(--white);font:600 11px/1.4 Montserrat,sans-serif}
@media (max-width:480px){.gbo-wi .wi-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px;gap:6px}.gbo-wi .wi-grid .it{font-size:11.5px;padding:6px}}
.gbo-wi .wi-f{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 18px 16px;border-top:1px solid var(--line)}
.gbo-wi .wi-f .trust{margin:0}
.gbo-wi .wi-add{padding:10px 16px;border:0;border-radius:6px;background:var(--o);color:var(--white);font:600 14px Montserrat,sans-serif;cursor:pointer}
.gbo-wi .wi-add:hover{background:#e95a1a;color:var(--white)}
.gbo-wi .wi-add[aria-pressed=true]{background:var(--pu)}
.gbo-wi .wi-add:disabled{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.gbo-kits *,.gbo-wi,.gbo-wi *,.gbo-inbag{transition:none!important;animation:none!important}}
/* Placeholder while the hello loads: label, help line and one tile per kit, the picker's height. */
.gbo-kits-skel i{display:block;border-radius:6px;background:linear-gradient(90deg,#efece8 25%,#f8f6f3 50%,#efece8 75%) 0 0/300% 100%;animation:gbo-k-shim 1.3s linear infinite}
.gbo-kits-skel .l{width:170px;height:16px;margin:2px 0 8px}
.gbo-kits-skel .h{width:68%;height:12px;margin:0 0 12px}
.gbo-kits-skel .t{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.gbo-kits-skel .t i{height:152px;border-radius:10px}
@keyframes gbo-k-shim{to{background-position:-150% 0}}
@media (max-width:600px){.gbo-kits-skel .t i{height:120px}}