/* ==========================================================================
   BHARAT GLASS & CROCKERIES — storefront stylesheet
   Bengaluru, since 1959. Commercial kitchen, glassware, crockery, bar,
   buffet and banquet supply for hotels, restaurants, caterers and bakeries.

   Written for this client, not layered over the inherited Milano app.css.
   Own namespace: every new class is bgc-*. The unprefixed names kept here
   (.header, .product-card, .btn-add-cart, #cart-badge, .filter-* …) are the
   contract theme.js / cart.js / mini-cart.js / location.js / quickview.js
   bind to — the markup keeps them so features keep working, and this file
   restyles them.

   LOADED LAST. themeCss() sorts swiper → app.css → theme.css → the rest
   alphabetically, so ui.css is the final word over app.css and over the
   page-level <style> blocks it cannot outrank by order alone. Everything is
   scoped .theme-bgc so it also clears those inline blocks on specificity.

   UNITS: app.css sets html{font-size:62.5%}, so 1rem = 10px throughout.
   Floor for anything a customer reads: 1.4rem (14px).

   PALETTE: sampled from bgc.in's own stylescape, not invented —
   blue #19A4F6, dark #1170A8, deep #083B54, amber #F6931A, red #F23B5C.
   MOTIF: the logo is a grid of rounded squares holding line-drawn equipment.
   That square-tile grid is the theme's motif: separators, skeletons, the
   no-image placeholder and the finish swatches all use it.
   ========================================================================== */

/* ---------- 1. tokens ---------------------------------------------------- */
:root {
  --bgc-blue:     #19A4F6;
  --bgc-blue-d:   #1170A8;
  --bgc-blue-dd:  #083B54;
  --bgc-blue-l:   #59BFFA;
  --bgc-blue-ll:  #ACDBF6;
  --bgc-wash:     #EAF6FE;
  --bgc-canvas:   #F5FAFD;
  --bgc-surface:  #FFFFFF;
  --bgc-sunken:   #EDF5FA;

  --bgc-amber:    #F6931A;
  --bgc-amber-d:  #A86512;
  --bgc-amber-sf: #FEF3E3;

  --bgc-ink:      #0F2733;
  --bgc-ink-2:    #33505F;
  --bgc-muted:    #5E7784;
  --bgc-faint:    #8CA4B1;
  --bgc-line:     #DDEAF2;
  --bgc-line-2:   #C0D7E4;

  --bgc-good:     #12A150;
  --bgc-good-sf:  #E6F6EC;
  --bgc-error:    #D92847;
  --bgc-error-sf: #FDECEF;

  --bgc-display: "Rajdhani", system-ui, -apple-system, Segoe UI, sans-serif;
  --bgc-body:    "Poppins", system-ui, -apple-system, Segoe UI, sans-serif;

  /* type — body 15px; nothing a customer reads below 14px */
  --bgc-t-xs: 1.3rem;   /* badges, counters only */
  --bgc-t-sm: 1.4rem;
  --bgc-t-md: 1.5rem;
  --bgc-t-lg: 1.7rem;
  --bgc-t-xl: 2.0rem;

  /* ONE control metric — every field, trigger and button answers to these */
  --bgc-ctl:    4.4rem;
  --bgc-ctl-sm: 3.6rem;
  --bgc-ctl-px: 1.4rem;
  --bgc-ctl-fs: 1.5rem;

  --bgc-r-sm: 8px;
  --bgc-r:    10px;
  --bgc-r-lg: 14px;

  --bgc-maxw: 132rem;
  --bgc-gut:  2.4rem;

  --bgc-shadow:    0 1px 2px rgba(8, 59, 84, .05), 0 4px 14px rgba(8, 59, 84, .06);
  --bgc-shadow-up: 0 2px 6px rgba(8, 59, 84, .07), 0 16px 40px rgba(8, 59, 84, .12);

  /* stacking — a drawer must clear the masthead, see §9 */
  --bgc-z-head:   900;
  --bgc-z-drawer: 1300;
  --bgc-z-modal:  1500;
  --bgc-z-toast:  1700;
}

/* ---------- 2. shell, reset, type ---------------------------------------- */
body.theme-bgc {
  background: var(--bgc-canvas);
  color: var(--bgc-ink);
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.theme-bgc .bgc-wrap,
.theme-bgc .container,
.theme-bgc .stretch_width {
  width: 100%;
  max-width: var(--bgc-maxw);
  margin-inline: auto;
  padding-inline: var(--bgc-gut);
}

.theme-bgc a { color: inherit; text-decoration: none; }
.theme-bgc img { max-width: 100%; display: block; }

/* Our own heading reset is (0,1,1) and outranks a component's own margin
   rule at (0,1,0), so components set margin explicitly where they need it. */
.theme-bgc h1, .theme-bgc h2, .theme-bgc h3,
.theme-bgc h4, .theme-bgc h5, .theme-bgc h6 {
  font-family: var(--bgc-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .005em;
  color: var(--bgc-ink);
  margin: 0;
}
.theme-bgc h1 { font-size: clamp(3.2rem, 1.6rem + 3.2vw, 5.4rem); }
.theme-bgc h2 { font-size: clamp(2.6rem, 1.6rem + 2.0vw, 3.8rem); }
.theme-bgc h3 { font-size: clamp(2.0rem, 1.4rem + 1.2vw, 2.6rem); }
.theme-bgc h4 { font-size: 1.9rem; }
.theme-bgc p  { margin: 0; }

.theme-bgc .bgc-lede {
  font-size: var(--bgc-t-lg);
  line-height: 1.6;
  color: var(--bgc-ink-2);
  max-width: 62ch;
}

/* eyebrow — Rajdhani caps, the one place the type gets technical */
.theme-bgc .bgc-kicker {
  display: inline-block;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bgc-blue-d);
  margin-bottom: .8rem;
}
.theme-bgc .bgc-kicker--on { color: #FFF; opacity: .92; }
.theme-bgc .bgc-kicker--amber { color: var(--bgc-amber-d); }

.theme-bgc .bgc-sec { padding-block: clamp(4rem, 2rem + 4vw, 7.2rem); }
.theme-bgc .bgc-sec--tight { padding-block: clamp(3.2rem, 1.6rem + 3vw, 5.6rem); }
.theme-bgc .bgc-sec--wash { background: var(--bgc-wash); }
.theme-bgc .bgc-sec--deep { background: var(--bgc-blue-dd); color: #FFF; }
.theme-bgc .bgc-sec--deep h2,
.theme-bgc .bgc-sec--deep h3 { color: #FFF; }
.theme-bgc .bgc-sec--deep .bgc-lede { color: rgba(255, 255, 255, .82); }

.theme-bgc .bgc-sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.8rem;
  flex-wrap: wrap;
}

.theme-bgc .bgc-only-d { display: none; }
.theme-bgc .bgc-only-m { display: inline-flex; }
@media (min-width: 1024px) {
  .theme-bgc .bgc-only-d { display: inline-flex; }
  .theme-bgc .bgc-only-m { display: none; }
}

/* ---------- 3. motif: the tile rule -------------------------------------- */
/* A hairline broken by the logo's four-square tile. One motif, used for
   section breaks only — spreading it across eyebrows and filters too would
   read as clutter rather than as a device. */
.theme-bgc .bgc-rule {
  border: 0;
  min-height: 1.6rem;
  margin: 3.2rem 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.theme-bgc .bgc-rule::before,
.theme-bgc .bgc-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bgc-line);
}
.theme-bgc .bgc-rule__m {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
  gap: 2px;
}
.theme-bgc .bgc-rule__m i {
  display: block;
  border-radius: 2px;
  background: var(--bgc-blue-ll);
}
.theme-bgc .bgc-rule__m i:nth-child(1) { background: var(--bgc-blue); }
.theme-bgc .bgc-rule__m i:nth-child(4) { background: var(--bgc-amber); }
.theme-bgc .bgc-rule.is-amber::before,
.theme-bgc .bgc-rule.is-amber::after { background: var(--bgc-amber-sf); }

/* ---------- 4. buttons --------------------------------------------------- */
/* base's .btn keeps app.css padding anywhere we have not covered, so it is
   normalised globally here rather than per page. */
.theme-bgc .btn,
.theme-bgc .bgc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  height: var(--bgc-ctl);
  flex: none;
  padding-inline: 2rem;
  border: 1px solid transparent;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-sunken);
  color: var(--bgc-ink);
  font-family: var(--bgc-body);
  font-size: var(--bgc-ctl-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
.theme-bgc .btn:hover,
.theme-bgc .bgc-btn:hover { background: var(--bgc-wash); }
.theme-bgc .btn:active,
.theme-bgc .bgc-btn:active { transform: translateY(1px); }
.theme-bgc .btn:disabled,
.theme-bgc .bgc-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.theme-bgc .btn-primary,
.theme-bgc .bgc-btn--p {
  background: var(--bgc-blue);
  border-color: var(--bgc-blue);
  color: #FFF;
}
.theme-bgc .btn-primary:hover,
.theme-bgc .bgc-btn--p:hover {
  background: var(--bgc-blue-d);
  border-color: var(--bgc-blue-d);
  color: #FFF;
}

/* amber is the single signal colour — quotes, enquiries, the one action on a
   page that is not "add to cart" */
.theme-bgc .bgc-btn--a {
  background: var(--bgc-amber);
  border-color: var(--bgc-amber);
  color: #FFF;
}
.theme-bgc .bgc-btn--a:hover {
  background: var(--bgc-amber-d);
  border-color: var(--bgc-amber-d);
  color: #FFF;
}

.theme-bgc .btn-outline,
.theme-bgc .bgc-btn--o {
  background: var(--bgc-surface);
  border-color: var(--bgc-line-2);
  color: var(--bgc-ink);
}
.theme-bgc .btn-outline:hover,
.theme-bgc .bgc-btn--o:hover {
  border-color: var(--bgc-blue);
  color: var(--bgc-blue-d);
  background: var(--bgc-wash);
}

.theme-bgc .btn-ghost,
.theme-bgc .bgc-btn--g { background: transparent; color: var(--bgc-ink-2); }
.theme-bgc .btn-ghost:hover,
.theme-bgc .bgc-btn--g:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }

/* on a photograph */
.theme-bgc .bgc-btn--onImg {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: #FFF;
  backdrop-filter: blur(6px);
}
.theme-bgc .bgc-btn--onImg:hover { background: rgba(255, 255, 255, .26); color: #FFF; }

.theme-bgc .btn-sm,
.theme-bgc .bgc-btn--sm {
  height: var(--bgc-ctl-sm);
  padding-inline: 1.4rem;
  font-size: var(--bgc-t-sm);
}
.theme-bgc .btn-lg,
.theme-bgc .bgc-btn--lg { height: 5.2rem; padding-inline: 2.8rem; font-size: 1.6rem; }
.theme-bgc .btn-block,
.theme-bgc .bgc-btn--block { width: 100%; }

.theme-bgc .btn:focus-visible,
.theme-bgc .bgc-btn:focus-visible,
.theme-bgc a:focus-visible,
.theme-bgc button:focus-visible,
.theme-bgc input:focus-visible,
.theme-bgc select:focus-visible,
.theme-bgc textarea:focus-visible {
  outline: 2px solid var(--bgc-blue);
  outline-offset: 2px;
}

/* ---------- 5. one control metric ---------------------------------------- */
/* Declared once and applied to every surface at the same time: the theme's
   own field, the dropdown trigger, the filter search, the price inputs,
   base's .form-input and the auth inputs. Style them apart and they drift. */
.theme-bgc .bgc-in,
.theme-bgc .form-input,
.theme-bgc .form-control,
.theme-bgc .location-input,
.theme-bgc .filter-search-input,
.theme-bgc .price-input,
.theme-bgc input[type="text"],
.theme-bgc input[type="email"],
.theme-bgc input[type="tel"],
.theme-bgc input[type="url"],
.theme-bgc input[type="number"],
.theme-bgc input[type="search"],
.theme-bgc input[type="password"],
.theme-bgc input[type="date"],
.theme-bgc select,
.theme-bgc textarea {
  width: 100%;
  height: var(--bgc-ctl);
  padding: 0 var(--bgc-ctl-px);
  border: 1px solid var(--bgc-line-2);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  color: var(--bgc-ink);
  font-family: var(--bgc-body);
  font-size: var(--bgc-ctl-fs);
  line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.theme-bgc textarea {
  height: auto;
  min-height: 12rem;
  padding: 1.2rem var(--bgc-ctl-px);
  resize: vertical;
}
.theme-bgc .bgc-in::placeholder,
.theme-bgc .form-input::placeholder,
.theme-bgc input::placeholder,
.theme-bgc textarea::placeholder { color: var(--bgc-faint); }

.theme-bgc .bgc-in:focus,
.theme-bgc .form-input:focus,
.theme-bgc input:focus,
.theme-bgc select:focus,
.theme-bgc textarea:focus {
  border-color: var(--bgc-blue);
  box-shadow: 0 0 0 3px rgba(25, 164, 246, .16);
  outline: none;
}

.theme-bgc .bgc-field { display: block; margin-bottom: 1.6rem; }
.theme-bgc .form-group { display: block; margin-bottom: 1.6rem; gap: 0; }
.theme-bgc .bgc-label,
.theme-bgc .form-label {
  display: block;
  margin-bottom: .6rem;
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  color: var(--bgc-ink-2);
}
.theme-bgc .bgc-hint { display: block; margin-top: .5rem; font-size: var(--bgc-t-sm); color: var(--bgc-muted); }

/* a button sitting next to a field in a flex row */
.theme-bgc .bgc-row {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.theme-bgc .bgc-row > .btn,
.theme-bgc .bgc-row > .bgc-btn { flex: none; }

/* native checkbox and radio — "Remember me" and "I agree" are raw controls
   and accent-color alone never matches. Same size, border, colour and timing
   so the column reads as a set; the radio stays round and the checkbox
   square, because the shape is what says whether you may pick more than one. */
.theme-bgc input[type="checkbox"],
.theme-bgc input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--bgc-line-2);
  background: var(--bgc-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .14s ease, background .14s ease;
}
.theme-bgc input[type="checkbox"] { border-radius: 4px; }
.theme-bgc input[type="radio"]    { border-radius: 50%; }
.theme-bgc input[type="checkbox"]:hover,
.theme-bgc input[type="radio"]:hover { border-color: var(--bgc-blue); }
.theme-bgc input[type="checkbox"]:checked,
.theme-bgc input[type="radio"]:checked {
  background: var(--bgc-blue);
  border-color: var(--bgc-blue);
}
.theme-bgc input[type="checkbox"]:checked::after {
  content: "";
  width: .5rem;
  height: .9rem;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  /* The ink is only the right and bottom borders, so what you see sits
     down-left of the 5x9 box flex is centring; at 45 degrees that reads as a
     tick about 1px low and 1px left inside an 18px square. Measured from the
     rendered pixels (left margin 3.6px against 4.6px on the right, top 5.7px
     against 4.6px below) and corrected here, after the rotation, so the
     numbers are screen-space and not something to re-derive. */
  transform: translate(.5px, -1.5px) rotate(45deg);
}
/* centred with flex, not 50% + translate: percentages resolve against the
   padding box, and a border plus a fractional rem leaves the dot half a
   pixel high. */
.theme-bgc input[type="radio"]:checked::after {
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: #FFF;
}
.theme-bgc .checkbox-label,
.theme-bgc .bgc-check {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
  cursor: pointer;
}

/* the filter panel draws its marks from a sibling <span>, and
   .theme-bgc input[type=checkbox] (0,2,1) outranks the partial's
   .filter-checkbox-option input{display:none} (0,1,1) — so re-hide them. */
.theme-bgc .filter-checkbox-option input[type="checkbox"],
.theme-bgc .filter-radio-option input[type="radio"],
.theme-bgc .filter-option input[type="checkbox"] { display: none; }

/* Filters button: the active count as a corner badge rather than a third
   item in the row, so the button keeps its shape whether or not any filter
   is on. The button needs room inside for it to sit against. */
.theme-bgc .filter-toggle-btn { position: relative; overflow: visible; padding-right: 1.8rem; }
.theme-bgc .filter-toggle-btn .filter-count {
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: .5rem;
  border-radius: 999px;
  background: var(--bgc-blue);
  color: #FFF;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bgc-surface);
}

/* ---------- 5a. toast ---------------------------------------------------- */
/* One message style for every cart outcome - added, updated, removed - so
   adding looks like removing. Bottom right, above everything, and it leaves
   on its own. */
.theme-bgc .toast {
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: var(--bgc-z-toast);
  max-width: min(42rem, calc(100vw - 4.8rem));
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 1.8rem;
  border-radius: var(--bgc-r);
  background: var(--bgc-blue-dd);
  color: #FFF;
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--bgc-shadow-up);
  /* in from the left, out to the right - app.js sets slideOut on the way out */
  animation: bgcToastIn .28s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes bgcToastIn  { from { opacity: 0; transform: translateX(-3.2rem); } to { opacity: 1; transform: none; } }
@keyframes bgcToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(3.2rem); } }
/* app.js names them slideIn / slideOut */
@keyframes slideIn  { from { opacity: 0; transform: translateX(-3.2rem); } to { opacity: 1; transform: none; } }
@keyframes slideOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(3.2rem); } }
/* Added and removed are the same event wearing different hats, so the pill is
   identical for both - same surface, same size, same place, same timing - and
   only the icon disc changes. Colouring the whole pill green for an add and
   navy for a remove made two halves of one pair look unrelated. */
