/* 18 October 2026 — four-store retail UX rollout.
   Loaded only on Sheds Warehouse, ShedsFirst, Sheds Warehouse and HomeBerry.
   Colours are brand-specific; transaction handling stays in the shared shop. */
body.rollout-Sheds Warehouse{
  --ux-primary:#2e6848;--ux-primary-hover:#214b34;
  --ux-buy:#ed6a2c;--ux-buy-hover:#dd5520;--ux-buy-ink:#fff;
  --ux-soft:#f2f7f0;--ux-border:#d5e3d6;--ux-ink:#254535
}
body.rollout-shedsfirst{
  --ux-primary:#3f6b42;--ux-primary-hover:#2d5232;
  --ux-buy:#78963f;--ux-buy-hover:#688935;--ux-buy-ink:#fff;
  --ux-soft:#f0f5e9;--ux-border:#d4e2ce;--ux-ink:#2f5035
}
body.rollout-warehouse{
  --ux-primary:#394950;--ux-primary-hover:#27373e;
  --ux-buy:#c8242f;--ux-buy-hover:#a71d29;--ux-buy-ink:#fff;
  --ux-soft:#f6f7f7;--ux-border:#d7dfe1;--ux-ink:#303a40
}
body.rollout-homeberry{
  --ux-primary:#603447;--ux-primary-hover:#4e2638;
  --ux-buy:#e7214c;--ux-buy-hover:#bf1740;--ux-buy-ink:#fff;
  --ux-soft:#fcf5f7;--ux-border:#e9d8df;--ux-ink:#592f42
}
/* Fit purchase CTAs inside panels at all viewport widths. */
body.storefront-rollout .product-master .buy-panel .qty-row{
  width:100%!important;min-width:0!important;max-width:100%!important;
  display:grid!important;grid-template-columns:80px minmax(0,1fr) minmax(0,1fr)!important;
  gap:9px!important;align-items:end!important;box-sizing:border-box!important
}
body.storefront-rollout .product-master .buy-panel .qty-row > *{
  min-width:0!important;max-width:100%!important;box-sizing:border-box!important
}
body.storefront-rollout .product-master .buy-panel .qty-row > label{
  display:grid!important;gap:5px!important;
  grid-column:auto!important;color:inherit;
  font-size:12px!important;font-weight:800!important;
}
body.storefront-rollout .product-master .buy-panel .qty-row input{
  width:100%!important;max-width:100%!important;
  min-height:49px!important;padding:0 8px!important;
  border-radius:9px!important;font-size:16px!important;
}
body.storefront-rollout .product-master .buy-panel .qty-row > button{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  min-height:49px!important;height:auto!important;
  padding:11px 7px!important;border-radius:9px!important;
  font-size:clamp(12px,1.3vw,14px)!important;font-weight:850!important;
  line-height:1.24!important;text-align:center!important;
  white-space:normal!important;overflow-wrap:break-word!important;
  box-sizing:border-box!important
}
body.storefront-rollout .product-master .buy-panel .qty-row > #seoAddProduct,
body.storefront-rollout .product-master .buy-panel .qty-row > #addProduct{
  background:var(--ux-primary)!important;border:1px solid var(--ux-primary)!important;color:#fff!important
}
body.storefront-rollout .product-master .buy-panel .qty-row > #seoBuyProductNow,
body.storefront-rollout .product-master .buy-panel .qty-row > #buyProductNow{
  background:var(--ux-buy)!important;border:1px solid var(--ux-buy)!important;color:var(--ux-buy-ink)!important
}
/* Make the extras guidance a single generous tap target. */
body.storefront-rollout .product-master .seo-upgrade-guidance{
  padding:0!important;margin:14px 0!important;background:var(--ux-soft)!important;
  border:1px solid var(--ux-border)!important;border-radius:10px!important;
  overflow:hidden!important
}
body.storefront-rollout .product-master .rollout-extras-link{
  display:flex!important;align-items:center!important;
  gap:11px!important;width:100%!important;min-height:77px!important;
  padding:13px 15px!important;text-decoration:none!important;
  color:var(--ux-ink)!important;cursor:pointer!important
}
body.storefront-rollout .product-master .rollout-extras-link:before{
  content:"⚙";display:flex;align-items:center;justify-content:center;
  flex:0 0 33px;height:33px;border-radius:8px;
  background:var(--ux-border);font-size:21px
}
body.storefront-rollout .product-master .rollout-extras-link:after{
  content:"⌄";margin-left:auto;flex:0 0 18px;font-size:23px;font-weight:800
}
body.storefront-rollout .product-master .rollout-extras-copy{
  display:grid;gap:4px;min-width:0
}
body.storefront-rollout .product-master .rollout-extras-copy strong{
  color:var(--ux-ink);font-size:14px;line-height:1.25;font-weight:850
}
body.storefront-rollout .product-master .rollout-extras-copy small{
  margin:0;color:inherit;opacity:.8;font-size:12px;line-height:1.4
}
/* Self-contained options cards + transparent, itemised upgrade totals. */
body.storefront-rollout .seo-upgrades-configurator{
  border:1px solid var(--ux-border)!important;
  border-left:4px solid var(--ux-primary)!important;
  border-radius:12px!important;
  padding:25px!important;scroll-margin-top:25px!important;
}
body.storefront-rollout .seo-upgrades-configurator .section-heading h2{
  color:var(--ux-ink)!important;letter-spacing:-.02em
}
body.storefront-rollout .seo-upgrades-configurator .seo-upgrade-grid{gap:11px!important}
body.storefront-rollout .seo-upgrades-configurator .seo-upgrade-checkbox,
body.storefront-rollout .seo-upgrades-configurator .seo-upgrade-select{
  background:var(--ux-soft)!important;border:1px solid var(--ux-border)!important;
  border-radius:11px!important;padding:15px!important;min-width:0!important
}
body.storefront-rollout .seo-upgrades-configurator .seo-upgrade-checkbox:has(input:checked){
  border-color:var(--ux-primary)!important
}
body.storefront-rollout .seo-upgrades-configurator input[type="checkbox"]{
  accent-color:var(--ux-primary)!important;min-width:20px!important;min-height:20px!important
}
body.storefront-rollout .seo-upgrades-configurator .seo-upgrade-select select{
  background:#fff!important;border:1px solid var(--ux-border)!important;
  border-radius:8px!important;min-height:46px!important;
  font-size:16px!important;color:#29382f!important
}
body.storefront-rollout .seo-upgrades-configurator .configurator-total{
  gap:0!important;margin:17px 0 0 auto!important;width:max-content!important;
  max-width:100%!important;padding:13px!important;
  border:1px solid var(--ux-border)!important;border-radius:10px!important;
  background:var(--ux-soft)!important;
}
body.storefront-rollout .seo-upgrades-configurator .configurator-total>div{
  min-width:0!important;padding:0 14px!important;text-align:center!important
}
body.storefront-rollout .seo-upgrades-configurator .configurator-total>div+div{
  border-left:1px solid var(--ux-border)!important
}
body.storefront-rollout .seo-upgrades-configurator .configurator-total .grand-total strong{
  color:var(--ux-ink)!important;font-size:26px!important
}
/* Call-to-actions immediately below configured options */
body.storefront-rollout .rollout-configure-actions{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:16px;align-items:center;min-width:0;
  margin:19px 0 0;padding:17px;
  background:var(--ux-soft);border:1px solid var(--ux-border);border-radius:11px
}
body.storefront-rollout .rollout-configure-intro{display:grid;gap:5px;min-width:0}
body.storefront-rollout .rollout-configure-intro strong{font-size:17px;font-weight:850;color:var(--ux-ink)}
body.storefront-rollout .rollout-configure-intro span{font-size:12px;line-height:1.45;color:inherit;opacity:.82}
body.storefront-rollout .rollout-configure-controls{
  display:grid;grid-template-columns:65px minmax(150px,auto) minmax(115px,auto);
  align-items:end;gap:8px;min-width:0
}
body.storefront-rollout .rollout-configure-controls label{
  display:grid;gap:5px;font-size:12px;font-weight:800;color:var(--ux-ink)
}
body.storefront-rollout .rollout-configure-controls input{
  width:100%;min-width:0;height:48px;
  padding:0 9px!important;border:1px solid var(--ux-border);
  border-radius:8px!important;background:#fff!important;font-size:16px!important
}
body.storefront-rollout .rollout-configure-controls button{
  min-width:0;max-width:100%;min-height:48px;
  padding:10px 13px;border-radius:8px;border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:850;line-height:1.3;cursor:pointer
}
body.storefront-rollout .rollout-configure-add{
  color:#fff;background:var(--ux-primary);border-color:var(--ux-primary)!important
}
body.storefront-rollout .rollout-configure-add:hover{background:var(--ux-primary-hover)}
body.storefront-rollout .rollout-configure-buy{
  color:var(--ux-buy-ink);background:var(--ux-buy);border-color:var(--ux-buy)!important
}
body.storefront-rollout .rollout-configure-buy:hover{background:var(--ux-buy-hover)}
body.storefront-rollout .rollout-configure-actions :focus-visible,
body.storefront-rollout .rollout-extras-link:focus-visible{
  outline:3px solid var(--ux-primary)!important;outline-offset:3px!important
}
/* Discovery: give category pages a visible route to filtering and products */
body.storefront-rollout .rollout-refine-row{
  display:flex;align-items:center;justify-content:space-between;gap:13px;
  padding:11px 14px;margin:11px 0 15px;
  background:var(--ux-soft);border:1px solid var(--ux-border);border-radius:9px
}
body.storefront-rollout .rollout-refine-row span{
  font-size:12px;font-weight:700;color:var(--ux-ink)
}
body.storefront-rollout .rollout-refine-row a,
body.storefront-rollout .rollout-shop-products{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:40px;padding:10px 14px;
  background:var(--ux-primary)!important;color:#fff!important;
  border-radius:8px;border:1px solid var(--ux-primary)!important;
  font-size:12px;font-weight:800!important;text-decoration:none!important;text-align:center
}
body.storefront-rollout .rollout-shop-products{margin-top:12px;width:max-content;max-width:100%}
body.storefront-rollout .rollout-bike-shortcuts{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  grid-column:1/-1;margin-top:11px
}
body.storefront-rollout .rollout-bike-shortcuts strong{
  color:var(--ux-ink);font-size:12px;margin-right:7px
}
body.storefront-rollout .rollout-bike-shortcuts a{
  display:inline-flex;min-height:37px;align-items:center;
  padding:8px 12px;border-radius:18px;
  border:1px solid var(--ux-border);background:var(--ux-soft);
  color:var(--ux-ink);font-size:12px;font-weight:800
}
@media(max-width:1100px){
  body.storefront-rollout .product-master .buy-panel .qty-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  body.storefront-rollout .product-master .buy-panel .qty-row>label{
    grid-column:1/-1!important;max-width:108px!important
  }
  body.storefront-rollout .product-master .buy-panel .qty-row>#seoAddProduct,
  body.storefront-rollout .product-master .buy-panel .qty-row>#addProduct{grid-column:1!important}
  body.storefront-rollout .product-master .buy-panel .qty-row>#seoBuyProductNow,
  body.storefront-rollout .product-master .buy-panel .qty-row>#buyProductNow{grid-column:2!important}
  body.storefront-rollout .rollout-configure-actions{grid-template-columns:1fr}
  body.storefront-rollout .rollout-configure-controls{
    grid-template-columns:70px repeat(2,minmax(0,1fr))
  }
}
@media(max-width:760px){
  body.storefront-rollout .product-master .buy-panel .qty-row{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;gap:9px!important
  }
  body.storefront-rollout .product-master .buy-panel .qty-row>label,
  body.storefront-rollout .product-master .buy-panel .qty-row>button{
    display:flex!important;width:100%!important;max-width:100%!important;
    flex-direction:column!important;grid-column:auto!important
  }
  body.storefront-rollout .product-master .buy-panel .qty-row>button{
    flex-direction:row!important;min-height:50px!important;font-size:15px!important
  }
  body.storefront-rollout .rollout-configure-controls{grid-template-columns:1fr}
  body.storefront-rollout .rollout-configure-controls label{max-width:96px}
  body.storefront-rollout .rollout-configure-controls button{min-height:51px}
  body.storefront-rollout .seo-upgrades-configurator{padding:17px!important}
  body.storefront-rollout .seo-upgrades-configurator .configurator-total{
    width:100%!important;justify-content:space-between!important
  }
  body.storefront-rollout .seo-upgrades-configurator .configurator-total>div{
    flex:1;min-width:0!important;padding:0 8px!important
  }
  body.storefront-rollout .seo-upgrades-configurator .configurator-total span{
    white-space:normal!important
  }
  body.storefront-rollout .rollout-refine-row{
    flex-direction:column;align-items:stretch
  }
  body.storefront-rollout .rollout-refine-row a{
    min-height:44px;align-self:stretch
  }
  body.storefront-rollout .rollout-shop-products{width:100%;min-height:46px}
  body.storefront-rollout .category-results .subcat-strip .chip-row{
    display:flex!important;flex-wrap:wrap!important;
    gap:7px!important;overflow:visible!important;white-space:normal!important
  }
  body.storefront-rollout .category-results .subcat-strip a.chip{
    max-width:100%;min-height:39px;white-space:normal!important
  }
}

