/* uktpergolacart 1.0.4: the configurator inside the shop theme (same approach as uktbollardcart 1.3.0).
   Everything is scoped to this controller's page (body id is unique) or to #ukt-pergola-configurator. */
/* full-width breakout on desktop, only on the full-width layout (never over a left/right column); --ukt-pg-sbw = scrollbar width (pergola-theme.js) */
@media (min-width: 861px) {
  body#module-uktpergolacart-configurator.layout-full-width { overflow-x: clip; }
  body#module-uktpergolacart-configurator.layout-full-width #ukt-pergola-configurator {
    position: relative; box-sizing: border-box; max-width: none;
    width: calc(100vw - var(--ukt-pg-sbw, 0px));
    margin-left: calc(50% - 50vw + var(--ukt-pg-sbw, 0px) / 2);
    margin-right: calc(50% - 50vw + var(--ukt-pg-sbw, 0px) / 2);
  }
}
body#module-uktpergolacart-configurator #content.page-content, body#module-uktpergolacart-configurator #content-wrapper > section > .page-content { padding: 0; }
body#module-uktpergolacart-configurator #ukt-pergola-configurator.page-content { margin-bottom: 0; padding: 0; background: var(--bg); border: 0; box-shadow: none; }
/* theme/Bootstrap names the page also uses (.card .btn .badge .show .hidden): undo the theme's look so only the page's own rules apply */
#ukt-pergola-configurator .card { display: block; flex-direction: initial; min-width: 0; word-wrap: normal; background-clip: border-box; }
#ukt-pergola-configurator .btn { text-transform: none; letter-spacing: normal; white-space: normal; box-shadow: none; line-height: 1.2; }
#ukt-pergola-configurator .badge { white-space: normal; vertical-align: baseline; }
#ukt-pergola-configurator h1, #ukt-pergola-configurator h2, #ukt-pergola-configurator h3, #ukt-pergola-configurator h4 { text-transform: none; letter-spacing: normal; color: inherit; font-family: var(--font); }
#ukt-pergola-configurator label { text-align: left; font-size: inherit; color: inherit; }
#ukt-pergola-configurator input, #ukt-pergola-configurator select, #ukt-pergola-configurator button, #ukt-pergola-configurator textarea { font-family: inherit; }
#ukt-pergola-configurator canvas { max-width: none; }
#ukt-pergola-configurator img, #ukt-pergola-configurator svg { max-width: 100%; }
/* the page's own UK Timber logo (links to calculators.uk-timber.co.uk) stays; the spike banner is staff-only as in the standalone page */
/* phones: the base page's nowrap rows (range chips, view switch, dock buttons) wider than a 390 px screen; wrap them here (in-theme only, page untouched) */
@media (max-width: 640px) {
  body#module-uktpergolacart-configurator { overflow-x: clip; }
  #ukt-pergola-configurator .family-nav, #ukt-pergola-configurator .family-ranges, #ukt-pergola-configurator .view-bar { flex-wrap: wrap; }
  #ukt-pergola-configurator .family-all { flex: 1 1 100%; }
  #ukt-pergola-configurator .view-bar { margin-left: 0; flex: 1 1 100%; }
  #ukt-pergola-configurator .view-seg { min-width: 0; }
  #ukt-pergola-configurator .dock > * { min-width: 0; max-width: 100%; }
  /* compact sticky dock on phones: price, basket box and the three buttons in one short block */
  #ukt-pergola-configurator .dock { gap: .4rem; padding-top: .4rem; padding-bottom: calc(.4rem + env(safe-area-inset-bottom)); }
  #ukt-pergola-configurator .dock .uktpg-box { flex: 1 1 100%; margin: 0; padding: .45rem .6rem; }
  #ukt-pergola-configurator .uktpg-box .uktpg-price { font-size: .95rem; }
  #ukt-pergola-configurator .uktpg-box .uktpg-why { display: none; }
  #ukt-pergola-configurator .dock .cta-row { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  #ukt-pergola-configurator #ctaRow .btn { min-height: 2.3rem; font-size: .74rem; padding: .3rem .35rem; line-height: 1.15; }
}