.theme-bgc .toast__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #FFF;
}
.theme-bgc .toast__m { min-width: 0; }
.theme-bgc .toast--added   .toast__ic { background: #1F7A4C; }
.theme-bgc .toast--removed .toast__ic { background: rgba(255, 255, 255, .18); }
.theme-bgc .toast--error   .toast__ic { background: var(--bgc-error); }

/* kept for anything still asking for the old class names */
.theme-bgc .toast-success .toast__ic { background: #1F7A4C; }
.theme-bgc .toast-error   .toast__ic { background: var(--bgc-error); }
.theme-bgc .toast .material-icons { flex: none; font-size: 2rem; }

/* ---------- 5b. bgc-dlg (the theme's one modal) --------------------------- */
/* Used by the sign-out confirmation and by a scan, which shows what it found
   before anything reaches the cart. One shell, filled at runtime. */
.theme-bgc .bgc-dlg {
  position: fixed;
  inset: 0;
  z-index: var(--bgc-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.theme-bgc .bgc-dlg__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 59, 84, .5);
  opacity: 0;
  transition: opacity .18s ease;
}
.theme-bgc .bgc-dlg.is-open .bgc-dlg__veil { opacity: 1; }
.theme-bgc .bgc-dlg__box {
  position: relative;
  width: min(46rem, 100%);
  padding: 2.4rem;
  border-radius: var(--bgc-r-lg);
  background: var(--bgc-surface);
  box-shadow: var(--bgc-shadow);
  transform: translateY(.8rem) scale(.98);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.theme-bgc .bgc-dlg.is-open .bgc-dlg__box { transform: none; opacity: 1; }
.theme-bgc .bgc-dlg__x {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 3.2rem; height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--bgc-r-sm);
  background: transparent;
  color: var(--bgc-muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.theme-bgc .bgc-dlg__x:hover,
.theme-bgc .bgc-dlg__x:focus-visible { background: var(--bgc-wash); color: var(--bgc-ink); }
/* room for it, so a long title does not run under the X */
.theme-bgc .bgc-dlg__t { margin: 0 3.2rem .8rem 0; font-size: var(--bgc-t-xl); }
.theme-bgc .bgc-dlg__m { margin: 0; font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .bgc-dlg__slot { margin-top: 1.6rem; }
.theme-bgc .bgc-dlg__foot {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: .8rem;
  margin-top: 2.4rem;
}
/* Three actions on ONE row. Wrapping them was worse than overflowing: the
   confirm dropped to a line of its own under the cancel, which read as two
   separate groups. They fit because the labels are short - see bgc-counter.js
   - and the destructive one takes the left end, away from the confirm. */
/* Cancel is the way out, not one of the actions - it sits apart on the left
   while the things you came to do stay together on the right. A danger button
   (Remove) takes the same place when there is one. */
.theme-bgc .bgc-dlg__foot > #bgc-dlg-cancel { margin-right: auto; order: -1; }
.theme-bgc .bgc-dlg__foot > .bgc-btn--d { margin-right: auto; order: -1; }
.theme-bgc .bgc-dlg__foot > .bgc-btn { flex: 0 0 auto; }
/* destructive confirm - the palette already carries the colour */
.theme-bgc .bgc-btn--d { background: var(--bgc-error); border-color: var(--bgc-error); color: #FFF; }
/* the background has to be restated: .theme-bgc .bgc-btn:hover (line ~237)
   carries a pseudo-class, so it outranks .theme-bgc .bgc-btn--d and was
   repainting the fill pale while the text stayed white - an invisible label.
   Same shape as --p and --a, which both restate it. */
.theme-bgc .bgc-btn--d:hover {
  background: var(--bgc-error);
  border-color: var(--bgc-error);
  color: #FFF;
  filter: brightness(.92);
}

/* the scanned product inside the dialog */
/* align-start, because a product name that runs to three lines should not
   drag the thumbnail down the middle of them */
.theme-bgc .bgc-scanq { display: flex; align-items: flex-start; gap: 1.2rem; }
/* a flex child will not shrink below its content unless told to, and a BGC
   variation code (OR.CRK.ETHRL.27CM.PLYA.PLT.SWD...) is one long unbreakable
   token - so on a phone the name ran straight out through the side of the
   dialog */
.theme-bgc .bgc-scanq > span { min-width: 0; }
.theme-bgc .bgc-scanq__im {
  flex: none;
  width: 6.4rem; height: 6.4rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  object-fit: contain;
  padding: .4rem;
}
.theme-bgc .bgc-scanq__n {
  display: block;
  font-weight: 600;
  font-size: var(--bgc-t-sm);
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.theme-bgc .bgc-scanq__p { display: block; margin-top: .3rem; color: var(--bgc-blue-d); font-weight: 700; }
.theme-bgc .bgc-scanq__q { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.theme-bgc .bgc-scanq__q label { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }

/* phones: the same dialog, with the air a 390px screen can afford */
@media (max-width: 639px) {
  .theme-bgc .bgc-dlg { padding: 1.6rem; }
  .theme-bgc .bgc-dlg__box { padding: 2rem 1.6rem 1.6rem; }
  .theme-bgc .bgc-dlg__t { font-size: var(--bgc-t-lg); }
  .theme-bgc .bgc-scanq__im { width: 5.6rem; height: 5.6rem; }
  .theme-bgc .bgc-scanq__q { gap: .8rem; }
  .theme-bgc .bgc-dlg__foot > .bgc-btn { padding-inline: 1.4rem; }
}

/* ---------- 6. bgc-select ------------------------------------------------ */
.theme-bgc .bgc-select { position: relative; display: block; width: 100%; }
.theme-bgc .bgc-select__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.theme-bgc .bgc-select__t {
  width: 100%;
  height: var(--bgc-ctl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: 0 1.1rem 0 var(--bgc-ctl-px);
  border: 1px solid var(--bgc-line-2);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  color: var(--bgc-ink);
  font-family: var(--bgc-body);
  font-size: var(--bgc-ctl-fs);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.theme-bgc .bgc-select__t:hover { border-color: var(--bgc-line-2); background: var(--bgc-wash); }
.theme-bgc .bgc-select.is-open .bgc-select__t {
  border-color: var(--bgc-blue);
  box-shadow: 0 0 0 3px rgba(25, 164, 246, .16);
}
.theme-bgc .bgc-select.is-placeholder .bgc-select__v { color: var(--bgc-faint); }
.theme-bgc .bgc-select.is-disabled { opacity: .55; pointer-events: none; }
.theme-bgc .bgc-select__v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-bgc .bgc-select__c {
  flex: none;
  width: 1rem; height: 1rem;
  border-right: 1.5px solid var(--bgc-muted);
  border-bottom: 1.5px solid var(--bgc-muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .18s ease;
}
.theme-bgc .bgc-select.is-open .bgc-select__c { transform: translateY(1px) rotate(225deg); }

.theme-bgc .bgc-select__l {
  position: absolute;
  z-index: 60;
  top: calc(100% + .6rem);
  left: 0; right: 0;
  max-height: 28rem;
  overflow-y: auto;
  margin: 0; padding: .6rem;
  list-style: none;
  background: var(--bgc-surface);
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  box-shadow: var(--bgc-shadow-up);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.4rem);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.theme-bgc .bgc-select.is-open .bgc-select__l { opacity: 1; visibility: visible; transform: none; }
.theme-bgc .bgc-select.is-up .bgc-select__l { top: auto; bottom: calc(100% + .6rem); }
.theme-bgc .bgc-select__o {
  padding: .9rem 1.1rem;
  border-radius: var(--bgc-r-sm);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .bgc-select__o:hover { background: var(--bgc-wash); color: var(--bgc-ink); }
.theme-bgc .bgc-select__o.is-on {
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
  font-weight: 600;
}
.theme-bgc .bgc-select__o.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- 7. validation messages --------------------------------------- */
/* the wrapper has no gap (see .form-group above), so the message's own margin
   is what sets the space — an inherited gap would park it 12px low. */
.theme-bgc .bgc-msg {
  display: block;
  margin: .5rem 0 0;
  min-height: 1.8rem;
  font-size: var(--bgc-t-sm);
  line-height: 1.3;
  color: var(--bgc-error);
}
.theme-bgc .bgc-msg:empty { min-height: 0; margin: 0; }
.theme-bgc .is-invalid > .bgc-in,
.theme-bgc .is-invalid > .form-input,
.theme-bgc .is-invalid input,
.theme-bgc .is-invalid textarea,
.theme-bgc input.is-invalid,
.theme-bgc textarea.is-invalid { border-color: var(--bgc-error); }
.theme-bgc .is-invalid input:focus,
.theme-bgc input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 40, 71, .14); }
.theme-bgc .is-valid > .bgc-in,
.theme-bgc input.is-valid { border-color: var(--bgc-good); }
.theme-bgc .is-pending .bgc-msg { color: var(--bgc-muted); }

/* password strength */
.theme-bgc .bgc-str { margin-top: .8rem; }
.theme-bgc .bgc-str__bar {
  height: .5rem;
  border-radius: 3px;
  background: var(--bgc-sunken);
  overflow: hidden;
}
.theme-bgc .bgc-str__fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--bgc-error);
  transition: width .2s ease, background .2s ease;
}
.theme-bgc .bgc-str[data-score="2"] .bgc-str__fill { background: var(--bgc-amber); }
.theme-bgc .bgc-str[data-score="3"] .bgc-str__fill { background: var(--bgc-blue); }
.theme-bgc .bgc-str[data-score="4"] .bgc-str__fill { background: var(--bgc-good); }
.theme-bgc .bgc-str__t {
  display: block;
  margin-top: .5rem;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-muted);
}

/* ---------- 8. badges, chips, pills -------------------------------------- */
/* soft fills only — no contextual accent border on a rounded component */
.theme-bgc .bgc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.4rem;
  padding-inline: .9rem;
  border-radius: 5px;
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.theme-bgc .bgc-badge--amber { background: var(--bgc-amber-sf); color: var(--bgc-amber-d); }
.theme-bgc .bgc-badge--good  { background: var(--bgc-good-sf);  color: var(--bgc-good); }
.theme-bgc .bgc-badge--ink   { background: var(--bgc-blue-dd);  color: #FFF; }

/* ---------- 9. masthead -------------------------------------------------- */
/* Two tiers, which is what a trade supplier needs and what separates this
   from a single consumer nav row: a deep utility strip carrying the help
   desk, and a white masthead under it. */
.theme-bgc .bgc-util {
  background: var(--bgc-blue-dd);
  color: rgba(255, 255, 255, .88);
  font-size: var(--bgc-t-sm);
}
.theme-bgc .bgc-util__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 3.6rem;
}
.theme-bgc .bgc-util__l,
.theme-bgc .bgc-util__r { display: flex; align-items: center; gap: 1.8rem; }
.theme-bgc .bgc-util a { color: inherit; display: inline-flex; align-items: center; gap: .6rem; }
.theme-bgc .bgc-util a:hover { color: #FFF; }
.theme-bgc .bgc-util__sep { width: 1px; height: 1.6rem; background: rgba(255, 255, 255, .22); }
.theme-bgc .bgc-util__since {
  font-family: var(--bgc-display);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bgc-blue-l);
}

.theme-bgc .header,
.theme-bgc .bgc-head {
  position: sticky;
  top: 0;
  z-index: var(--bgc-z-head);
  background: var(--bgc-surface);
  border-bottom: 1px solid var(--bgc-line);
  transition: box-shadow .2s ease;
}
.theme-bgc .header.is-stuck,
.theme-bgc .header.scrolled { box-shadow: var(--bgc-shadow); }

.theme-bgc .bgc-head__row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 7.2rem;
}
.theme-bgc .bgc-head__l { display: flex; align-items: center; gap: 1.2rem; }
.theme-bgc .bgc-head__r { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

.theme-bgc .logo,
.theme-bgc .bgc-mark { display: block; flex: none; }
.theme-bgc .bgc-mark img { height: 4.2rem; width: auto; }
.theme-bgc .bgc-mark__t {
  font-family: var(--bgc-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--bgc-blue-d);
}

.theme-bgc .header-action,
.theme-bgc .bgc-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--bgc-r-sm);
  background: transparent;
  color: var(--bgc-ink-2);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.theme-bgc .header-action:hover,
.theme-bgc .bgc-icon:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }

/* base sets .header-action .badge{right:.2rem}; declaring only `left` leaves
   both in play and stretches the counter into a wide pill. */
.theme-bgc .header-action .badge,
.theme-bgc .bgc-icon .badge {
  position: absolute;
  top: .4rem;
  right: .4rem;
  left: auto;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--bgc-amber);
  color: #FFF;
  font-size: var(--bgc-t-xs);
  font-weight: 700;
  line-height: 1;
}

/* delivery pincode chip */
.theme-bgc .header-location,
.theme-bgc .bgc-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: var(--bgc-ctl-sm);
  padding-inline: 1.2rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  color: var(--bgc-ink-2);
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  cursor: pointer;
}
.theme-bgc .header-location:hover,
.theme-bgc .bgc-chip:hover { border-color: var(--bgc-blue); color: var(--bgc-blue-d); }

/* the masthead search rests as a button and opens on demand, so it never
   competes with the nav for the same row on a wide screen */
.theme-bgc .bgc-searchbtn {
  display: none;
  align-items: center;
  gap: .9rem;
  height: var(--bgc-ctl-sm);
  min-width: 26rem;
  padding: 0 .8rem 0 1.2rem;
  border: 1px solid var(--bgc-line-2);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-sunken);
  color: var(--bgc-muted);
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-sm);
  cursor: pointer;
}
@media (min-width: 1024px) { .theme-bgc .bgc-searchbtn { display: inline-flex; } }
.theme-bgc .bgc-searchbtn:hover { border-color: var(--bgc-blue); background: var(--bgc-surface); }
.theme-bgc .bgc-searchbtn__t { flex: 1; text-align: left; }
.theme-bgc .bgc-searchbtn__k {
  flex: none;
  min-width: 2.2rem;
  padding: .2rem .5rem;
  border: 1px solid var(--bgc-line-2);
  border-radius: 4px;
  background: var(--bgc-surface);
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-xs);
  color: var(--bgc-faint);
}

/* ---------- 9b. category bar --------------------------------------------- */
.theme-bgc .bgc-catbar {
  position: relative;
  display: none;
  border-top: 1px solid var(--bgc-line);
  background: var(--bgc-surface);
}
@media (min-width: 1024px) { .theme-bgc .bgc-catbar { display: block; } }
.theme-bgc .bgc-catbar__row {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 4.6rem;
  /* NOT overflow-x:auto — that makes this a clipping context and cuts off
     the mega menu that hangs below it. The nav is a fixed five items, so it
     has nothing to scroll. */
  overflow: visible;
}
.theme-bgc .bgc-nav__list {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.theme-bgc .bgc-nav__i { position: relative; }
.theme-bgc .nav-link,
.theme-bgc .bgc-nav__a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 4.6rem;
  padding-inline: 1.3rem;
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  color: var(--bgc-ink-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.theme-bgc .bgc-nav__a:hover { color: var(--bgc-blue-d); }
.theme-bgc .bgc-nav__a.active {
  color: var(--bgc-blue-d);
  font-weight: 600;
  border-bottom-color: var(--bgc-blue);
}
/* pushed to the right-hand end, ahead of the quote action */
.theme-bgc .bgc-catbar__auth { display: inline-flex; align-items: center; margin-left: auto; }
.theme-bgc .bgc-catbar__auth + .bgc-nav__a--quote { margin-left: 1.2rem !important; }

/* All Categories: the one solid block on the bar, so the catalogue reads as
   the primary destination. It is a .bgc-nav__a, so it inherits the height and
   the hover wiring; only the fill and the shape are its own. */
.theme-bgc .bgc-allcat__b {
  gap: .8rem;
  margin-right: 1.2rem;
  padding-inline: 1.6rem;
  border-bottom: 0;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-blue-dd);
  color: #FFF;
  font-weight: 600;
}
/* .bgc-nav__a:hover paints the label --bgc-blue-d, which on this button's own
   blue fill is text you cannot see. Beat it on specificity rather than order,
   and keep the icons (currentColor) white with it. */
.theme-bgc .bgc-allcat .bgc-nav__a.bgc-allcat__b:hover,
.theme-bgc .bgc-allcat .bgc-nav__a.bgc-allcat__b:focus-visible {
  background: var(--bgc-blue-d);
  color: #FFF;
}
.theme-bgc .bgc-allcat .bgc-nav__a.bgc-allcat__b,
.theme-bgc .bgc-allcat .bgc-nav__a.bgc-allcat__b svg { color: #FFF; }
.theme-bgc .bgc-allcat .bgc-nav__a.active { border-bottom-color: transparent; }

.theme-bgc .bgc-nav__a--quote {
  margin-left: .8rem;
  height: var(--bgc-ctl-sm);
  align-self: center;
  border-radius: var(--bgc-r-sm);
  border-bottom: 0;
  background: var(--bgc-amber-sf);
  color: var(--bgc-amber-d);
  font-weight: 600;
}
.theme-bgc .bgc-nav__a--quote:hover { background: var(--bgc-amber); color: #FFF; }

/* dropdown + mega menu */
.theme-bgc .nav-dropdown,
.theme-bgc .bgc-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 22rem;
  padding: .6rem;
  background: var(--bgc-surface);
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  box-shadow: var(--bgc-shadow-up);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.4rem);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 40;
}
.theme-bgc .bgc-nav__i:hover > .nav-dropdown,
.theme-bgc .bgc-nav__i:hover > .bgc-drop { opacity: 1; visibility: visible; transform: none; }
.theme-bgc .nav-dropdown-link,
.theme-bgc .bgc-drop__a {
  display: block;
  padding: .8rem 1rem;
  border-radius: var(--bgc-r-sm);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .nav-dropdown-link:hover,
.theme-bgc .bgc-drop__a:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }

.theme-bgc .bgc-nav__i.has-mega-menu { position: static; }
.theme-bgc .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
  padding: 2.4rem 0 1.8rem;
  background: var(--bgc-surface);
  border-top: 1px solid var(--bgc-line);
  box-shadow: var(--bgc-shadow-up);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.6rem);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 40;
}
.theme-bgc .bgc-nav__i:hover > .mega-menu { opacity: 1; visibility: visible; transform: none; }
.theme-bgc .mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.6rem 2.4rem;
}
.theme-bgc .mega-menu-title {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-lg);
  font-weight: 700;
  color: var(--bgc-ink);
}
.theme-bgc .mega-menu-title:hover { color: var(--bgc-blue-d); }
.theme-bgc .mega-menu-list { margin: 0; padding: 0; list-style: none; }
.theme-bgc .mega-menu-link {
  display: block;
  padding: .3rem 0;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-muted);
}
.theme-bgc .mega-menu-link:hover { color: var(--bgc-blue-d); }
.theme-bgc .mega-menu-footer {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bgc-line);
}

/* account dropdown */
.theme-bgc .header-dropdown,
.theme-bgc .bgc-rel { position: relative; }
.theme-bgc .dropdown-menu {
  position: absolute;
  top: calc(100% + .8rem);
  right: 0;
  left: auto;
  min-width: 22rem;
  padding: .6rem;
  background: var(--bgc-surface);
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  box-shadow: var(--bgc-shadow-up);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.4rem);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 50;
}
.theme-bgc .dropdown-menu.active { opacity: 1; visibility: visible; transform: none; }
.theme-bgc .dropdown-header { padding: .8rem 1rem .4rem; }
.theme-bgc .user-greeting { font-size: var(--bgc-t-sm); font-weight: 600; color: var(--bgc-ink); }
.theme-bgc .dropdown-divider { height: 1px; margin: .5rem .4rem; background: var(--bgc-line); }
.theme-bgc .dropdown-item {
  display: block;
  padding: .8rem 1rem;
  border-radius: var(--bgc-r-sm);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .dropdown-item:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }

/* delivery dropdown — base sets left:0, so right:0 alone leaves both in play
   and the panel hangs off the side of the window. */
.theme-bgc .location-dropdown {
  position: absolute;
  top: calc(100% + .8rem);
  left: auto;
  right: 0;
  width: 32rem;
  max-width: calc(100vw - 2rem);
  padding: 1.6rem;
  background: var(--bgc-surface);
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  box-shadow: var(--bgc-shadow-up);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.4rem);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 50;
}
.theme-bgc .location-dropdown.active { opacity: 1; visibility: visible; transform: none; }
.theme-bgc .location-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.theme-bgc .location-dropdown-header h4 { font-size: var(--bgc-t-lg); margin: 0; }
.theme-bgc .location-detect-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bgc-blue-d);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  cursor: pointer;
}
.theme-bgc .location-input-label {
  display: block;
  margin-bottom: .6rem;
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  color: var(--bgc-ink-2);
}
.theme-bgc .location-input-wrapper { display: flex; align-items: center; gap: .8rem; }
.theme-bgc .location-apply-btn {
  flex: none;
  height: var(--bgc-ctl);
  padding-inline: 1.6rem;
  border: 0;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-blue);
  color: #FFF;
  font-family: var(--bgc-body);
  font-size: var(--bgc-ctl-fs);
  font-weight: 600;
  cursor: pointer;
}
.theme-bgc .location-apply-btn:hover { background: var(--bgc-blue-d); }
.theme-bgc .location-hint { margin-top: .8rem; font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .location-hint:empty { margin: 0; }

/* ---------- 9c. search modal --------------------------------------------- */
.theme-bgc .bgc-searchm {
  position: fixed;
  inset: 0;
  z-index: var(--bgc-z-modal);
  display: flex;
  justify-content: center;
  padding: 8vh 2rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.theme-bgc .bgc-searchm.active { opacity: 1; visibility: visible; }
.theme-bgc .bgc-searchm__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 59, 84, .55);
  backdrop-filter: blur(3px);
}
.theme-bgc .bgc-searchm__box {
  position: relative;
  width: 100%;
  max-width: 76rem;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--bgc-surface);
  border-radius: var(--bgc-r-lg);
  box-shadow: var(--bgc-shadow-up);
  overflow: hidden;
  transform: translateY(-1.2rem);
  transition: transform .2s ease;
}
.theme-bgc .bgc-searchm.active .bgc-searchm__box { transform: none; }
.theme-bgc .bgc-searchm__f {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .bgc-searchm__i { flex: none; color: var(--bgc-faint); display: inline-flex; }
.theme-bgc .bgc-searchm__in {
  flex: 1;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.8rem;
}
.theme-bgc .bgc-searchm__in:focus { box-shadow: none; border: 0; }
.theme-bgc .bgc-searchm__x {
  flex: none;
  width: 3.6rem; height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-sunken);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .bgc-searchm__x:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }
.theme-bgc .bgc-searchm__body { padding: 1.6rem; overflow-y: auto; }
.theme-bgc .bgc-searchm__load {
  display: none;
  align-items: center;
  gap: .8rem;
  color: var(--bgc-muted);
  font-size: var(--bgc-t-sm);
}
.theme-bgc .bgc-searchm__spin {
  width: 1.6rem; height: 1.6rem;
  border: 2px solid var(--bgc-line-2);
  border-top-color: var(--bgc-blue);
  border-radius: 50%;
  animation: bgc-spin .7s linear infinite;
}
@keyframes bgc-spin { to { transform: rotate(360deg); } }
.theme-bgc .bgc-searchm__empty {
  display: none;
  flex-direction: column;
  gap: .4rem;
  padding: 2.4rem 0;
  text-align: center;
  color: var(--bgc-muted);
  font-size: var(--bgc-t-sm);
}
.theme-bgc .bgc-searchm__empty strong { color: var(--bgc-ink); font-size: var(--bgc-t-md); }
.theme-bgc .bgc-searchm__hk {
  margin: 0 0 .9rem;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bgc-muted);
}
.theme-bgc .bgc-searchm__tags { display: flex; flex-wrap: wrap; gap: .8rem; }
.theme-bgc .bgc-searchm__tag {
  padding: .6rem 1.1rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-sunken);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .bgc-searchm__tag:hover {
  border-color: var(--bgc-blue);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
}
.theme-bgc .bgc-sres__k {
  margin: 0 0 .9rem;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bgc-muted);
}
.theme-bgc .bgc-sres__cats { margin-bottom: 1.8rem; }
.theme-bgc .bgc-sres__chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.theme-bgc .bgc-sres__chip {
  padding: .6rem 1.1rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-blue-d);
}
.theme-bgc .bgc-sres__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: .6rem;
}
.theme-bgc .bgc-sres__i {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .8rem;
  border-radius: var(--bgc-r-sm);
}
.theme-bgc .bgc-sres__i:hover,
.theme-bgc .bgc-sres__i.is-on { background: var(--bgc-wash); }
.theme-bgc .bgc-sres__im {
  flex: none;
  width: 5.2rem; height: 5.2rem;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-sunken);
  overflow: hidden;
}
.theme-bgc .bgc-sres__im img { width: 100%; height: 100%; object-fit: contain; }
.theme-bgc .bgc-sres__b { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.theme-bgc .bgc-sres__n {
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  color: var(--bgc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-bgc .bgc-sres__p { font-size: var(--bgc-t-sm); font-weight: 600; color: var(--bgc-blue-d); }

/* ---------- 9d. mobile nav + footer bar ---------------------------------- */
.theme-bgc .mobile-nav {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(32rem, 86vw);
  z-index: var(--bgc-z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--bgc-surface);
  transform: translateX(-100%);
  transition: transform .26s ease;
}
.theme-bgc .mobile-nav.active { transform: none; }
.theme-bgc .mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--bgc-z-drawer) - 1);
  background: rgba(8, 59, 84, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.theme-bgc .mobile-nav-overlay.active { opacity: 1; visibility: visible; }
.theme-bgc .mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .mobile-nav-header .logo img { height: 3.4rem; width: auto; }
.theme-bgc .mobile-nav-close {
  width: 4rem; height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-sunken);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .mobile-nav-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 1.2rem 0 2rem; }
.theme-bgc .mobile-nav-menu { margin: 0; padding: 0 1rem; list-style: none; }
.theme-bgc .mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--bgc-r-sm);
  font-size: var(--bgc-t-md);
  font-weight: 500;
  color: var(--bgc-ink);
}
.theme-bgc .mobile-nav-link:hover { background: var(--bgc-wash); }
.theme-bgc .mobile-nav-submenu { margin: 0 0 .6rem; padding: 0 0 0 1.2rem; list-style: none; }
.theme-bgc .mobile-nav-submenu a {
  display: block;
  padding: .7rem 1.2rem;
  border-radius: var(--bgc-r-sm);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-muted);
}
.theme-bgc .mobile-nav-submenu a:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }
.theme-bgc .mobile-nav-submenu-nested { margin: 0; padding-left: 1.2rem; list-style: none; }
.theme-bgc .mobile-nav-divider { height: 1px; margin: 1rem 2rem; background: var(--bgc-line); }
.theme-bgc .mobile-nav-actions { padding: 0 2rem; display: flex; flex-direction: column; gap: .4rem; }
.theme-bgc .mobile-nav-action-link {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 0;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .mobile-nav-spacer { flex: 1; min-height: 2rem; }
.theme-bgc .mobile-nav-contact {
  margin: 0 1.6rem;
  padding: 1.4rem;
  border-radius: var(--bgc-r);
  background: var(--bgc-wash);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .mobile-nav-address { margin: 0 0 .8rem; }
.theme-bgc .mobile-nav-directions,
.theme-bgc .mobile-nav-contact-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem 0;
  color: var(--bgc-blue-d);
  font-weight: 500;
}

.theme-bgc .mobile-footer-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: calc(var(--bgc-z-head) - 1);
  display: flex;
  align-items: stretch;
  background: var(--bgc-surface);
  border-top: 1px solid var(--bgc-line);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1024px) { .theme-bgc .mobile-footer-bar { display: none; } }
.theme-bgc .mobile-footer-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 5.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bgc-muted);
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-xs);
  cursor: pointer;
}
.theme-bgc .mobile-footer-item:hover { color: var(--bgc-blue-d); }
.theme-bgc .mobile-footer-badge {
  position: absolute;
  top: .6rem;
  right: 50%;
  margin-right: -2.2rem;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--bgc-amber);
  color: #FFF;
  font-size: var(--bgc-t-xs);
  font-weight: 700;
}
@media (max-width: 1023px) { .theme-bgc .main-content { padding-bottom: 6rem; } }

/* ---------- 10. footer --------------------------------------------------- */
.theme-bgc .bgc-foot {
  margin-top: 4rem;
  background: var(--bgc-blue-dd);
  color: rgba(255, 255, 255, .78);
  font-size: var(--bgc-t-sm);
}
.theme-bgc .bgc-foot__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  padding-block: 4.8rem 3.2rem;
}
@media (min-width: 768px) {
  .theme-bgc .bgc-foot__top { grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (min-width: 1100px) {
  .theme-bgc .bgc-foot__top { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; }
}
.theme-bgc .bgc-foot__mark img { height: 4rem; width: auto; margin-bottom: 1.6rem; }
.theme-bgc .bgc-foot__about { max-width: 46ch; line-height: 1.7; }
/* (0,1,1) beats .bgc-foot__h at (0,1,0) — our own heading reset would
   otherwise silently eat the space under a footer column heading. */
.theme-bgc .bgc-foot__h {
  margin: 0 0 1.4rem;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-md);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FFF;
}
.theme-bgc .bgc-foot__col ul { margin: 0; padding: 0; list-style: none; }
.theme-bgc .bgc-foot__col li { margin-bottom: .8rem; }
.theme-bgc .bgc-foot a { color: rgba(255, 255, 255, .78); }
.theme-bgc .bgc-foot a:hover { color: #FFF; }
.theme-bgc .bgc-foot__ck {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.2rem;
  line-height: 1.6;
}
.theme-bgc .bgc-foot__ck svg { flex: none; margin-top: .3rem; color: var(--bgc-blue-l); }
.theme-bgc .bgc-foot__social { display: flex; gap: .8rem; margin-top: 1.8rem; }
.theme-bgc .bgc-foot__social a {
  width: 3.8rem; height: 3.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bgc-r-sm);
  background: rgba(255, 255, 255, .08);
  color: #FFF;
}
.theme-bgc .bgc-foot__social a:hover { background: var(--bgc-blue); }
.theme-bgc .bgc-foot__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding-block: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--bgc-t-sm);
}
.theme-bgc .bgc-foot__since {
  font-family: var(--bgc-display);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bgc-blue-l);
}

/* ---------- 11. home ----------------------------------------------------- */
.theme-bgc .bgc-hero { position: relative; border-radius: var(--bgc-r-lg); overflow: hidden; }
.theme-bgc .bgc-hero__track { position: relative; min-height: clamp(38rem, 24rem + 24vw, 56rem); }
.theme-bgc .bgc-hero__s {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.theme-bgc .bgc-hero__s.is-on { opacity: 1; visibility: visible; }
.theme-bgc .bgc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-bgc .bgc-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 59, 84, .92) 0%, rgba(8, 59, 84, .72) 42%, rgba(8, 59, 84, .18) 100%);
}
.theme-bgc .bgc-hero__say {
  position: relative;
  max-width: 62rem;
  padding: clamp(2.4rem, 1rem + 3vw, 5.2rem);
  color: #FFF;
}
.theme-bgc .bgc-hero__say h1 { color: #FFF; margin-bottom: 1.2rem; }
.theme-bgc .bgc-hero__say .bgc-lede { color: rgba(255, 255, 255, .88); margin-bottom: 2.4rem; }
.theme-bgc .bgc-hero__act { display: flex; flex-wrap: wrap; gap: 1rem; }
.theme-bgc .bgc-hero__nav {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.theme-bgc .bgc-hero__arrow {
  width: 4rem; height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--bgc-r-sm);
  background: rgba(255, 255, 255, .12);
  color: #FFF;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.theme-bgc .bgc-hero__arrow:hover { background: rgba(255, 255, 255, .26); }
.theme-bgc .bgc-hero__dots { display: flex; gap: .5rem; }
.theme-bgc .bgc-hero__dot {
  width: 1rem; height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.theme-bgc .bgc-hero__dot.is-on { width: 2.6rem; background: #FFF; }

/* facts strip — the numbers BGC publish about themselves */
.theme-bgc .bgc-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--bgc-line);
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  overflow: hidden;
}
@media (min-width: 768px) { .theme-bgc .bgc-facts { grid-template-columns: repeat(4, 1fr); } }
.theme-bgc .bgc-facts li {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.8rem 1.6rem;
  background: var(--bgc-surface);
}
.theme-bgc .bgc-facts b {
  font-family: var(--bgc-display);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bgc-blue-d);
}
.theme-bgc .bgc-facts span { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }

/* who we serve — the four segments, with the client's own cutouts */
.theme-bgc .bgc-segs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1.6rem;
}
.theme-bgc .bgc-seg {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.theme-bgc .bgc-seg:hover {
  border-color: var(--bgc-blue-ll);
  box-shadow: var(--bgc-shadow);
  transform: translateY(-2px);
}
/* a portrait cut-out needs a square frame — in a wide short panel with
   object-fit:contain it renders a narrow strip that reads as empty */
.theme-bgc .bgc-seg__im {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--bgc-wash);
  overflow: hidden;
}
.theme-bgc .bgc-seg:nth-child(2) .bgc-seg__im { background: var(--bgc-amber-sf); }
.theme-bgc .bgc-seg:nth-child(4) .bgc-seg__im { background: var(--bgc-sunken); }
.theme-bgc .bgc-seg__im img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.theme-bgc .bgc-seg__b { padding: 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
.theme-bgc .bgc-seg__t { font-family: var(--bgc-display); font-size: var(--bgc-t-xl); font-weight: 700; }
.theme-bgc .bgc-seg__d { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .bgc-seg__go {
  margin-top: .8rem;
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  color: var(--bgc-blue-d);
}

/* category grid — even tiles, because a trade catalogue is a list of
   departments, not an editorial bento */
.theme-bgc .bgc-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.2rem;
}
.theme-bgc .bgc-cat {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.theme-bgc .bgc-cat:hover { border-color: var(--bgc-blue); box-shadow: var(--bgc-shadow); }
.theme-bgc .bgc-cat__ic {
  flex: none;
  width: 4.6rem; height: 4.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
}
.theme-bgc .bgc-cat:nth-child(4n+2) .bgc-cat__ic { background: var(--bgc-amber-sf); color: var(--bgc-amber-d); }
.theme-bgc .bgc-cat__ic .material-icons { font-size: 2.4rem; }
.theme-bgc .bgc-cat__b { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.theme-bgc .bgc-cat__t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--bgc-t-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--bgc-ink);
}
.theme-bgc .bgc-cat__c { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }

/* rails and grids */
.theme-bgc .bgc-rail {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  /* scroll-snap-align on a child cancels the container's padding-inline, so
     the rail silently sits at scrollLeft > 0 and the first card runs to the
     window edge. Scroll padding keeps the gutter instead. */
  scroll-padding-inline: var(--bgc-gut);
  padding-bottom: .8rem;
  scrollbar-width: thin;
}
.theme-bgc .bgc-rail__i { flex: 0 0 clamp(22rem, 20vw, 27rem); }
.theme-bgc .bgc-grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1.6rem;
}

/* turnkey band over the fabrication shot */
.theme-bgc .bgc-band {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(2.8rem, 1.4rem + 3vw, 5rem);
  border-radius: var(--bgc-r-lg);
  background: var(--bgc-blue-dd);
  color: #FFF;
  overflow: hidden;
}
@media (min-width: 900px) { .theme-bgc .bgc-band { grid-template-columns: 1.4fr auto; } }
.theme-bgc .bgc-band__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .28;
}
.theme-bgc .bgc-band > *:not(.bgc-band__img) { position: relative; }
.theme-bgc .bgc-band h2 { color: #FFF; margin-bottom: 1rem; }
.theme-bgc .bgc-band .bgc-lede { color: rgba(255, 255, 255, .85); }
.theme-bgc .bgc-band__act { display: flex; flex-wrap: wrap; gap: 1rem; }

/* legacy strip */
.theme-bgc .bgc-legacy {
  display: grid;
  gap: 2.4rem;
  align-items: center;
}
@media (min-width: 900px) { .theme-bgc .bgc-legacy { grid-template-columns: 1fr 1.2fr; } }
.theme-bgc .bgc-legacy__im {
  border-radius: var(--bgc-r);
  background: var(--bgc-wash);
  overflow: hidden;
}
.theme-bgc .bgc-legacy__im img { width: 100%; height: auto; }
.theme-bgc .bgc-legacy__y {
  font-family: var(--bgc-display);
  font-size: clamp(5rem, 3rem + 5vw, 9rem);
  font-weight: 700;
  line-height: .9;
  color: var(--bgc-blue-ll);
}

/* reviews */
.theme-bgc .bgc-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 1.6rem;
}
.theme-bgc .bgc-quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
}
.theme-bgc .bgc-quote__r { color: var(--bgc-amber); font-size: var(--bgc-t-md); letter-spacing: .1em; }
.theme-bgc .bgc-quote__r span { color: var(--bgc-line-2); }
.theme-bgc .bgc-quote__r span.on { color: var(--bgc-amber); }
.theme-bgc .bgc-quote blockquote {
  margin: 0;
  font-size: var(--bgc-t-sm);
  line-height: 1.7;
  color: var(--bgc-ink-2);
}
.theme-bgc .bgc-quote figcaption { display: flex; flex-direction: column; gap: .1rem; margin-top: auto; }
.theme-bgc .bgc-quote__n { font-size: var(--bgc-t-sm); font-weight: 600; color: var(--bgc-ink); }
.theme-bgc .bgc-quote__t { font-size: var(--bgc-t-sm); color: var(--bgc-faint); }

/* ---------- 12. product card --------------------------------------------- */
.theme-bgc .product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* No lift and no zoom on hover: in a dense grid the card nudging up and the
   photo growing under it made the whole page feel unsteady while reading
   down a list. The border and shadow are cue enough. */
.theme-bgc .product-card:hover {
  border-color: var(--bgc-blue-ll);
  box-shadow: var(--bgc-shadow);
  transform: none;
}
.theme-bgc .product-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0;              /* base rounds the media independently */
  background: var(--bgc-wash);
  overflow: hidden;
}
.theme-bgc .product-card-link { display: block; width: 100%; height: 100%; }
.theme-bgc .product-image-primary,
.theme-bgc .product-image-secondary {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.2rem;
  transition: transform .3s ease;
}
/* base blanks the primary on hover because it expects a second photograph;
   this catalogue mostly has one, so keep it visible and zoom instead */
.theme-bgc .product-card:hover .product-image-primary { opacity: 1; transform: none; }
.theme-bgc .product-image-secondary { display: none; }

/* the no-image state — BGC want every product listed whether or not the ERP
   has a photo, so this is a first-class state, not a broken image. */
.theme-bgc .product-card-media.is-noimg { background: var(--bgc-wash); }
.theme-bgc .bgc-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.6rem;
  text-align: center;
}
.theme-bgc .bgc-ph img,
.theme-bgc .bgc-ph svg { width: 56%; max-width: 12rem; height: auto; opacity: .85; }
.theme-bgc .bgc-ph__t {
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bgc-blue-d);
  opacity: .75;
}