/* Phase 4: cleaner product photography, consistent frames and usable mobile thumbnails. */
body.storefront-rollout .product-master .gallery{
  border-color:var(--ux-border)!important;
  border-radius:12px!important;
  overflow:hidden!important;
}
body.storefront-rollout .product-master .gallery-main{
  padding:13px!important;
}
body.storefront-rollout .product-master .gallery-main > img:first-child,
body.storefront-rollout .product-master .gallery-main > .product-image-stage > img{
  width:100%!important;
  max-height:560px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#f7f9f6!important;
  border-radius:10px!important;
}
body.storefront-rollout .seo-product-page .gallery-main .thumbs{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:9px!important;
  max-width:100%!important;
  overflow-x:auto!important;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 10px!important;
  margin-top:11px!important;
}
body.storefront-rollout .seo-product-page .gallery-main .thumbs img{
  flex:0 0 73px!important;
  width:73px!important;
  height:73px!important;
  max-width:none!important;
  object-fit:contain!important;
  scroll-snap-align:start;
  border-radius:9px!important;
  background:#fff!important;
}
body.storefront-rollout .seo-product-page .gallery-main .thumbs img.active{
  border-color:var(--ux-primary)!important;
  box-shadow:0 0 0 1px var(--ux-primary)!important;
}
@media(max-width:650px){
  body.storefront-rollout .product-master .gallery-main{padding:9px!important}
  body.storefront-rollout .product-master .gallery-main > img:first-child{max-height:385px!important}
  body.storefront-rollout .seo-product-page .gallery-main .thumbs img{
    width:67px!important;height:67px!important;flex-basis:67px!important
  }
}