.theme-bgc .product-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 2;
}
.theme-bgc .product-badge {
  padding: .3rem .7rem;
  border-radius: 5px;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.theme-bgc .badge-new  { background: var(--bgc-wash); color: var(--bgc-blue-d); }
.theme-bgc .badge-sale { background: var(--bgc-amber-sf); color: var(--bgc-amber-d); }

.theme-bgc .product-actions-top {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  opacity: 0;
  transform: translateX(.6rem);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2;
}
.theme-bgc .product-card:hover .product-actions-top { opacity: 1; transform: none; }
@media (hover: none) { .theme-bgc .product-actions-top { opacity: 1; transform: none; } }
/* base sizes these at 4rem, which swamps the card */
.theme-bgc .product-action-btn {
  width: 3.4rem;
  height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: rgba(255, 255, 255, .94);
  color: var(--bgc-ink-2);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.theme-bgc .product-action-btn:hover { background: var(--bgc-blue); border-color: var(--bgc-blue); color: #FFF; }
.theme-bgc .product-action-btn.active { color: var(--bgc-error); border-color: var(--bgc-error); background: #FFF; }
.theme-bgc .product-action-btn .icon-spinner { display: none; animation: bgc-spin .7s linear infinite; }
.theme-bgc .product-action-btn.is-loading .icon-eye { display: none; }
.theme-bgc .product-action-btn.is-loading .icon-spinner { display: block; }

/* in the card body now, so it is always available and never covers the
   picture or the "Image coming soon" caption */
/* app.css pins this absolute at opacity:0 and reveals it on card hover.
   Overriding only margin-top left those in force and the button never
   appeared — every inherited property has to be reset by name. */
.theme-bgc .product-actions-bottom {
  position: static;
  inset: auto;
  z-index: auto;
  opacity: 1;
  transform: none;
  margin-top: 1rem;
}
.theme-bgc .product-add-cart {
  /* 100% of a card is right; 100% of a list row is a 930px slab, which is
     what it became the moment the list view went in. Capped so the button is
     the same moderate size in every view. */
  width: 100%;
  max-width: 22rem;
  height: var(--bgc-ctl-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 0 1.2rem;
  border: 1px solid var(--bgc-blue);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* base drops a shadow on this one; on a card that already has its own
     border and shadow it read as a button floating off the card */
  box-shadow: none;
  transition: background .14s ease, color .14s ease;
}
.theme-bgc .product-add-cart:hover { background: var(--bgc-blue); color: #FFF; box-shadow: none; }

/* base uses `padding: 1.5rem 0 0` — right on its flush cards, wrong the
   moment the card has a surface of its own */
.theme-bgc .product-card-info {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
  padding: 1.4rem;
  border-top: 1px solid var(--bgc-line);
}
.theme-bgc .product-brand {
  font-size: var(--bgc-t-sm);
  color: var(--bgc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-bgc .product-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--bgc-t-md);
  font-weight: 500;
  line-height: 1.4;
  color: var(--bgc-ink);
}
.theme-bgc .product-name a:hover { color: var(--bgc-blue-d); }
.theme-bgc .product-price {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-top: auto;
  padding-top: .6rem;
}
.theme-bgc .price-sale,
.theme-bgc .price-regular {
  font-family: var(--bgc-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--bgc-ink);
}
.theme-bgc .price-compare {
  font-size: var(--bgc-t-sm);
  color: var(--bgc-faint);
  text-decoration: line-through;
}
.theme-bgc .bgc-unit { display: block; font-size: var(--bgc-t-sm); color: var(--bgc-muted); }

/* finish / material swatches — squares, because what BGC sell is flatware
   and glass, not round metal fittings */
.theme-bgc .bgc-finishes { display: flex; flex-wrap: wrap; gap: .6rem; }
.theme-bgc .bgc-finish {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 5px;
  border: 1px solid var(--bgc-line-2);
  box-shadow: inset 0 0 0 2px #FFF;
  cursor: pointer;
}
.theme-bgc .bgc-finish.is-on { border-color: var(--bgc-blue); box-shadow: inset 0 0 0 2px #FFF, 0 0 0 2px rgba(25,164,246,.3); }
.theme-bgc .bgc-finish[data-finish="mirror"]    { background: linear-gradient(135deg, #E8EEF2, #B9C7D1 55%, #EEF3F6); }
.theme-bgc .bgc-finish[data-finish="satin"]     { background: linear-gradient(135deg, #D7DEE3, #AFB9C1); }
.theme-bgc .bgc-finish[data-finish="brushed"]   { background: repeating-linear-gradient(90deg, #CBD5DC 0 2px, #DCE4EA 2px 4px); }
.theme-bgc .bgc-finish[data-finish="copper"]    { background: linear-gradient(135deg, #E6A277, #B4663C); }
.theme-bgc .bgc-finish[data-finish="black"]     { background: linear-gradient(135deg, #3A444B, #1C2328); }
.theme-bgc .bgc-finish[data-finish="gold"]      { background: linear-gradient(135deg, #F0D08A, #C49A3E); }
.theme-bgc .bgc-finish[data-finish="white"]     { background: linear-gradient(135deg, #FFFFFF, #E7EDF1); }
.theme-bgc .bgc-finish[data-finish="clear"]     { background: linear-gradient(135deg, rgba(172,219,246,.55), rgba(255,255,255,.9)); }

/* quantity — ONE control, and base ships five different ones. All five are
   styled together so the product page, quick view, mini cart, cart page and
   the visualiser never disagree. */
.theme-bgc .quantity-selector,
.theme-bgc .quickview-quantity,
.theme-bgc .mini-cart-item-qty,
.theme-bgc .cart-item-quantity,
.theme-bgc .viz-qty-control {
  display: inline-flex;
  align-items: center;
  height: var(--bgc-ctl-sm);
  border: 1px solid var(--bgc-line-2);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  overflow: hidden;
}
.theme-bgc .quantity-selector button,
.theme-bgc .quickview-quantity button,
.theme-bgc .mini-cart-item-qty button,
.theme-bgc .cart-item-quantity button,
.theme-bgc .viz-qty-control button,
.theme-bgc .qty-minus,
.theme-bgc .qty-plus,
.theme-bgc .mini-qty-minus,
.theme-bgc .mini-qty-plus {
  width: 3.4rem;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bgc-ink-2);
  font-size: var(--bgc-t-lg);
  line-height: 1;
  cursor: pointer;
}
.theme-bgc .quantity-selector button:hover,
.theme-bgc .qty-minus:hover,
.theme-bgc .qty-plus:hover,
.theme-bgc .mini-qty-minus:hover,
.theme-bgc .mini-qty-plus:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }
.theme-bgc .quantity-selector input,
.theme-bgc .quickview-quantity input,
.theme-bgc .mini-cart-item-qty input,
.theme-bgc .cart-item-quantity input,
.theme-bgc .viz-qty-control input,
.theme-bgc .mini-qty-input,
.theme-bgc #product-qty {
  width: 4.4rem;
  height: 100%;
  flex: none;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--bgc-line);
  border-right: 1px solid var(--bgc-line);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  color: var(--bgc-ink);
  -moz-appearance: textfield;
}
.theme-bgc .quantity-selector input:focus,
.theme-bgc .mini-qty-input:focus,
.theme-bgc #product-qty:focus { box-shadow: none; border-color: var(--bgc-line); }
.theme-bgc input[type="number"]::-webkit-outer-spin-button,
.theme-bgc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* skeletons — mirror the real card so nothing jumps, with the tile motif in
   the image block so the wait reads as this shop. One sweep across the whole
   card, not a shimmer on every bar. */
.theme-bgc .skeleton-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  overflow: hidden;
}
.theme-bgc .skeleton-card .product-card-media { background: var(--bgc-wash); }
.theme-bgc .skeleton {
  background: linear-gradient(90deg, var(--bgc-sunken) 25%, var(--bgc-wash) 50%, var(--bgc-sunken) 75%);
  background-size: 200% 100%;
  border-radius: 4px;
}
/* (0,3,0) to carry the four-square mark over the page's shimmer gradient */
.theme-bgc .skeleton.skeleton-image {
  border-radius: 0;
  background:
    linear-gradient(var(--bgc-blue-ll), var(--bgc-blue-ll)) 36% 36% / 13% 13% no-repeat,
    linear-gradient(var(--bgc-blue-ll), var(--bgc-blue-ll)) 51% 36% / 13% 13% no-repeat,
    linear-gradient(var(--bgc-blue-ll), var(--bgc-blue-ll)) 36% 51% / 13% 13% no-repeat,
    linear-gradient(var(--bgc-blue-ll), var(--bgc-blue-ll)) 51% 51% / 13% 13% no-repeat,
    var(--bgc-wash);
  opacity: .85;
  animation: none;             /* one sweep across the card, not per bar */
}
.theme-bgc .skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: bgc-sweep 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bgc-sweep { to { transform: translateX(100%); } }

/* toast — cart.js already builds .cart-notification and toggles .active,
   so this is styling only and it covers every call site. The state reads
   from a rule down the leading edge, not a coloured outline. */
.theme-bgc .cart-notification {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: var(--bgc-z-toast);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: min(42rem, calc(100vw - 4rem));
  padding: 1.4rem 1.8rem;
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  box-shadow: var(--bgc-shadow-up);
  color: var(--bgc-ink);
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  border-left: 4px solid var(--bgc-blue);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.2rem);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.theme-bgc .cart-notification.active { opacity: 1; visibility: visible; transform: none; }
.theme-bgc .cart-notification-success { border-left-color: var(--bgc-good); }
.theme-bgc .cart-notification-error   { border-left-color: var(--bgc-error); }
@media (max-width: 1023px) {
  .theme-bgc .cart-notification { right: 1.2rem; left: 1.2rem; bottom: 7rem; max-width: none; }
}

/* ---------- 13. listing: toolbar, grid, chips, pagination ---------------- */
.theme-bgc .bgc-page { padding-block: 2.4rem 4.8rem; }
.theme-bgc .bgc-shop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .theme-bgc .bgc-shop { grid-template-columns: 27rem 1fr; }
}

.theme-bgc .shop-toolbar,
.theme-bgc .bgc-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
}
.theme-bgc .bgc-toolbar__count { font-size: var(--bgc-t-sm); color: var(--bgc-muted); margin-right: auto; }
.theme-bgc .bgc-toolbar__count b { color: var(--bgc-ink); font-weight: 600; }
.theme-bgc .bgc-toolbar .bgc-select { width: 20rem; }
.theme-bgc .bgc-toolbar .bgc-select__t,
.theme-bgc .bgc-toolbar .btn { height: var(--bgc-ctl-sm); font-size: var(--bgc-t-sm); }

.theme-bgc .view-switcher {
  display: none;
  align-items: center;
  gap: .3rem;
  padding: .3rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-sunken);
}
@media (min-width: 1024px) { .theme-bgc .view-switcher { display: inline-flex; } }
.theme-bgc .view-btn {
  width: 3rem; height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--bgc-muted);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  cursor: pointer;
}
.theme-bgc .view-btn:hover { color: var(--bgc-blue-d); }
.theme-bgc .view-btn.is-active,
.theme-bgc .view-btn.active { background: var(--bgc-surface); color: var(--bgc-blue-d); box-shadow: var(--bgc-shadow); }

.theme-bgc .bgc-chips-row { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.theme-bgc .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 3.2rem;
  padding-inline: 1rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
  font-size: var(--bgc-t-sm);
  font-weight: 500;
}
.theme-bgc .filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem; height: 1.8rem;
  border: 0;
  border-radius: 4px;
  background: rgba(25, 164, 246, .16);
  color: var(--bgc-blue-d);
  font-size: var(--bgc-t-xs);
  line-height: 1;
  cursor: pointer;
}
.theme-bgc .filter-chip-remove:hover { background: var(--bgc-blue); color: #FFF; }

.theme-bgc .bgc-plist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.6rem;
}

.theme-bgc .pagination,
.theme-bgc .bgc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: 3.2rem;
  flex-wrap: wrap;
}
.theme-bgc .pagination a,
.theme-bgc .pagination span,
.theme-bgc .bgc-pager a {
  min-width: var(--bgc-ctl-sm);
  height: var(--bgc-ctl-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.1rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  color: var(--bgc-ink-2);
}
.theme-bgc .pagination a:hover { border-color: var(--bgc-blue); color: var(--bgc-blue-d); }
.theme-bgc .pagination .active,
.theme-bgc .pagination .current {
  background: var(--bgc-blue);
  border-color: var(--bgc-blue);
  color: #FFF;
}

/* empty states — normalised once, so every one is the same size */
.theme-bgc .bgc-empty,
.theme-bgc .empty-state,
.theme-bgc .no-products {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 6rem 2rem;
  text-align: center;
  border: 1px dashed var(--bgc-line-2);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
}
.theme-bgc .bgc-empty__ic {
  width: 6.4rem; height: 6.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bgc-r);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
}
.theme-bgc .bgc-empty__ic .material-icons { font-size: 3.2rem; }
.theme-bgc .bgc-empty h3,
.theme-bgc .empty-state h3 { margin: 0; }
.theme-bgc .bgc-empty p,
.theme-bgc .empty-state p { color: var(--bgc-muted); font-size: var(--bgc-t-sm); max-width: 46ch; }
.theme-bgc .bgc-empty .btn { margin-top: .8rem; }

/* breadcrumb — sits above the content, not inside the card */
.theme-bgc .breadcrumb,
.theme-bgc .bgc-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-muted);
  background: transparent;
}
.theme-bgc .breadcrumb a { color: var(--bgc-muted); }
.theme-bgc .breadcrumb a:hover { color: var(--bgc-blue-d); }
.theme-bgc .breadcrumb .sep { color: var(--bgc-line-2); }

/* alerts */
.theme-bgc .alert {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.6rem;
  padding: 1.2rem 1.4rem;
  border: 0;
  border-left: 4px solid var(--bgc-blue);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .alert svg { flex: none; margin-top: .2rem; }
.theme-bgc .alert-error   { border-left-color: var(--bgc-error); background: var(--bgc-error-sf); color: #8E1B2F; }
.theme-bgc .alert-success { border-left-color: var(--bgc-good);  background: var(--bgc-good-sf);  color: #0B6B36; }
.theme-bgc .alert-info    { border-left-color: var(--bgc-blue);  background: var(--bgc-wash); }

/* ---------- 14. filters panel ------------------------------------------- */
/* Restyled comprehensively rather than rewritten: the partial is ~1,300
   lines with a dozen JS hooks. Every rule is .theme-bgc-prefixed so it
   clears the partial's own inline <style>, which the layout yields AFTER
   themeCss(). The three noted below need more than a prefix. */
.theme-bgc .filters-sidebar,
.theme-bgc .milano-filters {
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  overflow: hidden;
}
.theme-bgc .filters-sidebar .filter-sections { padding: 0; }
.theme-bgc .filter-section { border-bottom: 1px solid var(--bgc-line); }
.theme-bgc .filter-section:last-child { border-bottom: 0; }
.theme-bgc .filter-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.theme-bgc .filter-section-header:hover { background: var(--bgc-wash); }
/* the partial sets flex-direction:column at (0,1,0); a prefix alone does not
   undo a property we never set, so set it back explicitly */
.theme-bgc .filter-section-title-wrap {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.theme-bgc .filter-section-title {
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-md);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bgc-ink);
}
/* was indigo #6366f1 — re-pointed at the theme accent */
.theme-bgc .filter-section-selected {
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  color: var(--bgc-blue-d);
}
.theme-bgc .filter-section-icon { color: var(--bgc-muted); }
/* (0,3,1) to beat the partial's (0,3,0) */
.theme-bgc .filter-section-header[aria-expanded="false"] .filter-section-icon { transform: rotate(-90deg); }
.theme-bgc .filter-section-header[aria-expanded="true"] .filter-section-icon { transform: rotate(0deg); }
.theme-bgc .filter-section-content { padding: 0 1.6rem 1.6rem; }

.theme-bgc .filter-search-box { position: relative; margin-bottom: 1rem; }
.theme-bgc .filter-search-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bgc-faint);
  pointer-events: none;
}
.theme-bgc .filter-search-input { padding-left: 3.6rem; }

.theme-bgc .filter-checkbox-option,
.theme-bgc .filter-radio-option {
  display: flex;
  align-items: center;
  gap: .9rem;
  /* a hover band on a full-width row goes edge to edge: take the panel's
     gutter as padding and pull it back with an equal negative margin, so the
     label stays aligned and the tint reaches both edges */
  padding: .7rem 1.6rem;
  margin-inline: -1.6rem;
  border-radius: 0;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .filter-checkbox-option:hover,
.theme-bgc .filter-radio-option:hover { background: var(--bgc-wash); }
.theme-bgc .filter-checkbox-custom,
.theme-bgc .filter-radio-custom {
  flex: none;
  width: 1.8rem; height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bgc-line-2);
  background: var(--bgc-surface);
  transition: border-color .14s ease, background .14s ease;
}
.theme-bgc .filter-checkbox-custom { border-radius: 4px; }
.theme-bgc .filter-radio-custom    { border-radius: 50%; }
.theme-bgc .filter-checkbox-option input:checked ~ .filter-checkbox-custom,
.theme-bgc .filter-checkbox-option.is-selected .filter-checkbox-custom,
.theme-bgc .filter-radio-option input:checked ~ .filter-radio-custom,
.theme-bgc .filter-radio-option.is-selected .filter-radio-custom {
  background: var(--bgc-blue);
  border-color: var(--bgc-blue);
}
/* The filter partial already puts an <svg> tick inside .filter-checkbox-custom
   (stroke="currentColor"), so drawing a second one here with a rotated border
   stacked two marks on top of each other in every checked box. Reveal the one
   in the markup instead of inventing another. */
.theme-bgc .filter-checkbox-custom svg {
  opacity: 0;
  color: #FFF;
  transition: opacity .14s ease;
}
.theme-bgc .filter-checkbox-option input:checked ~ .filter-checkbox-custom svg,
.theme-bgc .filter-checkbox-option.is-selected .filter-checkbox-custom svg { opacity: 1; }
.theme-bgc .filter-radio-option input:checked ~ .filter-radio-custom::after,
.theme-bgc .filter-radio-option.is-selected .filter-radio-custom::after {
  content: "";
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: #FFF;
}
.theme-bgc .filter-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A scrolling list cannot use the rows' own negative margin to reach the
   panel edges: overflow-y:auto shrinks the content box by the scrollbar, so
   the row ends short of it and the selected tint stops with a gap on the
   right. Take the gutter on the SCROLL BOX instead, so it spans the panel and
   the rows simply fill it - the scrollbar then sits on the panel edge where
   it belongs, and the labels keep their alignment from the row padding. */
.theme-bgc .filter-options-scrollable {
  max-height: 24rem;
  overflow-y: auto;
  margin-inline: -1.6rem;
  /* A list that scrolls cuts its last row in half, which reads as a rendering
     fault rather than "there is more below". A rule under the box gives the
     run a definite end, so the clipped row is obviously the scroll edge. */
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .filter-options-scrollable .filter-checkbox-option,
.theme-bgc .filter-options-scrollable .filter-radio-option { margin-inline: 0; }

.theme-bgc .filter-category-parent,
.theme-bgc .filter-category-child {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .filter-category-child { padding-left: 1.4rem; color: var(--bgc-muted); }
.theme-bgc .filter-category-toggle {
  width: 2.4rem; height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--bgc-muted);
  cursor: pointer;
}
.theme-bgc .filter-category-toggle:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }
.theme-bgc .filter-category-children { display: none; }
.theme-bgc .filter-category-group.is-expanded > .filter-category-children { display: block; }

/* price — the two range inputs are siblings of the track with nothing
   positioned around them, so without this the thumbs fly to the corner */
.theme-bgc .price-slider-container { position: relative; height: 3.2rem; margin-bottom: 1.2rem; }
.theme-bgc .price-slider-track {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: .5rem;
  transform: translateY(-50%);
  border-radius: 3px;
  /* --bgc-sunken (#EDF5FA) is a surface tint: on the white filter panel the
     unselected part of the track read as nothing at all, so the slider looked
     like a blue bar floating in space. --bgc-line-2 is the token meant for a
     visible rule. */
  background: var(--bgc-line-2);
}
.theme-bgc .price-slider-range {
  position: absolute;
  height: 100%;
  border-radius: 3px;
  background: var(--bgc-blue);
}
.theme-bgc .price-slider-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.theme-bgc .price-slider-input:focus { box-shadow: none; }
.theme-bgc .price-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  border: 2px solid #FFF;
  background: var(--bgc-blue);
  box-shadow: 0 1px 4px rgba(8, 59, 84, .3);
  cursor: pointer;
}
.theme-bgc .price-slider-input::-moz-range-thumb {
  pointer-events: auto;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  border: 2px solid #FFF;
  background: var(--bgc-blue);
  cursor: pointer;
}
.theme-bgc .price-inputs { display: flex; align-items: center; gap: .8rem; }
/* The wrapper must NOT draw a box. Base's stylesheet gives .price-input-group
   its own 1px border, 6px radius and grey fill, and this theme styles the
   <input> inside it as a field too - so the control rendered as two nested
   rounded boxes, one inside the other. The input is the field; the wrapper
   only positions the Rs prefix over it. */
.theme-bgc .price-input-group {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
}
.theme-bgc .price-input-prefix {
  position: absolute;
  left: 1rem;
  color: var(--bgc-muted);
  font-size: var(--bgc-t-sm);
  pointer-events: none;
}
/* The markup has no .price-input class - neither this theme's partial nor
   base's gives the number inputs one, so these rules never landed: the fields
   kept the full-height input[type=number] styling and nothing reserved room
   for the absolutely-positioned Rs prefix, which then sat on top of the
   placeholder. Target what is actually in the DOM. min-width:0 because a flex
   item will not shrink below a number input's intrinsic width. */
.theme-bgc .price-input-group input {
  width: 100%;
  min-width: 0;
  padding-left: 2.6rem;
  height: var(--bgc-ctl-sm);
  font-size: var(--bgc-t-sm);
}
.theme-bgc .price-input-separator { color: var(--bgc-faint); flex: none; }
.theme-bgc .price-range-hint { margin-top: .8rem; font-size: var(--bgc-t-sm); color: var(--bgc-muted); }

.theme-bgc .filter-color-swatches { display: flex; flex-wrap: wrap; gap: .8rem; }
.theme-bgc .filter-color-circle {
  width: 2.8rem; height: 2.8rem;
  border-radius: 5px;
  border: 1px solid var(--bgc-line-2);
  box-shadow: inset 0 0 0 2px #FFF;
  cursor: pointer;
}
.theme-bgc .filter-color-check input:checked ~ .filter-color-circle,
.theme-bgc .filter-color-swatch.is-selected .filter-color-circle {
  border-color: var(--bgc-blue);
  box-shadow: inset 0 0 0 2px #FFF, 0 0 0 2px rgba(25, 164, 246, .3);
}
.theme-bgc .filter-color-label { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }

.theme-bgc .filter-size-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.theme-bgc .filter-size-btn {
  min-width: 3.6rem;
  height: 3.6rem;
  padding-inline: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bgc-line-2);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .filter-size-btn:hover { border-color: var(--bgc-blue); color: var(--bgc-blue-d); }
.theme-bgc .filter-size-btn.is-selected,
.theme-bgc .filter-size-btn.active {
  background: var(--bgc-blue);
  border-color: var(--bgc-blue);
  color: #FFF;
}

.theme-bgc .filter-actions {
  display: flex;
  gap: .8rem;
  padding: 1.4rem 1.6rem;
  border-top: 1px solid var(--bgc-line);
  background: var(--bgc-sunken);
}
.theme-bgc .filter-actions .btn,
.theme-bgc .filter-apply-btn { flex: 1; }

/* filter drawer — base puts it at z-index 1002 and the mini cart at 1000,
   both under a themed masthead, so an open drawer slid underneath and lost
   its own title and close button. Both go on the theme's drawer level. */
.theme-bgc .filter-drawer-overlay { background: rgba(8, 59, 84, .5); }
.theme-bgc .filter-drawer-content {
  background: var(--bgc-surface);
  box-shadow: var(--bgc-shadow-up);
}
.theme-bgc .filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .filter-drawer-header h3 { margin: 0; font-size: var(--bgc-t-xl); }
.theme-bgc .filter-drawer-body { flex: 1; overflow-y: auto; }
.theme-bgc .filter-drawer-body .filters-sidebar { border: 0; border-radius: 0; }
.theme-bgc .filter-drawer-footer {
  display: flex;
  gap: .8rem;
  padding: 1.4rem 1.6rem;
  border-top: 1px solid var(--bgc-line);
}
.theme-bgc .filter-drawer-footer .btn { flex: 1; }

.theme-bgc #floating-filter-bar {
  position: fixed;
  left: 50%;
  bottom: 7.2rem;
  transform: translateX(-50%) translateY(1.2rem);
  z-index: calc(var(--bgc-z-head) - 2);
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--bgc-blue-dd);
  color: #FFF;
  box-shadow: var(--bgc-shadow-up);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.theme-bgc #floating-filter-bar.active,
.theme-bgc #floating-filter-bar.visible { opacity: 1; visibility: visible; transform: translateX(-50%); }
.theme-bgc #floating-filter-bar button {
  height: 3.4rem;
  padding-inline: 1.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #FFF;
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  cursor: pointer;
}
.theme-bgc #floating-filter-bar button:hover { background: rgba(255, 255, 255, .26); }

/* ---------- 15. product detail ------------------------------------------ */
.theme-bgc .bgc-pd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.8rem;
  align-items: start;
}
@media (min-width: 900px) { .theme-bgc .bgc-pd { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .theme-bgc .bgc-pd { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.theme-bgc .product-gallery,
.theme-bgc .bgc-pd__gal {
  position: sticky;
  top: 9rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  overflow: hidden;
}
@media (max-width: 899px) { .theme-bgc .bgc-pd__gal { position: static; } }
.theme-bgc .product-main-image,
.theme-bgc .bgc-pd__main {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bgc-wash);
}
.theme-bgc .product-main-image img,
.theme-bgc .bgc-pd__main img { width: 100%; height: 100%; object-fit: contain; padding: 2.4rem; }
.theme-bgc .product-thumbnails,
.theme-bgc .bgc-pd__thumbs {
  display: flex;
  gap: .8rem;
  padding: 1.2rem;
  overflow-x: auto;
  border-top: 1px solid var(--bgc-line);
}
.theme-bgc .product-thumbnail,
.theme-bgc .bgc-pd__thumb {
  flex: none;
  width: 7rem; height: 7rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  overflow: hidden;
  cursor: pointer;
}
.theme-bgc .product-thumbnail.active,
.theme-bgc .bgc-pd__thumb.is-on { border-color: var(--bgc-blue); }
.theme-bgc .product-thumbnail img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }

.theme-bgc .bgc-pd__say { display: flex; flex-direction: column; gap: 1.4rem; }
.theme-bgc .product-title,
.theme-bgc .bgc-pd__t { margin: 0; }
.theme-bgc .bgc-pd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .bgc-pd__price {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.6rem;
  border-radius: var(--bgc-r);
  background: var(--bgc-wash);
}
.theme-bgc .bgc-pd__price .price-sale,
.theme-bgc .bgc-pd__price .price-regular { font-size: 3.2rem; color: var(--bgc-blue-d); }
.theme-bgc .bgc-pd__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.theme-bgc .bgc-pd__buy .btn { flex: 1 1 18rem; }
.theme-bgc .bgc-pd__spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bgc-t-sm);
}
.theme-bgc .bgc-pd__spec th,
.theme-bgc .bgc-pd__spec td {
  padding: .9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--bgc-line);
  vertical-align: top;
}
.theme-bgc .bgc-pd__spec th { width: 40%; font-weight: 600; color: var(--bgc-muted); }
.theme-bgc .bgc-pd__spec tr:last-child th,
.theme-bgc .bgc-pd__spec tr:last-child td { border-bottom: 0; }

/* ---------- 16. cart + mini cart ---------------------------------------- */
.theme-bgc .bgc-cart { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: start; }
@media (min-width: 1024px) { .theme-bgc .bgc-cart { grid-template-columns: 1fr 36rem; } }
.theme-bgc .cart-items,
.theme-bgc .bgc-cart__list {
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  overflow: hidden;
}
.theme-bgc .cart-item {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.6rem;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .cart-item:last-child { border-bottom: 0; }
.theme-bgc .cart-item-image {
  width: 8rem; height: 8rem;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  overflow: hidden;
}
.theme-bgc .cart-item-image img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.theme-bgc .cart-item-name { font-size: var(--bgc-t-md); font-weight: 500; color: var(--bgc-ink); }
.theme-bgc .cart-item-meta { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .cart-summary,
.theme-bgc .bgc-cart__sum {
  position: sticky;
  top: 9rem;
  padding: 2rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
}
.theme-bgc .cart-summary-row,
.theme-bgc .bgc-sumrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .cart-summary-total,
.theme-bgc .bgc-sumrow--total {
  margin-top: .8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bgc-line);
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-xl);
  font-weight: 700;
  color: var(--bgc-ink);
}

/* .mini-cart-drawer, not .mini-cart: the partial renders #mini-cart-drawer and
   mini-cart.js toggles .open on it, so a rule written for ".mini-cart.active"
   matched nothing at all. The overlay's z-index DID apply, which is how the
   backdrop ended up painting over the drawer it was meant to sit behind. */
.theme-bgc .mini-cart-drawer {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: min(40rem, 92vw);
  z-index: var(--bgc-z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--bgc-surface);
  transform: translateX(100%);
  transition: transform .26s ease;
}
.theme-bgc .mini-cart-drawer.open { transform: none; }
.theme-bgc .mini-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--bgc-z-drawer) - 1);
  background: rgba(8, 59, 84, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.theme-bgc .mini-cart-overlay.active { opacity: 1; visibility: visible; }
.theme-bgc .mini-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .mini-cart-header h3 { margin: 0; font-size: var(--bgc-t-xl); }
.theme-bgc .mini-cart-content { flex: 1; overflow-y: auto; padding: 1rem 1.6rem; }
.theme-bgc .mini-cart-item {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: 1.2rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .mini-cart-item-image {
  width: 6.4rem; height: 6.4rem;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  overflow: hidden;
}
.theme-bgc .mini-cart-item-image img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.theme-bgc .mini-cart-footer {
  padding: 1.6rem;
  border-top: 1px solid var(--bgc-line);
  background: var(--bgc-sunken);
}
/* One row, two compact buttons. Stacked and full height they pushed the
   total off the bottom of a short drawer; side by side they both fit and the
   footer stays shallow. min-width:0 so neither can refuse to shrink. */
.theme-bgc .mini-cart-actions { display: flex; flex-direction: row; gap: .8rem; margin-top: 1.2rem; }
.theme-bgc .mini-cart-actions .btn {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
  height: var(--bgc-ctl-sm);
  padding-inline: 1.2rem;
  font-size: var(--bgc-t-sm);
  white-space: nowrap;
}

/* The unit (PCS, SET, KG) sits INSIDE the stepper in the markup, so it reads
   as the last segment of that control rather than a chip stuck to the end of
   it: no fill, no pill, just a hairline dividing it from the + button, and
   the same text size as everything else in the row. */
.theme-bgc .mini-cart-item-unit,
.theme-bgc .quickview-unit,
.theme-bgc .product-unit {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin-left: 0;
  padding-inline: 1rem;
  border: 0;
  border-left: 1px solid var(--bgc-line);
  border-radius: 0;
  background: none;
  color: var(--bgc-muted);
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

/* Remove: a bare red glyph gave no sign it was a target until it was gone. */
.theme-bgc .mini-cart-item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem; height: 2.8rem;
  border-radius: var(--bgc-r-sm);
  color: var(--bgc-muted);
  background: transparent;
  transition: background .14s ease, color .14s ease;
}
.theme-bgc .mini-cart-item-remove:hover,
.theme-bgc .mini-cart-item-remove:focus-visible {
  background: var(--bgc-error-sf);
  color: var(--bgc-error);
}
/* empty state: the call to action was sitting on the paragraph above it */
.theme-bgc .mini-cart-empty { padding: 3.2rem 1.6rem; text-align: center; }
.theme-bgc .mini-cart-empty p { margin-bottom: 0; }
.theme-bgc .mini-cart-empty .btn { display: inline-flex; margin-top: 2rem; }

/* ---------- 17. auth ----------------------------------------------------- */
.theme-bgc .auth-section { padding-block: clamp(3.2rem, 2rem + 3vw, 6.4rem); }
.theme-bgc .auth-wrapper { display: flex; justify-content: center; }
.theme-bgc .auth-card {
  width: 100%;
  /* 46rem was sized for the sign-in form (two fields). Register carries eight,
     including a GSTIN that is fifteen characters wide, and at that width its
     paired fields clipped their own placeholders. */
  max-width: 58rem;
  padding: clamp(2.4rem, 1.6rem + 2vw, 3.6rem);
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-lg);
  background: var(--bgc-surface);
  box-shadow: var(--bgc-shadow);
}
.theme-bgc .auth-header { margin-bottom: 2.4rem; text-align: center; }
.theme-bgc .auth-title { margin: 0 0 .6rem; }
.theme-bgc .auth-subtitle { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .auth-form .btn-block { margin-top: .8rem; }
.theme-bgc .form-group-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.theme-bgc .link-forgot { font-size: var(--bgc-t-sm); font-weight: 500; color: var(--bgc-blue-d); }
.theme-bgc .link-forgot:hover { text-decoration: underline; }
.theme-bgc .input-password-wrapper { position: relative; display: flex; align-items: center; }
.theme-bgc .input-password-wrapper .form-input { padding-right: 4.4rem; }
.theme-bgc .btn-toggle-password {
  position: absolute;
  right: .5rem;
  width: 3.4rem; height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--bgc-r-sm);
  background: transparent;
  color: var(--bgc-muted);
  cursor: pointer;
}
.theme-bgc .btn-toggle-password:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }
.theme-bgc .auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-faint);
}
.theme-bgc .auth-divider::before,
.theme-bgc .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--bgc-line); }
.theme-bgc .auth-footer { margin-top: 2rem; text-align: center; font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .auth-footer a { font-weight: 600; color: var(--bgc-blue-d); }
.theme-bgc .btn-loader svg { animation: bgc-spin .7s linear infinite; }

/* ---------- 18. quick view ---------------------------------------------- */
/* The overlay is a plain child of .quickview-modal and quickview.js shows the
   whole thing by setting display on the wrapper - it never adds .active here.
   Written as a fixed container gated on .active, it stayed invisible, so the
   quick view opened over an undimmed page. It is just the backdrop: fill the
   wrapper, sit under the panel. */
.theme-bgc .quickview-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(8, 59, 84, .55);
}
.theme-bgc .quickview-container { position: relative; z-index: 1; }

/* the link out to the full product page */
.theme-bgc .quickview-view-details {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.6rem;
  padding: .6rem 0;
  color: var(--bgc-blue-d);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease, gap .14s ease;
}
.theme-bgc .quickview-view-details:hover {
  color: var(--bgc-blue);
  border-bottom-color: currentColor;
  gap: .9rem;
}
.theme-bgc .quickview-view-details svg { flex: none; }
/* .quickview-modal is the full-screen centring WRAPPER (quickview.css sets
   position:fixed; inset:0; display:flex), not the panel. Styling it as the
   panel - white, 94rem wide, 88vh tall - shrank the wrapper and painted it
   white, which is the empty white slab that appeared above and below the
   content: measured 940x880 around a 460-tall container. The panel is
   .quickview-container, so it carries the surface. */
.theme-bgc .quickview-modal {
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 2rem;
}
.theme-bgc .quickview-container {
  width: 100%;
  max-width: 94rem;
  max-height: 88vh;
  overflow: auto;
  border-radius: var(--bgc-r-lg);
  background: var(--bgc-surface);
  box-shadow: var(--bgc-shadow-up);
}
.theme-bgc .quickview-close,
.theme-bgc .quickview-prev,
.theme-bgc .quickview-next {
  width: 4rem; height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .quickview-close:hover,
.theme-bgc .quickview-prev:hover,
.theme-bgc .quickview-next:hover { background: var(--bgc-wash); color: var(--bgc-blue-d); }

/* ---------- 19. 404 ------------------------------------------------------ */
.theme-bgc .bgc-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(5rem, 3rem + 6vw, 10rem) 2rem;
  text-align: center;
}
.theme-bgc .bgc-404__n {
  font-family: var(--bgc-display);
  font-size: clamp(7rem, 4rem + 8vw, 14rem);
  font-weight: 700;
  line-height: .9;
  color: var(--bgc-blue-ll);
}
.theme-bgc .bgc-404__act { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1rem; }

/* ---------- 20. prose (about, faq, legal) -------------------------------- */
.theme-bgc .bgc-prose { max-width: 78ch; }
.theme-bgc .bgc-prose h2 { margin: 3.2rem 0 1.2rem; }
.theme-bgc .bgc-prose h3 { margin: 2.4rem 0 1rem; }
.theme-bgc .bgc-prose p,
.theme-bgc .bgc-prose li { color: var(--bgc-ink-2); line-height: 1.75; }
.theme-bgc .bgc-prose p { margin-bottom: 1.4rem; }
.theme-bgc .bgc-prose ul,
.theme-bgc .bgc-prose ol { margin: 0 0 1.6rem; padding-left: 2rem; }
.theme-bgc .bgc-prose li { margin-bottom: .6rem; }
.theme-bgc .bgc-prose a { color: var(--bgc-blue-d); font-weight: 500; }
.theme-bgc .bgc-prose a:hover { text-decoration: underline; }

/* accordion (FAQ) — height:auto cannot be transitioned, so the JS measures
   and animates; this only provides the resting styles */
.theme-bgc .bgc-acc { border: 1px solid var(--bgc-line); border-radius: var(--bgc-r); background: var(--bgc-surface); overflow: hidden; }
.theme-bgc .bgc-acc__i { border-bottom: 1px solid var(--bgc-line); }
.theme-bgc .bgc-acc__i:last-child { border-bottom: 0; }
.theme-bgc .bgc-acc__h {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.6rem;
  border: 0;
  background: transparent;
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-md);
  font-weight: 600;
  color: var(--bgc-ink);
  text-align: left;
  cursor: pointer;
}
.theme-bgc .bgc-acc__h:hover { background: var(--bgc-wash); }
.theme-bgc .bgc-acc__c {
  flex: none;
  width: 1rem; height: 1rem;
  border-right: 1.5px solid var(--bgc-muted);
  border-bottom: 1.5px solid var(--bgc-muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s ease;
}
.theme-bgc .bgc-acc__h[aria-expanded="true"] .bgc-acc__c { transform: translateY(1px) rotate(225deg); }
.theme-bgc .bgc-acc__b { overflow: hidden; }
.theme-bgc .bgc-acc__b[hidden] { display: none; }
.theme-bgc .bgc-acc__bi { padding: 0 1.6rem 1.6rem; font-size: var(--bgc-t-sm); line-height: 1.75; color: var(--bgc-ink-2); }

/* ---------- 21. contact -------------------------------------------------- */
.theme-bgc .bgc-contact { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: start; }
@media (min-width: 900px) { .theme-bgc .bgc-contact { grid-template-columns: 1fr 1fr; } }
.theme-bgc .bgc-routes { display: grid; gap: 1.2rem; }
.theme-bgc .bgc-route {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.theme-bgc .bgc-route:hover { border-color: var(--bgc-blue); box-shadow: var(--bgc-shadow); }
.theme-bgc .bgc-route__ic {
  flex: none;
  width: 4.4rem; height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
}
.theme-bgc .bgc-route__ic .material-icons { font-size: 2.2rem; }
.theme-bgc .bgc-route__t { font-size: var(--bgc-t-md); font-weight: 600; color: var(--bgc-ink); }
.theme-bgc .bgc-route__d { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .bgc-card {
  padding: clamp(2rem, 1.4rem + 1.4vw, 3rem);
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
}

/* ---------- 22. responsive tail ----------------------------------------- */
@media (max-width: 767px) {
  .theme-bgc .bgc-sec__head { align-items: flex-start; flex-direction: column; }
  .theme-bgc .cart-item { grid-template-columns: 6.4rem 1fr; }
  .theme-bgc .cart-item-image { width: 6.4rem; height: 6.4rem; }
  .theme-bgc .bgc-toolbar { padding: 1rem 1.2rem; }
  .theme-bgc .bgc-toolbar .bgc-select { width: 100%; }
}
@media (max-width: 420px) {
  :root { --bgc-gut: 1.6rem; }
  .theme-bgc .bgc-grid4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .theme-bgc .product-card-info { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-bgc *,
  .theme-bgc *::before,
  .theme-bgc *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 23. product detail, over the page's own <style> -------------
   detail.php yields its styles AFTER themeCss(), so every rule here carries
   the .theme-bgc prefix to clear it on specificity rather than order. */
.theme-bgc .product-detail-page { padding-block: 2.4rem 4.8rem; }

.theme-bgc .gallery-main {
  position: relative;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-wash);
  overflow: hidden;
}
.theme-bgc .gallery-main-img { background: var(--bgc-wash); }
/* a pictogram stand-in is line art, not a photograph: let it breathe rather
   than filling the frame the way a real product shot should */
.theme-bgc .gallery-main-img.is-placeholder {
  object-fit: contain;
  padding: 18%;
  opacity: .9;
}
.theme-bgc .bgc-ph__t--detail {
  position: absolute;
  left: 0; right: 0;
  bottom: 2rem;
  text-align: center;
  font-size: var(--bgc-t-sm);
  letter-spacing: .04em;
}
.theme-bgc .gallery-thumb {
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  overflow: hidden;
  cursor: pointer;
}
.theme-bgc .gallery-thumb.active { border-color: var(--bgc-blue); }
.theme-bgc .gallery-zoom-btn {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 3.8rem; height: 3.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: rgba(255, 255, 255, .92);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .gallery-zoom-btn:hover { background: var(--bgc-blue); border-color: var(--bgc-blue); color: #FFF; }

/* the sale badge was a hard red block; BGC's signal colour is amber and
   badges here are always soft */
.theme-bgc .gallery-main .product-badge,
.theme-bgc .product-badge.badge-sale {
  background: var(--bgc-amber-sf);
  color: var(--bgc-amber-d);
  border-radius: 5px;
}

.theme-bgc .product-category {
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bgc-blue-d);
}
.theme-bgc .product-title { margin: .6rem 0 1.2rem; }
.theme-bgc .product-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1.2rem; }
.theme-bgc .price-current {
  font-family: var(--bgc-display);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--bgc-blue-d);
}
.theme-bgc .price-original { font-size: var(--bgc-t-lg); color: var(--bgc-faint); text-decoration: line-through; }
.theme-bgc .price-discount {
  padding: .4rem .9rem;
  border-radius: 5px;
  background: var(--bgc-good-sf);
  color: var(--bgc-good);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
}
.theme-bgc .product-unit,
.theme-bgc .product-unit-info { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .product-description {
  padding: 1.6rem;
  border-radius: var(--bgc-r);
  background: var(--bgc-sunken);
  font-size: var(--bgc-t-sm);
  line-height: 1.75;
  color: var(--bgc-ink-2);
}

.theme-bgc .product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
/* The add button was stretching across the rest of the row, so a short label
   sat in the middle of a very wide slab. Size it to its content, with a floor
   so it still reads as the primary action. */
.theme-bgc .product-actions .btn-add-to-cart {
  flex: 0 1 auto;
  width: auto;
  min-width: 20rem;
  max-width: 32rem;
  height: var(--bgc-ctl);
  padding-inline: 2.4rem;
}
/* base ships this as a black slab */
.theme-bgc .btn-add-to-cart {
  flex: 1 1 22rem;
  height: var(--bgc-ctl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding-inline: 2rem;
  border: 1px solid var(--bgc-blue);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-blue);
  color: #FFF;
  font-family: var(--bgc-body);
  font-size: var(--bgc-ctl-fs);
  font-weight: 600;
  cursor: pointer;
}
.theme-bgc .btn-add-to-cart:hover { background: var(--bgc-blue-d); border-color: var(--bgc-blue-d); }

.theme-bgc .product-meta { display: flex; flex-direction: column; gap: .6rem; }
.theme-bgc .meta-item { display: flex; gap: .8rem; font-size: var(--bgc-t-sm); }
.theme-bgc .meta-label { color: var(--bgc-muted); min-width: 9rem; }
.theme-bgc .meta-value { color: var(--bgc-ink); font-weight: 500; }
.theme-bgc .meta-link { color: var(--bgc-blue-d); }

.theme-bgc .store-card,
.theme-bgc .sample-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
}
.theme-bgc .sample-card { background: var(--bgc-amber-sf); border-color: #F6DCB7; }
.theme-bgc .store-icon,
.theme-bgc .sample-icon {
  flex: none;
  width: 4.4rem; height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
}
.theme-bgc .sample-icon { background: rgba(246, 147, 26, .16); color: var(--bgc-amber-d); }
.theme-bgc .store-info { flex: 1; min-width: 0; }
.theme-bgc .store-status {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bgc-good);
}
.theme-bgc .status-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--bgc-good); }
.theme-bgc .store-name { margin: .4rem 0 .2rem; font-size: var(--bgc-t-lg); }
.theme-bgc .store-address { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .store-directions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: var(--bgc-ctl-sm);
  padding-inline: 1.4rem;
  border: 1px solid var(--bgc-line-2);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  color: var(--bgc-ink);
}
.theme-bgc .store-directions:hover { border-color: var(--bgc-blue); color: var(--bgc-blue-d); background: var(--bgc-wash); }
.theme-bgc .sample-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.theme-bgc .sample-label { font-size: var(--bgc-t-sm); font-weight: 600; color: var(--bgc-amber-d); }
.theme-bgc .sample-cta { font-size: var(--bgc-t-sm); color: var(--bgc-ink-2); }
.theme-bgc .sample-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: var(--bgc-ctl-sm);
  padding-inline: 1.4rem;
  border: 0;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-amber);
  color: #FFF;
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-sm);
  font-weight: 600;
  cursor: pointer;
}
.theme-bgc .sample-btn:hover { background: var(--bgc-amber-d); color: #FFF; }

.theme-bgc .related-products { margin-top: 4.8rem; }
.theme-bgc .related-header { margin-bottom: 2rem; }
.theme-bgc .slider-btn {
  width: 4rem; height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bgc-line-2);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .slider-btn:hover { border-color: var(--bgc-blue); color: var(--bgc-blue-d); }

/* detail.php sets `color: white !important` on this button, so it cannot be
   beaten on specificity alone — !important is the only way back. */
.theme-bgc .store-directions,
.theme-bgc .store-directions:hover { color: var(--bgc-ink) !important; }
.theme-bgc .store-directions:hover { color: var(--bgc-blue-d) !important; }

/* a pictogram stand-in is line art: cap it rather than letting it stretch to
   the full frame of a large gallery */
.theme-bgc .gallery-main-img.is-placeholder {
  width: 100%;
  max-width: 28rem;
  height: auto;
  margin: auto;
  padding: 0;
}
.theme-bgc .gallery-main:has(.is-placeholder) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42rem;
}

/* the route card's title and description are sibling spans inside one span,
   so they ran together on a single line */
.theme-bgc .bgc-route > span:last-child { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.theme-bgc .bgc-route__t,
.theme-bgc .bgc-route__d { display: block; }

/* ---------- 24. type floor ---------------------------------------------
   Nothing a customer has to read renders below 14px.

   The inherited page <style> blocks carry a long tail of rules under that,
   mostly because they were authored against a 16px root while app.css sets
   html{font-size:62.5%} — so a "0.8rem" label comes out at 8px. Those blocks
   are yielded AFTER themeCss(), so each selector needs the .theme-bgc prefix
   to clear it on specificity rather than on order.

   Generated from the rules themselves rather than hand-picked, so it stays
   complete; re-run the sweep after pulling base changes.
   ------------------------------------------------------------------------ */
.theme-bgc .login-status-info strong,
.theme-bgc .login-status-info p,
.theme-bgc .admin-tag,
.theme-bgc .btn-toggle-admin,
.theme-bgc .btn-disable-login,
.theme-bgc .project-form-body .btn-submit { font-size: 1.4rem; }
.theme-bgc .checkbox-text,
.theme-bgc .team-member-role,
.theme-bgc .badge-login,
.theme-bgc .badge-admin,
.theme-bgc .team-detail-row,
.theme-bgc .action-btn { font-size: 1.4rem; }
.theme-bgc .order-detail-project,
.theme-bgc .order-project,
.theme-bgc .architect-badge,
.theme-bgc .form-section-badge,
.theme-bgc .form-section-desc,
.theme-bgc .contributor-avatar { font-size: 1.4rem; }
.theme-bgc .contributor-name,
.theme-bgc .contributor-email,
.theme-bgc .contributor-role,
.theme-bgc .contributor-loading,
.theme-bgc .contributor-empty,
.theme-bgc .contributor-modal-header h3 { font-size: 1.4rem; }
.theme-bgc .contributor-modal-body .form-label,
.theme-bgc .contributor-modal-body .form-hint,
.theme-bgc .contributor-modal-body .form-control,
.theme-bgc .contributor-modal-footer .btn,
.theme-bgc .contributor-modal .role-option-title,
.theme-bgc .contributor-modal .role-option-desc { font-size: 1.4rem; }
.theme-bgc .wishlist-card-title,
.theme-bgc .price-current,
.theme-bgc .price-original,
.theme-bgc .btn-link,
.theme-bgc .otp-boxes input.otp-box,
.theme-bgc .faqpage-hero-badge { font-size: 1.4rem; }
.theme-bgc .faqpage-hero-subtitle,
.theme-bgc .faqpage-search-input,
.theme-bgc .gallery-main .product-badge,
.theme-bgc .product-category,
.theme-bgc .unit-price-alt,
.theme-bgc .specs-title { font-size: 1.4rem; }
.theme-bgc .spec-label,
.theme-bgc .spec-value,
.theme-bgc .store-status,
.theme-bgc .store-address,
.theme-bgc .store-directions,
.theme-bgc .sample-label { font-size: 1.4rem; }
.theme-bgc .sample-btn,
.theme-bgc .filter-toggle-btn,
.theme-bgc .filter-count,
.theme-bgc .product-count,
.theme-bgc .sort-wrapper label,
.theme-bgc .sort-select { font-size: 1.4rem; }
.theme-bgc .active-filters-label,
.theme-bgc .filter-chip,
.theme-bgc .filter-chip-group-label,
.theme-bgc .filter-chip-group .filter-chip-value,
.theme-bgc .clear-all-btn,
.theme-bgc .products-grid[data-cols="list"] .product-brand { font-size: 1.4rem; }
.theme-bgc .products-grid.is-list-view .product-brand,
.theme-bgc .load-more-btn,
.theme-bgc .load-more-info,
.theme-bgc .filter-drawer-footer .btn,
.theme-bgc .floating-filter-btn,
.theme-bgc .floating-filter-count { font-size: 1.4rem; }
.theme-bgc .floating-filter-chip,
.theme-bgc .floating-product-count,
.theme-bgc .floating-clear-btn,
.theme-bgc .filter-clear-btn,
.theme-bgc .filter-section-selected,
.theme-bgc .filter-options-compact .filter-option-label { font-size: 1.4rem; }
.theme-bgc .filter-radio-option-sub .filter-option-label,
.theme-bgc .filter-search-input,
.theme-bgc .price-input-prefix,
.theme-bgc .price-input-group input,
.theme-bgc .price-range-hint,
.theme-bgc .filter-color-label { font-size: 1.4rem; }
.theme-bgc .filter-size-btn span,
.theme-bgc .filter-category-count,
.theme-bgc .filter-category-child .filter-option-label,
.theme-bgc .otp-boxes .otp-box,
.theme-bgc .project-selector-label,
.theme-bgc .project-selector-name { font-size: 1.4rem; }
.theme-bgc .project-cart-count,
.theme-bgc .project-dropdown-header h4,
.theme-bgc .project-dropdown-new,
.theme-bgc .project-create-btn,
.theme-bgc .project-dropdown-search input,
.theme-bgc .project-dropdown-loading { font-size: 1.4rem; }
.theme-bgc .project-dropdown-list .project-item-name,
.theme-bgc .project-dropdown-list .project-item-client,
.theme-bgc .project-dropdown-list .project-item-count,
.theme-bgc .project-clear-btn,
.theme-bgc .project-empty p,
.theme-bgc .section-modal-subtitle { font-size: 1.4rem; }
.theme-bgc .section-product-price,
.theme-bgc .section-qty-input,
.theme-bgc .section-product-unit,
.theme-bgc .section-item-name,
.theme-bgc .section-item-type,
.theme-bgc .section-create-form .form-label { font-size: 1.4rem; }
.theme-bgc .section-create-form .form-input,
.theme-bgc .section-create-form .form-select,
.theme-bgc .section-create-form .form-input::placeholder,
.theme-bgc .section-create-btn,
.theme-bgc .section-skip-btn,
.theme-bgc .section-add-btn { font-size: 1.4rem; }

/* a finish swatch standing in for the spec icon keeps the grid aligned */
.theme-bgc .bgc-finish.spec-icon { flex: none; width: 2.4rem; height: 2.4rem; }
.theme-bgc .product-specs { background: var(--bgc-wash); border-radius: var(--bgc-r); }
.theme-bgc .specs-title {
  font-family: var(--bgc-display);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--bgc-blue-d);
}
.theme-bgc .spec-card { display: flex; align-items: center; gap: 1rem; }
.theme-bgc .spec-icon { color: var(--bgc-blue-d); }
.theme-bgc .spec-label { color: var(--bgc-muted); }
.theme-bgc .spec-value { color: var(--bgc-ink); font-weight: 500; }

/* ---------- 25. hero height follows its content -------------------------
   Every slide was absolutely positioned inside a fixed-height track, so on a
   narrow screen the copy grew past the track and the headline was clipped off
   the top by overflow:hidden. The ACTIVE slide goes back into flow and sets
   the height; the others stay absolute underneath it, so the crossfade is
   unchanged. */
.theme-bgc .bgc-hero__track { display: grid; }
.theme-bgc .bgc-hero__s { grid-area: 1 / 1; position: relative; inset: auto; }

@media (max-width: 767px) {
  .theme-bgc .bgc-hero__say { padding: 2.4rem 2rem 9rem; }
  .theme-bgc .bgc-hero__act { flex-direction: column; align-items: stretch; }
  .theme-bgc .bgc-hero__act .btn { width: 100%; }
  /* the controls sat on top of the second button */
  .theme-bgc .bgc-hero__nav { left: 2rem; right: 2rem; bottom: 2rem; justify-content: space-between; }
}

/* ---------- 26. filters: the last of the indigo -------------------------
   filters-sidebar.php's inline <style> is yielded AFTER themeCss(), so at
   EQUAL specificity it wins on order. These selectors were written with the
   adjacent combinator (`+`); the earlier overrides used the general sibling
   (`~`), which matches the same elements but ties on specificity and
   therefore lost — a ticked filter box stayed indigo. Each rule below
   repeats the partial's own selector with the .theme-bgc prefix, which puts
   it one class ahead. Verified by reading the rules, not by grepping the
   rendered HTML: those hex values sit in the document whatever overrides
   them, so a grep never tells you anything. */
.theme-bgc .filter-title-main svg { color: var(--bgc-blue-d); }

.theme-bgc .filter-checkbox-option input:checked + .filter-checkbox-custom {
  background: var(--bgc-blue);
  border-color: var(--bgc-blue);
}
.theme-bgc .filter-radio-option input:checked + .filter-radio-custom {
  border-color: var(--bgc-blue);
  background: var(--bgc-blue);
}
.theme-bgc .filter-radio-option input:checked + .filter-radio-custom::after {
  background: #FFF;
  /* centred with flex on the parent, so the dot cannot land half a pixel
     high the way a 50% + translate does against a bordered padding box */
  position: static;
  transform: none;
  width: .7rem;
  height: .7rem;
}

/* the border belongs to the input, not the wrapper, so colour that */
.theme-bgc .price-input-group input:focus { border-color: var(--bgc-blue); }
.theme-bgc .price-slider-range { background: var(--bgc-blue); }
.theme-bgc .price-slider-input::-webkit-slider-thumb { border-color: var(--bgc-blue); background: var(--bgc-blue); }
.theme-bgc .price-slider-input::-moz-range-thumb { border-color: var(--bgc-blue); background: var(--bgc-blue); }

.theme-bgc .filter-color-swatch.is-selected .filter-color-circle,
.theme-bgc .filter-color-swatch input:checked + .filter-color-circle {
  border-color: var(--bgc-blue);
  box-shadow: 0 0 0 2px #FFF, 0 0 0 4px rgba(25, 164, 246, .45);
}

/* the mark is the span inside the label, not the label itself */
.theme-bgc .filter-size-btn span {
  min-width: 3.6rem;
  height: 3.6rem;
  padding-inline: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bgc-line-2);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  color: var(--bgc-ink-2);
  font-size: var(--bgc-t-sm);
  font-weight: 500;
}
.theme-bgc .filter-size-btn:hover span { border-color: var(--bgc-blue); color: var(--bgc-blue-d); }
.theme-bgc .filter-size-btn.is-selected span,
.theme-bgc .filter-size-btn input:checked + span {
  background: var(--bgc-blue);
  border-color: var(--bgc-blue);
  color: #FFF;
}

/* was an indigo-to-violet gradient */
.theme-bgc .filter-apply-btn {
  background: var(--bgc-blue);
  box-shadow: none;
  border-radius: var(--bgc-r-sm);
}
.theme-bgc .filter-apply-btn:hover { background: var(--bgc-blue-d); }
.theme-bgc .filter-category-toggle:hover { color: var(--bgc-blue-d); }

/* ---------- 27. FAQ ------------------------------------------------------
   The hero gradient ran from --color-primary to a hardcoded brown (#6b5139),
   so with BGC's blue in front it faded blue-to-brown. */
.theme-bgc .faqpage-hero-bg,
.theme-bgc .faqpage-cta {
  background: linear-gradient(135deg, var(--bgc-blue) 0%, var(--bgc-blue-dd) 100%);
}
.theme-bgc .faqpage-main { background: var(--bgc-canvas); }
.theme-bgc .faqpage-hero-badge {
  background: rgba(255, 255, 255, .18);
  color: #FFF;
  font-family: var(--bgc-display);
  letter-spacing: .12em;
}
.theme-bgc .faqpage-hero-title { color: #FFF; }
.theme-bgc .faqpage-hero-subtitle { color: rgba(255, 255, 255, .88); }
.theme-bgc .faqpage-search-input {
  height: 5.2rem;
  border-radius: var(--bgc-r);
  border: 1px solid transparent;
}
.theme-bgc .faqpage-category-btn.is-active,
.theme-bgc .faqpage-category-btn.active { background: var(--bgc-blue); color: #FFF; }
.theme-bgc .faqpage-category-icon,
.theme-bgc .faqpage-section-icon { background: var(--bgc-wash); color: var(--bgc-blue-d); }
.theme-bgc .faqpage-item { border: 1px solid var(--bgc-line); border-radius: var(--bgc-r); background: var(--bgc-surface); }
.theme-bgc .faqpage-question { color: var(--bgc-ink); }
.theme-bgc .faqpage-answer { color: var(--bgc-ink-2); }

/* ---------- 28. mega menu: keep it open while the pointer travels -------
   The panel opened on .bgc-nav__i:hover and then shut as soon as the pointer
   left the nav item on its way down to the panel. Three things fix it, and
   all three are worth having:

   1. the panel keeps ITSELF open on hover, so it no longer depends on the
      ancestor still being considered hovered;
   2. a transparent bridge across the few pixels between the item and the
      panel, so the pointer is never over "nothing" in between;
   3. :focus-within, so a keyboard user can tab into it at all.          */
.theme-bgc .bgc-nav__i.has-mega-menu:hover > .mega-menu,
.theme-bgc .bgc-nav__i.has-mega-menu:focus-within > .mega-menu,
.theme-bgc .mega-menu:hover,
.theme-bgc .mega-menu:focus-within {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* the bridge — sits above the panel, covers the gap, invisible */
.theme-bgc .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.2rem;
}
/* closing should not be instant either: a short delay means clipping the
   corner of the panel on the way past does not snap it shut */
.theme-bgc .mega-menu {
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.theme-bgc .bgc-nav__i.has-mega-menu:hover > .mega-menu,
.theme-bgc .mega-menu:hover {
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* same treatment for the simple dropdown */
.theme-bgc .bgc-nav__i:hover > .bgc-drop,
.theme-bgc .bgc-nav__i:focus-within > .bgc-drop,
.theme-bgc .bgc-drop:hover,
.theme-bgc .bgc-drop:focus-within { opacity: 1; visibility: visible; transform: none; }
.theme-bgc .bgc-drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: .8rem;
}

/* ---------- 29. masthead logo on real ERP data --------------------------
   The header was sized for bgc.in's wide wordmark. The logo the ERP serves
   is a small, nearly square JPG, and a fixed height left it a stamp in the
   corner. Give it room to grow and a floor on its width, capped so a wide
   lockup still fits. */
.theme-bgc .bgc-mark img {
  height: auto;
  max-height: 5.6rem;
  min-width: 14rem;
  max-width: 26rem;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 1023px) {
  .theme-bgc .bgc-mark img { max-height: 4.4rem; min-width: 11rem; max-width: 19rem; }
}
.theme-bgc .mobile-nav-header .logo img { max-height: 4rem; min-width: 10rem; width: auto; }

/* a real catalogue has 44 departments, not 10 — keep the grid readable and
   stop it running down the page */
.theme-bgc .bgc-cats { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.theme-bgc .bgc-cat { padding: 1.1rem 1.2rem; }
.theme-bgc .bgc-cat__ic { width: 3.8rem; height: 3.8rem; }
.theme-bgc .bgc-cat__ic .material-icons { font-size: 2rem; }
.theme-bgc .bgc-cat__t { font-size: var(--bgc-t-sm); }

/* bgc-megamenu.js drives this; the :hover rules above remain the no-JS
   fallback. Both only ever OPEN the panel, so they cannot fight each other. */
.theme-bgc .bgc-nav__i.is-open > .mega-menu,
.theme-bgc .bgc-nav__i.is-open > .nav-dropdown,
.theme-bgc .bgc-nav__i.is-open > .bgc-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.theme-bgc .bgc-nav__i.is-open > .bgc-nav__a { color: var(--bgc-blue-d); }
/* ...except All Categories, which has a dark fill of its own: the rule above
   ties with its colour rule on specificity and wins on order, so while the
   panel was open the label turned blue on blue. It also lingers, because
   bgc-megamenu.js holds .is-open for a moment after the pointer leaves. */
.theme-bgc .bgc-nav__i.is-open > .bgc-nav__a.bgc-allcat__b { color: #FFF; }

/* ---------- 30. the actual reason the mega menu would not stay open -----
   app.css:1364 sets `pointer-events: none` on .mega-menu and lifts it again
   only under `.nav-item.has-mega-menu:hover`. This theme's markup uses
   .bgc-nav__i, not .nav-item, so the panel kept the disabling half and never
   got the enabling half: it painted correctly but was completely transparent
   to the mouse. Nothing could hover it, which is why neither the CSS hover
   chain nor the JS mouseenter handler ever fired on it.

   Exactly the trap of keeping a base class name for the markup contract —
   the base rules come with it. */
.theme-bgc .bgc-nav__i.is-open > .mega-menu,
.theme-bgc .bgc-nav__i.is-open > .nav-dropdown,
.theme-bgc .bgc-nav__i.is-open > .bgc-drop,
.theme-bgc .bgc-nav__i.has-mega-menu:hover > .mega-menu,
.theme-bgc .bgc-nav__i.has-mega-menu:focus-within > .mega-menu,
.theme-bgc .bgc-nav__i:hover > .bgc-drop,
.theme-bgc .bgc-nav__i:focus-within > .bgc-drop,
.theme-bgc .mega-menu:hover,
.theme-bgc .mega-menu:focus-within,
.theme-bgc .bgc-drop:hover,
.theme-bgc .bgc-drop:focus-within { pointer-events: auto; }

/* closed: inert, so it never swallows clicks meant for the page behind it */
.theme-bgc .mega-menu,
.theme-bgc .bgc-drop { pointer-events: none; }

/* ---------- 31. select dropdown: one line per option --------------------
   The list was pinned to the trigger's width (left:0 + right:0), so on a
   narrow trigger every option wrapped — "Featured" came out as "Feature / d"
   and "Price: Low to High" over four lines.

   The list now sizes to its own content and grows rightwards from the
   trigger's left edge, with a floor of the trigger width so it never looks
   detached, and a ceiling so a long option cannot run off the page. Setting
   an explicit width makes the `right` offset inert, which is what lets it
   grow. */
.theme-bgc .bgc-select__l {
  width: max-content;
  min-width: 100%;
  max-width: min(34rem, calc(100vw - 4rem));
  right: auto;
}
.theme-bgc .bgc-select__o {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* near the right edge the list opens leftwards instead of off-screen */
.theme-bgc .bgc-select.is-flip .bgc-select__l { left: auto; right: 0; }

/* the sort control: the earlier width used .bgc-toolbar, but the listing's
   own toolbar is .shop-toolbar, so it never applied and the trigger stayed
   as narrow as its text */
.theme-bgc .shop-toolbar .bgc-select,
.theme-bgc .sort-wrapper .bgc-select { width: 20rem; min-width: 20rem; }
.theme-bgc .shop-toolbar .bgc-select__t,
.theme-bgc .sort-wrapper .bgc-select__t { height: var(--bgc-ctl-sm); font-size: var(--bgc-t-sm); }
.theme-bgc .sort-wrapper { display: flex; align-items: center; gap: .8rem; }
.theme-bgc .sort-wrapper label { white-space: nowrap; color: var(--bgc-muted); }

@media (max-width: 767px) {
  .theme-bgc .shop-toolbar .bgc-select,
  .theme-bgc .sort-wrapper .bgc-select { width: 100%; min-width: 0; }
}

/* ======================================================================
   32. SINGLE-PAGE MODE — the order counter
   ====================================================================== */
.theme-bgc .bgc-ctr { padding-block: 2.8rem 5rem; }
.theme-bgc .bgc-ctr__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.theme-bgc .bgc-ctr__who { display: flex; align-items: center; gap: 1.2rem; }
.theme-bgc .bgc-ctr__hi { font-size: var(--bgc-t-sm); color: var(--bgc-muted); }
.theme-bgc .bgc-ctr__hi strong { color: var(--bgc-ink); }

/* the bar stays put, because a counter is used with one hand on a scanner */
.theme-bgc .bgc-ctr__bar {
  position: sticky;
  top: 8.4rem;
  z-index: 20;
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  box-shadow: var(--bgc-shadow);
}
.theme-bgc .bgc-ctr__field { position: relative; flex: 1; display: flex; align-items: center; }
.theme-bgc .bgc-ctr__mag {
  position: absolute;
  left: 1.3rem;
  color: var(--bgc-faint);
  pointer-events: none;
}
.theme-bgc .bgc-ctr__field .bgc-in {
  height: 5.2rem;
  padding-left: 4.4rem;
  padding-right: 4rem;
  font-size: 1.7rem;
}
.theme-bgc .bgc-ctr__bar .bgc-btn { height: 5.2rem; padding-inline: 2rem; }
.theme-bgc .bgc-ctr__spin {
  position: absolute;
  right: 1.4rem;
  width: 1.8rem; height: 1.8rem;
  border: 2px solid var(--bgc-line-2);
  border-top-color: var(--bgc-blue);
  border-radius: 50%;
  animation: bgc-spin .7s linear infinite;
}

.theme-bgc .bgc-ctr__status {
  margin: 1.2rem 0 0;
  padding: 1rem 1.4rem;
  border-radius: var(--bgc-r-sm);
  border-left: 4px solid var(--bgc-blue);
  background: var(--bgc-wash);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .bgc-ctr__status.is-ok   { border-left-color: var(--bgc-good);  background: var(--bgc-good-sf);  color: #0B6B36; }
.theme-bgc .bgc-ctr__status.is-warn { border-left-color: var(--bgc-amber); background: var(--bgc-amber-sf); color: var(--bgc-amber-d); }

/* camera — a floating modal, built on the dialog's shell so the two match.
   It used to be a panel in the page, which shoved the catalogue down and put
   the viewfinder wherever the toolbar was; on a phone that was usually below
   the fold. */
.theme-bgc .bgc-scanm {
  position: fixed;
  inset: 0;
  z-index: var(--bgc-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.theme-bgc .bgc-scanm[hidden] { display: none; }
.theme-bgc .bgc-scanm__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 59, 84, .5);
}
/* Same shell as BGCDialog - white surface, ink title, the dialog's own X and
   footer - so the scanner reads as one of the theme's modals rather than a
   dark panel of its own. Only the viewfinder is dark, because it is video. */
.theme-bgc .bgc-scanm__box {
  position: relative;
  width: min(52rem, 100%);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  border-radius: var(--bgc-r-lg);
  background: var(--bgc-surface);
  box-shadow: var(--bgc-shadow);
  overflow: hidden;
}
.theme-bgc .bgc-scanm__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 2rem 2.4rem 1.6rem;
}
.theme-bgc .bgc-scanm__t {
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-xl);
  color: var(--bgc-ink);
}
/* the dialog's X, in the header row rather than pinned to the corner */
.theme-bgc .bgc-scanm__x { position: static; }

/* The viewfinder is the only dark surface, inset like the dialog's body.
   It keeps a 4:3 box whether or not a frame has arrived: a <video> with no
   stream has no intrinsic size, so the modal opened as a thin slice and
   jumped to full height on the first frame. */
.theme-bgc .bgc-scanm .bgc-ctr__cam {
  position: relative;
  margin: 0 2.4rem;
  /* Square, not 4:3 - the thing being framed is a square QR on the side of a
     box, and a letterbox gave the reticle almost no room above and below.
     Taller again on a phone, where the camera is portrait anyway. */
  aspect-ratio: 1 / 1;
  max-height: 62vh;
  border-radius: var(--bgc-r);
  overflow: hidden;
}
.theme-bgc .bgc-scanm .bgc-ctr__cam video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* taller than wide on a phone, where the camera is portrait. It has to sit
   after the rule above, not in an earlier media block: same specificity, so
   source order decides and the earlier one simply lost. */
@media (max-width: 639px) {
  .theme-bgc .bgc-scanm .bgc-ctr__cam { aspect-ratio: 3 / 4; max-height: 58vh; }
}

/* skeleton, until the first frame */
.theme-bgc .bgc-scanm__skel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: var(--bgc-blue-dd);
}
.theme-bgc .bgc-scanm__skelbox {
  width: min(54%, 22rem);
  aspect-ratio: 1;
  border-radius: var(--bgc-r);
  background: linear-gradient(100deg,
              rgba(255,255,255,.06) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 70%);
  background-size: 220% 100%;
  animation: bgcScanSkel 1.2s ease-in-out infinite;
}
.theme-bgc .bgc-scanm__skeltext { font-size: var(--bgc-t-sm); color: rgba(255, 255, 255, .8); }
@keyframes bgcScanSkel { from { background-position: 180% 0; } to { background-position: -40% 0; } }

/* the reticle belongs to a running camera, not to the wait before one */
.theme-bgc .bgc-scanm .bgc-ctr__reticle { opacity: 0; transition: opacity .2s ease; }
.theme-bgc .bgc-scanm.is-live .bgc-ctr__reticle { opacity: 1; }
.theme-bgc .bgc-scanm.is-live .bgc-scanm__skel { display: none; }
.theme-bgc .bgc-scanm .bgc-ctr__camfoot {
  padding: 1.6rem 2.4rem 2rem;
  color: var(--bgc-muted);
}
.theme-bgc .bgc-ctr__cam { position: relative; background: #000; }
.theme-bgc .bgc-ctr__cam video {
  display: block;
  width: 100%;
  max-height: 52vh;
  object-fit: cover;
}
/* the reticle is the logo's tile, so even the scanner looks like this shop */
.theme-bgc .bgc-ctr__reticle {
  position: absolute;
  top: 50%; left: 50%;
  width: min(54vw, 26rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: var(--bgc-r);
  box-shadow: 0 0 0 100vmax rgba(8, 59, 84, .55);
  outline: 3px solid var(--bgc-blue);
  outline-offset: -3px;
}
.theme-bgc .bgc-ctr__camfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1.2rem 1.6rem;
  font-size: var(--bgc-t-sm);
  color: rgba(255, 255, 255, .85);
}

/* results */
.theme-bgc .bgc-ctr__results { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.theme-bgc .bgc-ctr__row {
  display: grid;
  grid-template-columns: 6.4rem 1fr auto auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  transition: border-color .16s ease, background .16s ease;
}
.theme-bgc .bgc-ctr__row:hover { border-color: var(--bgc-blue-ll); }
.theme-bgc .bgc-ctr__row.is-added { border-color: var(--bgc-good); background: var(--bgc-good-sf); }
.theme-bgc .bgc-ctr__im {
  width: 6.4rem; height: 6.4rem;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  overflow: hidden;
}
.theme-bgc .bgc-ctr__im img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.theme-bgc .bgc-ctr__b { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.theme-bgc .bgc-ctr__n { font-size: var(--bgc-t-md); font-weight: 500; color: var(--bgc-ink); }
.theme-bgc .bgc-ctr__p {
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-xl);
  font-weight: 700;
  color: var(--bgc-blue-d);
}
.theme-bgc .bgc-ctr__empty {
  padding: 3.2rem 2rem;
  text-align: center;
  border: 1px dashed var(--bgc-line-2);
  border-radius: var(--bgc-r);
  background: var(--bgc-surface);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-muted);
}

.theme-bgc .bgc-ctr__cart {
  position: sticky;
  bottom: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 2rem;
  padding: 1.4rem 1.8rem;
  border-radius: var(--bgc-r);
  background: var(--bgc-blue-dd);
  color: #FFF;
  box-shadow: var(--bgc-shadow-up);
}
.theme-bgc .bgc-ctr__cart strong { font-family: var(--bgc-display); font-size: var(--bgc-t-xl); }

/* sign-in */
/* align-items:start, not center: the register card is much taller than the
   copy beside it, and centring left the text floating in the middle of a
   large empty column. */
.theme-bgc .bgc-signin { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: start; }
@media (min-width: 900px) { .theme-bgc .bgc-signin { grid-template-columns: 1fr 44rem; gap: 4rem; } }
.theme-bgc .bgc-signin__box { box-shadow: var(--bgc-shadow); }

@media (max-width: 767px) {
  .theme-bgc .bgc-ctr__bar { flex-direction: column; top: 7rem; }
  .theme-bgc .bgc-ctr__bar .bgc-btn { width: 100%; }
  .theme-bgc .bgc-ctr__row { grid-template-columns: 5.2rem 1fr; }
  .theme-bgc .bgc-ctr__im { width: 5.2rem; height: 5.2rem; }
  .theme-bgc .bgc-ctr__qty,
  .theme-bgc .bgc-ctr__add { grid-column: 2; justify-self: start; }
  .theme-bgc .bgc-ctr__add { width: 100%; }
}

/* ---------- 33. auth tabs + masthead auth buttons ----------------------- */
.theme-bgc .bgc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-bottom: 2rem;
  padding: .4rem;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-sunken);
}
.theme-bgc .bgc-tabs__t {
  height: var(--bgc-ctl);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bgc-muted);
  font-family: var(--bgc-body);
  font-size: var(--bgc-ctl-fs);
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.theme-bgc .bgc-tabs__t:hover { color: var(--bgc-blue-d); }
.theme-bgc .bgc-tabs__t.is-on {
  background: var(--bgc-surface);
  color: var(--bgc-blue-d);
  box-shadow: var(--bgc-shadow);
}
.theme-bgc .bgc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 480px) { .theme-bgc .bgc-two { grid-template-columns: 1fr; } }

/* masthead auth buttons — the dropdown is gone, so these are the whole of it */
.theme-bgc .bgc-head__auth { white-space: nowrap; }

/* signed-in: cart | who you are | sign out, as one group */
.theme-bgc .bgc-user {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  max-width: 22rem;
  padding: .4rem .9rem .4rem .4rem;
  border: 1px solid var(--bgc-line);
  border-radius: 999px;
  background: var(--bgc-sunken);
}
.theme-bgc .bgc-user__av {
  flex: none;
  width: 2.8rem; height: 2.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bgc-blue-d);
  color: #FFF;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-sm);
  font-weight: 700;
  line-height: 1;
}
.theme-bgc .bgc-user__n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  color: var(--bgc-ink);
}
.theme-bgc .bgc-head__r { gap: .8rem; }

/* MOBILE
   The masthead is logo + buttons and nothing else, so it has to survive a
   narrow screen without the hamburger that used to absorb the overflow. */
@media (max-width: 640px) {
  .theme-bgc .bgc-head__row { min-height: 6rem; gap: .8rem; flex-wrap: nowrap; }
  .theme-bgc .bgc-head__l { min-width: 0; flex: 1; }
  .theme-bgc .bgc-mark img { max-height: 3.6rem; min-width: 0; max-width: 100%; }
  .theme-bgc .bgc-head__r { gap: .5rem; flex: none; }
  .theme-bgc .bgc-head__auth {
    height: 3.6rem;
    padding-inline: 1.1rem;
    font-size: var(--bgc-t-sm);
  }
  /* the utility strip's email/hours do not fit beside a phone number */
  .theme-bgc .bgc-util__row { min-height: 3.2rem; justify-content: center; }
  .theme-bgc .bgc-util__l { display: none; }
  .theme-bgc .bgc-util__r { gap: 1rem; font-size: var(--bgc-t-xs); }
}
@media (max-width: 400px) {
  /* at this width two full words plus a logo is too much: Register becomes
     the quieter of the two and loses its label, Sign in keeps it */
  .theme-bgc .bgc-head__auth { padding-inline: .9rem; }
  .theme-bgc .bgc-user { max-width: none; padding: .3rem; border-color: transparent; background: none; }
  .theme-bgc .bgc-user__n { display: none; }
  .theme-bgc .bgc-util__r span:not(.bgc-util__sep) { display: none; }
}

/* The utility strip is the only route to the help desk on a phone now that
   the drawer is gone, so it stays visible — reduced to the number alone. */
@media (max-width: 1023px) {
  .theme-bgc .bgc-util__row { min-height: 3.4rem; justify-content: center; gap: 1.2rem; }
  .theme-bgc .bgc-util__l { display: none; }
  .theme-bgc .bgc-util__r { gap: 1.2rem; font-size: var(--bgc-t-sm); }
  /* hours and the email line do not fit beside a number; the number is what
     someone actually acts on */
  .theme-bgc .bgc-util__r > span:not(.bgc-util__sep),
  .theme-bgc .bgc-util__r > .bgc-util__sep { display: none; }
  .theme-bgc .bgc-util__r a[href^="mailto:"] { display: none; }
  .theme-bgc .bgc-util__r a[href^="tel:"] { font-weight: 600; color: #FFF; }
}

/* ---------- 34. make the hidden attribute actually hide -----------------
   [hidden] is a UA rule at the very bottom of the cascade, so ANY author
   rule that sets display beats it. app.css:5281 gives .auth-form
   display:flex, which meant toggling the Register/Sign in panes set the
   attribute correctly and changed nothing on screen — both forms stayed up.
   One guard, because this will bite anywhere else the attribute is used. */
.theme-bgc [hidden] { display: none !important; }

/* an "optional" marker that does not shout */
.theme-bgc .bgc-opt {
  margin-left: .5rem;
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  color: var(--bgc-faint);
  text-transform: none;
  letter-spacing: 0;
}

/* inline result line for the register form */
.theme-bgc .bgc-formnote {
  margin: 0 0 1.2rem;
  font-size: var(--bgc-t-sm);
  line-height: 1.5;
}
.theme-bgc .bgc-formnote:empty { margin: 0; }
.theme-bgc .bgc-formnote.is-warn {
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--bgc-error);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-error-sf);
  color: #8E1B2F;
}
.theme-bgc .bgc-formnote.is-ok {
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--bgc-good);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-good-sf);
  color: #0B6B36;
}

/* ---------- 35. required-field marker ----------------------------------
   Driven off the `required` attribute with :has(), not written into each
   label. A hand-typed asterisk drifts the moment a field's required-ness
   changes — and a label claiming * on an optional field (or missing it on a
   compulsory one) is worse than none. This cannot disagree with the form.

   :has() is in every current browser; where it is missing the asterisk is
   simply absent, which costs nothing because the field still validates. */
.theme-bgc .form-group:has(> input[required]) > .form-label::after,
.theme-bgc .form-group:has(> .input-password-wrapper > input[required]) > .form-label::after,
.theme-bgc .form-group:has(> textarea[required]) > .form-label::after,
.theme-bgc .form-group:has(> select[required]) > .form-label::after,
.theme-bgc .bgc-field:has(> input[required]) > .bgc-label::after {
  content: "*";
  margin-left: .3rem;
  color: var(--bgc-error);
  font-weight: 700;
}

/* a required tickbox has no .form-label to hang it on */
.theme-bgc .checkbox-label:has(input[required]) .checkbox-text::after {
  content: "*";
  margin-left: .3rem;
  color: var(--bgc-error);
  font-weight: 700;
}

/* The key, so the asterisk means something the first time it is seen.
   Right-aligned and quiet: left-aligned with a red mark at the start of the
   line, it read as an error message sitting above a form nobody had filled
   in yet. It is a caption, not a warning, so it sits where a caption goes
   and stays out of the reading order of the fields. */
.theme-bgc .bgc-reqkey {
  display: block;
  margin: -.4rem 0 1.6rem;
  text-align: right;
  font-size: var(--bgc-t-sm);
  line-height: 1;
  color: var(--bgc-faint);
  letter-spacing: .01em;
}
.theme-bgc .bgc-reqkey b {
  color: var(--bgc-error);
  font-weight: 700;
  opacity: .75;
}

/* ---------- 36. GSTIN field -------------------------------------------
   Fifteen dashes spread across the whole field, so the length is obvious
   and every position is marked. A placeholder cannot do this - it is one
   run of text at the left, so the marks bunch together - hence a span laid
   over the field, distributed edge to edge.

   bgc-gstin.js sets the input's letter-spacing so typed characters land ON
   the marks rather than drifting past them; the maths is in that file. */
.theme-bgc .bgc-gstf { position: relative; display: block; }

.theme-bgc .bgc-gstf__guide {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;            /* the input underneath stays clickable */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--bgc-ctl-fs);
  font-weight: 600;
  line-height: 1;
  color: var(--bgc-faint);
}
.theme-bgc .bgc-gstf__guide i {
  font-style: normal;
  text-align: center;
  /* a dash sits mid-height, so it needs no baseline nudge - an underscore
     did, which is why this used to carry a translate */
}
/* a mark disappears only when its own position has been typed, so the
   remaining underscores keep showing how much is still to come */
.theme-bgc .bgc-gstf__guide i.is-used { opacity: 0; }

.theme-bgc .bgc-gstf input[name="gstin"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ---------- 37. what the account gets you ------------------------------
   Fills the column beside the register card, which was empty on a wide
   screen. Each line is something this build actually does. */
.theme-bgc .bgc-why { margin: 2.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.6rem; }
.theme-bgc .bgc-why li { display: flex; align-items: flex-start; gap: 1.2rem; }
.theme-bgc .bgc-why__ic {
  flex: none;
  width: 4.2rem; height: 4.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
}
.theme-bgc .bgc-why__ic .material-icons { font-size: 2.1rem; }
.theme-bgc .bgc-why li > span:last-child { font-size: var(--bgc-t-sm); color: var(--bgc-muted); line-height: 1.6; }
.theme-bgc .bgc-why b { display: block; font-size: var(--bgc-t-md); font-weight: 600; color: var(--bgc-ink); margin-bottom: .2rem; }

.theme-bgc .bgc-helpdesk {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-top: 2.8rem;
  padding: 1.6rem;
  border: 1px solid #F6DCB7;
  border-radius: var(--bgc-r);
  background: var(--bgc-amber-sf);
  font-size: var(--bgc-t-sm);
  line-height: 1.6;
  color: var(--bgc-ink-2);
}
.theme-bgc .bgc-helpdesk__ic {
  flex: none;
  width: 4.2rem; height: 4.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bgc-r-sm);
  background: rgba(246, 147, 26, .18);
  color: var(--bgc-amber-d);
}
.theme-bgc .bgc-helpdesk__ic .material-icons { font-size: 2.1rem; }
.theme-bgc .bgc-helpdesk b { display: block; color: var(--bgc-amber-d); margin-bottom: .2rem; }
.theme-bgc .bgc-helpdesk a { color: var(--bgc-blue-d); font-weight: 600; white-space: nowrap; }

/* ---------- 38. forgot password, inline -------------------------------- */
.theme-bgc .link-forgot {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--bgc-body);
  font-size: var(--bgc-t-sm);
  font-weight: 500;
  color: var(--bgc-blue-d);
  cursor: pointer;
}
.theme-bgc .link-forgot:hover { text-decoration: underline; }
.theme-bgc .bgc-backlink { display: block; margin: 1.4rem auto 0; }
.theme-bgc .bgc-formlead {
  margin: 0 0 1.6rem;
  font-size: var(--bgc-t-sm);
  line-height: 1.6;
  color: var(--bgc-muted);
}

/* ------------------------------------------------------------------ scan band
   "Scan the box, order the box" on the home page. One row on a desktop, and on
   a phone - where the camera actually is - the text stacks and the button goes
   full width, because that is the one thing on the band you are meant to hit. */
/* It sits between the masthead and the hero now, so it carries the gap
   itself rather than hanging off whatever came before it. */
.theme-bgc .bgc-sec--band { padding-block: 1.6rem 0; }
.theme-bgc .bgc-sec--band + .bgc-sec--tight { padding-top: 1.6rem; }

.theme-bgc .bgc-scanband {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  padding: 1.8rem 2rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r);
  background: var(--bgc-wash);
}
/* no icon tile beside it any more - the button already carries the QR
   mark, and the same glyph twice in one band read as a mistake */
.theme-bgc .bgc-scanband__b { flex: 1 1 26rem; min-width: 0; }
.theme-bgc .bgc-scanband__t {
  margin: 0;
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-lg);
  color: var(--bgc-ink);
}
.theme-bgc .bgc-scanband__d {
  margin: .4rem 0 0;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-muted);
}
@media (max-width: 639px) {
  .theme-bgc .bgc-scanband { padding: 1.6rem; gap: 1.2rem; }
  .theme-bgc .bgc-scanband #bgc-ctr-scan { flex: 1 0 100%; justify-content: center; }
}

/* ------------------------------------------------------------- mobile menu
   The category bar is desktop-only, so under 1024px this drawer is the whole
   navigation: departments, pages, the sign-in pair and the two trade actions.
   The burger disappears at exactly the width the bar appears, so there is
   never a screen with both and never one with neither. */
.theme-bgc .bgc-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  margin-left: -.8rem;             /* optical: the icon's own padding is air */
  border: 0;
  border-radius: var(--bgc-r-sm);
  background: transparent;
  color: var(--bgc-ink);
  cursor: pointer;
}
.theme-bgc .bgc-burger:hover { background: var(--bgc-wash); }
@media (min-width: 1024px) { .theme-bgc .bgc-burger { display: none; } }

.theme-bgc .bgc-mnav { position: fixed; inset: 0; z-index: var(--bgc-z-drawer); }
.theme-bgc .bgc-mnav[hidden] { display: none; }
.theme-bgc .bgc-mnav__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 59, 84, .55);
  opacity: 0;
  transition: opacity .2s ease;
}
.theme-bgc .bgc-mnav.is-on .bgc-mnav__veil { opacity: 1; }
.theme-bgc .bgc-mnav__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  width: min(86vw, 34rem);
  background: var(--bgc-surface);
  box-shadow: 0 0 40px rgba(8, 59, 84, .25);
  transform: translateX(-100%);
  transition: transform .22s ease;
}
.theme-bgc .bgc-mnav.is-on .bgc-mnav__panel { transform: translateX(0); }
.theme-bgc .bgc-mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .bgc-mnav__ttl {
  font-family: var(--bgc-display);
  font-size: var(--bgc-t-md);
  color: var(--bgc-ink);
}
.theme-bgc .bgc-mnav__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  border: 1px solid var(--bgc-line);
  border-radius: var(--bgc-r-sm);
  background: var(--bgc-surface);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .bgc-mnav__x:hover { background: var(--bgc-wash); color: var(--bgc-ink); }

.theme-bgc .bgc-mnav__body { flex: 1; overflow-y: auto; padding: 1.2rem 0 1.6rem; }
.theme-bgc .bgc-mnav__who {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 1.6rem 1.4rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .bgc-mnav__whon {
  min-width: 0;
  font-size: var(--bgc-t-md);
  font-weight: 500;
  color: var(--bgc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-bgc .bgc-mnav__auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  padding: 0 1.6rem 1.4rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--bgc-line);
}
.theme-bgc .bgc-mnav__auth .bgc-btn { justify-content: center; }

/* one row height for every tappable line in here: 4.8rem clears the 44px
   a thumb needs, which the 2rem text links in the footer never did */
.theme-bgc .bgc-mnav__a,
.theme-bgc .bgc-mnav__sec,
.theme-bgc .bgc-mnav__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  min-height: 4.8rem;
  padding: 0 1.6rem;
  border: 0;
  background: transparent;
  font-size: var(--bgc-t-md);
  color: var(--bgc-ink);
  text-align: left;
  cursor: pointer;
}
.theme-bgc .bgc-mnav__a:hover,
.theme-bgc .bgc-mnav__sec:hover,
.theme-bgc .bgc-mnav__sub:hover { background: var(--bgc-wash); }
.theme-bgc .bgc-mnav__a.is-on { color: var(--bgc-blue-d); font-weight: 500; }
.theme-bgc .bgc-mnav__a--out { color: var(--bgc-error); }
.theme-bgc .bgc-mnav__sec { font-weight: 500; }
.theme-bgc .bgc-mnav__sec[aria-expanded="true"] svg { transform: rotate(180deg); }
.theme-bgc .bgc-mnav__sec svg { flex: 0 0 auto; transition: transform .18s ease; }
.theme-bgc .bgc-mnav__subs {
  background: var(--bgc-wash);
  border-block: 1px solid var(--bgc-line);
}
.theme-bgc .bgc-mnav__subs[hidden] { display: none; }
.theme-bgc .bgc-mnav__sub {
  min-height: 4.2rem;
  padding-left: 2.8rem;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}
.theme-bgc .bgc-mnav__sub--all { font-weight: 500; color: var(--bgc-blue-d); }

.theme-bgc .bgc-mnav__foot {
  display: grid;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-top: 1px solid var(--bgc-line);
  background: var(--bgc-surface);
}
.theme-bgc .bgc-mnav__foot .bgc-btn { justify-content: center; }
.theme-bgc .bgc-mnav__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 4.4rem;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
}

/* ------------------------------------------------- phones: the corrections
   Each of these was measured at 390px and 320px in a real browser, not
   eyeballed; the numbers in the comments are what was wrong. */

/* iOS Safari zooms the page in when a focused field is under 16px and then
   leaves it zoomed, so every form in the theme - all at 15px - moved the
   layout under the customer's thumb on the first tap. Only the type grows;
   the rows are already 44px. Checkboxes and radios are left alone: their
   size is the control, not the type. */
@media (max-width: 639px) {
  .theme-bgc input:not([type="checkbox"]):not([type="radio"]),
  .theme-bgc select,
  .theme-bgc textarea { font-size: 16px; }
}

/* architect.css sets .form-hint to 0.85rem, written against a 16px root. This
   theme's root is 10px, so "Optional, but required for order updates" under
   the register fields rendered at 8.5px. */
.theme-bgc .form-hint { font-size: var(--bgc-t-sm); }

/* The quantity field sat 25px tall inside a 36px stepper, and its own dividing
   borders were switched off - app.css carries `height: 25px !important` and
   `border: 0 !important` on .qty-input, which the rule above could not reach.
   Beaten here rather than edited there: app.css is the base theme's sheet and
   every page in the theme loads it. */
.theme-bgc .quantity-selector .qty-input,
.theme-bgc .quickview-quantity .qty-input,
.theme-bgc .cart-item-quantity .qty-input,
.theme-bgc .viz-qty-control .qty-input,
.theme-bgc .mini-cart-item-qty .mini-qty-input {
  height: 100% !important;
  border-left: 1px solid var(--bgc-line) !important;
  border-right: 1px solid var(--bgc-line) !important;
}

/* quickview.css gives this one a pill of its own - a grey fill, a 23px radius
   and 7px of side padding - so the same control was 177px wide there and
   163px everywhere else, on a different background. The shared rule above
   already draws the box; this just stops the old one fighting it. */
.theme-bgc .quickview-quantity {
  background: var(--bgc-surface);
  border-radius: var(--bgc-r-sm);
  padding: 0;
}

/* The gallery page is not in BGC's menu, but it answers on its URL, and it
   had no styling of its own here at all: a 10px subtitle and 31px-tall filter
   buttons that no thumb could hit. */
.theme-bgc .gallery-subtitle { font-size: var(--bgc-t-md); color: var(--bgc-muted); }
.theme-bgc .gallery-themes { display: flex; flex-wrap: wrap; gap: .8rem; }
.theme-bgc .gallery-themes .theme-btn {
  min-height: 4rem;
  padding: 0 1.6rem;
  border: 1px solid var(--bgc-line-2);
  border-radius: 999px;
  background: var(--bgc-surface);
  font-size: var(--bgc-t-sm);
  color: var(--bgc-ink-2);
  cursor: pointer;
}
.theme-bgc .gallery-themes .theme-btn.active {
  border-color: var(--bgc-blue);
  background: var(--bgc-wash);
  color: var(--bgc-blue-d);
}

/* ------------------------------------------------ shop columns on a phone
   The column switcher remembers what you picked, and its rules
   (.products-grid[data-cols="6"] .products-wrapper) out-specify the
   responsive ones in listing.php, so a six-column choice made at a desk came
   back on a phone as 48px cards. Capped by viewport instead. List view is
   left alone - it is one column everywhere. */
@media (max-width: 767px) {
  .theme-bgc .products-grid[data-cols="3"] .products-wrapper,
  .theme-bgc .products-grid[data-cols="4"] .products-wrapper,
  .theme-bgc .products-grid[data-cols="5"] .products-wrapper,
  .theme-bgc .products-grid[data-cols="6"] .products-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .theme-bgc .products-grid[data-cols="4"] .products-wrapper,
  .theme-bgc .products-grid[data-cols="5"] .products-wrapper,
  .theme-bgc .products-grid[data-cols="6"] .products-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------------------------------- autofilled fields
   Chrome paints an autofilled value in its own font until the field is
   touched, which is why the email read in one typeface on load and in the
   theme's the moment it was focused. The type of an autofilled input is only
   reachable through ::first-line - font-family on the input itself is
   ignored while the autofill style is on - so the whole correction lives
   there, including the 16px that keeps iOS from zooming. */
.theme-bgc input:-webkit-autofill::first-line {
  font-family: var(--bgc-body);
  font-size: var(--bgc-ctl-fs);
  font-weight: 400;
  color: var(--bgc-ink);
}
@media (max-width: 639px) {
  .theme-bgc input:-webkit-autofill::first-line { font-size: 16px; }
}

/* ------------------------------------------- long codes must not push a page
   A BGC product name ends in its variation code - OR.CRK.ETHRL.27CM.PLYA.PLT
   .SWD.98052035 - which is one unbreakable token. Anywhere it sits in a flex
   row it refuses to shrink (a flex child's min-width is auto), so on a phone
   it widened its card, the card widened the page, and the whole checkout
   scrolled sideways. Two rules: let the token break, and let the column it
   lives in be narrower than its content. */
.theme-bgc .checkout-item-name,
.theme-bgc .cart-item-name,
.theme-bgc .mini-cart-item-name,
.theme-bgc .order-item-name,
.theme-bgc .wishlist-item-name,
.theme-bgc .product-name,
.theme-bgc .quickview-title,
.theme-bgc .product-title,
.theme-bgc .bgc-scanq__n {
  overflow-wrap: anywhere;
  min-width: 0;
  /* checkout.css truncates its name with nowrap + ellipsis, which only works
     if the column is bounded - it was not, so the row grew instead of the
     text being cut. A trade customer needs the whole code anyway, so these
     wrap rather than truncate. */
  white-space: normal;
}
.theme-bgc .checkout-item-details,
.theme-bgc .checkout-item-info,
.theme-bgc .cart-item-details,
.theme-bgc .cart-item-info,
.theme-bgc .mini-cart-item-info,
.theme-bgc .mini-cart-item-details,
.theme-bgc .order-item-details,
.theme-bgc .order-item-info { min-width: 0; }

/* ------------------------------------------- mini cart: work in progress --
   The wait is marked at the total and nowhere else - see below. There was an
   "Updating..." badge with a hairline in the drawer header as well, which
   said the same thing twice, a screen apart. */
@keyframes bgcSpin { to { transform: rotate(360deg); } }

/* The total is where a quantity change lands, so the wait is marked there
   too: a spinner immediately before the figure, and the figure itself held
   inactive until the new one arrives. It is not a number to read or act on
   while it is being recalculated, so it is greyed and unselectable rather
   than animated - a moving figure invites you to read it. The box keeps its
   size, so nothing in the footer jumps when it settles. */
.theme-bgc .mini-cart-subtotal-wrap {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.theme-bgc .mini-cart-total-spin {
  display: none;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--bgc-line-2);
  border-top-color: var(--bgc-blue);
  border-radius: 50%;
  animation: bgcSpin .7s linear infinite;
}
.theme-bgc .mini-cart-drawer.is-busy .mini-cart-total-spin { display: block; }

.theme-bgc .mini-cart-drawer.is-busy #mini-cart-subtotal {
  color: var(--bgc-faint);
  pointer-events: none;
  user-select: none;
  transition: color .15s ease;
}

.theme-bgc .mini-cart-drawer.is-busy .mini-cart-footer-row {
  opacity: .55;
  transition: opacity .15s ease;
}

/* checkout.css gives the terms line `margin: 1.5rem 0 0`, so it finished hard
   against the bottom edge of the summary card - the Place Order button, one
   line of small print, and then nothing. */
.theme-bgc .checkout-terms {
  margin-top: 1.4rem;
  margin-bottom: .6rem;
  font-size: var(--bgc-t-sm);
}
.theme-bgc #btn-place-order { margin-top: .4rem; }

/* an article already in the order: the button is still the way to change it,
   but it should not read like a fresh add */
.theme-bgc .product-add-cart.is-in-cart {
  border-color: var(--bgc-good, #1F7A4C);
  background: var(--bgc-good-sf, #E8F5EE);
  color: #0B6B36;
}
.theme-bgc .product-add-cart.is-in-cart:hover {
  background: var(--bgc-good, #1F7A4C);
  color: #FFF;
}

/* a figure the server is still working out - the cart drawer and the checkout
   summary both use this */
.theme-bgc .bgc-amount { display: inline-flex; align-items: center; gap: .8rem; }
.theme-bgc .bgc-amount__spin {
  display: none;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--bgc-line-2);
  border-top-color: var(--bgc-blue);
  border-radius: 50%;
  animation: bgcSpin .7s linear infinite;
}
.theme-bgc .is-busy .bgc-amount__spin { display: block; }
.theme-bgc .is-busy .bgc-amount > span:last-child,
.theme-bgc .checkout-summary.is-busy .checkout-summary-row span,
/* the line totals in Review Items move with the cart too, so they are held
   back in the same way rather than sitting there as settled figures */
.theme-bgc .checkout-items-body.is-busy .checkout-item-total,
.theme-bgc .checkout-items-body.is-busy .checkout-item-meta {
  color: var(--bgc-faint);
  pointer-events: none;
  user-select: none;
  transition: color .15s ease;
}

/* "Edit cart" sits on the Review Items header, which is itself the collapse
   toggle - so it needs to stand off it rather than fill it */
.theme-bgc .checkout-edit-cart { margin-left: auto; margin-right: 1.2rem; flex: none; }

/* --------------------------------------------- modal: head and foot stay put
   checkout.css scrolls the whole .modal-content, so on a short screen the
   title scrolled away and "Save & Use This Address" sat somewhere below the
   fold with nothing to say it was there. Only the fields scroll now. */
/* Scoped to modals that actually have a scroller inside them: cart/index.php
   has a .modal-content of its own with no .modal-scroll, and taking its
   overflow away would clip it instead of letting it scroll. */
.theme-bgc .modal .modal-content:has(.modal-scroll) {
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* the scroller is .modal-scroll, further in */
}
.theme-bgc .modal:has(.modal-scroll) .modal-header { flex: 0 0 auto; }
.theme-bgc .modal:has(.modal-scroll) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;                  /* .modal-scroll carries it, so it scrolls with the fields */
}
.theme-bgc .modal:has(.modal-scroll) .modal-body > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.theme-bgc .modal .modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.6rem 2rem;
}
/* the actions were a row inside the scroll with 15px above it, 15px of border
   padding and another 15px of body padding below - 45px of air around two
   buttons. Pinned, and trimmed. */
.theme-bgc .modal:has(.modal-scroll) .form-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 1.2rem 2rem;
  border-top: 1px solid var(--bgc-line);
  background: var(--bgc-surface);
}

/* A .form-row is a two-column grid with a 10px gap. Collapsed to one column
   on a phone, that gap stacks on top of the .form-group's own 16px margin, so
   the two fields that happened to share a row sat 26px apart while every
   other pair sat 16px - a rhythm that broke and resumed down the form. The
   columns keep their gap; the rows take their spacing from the fields. */
.theme-bgc .form-row { row-gap: 0; }

/* the order OTP dialog */
.theme-bgc .checkout-otp { display: grid; gap: .6rem; }
.theme-bgc .checkout-otp__in {
  font-family: var(--bgc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: .8rem;
  text-align: center;
  height: 5.6rem;
}
.theme-bgc .checkout-otp__msg {
  margin: 0;
  min-height: 1.9rem;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-error);
}
.theme-bgc .checkout-otp__resend {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--bgc-t-sm);
  color: var(--bgc-blue-d);
  text-decoration: underline;
  cursor: pointer;
}
.theme-bgc .checkout-otp__resend[disabled] { color: var(--bgc-faint); cursor: default; text-decoration: none; }