@charset "UTF-8";
/* bb-theme.css -- design tokens and base element styles.
   Loaded FIRST, before pagestyles/headerstyles/footerstyles.

   Source order is NOT an isolation guarantee: it only decides ties at equal
   specificity. A direct rule here still beats an inherited legacy value, so
   selectors below are deliberately limited to element-level defaults that
   fill gaps rather than restyle already-styled components. Any new selector
   added here must pass the Task 3 collision audit first. */

:root {
  --bb-green:      #446034;
  --bb-green-dark: #4a5c3a;
  --bb-green-mid:  #6a8246;
  --bb-tint:       #deebdb;
  --bb-ink:        #333333;
  --bb-muted:      #6b6b6b;
  --bb-rule:       #e0e0e0;
  /* Added in Task 5. --bb-rule is a neutral grey that reads as generic next to
     the green identity; these two are the same idea tinted toward the brand. */
  --bb-canvas:     #eef2ec;
  --bb-hairline:   #d3e0ce;
  /* Added in Task 6, both drawn from the header's own existing palette.
     --bb-green-deep is --bb-green stepped down one shade so the store row
     reads as a separate band; --bb-sage is the link colour headerstyles.css
     already uses on .navitem-major, revived for the corporate row. */
  --bb-green-deep: #3a5130;
  --bb-sage:       #c1d7b1;
  /* Added in Round 2. --bb-sage stepped down until it reads as
     secondary text rather than as a link, while still clearing WCAG AA
     on the footer's #002514 ground. Measured 7.62:1, which also clears
     AAA for normal text. The colour it replaces, #5C7950, measured
     3.38:1 and failed AA. */
  --bb-sage-dim:   #9fb79a;
  /* The pale panel fill this file already used as a literal in three
     places (.bb-buy, .bb-note, the cart header row) and that Task 6
     reuses for the checkout payment plate and shipping panels. */
  --bb-panel:      #f4f8f2;
  --bb-font:       "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  --bb-font-size:  15px;
  --bb-line:       1.55;
}

/* The single highest-value rule in this file. Without it `body` has no
   font-family at all and every unstyled element falls back to the browser
   default serif -- which is why the live store renders in Times New Roman. */
body {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 15px;
  font-size: var(--bb-font-size);
  line-height: 1.55;
  line-height: var(--bb-line);
  color: #333333;
  color: var(--bb-ink);
  -webkit-text-size-adjust: 100%;
}

/* Form controls do not inherit font by default in any browser.

   MEASURED, Task 6 (this rule's two unresolved selectors, `select` and
   `textarea`, could not be reached before Checkout.aspx rendered for
   real -- it 302s to ShoppingCart on an empty cart).
   Live on Checkout.aspx: all seven `select` elements and the one
   `textarea` (txtCustomNote) compute font-family "Signika, Trebuchet
   MS, Arial, Helvetica, sans-serif" at 14px, taken from an INLINE
   style attribute that App_Themes/Default/Default.skin and the pages'
   own Font-Names/Font-Size attributes emit on every one of them. An
   inline declaration outranks this rule at any specificity, so on the
   only page in the store that has a select or a textarea these two
   selectors change nothing. No collision, measured rather than
   argued. */
input, select, textarea, button {
  font-family: inherit;
  font-size: 100%;
}

img { max-width: 100%; }


/* ==================================================================
   Site header -- MasterPages/GC.Master                      (Task 6)
   ==================================================================
   This header renders on all eight pages, including Checkout.aspx, so
   every selector below is gated behind a `bb-` class added in
   GC.Master. No id is restyled on its own: the ids are the contract
   the page-level stylesheets and the CSS-only mobile toggle rely on.

   bb-theme.css loads BEFORE headerstyles.css, so source order never
   wins a tie. Each rule is one step more specific than the legacy rule
   it supersedes:
     #nav-bottomlevel        (0,1,0) -> #nav-bottomlevel.bb-storebar        (0,2,0)
     .navitem-bottom         (0,1,0) -> .navitem-bottom.bb-storelink        (0,2,0)
     .navitem-bottom a       (0,1,1) -> .navitem-bottom.bb-storelink a      (0,2,1)
     .navitem-bottom a:hover (0,2,1) -> .navitem-bottom.bb-storelink a:hover(0,3,1)
     .navitem-main           (0,1,0) -> .navitem-main.bb-navlink            (0,2,0)

   HANDS OFF `display` on #navblock-main and .navitem-main. The mobile
   menu is a checkbox toggle whose open state is
   `.mobile-menu-toggle:checked ~ #navblock-main` (1,2,0) beating
   `#navblock-main{display:none}` (1,0,0). Any `#navblock-main.<class>`
   rule sits at (1,1,0) -- between the two -- so declaring `display`
   there would pin the menu open at mobile widths. That is why
   #navblock-main is the one header element carrying NO `bb-` class:
   the hook is not left lying around for someone to reach for. GC.Master
   repeats the warning at the element. No rule below declares `display`
   on either selector.
   ------------------------------------------------------------------ */

/* --- Header frame ------------------------------------------------- */

/* headerstyles.css pins this to 140px while its two rows add up to
   160px, so the store row currently paints 20px over the top of every
   page's content. Letting it size to its rows removes the overlap. */
#nav-container.bb-header {
  height: auto;
}

/* --- Row 1: corporate links, demoted to a utility strip ----------- */

#nav-toplevel.bb-utilbar {
  height: auto;
  padding: 14px 0 5px;
}

#navblock-logo.bb-brand {
  height: auto;
  margin-bottom: 13px;
}

.navitem-main.bb-navlink {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.045em;
  line-height: 20px;
  padding: 0 11px;
}

/* Sentence case is kept deliberately: "big Catering" and "big Burrito"
   are lowercase-b by brand rule and text-transform would break them. */
.navitem-main.bb-navlink a {
  color: #c1d7b1;
  color: var(--bb-sage);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.navitem-main.bb-navlink a:hover,
.navitem-main.bb-navlink a:focus {
  color: #ffffff;
  text-decoration: none;
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

.navitem-main.bb-navlink a:focus-visible {
  outline: 2px solid #deebdb;
  outline: 2px solid var(--bb-tint);
  outline-offset: 3px;
}

/* --- Row 2: the store bar, promoted to the primary control set ---- */

#nav-bottomlevel.bb-storebar {
  height: auto;
  padding: 9px 0 10px;
  background-color: #3a5130;
  background-color: var(--bb-green-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

/* Flex only to centre and space the three steps. IE8/IE9 -- which the
   pages still hint at -- ignores it and falls back to the legacy
   inline-block centring, which is the same arrangement. */
#navblock-bottom.bb-storenav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.navitem-bottom.bb-storelink {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0;
  border-right: 0;
}

/* No separator glyph between the store links. A pointing chevron implied a
   wizard these three are not: Home is a destination rather than a step, and
   Checkout is reachable directly. The pills already carry grouping via their
   hover fill and active state, so spacing alone does the work. */
.navitem-bottom.bb-storelink + .navitem-bottom.bb-storelink {
  margin-left: 4px;
}

.navitem-bottom.bb-storelink a {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  padding: 8px 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.navitem-bottom.bb-storelink a:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.24);
}

.navitem-bottom.bb-storelink a:focus-visible {
  outline: 2px solid #deebdb;
  outline: 2px solid var(--bb-tint);
  outline-offset: 2px;
}

/* Active step.
   Every page used to carry a `#giftcards` rule in its head that was
   meant to light the current section, but GC.Master has no element
   with that id -- `#navblock-major`/`#giftcards` survive only in
   Alt.Master, which no .aspx uses, so on all eight pages the rule
   matched nothing. Those dead rules are now deleted. These
   selectors restore the intent using a wrapper class that is unique to
   one page each (`.bb-store` -> Default, `.shopping-cart-page-container`
   -> ShoppingCart, `.checkout-container` -> Checkout), so no page can
   ever light two steps. Browsers without :has() simply see no active
   state, which is today's behaviour. */
body:has(#content-container.bb-store) #shoppinghome.bb-storelink a,
body:has(#content-container.shopping-cart-page-container) #shoppingcart.bb-storelink a,
body:has(.checkout-container) #checkout.bb-storelink a {
  color: #3a5130;
  color: var(--bb-green-deep);
  background-color: #deebdb;
  background-color: var(--bb-tint);
  border-color: #deebdb;
  border-color: var(--bb-tint);
  font-weight: 700;
}

body:has(#content-container.bb-store) #shoppinghome.bb-storelink a:hover,
body:has(#content-container.shopping-cart-page-container) #shoppingcart.bb-storelink a:hover,
body:has(.checkout-container) #checkout.bb-storelink a:hover {
  color: #3a5130;
  color: var(--bb-green-deep);
  background-color: #cfe2ca;
  border-color: #cfe2ca;
}

/* --- Header on narrow screens ------------------------------------- */

@media (max-width: 768px) {
  #nav-toplevel.bb-utilbar { padding: 12px 10px 6px; }

  #navblock-logo.bb-brand { margin-bottom: 14px; }

  /* Inside the open drop panel these are full-width rows, so they take
     white text and a tap-sized target rather than the sage utility
     treatment used on the desktop strip. */
  .navitem-main.bb-navlink {
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 20px;
    padding: 10px 15px;
  }

  .navitem-main.bb-navlink a {
    color: #ffffff;
    padding-bottom: 8px;
    padding-top: 8px;
    border-bottom-color: transparent;
  }

  .navitem-main.bb-navlink a:hover,
  .navitem-main.bb-navlink a:focus {
    color: #ffffff;
    border-bottom-color: transparent;
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 4px;
  }

  #nav-bottomlevel.bb-storebar { padding: 8px 4px 10px; }

  .navitem-bottom.bb-storelink { font-size: 14px; }

  .navitem-bottom.bb-storelink a { padding: 9px 14px; }

  /* No narrow-screen override of the 4px inter-pill margin set above.
     The three pills measure ~250px together at this font size, so they
     still fit one row at 320px and the desktop gap needs no shrinking. */

  /* --- Menu button                                        (Round 2) ---
     SCOPE NOTE, read this before editing anything below.
     Everything here addresses the LABEL and the CHECKBOX. Neither
     `#navblock-main` nor `.navitem-main` is named, and no rule below
     declares `display` on either. The open state is still
     `.mobile-menu-toggle:checked ~ #navblock-main` (1,2,0) beating
     `#navblock-main{display:none}` (1,0,0) from headerstyles.css, with
     nothing at (1,1,0) in between. Adding a class to the label and to
     the checkbox cannot land in that gap: neither is `#navblock-main`.

     Specificity ladder against css/headerstyles.css:226-261, which
     loads AFTER this file, so every rule needs one more class than the
     legacy rule it supersedes:
       .mobile-menu-button                       (0,1,0) -> +.bb-menu-btn      (0,2,0)
       .mobile-menu-button span                  (0,1,1) -> +.bb-menu-btn      (0,2,1)
       .mobile-menu-toggle:checked
         + .mobile-menu-button span:nth-child(n) (0,4,1) -> +.bb-menu-btn      (0,5,1)
       .mobile-menu-toggle                       (0,1,0) -> +.bb-menu-cb       (0,2,0)  */

  /* The chip is gone. A translucent white rounded square around three
     bars was the affordance carrying itself; the bars are the
     affordance. The plate returns only on press and on keyboard focus,
     where a hit confirmation is genuinely useful.

     `right: 36px` is not arbitrary. #nav-toplevel is the offset parent
     and it overhangs the visible viewport on the right by ~24.7px --
     GC.Master's inline `margin: 0 -10px` on #nav-container-wrapper plus
     the page container, a pre-existing overflow measured in Task 6 and
     out of scope here. The legacy `right: 25px` therefore put the
     button's right edge at 374.67px in a 375px viewport, i.e. flat
     against the edge and under the scrollbar. 36px lands it ~11px
     inside instead. Re-measure this if that overflow is ever fixed. */
  .mobile-menu-button.bb-menu-btn {
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    top: 12px;
    right: 36px;
    padding: 0;
    background-color: transparent;
    border-radius: 12px;
    transition: background-color 0.18s ease;
  }

  .mobile-menu-button.bb-menu-btn:hover,
  .mobile-menu-button.bb-menu-btn:active {
    background-color: rgba(255, 255, 255, 0.12);
  }

  /* Centred absolutely, so both arms rotate about the same point and
     the X closes on the centre of the 46px target. The legacy rule
     rotated then translated by (5px, 5px) and (7px, -6px), two
     different offsets applied after two different rotations, which is
     why the crossing point sat below and left of centre. No translate
     is needed at all once the bars start centred: `translate(-50%,-50%)`
     is the centring, `rotate()` is the whole animation. */
  .mobile-menu-button.bb-menu-btn span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 2px;
    margin: 0;
    background-color: #c1d7b1;
    background-color: var(--bb-sage);
    border-radius: 2px;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, opacity 0.15s ease, background-color 0.18s ease;
  }

  .mobile-menu-button.bb-menu-btn span:nth-child(1) {
    transform: translate(-50%, -50%) translateY(-7px);
  }

  .mobile-menu-button.bb-menu-btn span:nth-child(3) {
    transform: translate(-50%, -50%) translateY(7px);
  }

  .mobile-menu-button.bb-menu-btn:hover span {
    background-color: #ffffff;
  }

  /* Open. Same origin, equal and opposite angles, no translate. */
  .mobile-menu-toggle:checked + .mobile-menu-button.bb-menu-btn span {
    background-color: #ffffff;
  }

  .mobile-menu-toggle:checked + .mobile-menu-button.bb-menu-btn span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .mobile-menu-toggle:checked + .mobile-menu-button.bb-menu-btn span:nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.4);
  }

  .mobile-menu-toggle:checked + .mobile-menu-button.bb-menu-btn span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* headerstyles.css hides the checkbox with `display: none`, which
     also removes it from the tab order -- so until now the menu could
     not be opened from a keyboard at all. Taking it out of flow instead
     of out of the box tree restores that without moving a pixel: 1x1,
     fully transparent, no pointer events (the label still owns the
     click), parked under the button so the focus plate reads as
     belonging to it. Desktop keeps `display: none`; this rule lives
     inside the narrow-screen block only, so no invisible tab stop is
     introduced on a viewport where the menu does not exist. */
  .mobile-menu-toggle.bb-menu-cb {
    display: block;
    position: absolute;
    top: 34px;
    right: 58px;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-menu-toggle.bb-menu-cb:focus-visible + .mobile-menu-button.bb-menu-btn {
    background-color: rgba(255, 255, 255, 0.16);
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }

  .mobile-menu-toggle.bb-menu-cb:focus-visible + .mobile-menu-button.bb-menu-btn span {
    background-color: #ffffff;
  }
}


/* ==================================================================
   Site footer -- MasterPages/GC.Master                     (Round 2)
   ==================================================================
   Gated on `bb-footer`, `bb-footer-copy` and `bb-footer-links`, three
   classes added beside the existing ids in GC.Master. The ids are left
   alone: css/footerstyles.css is the legacy layer and addresses them,
   and an id in this file would only tie with it and lose from first
   position. `#footer-store.bb-footer` is (1,1,0) against its (1,0,0).

   THE FIT. The header is full bleed -- #nav-container-wrapper carries
   an inline `margin: 0 -10px`, so it spans -10px..+910px of a 900px
   page container. The footer sat at 900px inside the same container,
   so the two bands that are meant to cap the page disagreed by 20px
   and the dark strip read as a floating panel rather than as the end
   of the page. This matches it exactly.

   `width: 100%` is an INLINE style on #footer-store, and no author
   rule outranks an inline declaration. `min-width` has no inline
   competitor anywhere in this markup and outranks `width` in the CSS
   sizing rules, so it is what does the widening. Same technique the
   Checkout block documents for inline `width`.
   ------------------------------------------------------------------ */

#footer-store.bb-footer {
  box-sizing: border-box;
  max-width: none;
  min-width: calc(100% + 20px);
  margin: 32px -10px 0;
  border-top: 3px solid #446034;
  border-top: 3px solid var(--bb-green);
  padding: 14px 6px;
}

/* The accessibility fix. #5C7950 on #002514 measured 3.38:1, under the
   4.5:1 AA minimum for body text. --bb-sage-dim measures 7.62:1 on the
   same ground and still sits a clear step below the #CDDEC8 links, so
   the hierarchy the old colour was reaching for survives. */
#footer-store-copyright.bb-footer-copy {
  color: #9fb79a;
  color: var(--bb-sage-dim);
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 6px 14px;
}

/* The " | " between the two links is a bare text node in the div, so it
   inherits the div's colour rather than the link colour. It was
   #5C7950 too. */
#footer-store-quicklinks.bb-footer-links {
  color: #9fb79a;
  color: var(--bb-sage-dim);
  font-size: 12px;
  padding: 6px 14px;
}

#footer-store-quicklinks.bb-footer-links a {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#footer-store-quicklinks.bb-footer-links a:hover,
#footer-store-quicklinks.bb-footer-links a:focus {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

@media (max-width: 768px) {
  #footer-store.bb-footer {
    margin-top: 24px;
    padding: 10px 4px 12px;
  }

  #footer-store-copyright.bb-footer-copy,
  #footer-store-quicklinks.bb-footer-links {
    padding: 5px 10px;
  }
}


/* ==================================================================
   Default.aspx -- storefront catalog                        (Task 5)
   ==================================================================
   Every selector below requires a `bb-` opt-in class, so none of these
   rules can reach a page that has not asked for them even though the
   store shares ids (#content-container, #content-container-display)
   and classes (.item_text is also used on OrderConfirmation.aspx)
   across pages.

   All of these classes were Default.aspx-only when this block was
   written. Task 5 pages 2-5 later opted ShoppingCart.aspx and
   ErrorPage.aspx in to `.bb-sidebar` deliberately -- see the note above
   that rule. Every other class in this block is still Default-only.

   bb-theme.css loads BEFORE pagestyles.css, so source order never wins
   a tie here: each rule is deliberately one step more specific than the
   legacy rule it supersedes. The paired specificities are recorded in
   the Task 5 report.
   ------------------------------------------------------------------ */

/* --- Page frame ------------------------------------------------- */

#content-container.bb-store {
  background-color: #eef2ec;
  background-color: var(--bb-canvas);
  padding: 0;
}

#content-container-display.bb-catalog {
  background-color: #eef2ec;
  background-color: var(--bb-canvas);
  padding: 28px 24px 32px;
}

#content-container-display.bb-catalog h3.bb-catalog-title {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333333;
  color: var(--bb-ink);
  text-align: left;
  margin: 0 0 24px;
  padding: 0;
}

/* asp:DataList renders a table; keep it from carrying the legacy
   fixed 625px item width out past the column on narrow screens. */
#content-container-display.bb-catalog table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#content-container-display.bb-catalog td { padding: 0; }

/* SeparatorTemplate placeholder: the rhythm comes from card margins. */
#content-container-display.bb-catalog .item-separator { display: none; }

/* divError is written to by the codebehind; when it is empty it must
   leave no trace. */
#content-container-display.bb-catalog .bb-error {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14px;
  line-height: 1.5;
  color: #8f2c1c;
  background-color: #fdf3f1;
  border: 1px solid #c8452f;
  border-left-width: 4px;
  border-radius: 6px;
  margin: 0 0 20px;
  padding: 12px 14px;
}

#content-container-display.bb-catalog .bb-error:empty { display: none; }

/* --- Product card ------------------------------------------------ */

.item_iteration_container.bb-card {
  clear: both;
  width: auto;
  max-width: 680px;
  box-sizing: border-box;
  margin: 0 0 20px;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid #d3e0ce;
  border: 1px solid var(--bb-hairline);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31, 48, 24, 0.06);
  display: flex;
  align-items: center;
  gap: 28px;
}

.item_image_box.bb-card-media {
  float: none;
  width: 220px;
  flex: 0 0 220px;
  align-self: flex-start;
  text-align: center;
}

/* !important is aimed at an inline style the codebehind emits
   (img.Height = "340" on the t-shirt category), which no author rule
   can outrank. Without it those images render stretched. */
.item_image_box.bb-card-media img {
  display: block;
  max-width: 100%;
  height: auto !important;
  margin: 0 auto;
  border-radius: 6px;
}

.item_specifics.bb-card-body {
  float: none;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.item_text.bb-card-text {
  width: auto;
  margin: 0;
  text-align: left;
}

.bb-card-text .item_name.bb-card-name {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: #333333;
  color: var(--bb-ink);
  margin: 0;
  padding: 0;
}

.bb-card-text .item_descript.bb-card-desc {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b6b6b;
  color: var(--bb-muted);
  margin: 6px 0 0;
  padding: 0;
}

/* The codebehind blanks lblItemDescription for every category except
   Events, leaving an empty <span> that still occupies a line box. */
.bb-card-text .item_descript.bb-card-desc:has(span:empty) { display: none; }

/* --- Purchase controls ------------------------------------------- */

.item_order_controls.bb-buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 14px 16px 16px;
  text-align: left;
  background-color: #f4f8f2;
  border: 1px solid #d3e0ce;
  border: 1px solid var(--bb-hairline);
  border-radius: 8px;
}

.bb-buy .bb-buy-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #333333;
  color: var(--bb-ink);
}

/* The size line renders with no children at all outside the t-shirt
   category, where the codebehind sets both controls Visible = False. */
.bb-buy .bb-buy-line:empty { display: none; }

.bb-buy .bb-buy-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #446034;
  color: var(--bb-green);
}

.bb-buy .bb-buy-times {
  font-size: 15px;
  line-height: 1;
  color: #6a8246;
  color: var(--bb-green-mid);
}

/* The dollar sign belongs to the field, not to the sentence around it. */
.bb-buy .bb-amount {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border: 2px solid #6a8246;
  border: 2px solid var(--bb-green-mid);
}

.bb-buy .bb-amount-sym {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px 0 7px;
  color: #6a8246;
  color: var(--bb-green-mid);
}

.bb-buy .bb-amount:focus-within {
  border-color: #446034;
  border-color: var(--bb-green);
  box-shadow: 0 0 0 3px rgba(68, 96, 52, 0.18);
}

.quantity_amount_textboxes.bb-field {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  line-height: 1.25;
  color: #446034;
  color: var(--bb-green);
  background-color: #ffffff;
  border: 2px solid #6a8246;
  border: 2px solid var(--bb-green-mid);
  border-radius: 0;
  padding: 7px 8px;
  vertical-align: middle;
  box-sizing: content-box;
}

.quantity_amount_textboxes.bb-field:hover {
  border-color: #446034;
  border-color: var(--bb-green);
}

.quantity_amount_textboxes.bb-field:focus {
  border-color: #446034;
  border-color: var(--bb-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(68, 96, 52, 0.18);
}

/* Inside the affix wrapper the field contributes no frame of its own. */
.quantity_amount_textboxes.bb-field-amount,
.quantity_amount_textboxes.bb-field-amount:hover,
.quantity_amount_textboxes.bb-field-amount:focus {
  border: 0;
  padding-left: 2px;
  box-shadow: none;
}

/* !important overrides BackColor = AntiqueWhite, an inline style the
   codebehind emits when it disables the price field. */
.quantity_amount_textboxes.bb-field:disabled {
  background-color: #f2f1ec !important;
  border-color: #cdd3c6;
  color: #6b6b6b;
  color: var(--bb-muted);
}

.bb-buy .bb-amount:has(input:disabled) {
  background-color: #f2f1ec;
  border-color: #cdd3c6;
}

.quantity_amount_textboxes.bb-field-select {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14px;
  padding: 6px 8px;
  color: #333333;
  color: var(--bb-ink);
}

.form-button-default.bb-add {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  background-color: #446034;
  background-color: var(--bb-green);
  border: 2px solid #446034;
  border: 2px solid var(--bb-green);
  border-radius: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 11px 18px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.form-button-default.bb-add:hover {
  background-color: #6a8246;
  background-color: var(--bb-green-mid);
  border-color: #6a8246;
  border-color: var(--bb-green-mid);
  transform: none;
}

.form-button-default.bb-add:focus-visible {
  outline: 3px solid rgba(68, 96, 52, 0.35);
  outline-offset: 2px;
}

/* --- Sidebar ------------------------------------------------------ */

/* NOTE (Task 5, pages 2-5): `.bb-sidebar` is no longer Default-only.
   The same policy-note sidebar markup appears on ShoppingCart.aspx and
   ErrorPage.aspx, and both now opt in to these rules so the three
   pages read as one set. The gate is still the `bb-sidebar` class, so
   the reach of these selectors is exactly "pages that asked for it" --
   Checkout.aspx and the rest are unaffected. */

#content-sidebar-container.bb-sidebar {
  background-color: #deebdb;
  background-color: var(--bb-tint);
  padding: 24px 20px 32px;
}

/* The asp:TreeView wrapper: it is the section marker above the notes. */
#content-sidebar-container.bb-sidebar > div { margin: 0 0 22px; }

#content-sidebar-container.bb-sidebar div table td {
  height: auto;
  padding: 0 0 4px;
}

#content-sidebar-container.bb-sidebar div table a {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #446034;
  color: var(--bb-green);
}

#content-sidebar-container.bb-sidebar div table a:hover { text-decoration: underline; }

/* Six labelled policy notes. Promoting each <strong> to its own line
   and ruling between them turns the block into a scannable list. */
#content-sidebar-container.bb-sidebar p {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 13px;
  line-height: 1.6;
  color: #4a4a44;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid #c6d8c1;
}

#content-sidebar-container.bb-sidebar p:first-of-type {
  border-top: 0;
  padding-top: 0;
}

#content-sidebar-container.bb-sidebar p strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #446034;
  color: var(--bb-green);
}

#content-sidebar-container.bb-sidebar a {
  color: #446034;
  color: var(--bb-green);
}

#content-sidebar-container.bb-sidebar a:hover {
  color: #6a8246;
  color: var(--bb-green-mid);
}

/* --- Narrow screens ----------------------------------------------- */

@media (max-width: 768px) {
  #content-container-display.bb-catalog { padding: 20px 14px 24px; }

  #content-container-display.bb-catalog h3.bb-catalog-title {
    font-size: 26px;
    margin-bottom: 18px;
  }

  #content-sidebar-container.bb-sidebar { padding: 20px 16px 28px; }

  #content-sidebar-container.bb-sidebar p {
    font-size: 14px;
    line-height: 1.65;
  }

  .item_iteration_container.bb-card {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    max-width: none;
    padding: 18px;
    text-align: left;
  }

  .item_image_box.bb-card-media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }

  .item_specifics.bb-card-body {
    width: 100%;
    text-align: left;
  }

  .item_text.bb-card-text {
    margin: 0;
    text-align: left;
  }

  .bb-card-text .item_name.bb-card-name { font-size: 18px; }

  .bb-card-text .item_descript.bb-card-desc { font-size: 14px; }
}


/* ==================================================================
   Store content pages                            (Task 5, pages 2-5)
   ShoppingCart.aspx / OrderConfirmation.aspx / Verify.aspx /
   ErrorPage.aspx
   ==================================================================
   Same discipline as the Default.aspx block above: every selector
   requires a `bb-` opt-in class, so nothing here can reach a page that
   has not asked for it. Checkout.aspx carries no `bb-` class and is
   deliberately untouched by this section.

   Several classes are SHARED across these four pages -- `.bb-title`,
   `.bb-lede`, `.bb-body`, `.bb-note`, `.bb-alert`, `.bb-btn`,
   `.bb-btn-primary`, `.bb-actions`, plus `.bb-sidebar` from the block
   above. That is the point: they are components, and the four pages
   should read as one set rather than four one-offs. Sharing costs
   nothing in isolation because the gate is the class itself.

   bb-theme.css still loads BEFORE pagestyles.css, so source order
   never wins a tie: each rule below is one step more specific than the
   legacy rule it supersedes. Two ties needed extra care and are
   commented where they occur.
   ------------------------------------------------------------------ */

/* --- Shared page furniture ---------------------------------------- */

h3.bb-title {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333333;
  color: var(--bb-ink);
  margin: 0 0 20px;
  padding: 0;
}

/* `p.bigger` (0,1,1) in pagestyles.css sets 14px on a 14px line, which
   is why the intro copy on Verify.aspx sets solid. Both shapes are
   listed so the rule wins whether or not the page also carries
   `bigger`. */
p.bb-lede,
p.bigger.bb-lede {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 15px;
  line-height: 1.6;
  color: #4a4a44;
  margin: 0 0 22px;
  padding: 0;
  max-width: 64ch;
}

p.bb-body {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14.5px;
  line-height: 1.65;
  color: #4a4a44;
  margin: 0 0 14px;
  padding: 0;
  max-width: 64ch;
}

p.bb-body:last-child { margin-bottom: 0; }

/* Status panel. On ShoppingCart.aspx this same div carries both "there
   are currently no items in your shopping cart" and the quantity
   validation message, so it is a neutral notice rather than an alarm:
   red would be wrong for the state customers actually see most often.
   Genuine failures get `.bb-alert` below. */
.bb-note {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14px;
  line-height: 1.5;
  color: #333333;
  color: var(--bb-ink);
  background-color: #f4f8f2;
  border: 1px solid #d3e0ce;
  border: 1px solid var(--bb-hairline);
  border-left-width: 4px;
  border-left-color: #6a8246;
  border-left-color: var(--bb-green-mid);
  border-radius: 6px;
  width: auto;
  max-width: 64ch;
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 12px 14px;
}

/* The codebehind writes to these divs; empty they must leave no trace. */
.bb-note:empty { display: none; }

.bb-alert {
  display: block;
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14px;
  line-height: 1.5;
  color: #8f2c1c;
  background-color: #fdf3f1;
  border: 1px solid #c8452f;
  border-left-width: 4px;
  border-radius: 6px;
  width: auto;
  max-width: 64ch;
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 12px 14px;
}

.bb-alert:empty { display: none; }

.bb-alert a {
  color: #8f2c1c;
  font-weight: 600;
}

/* --- Shared control set ------------------------------------------- */

/* One button shape for all four pages. `.form-button-default` (0,1,0)
   in pagestyles.css is the legacy pale-mint outline; these are (0,2,0)
   and win from first position. */
.form-button-default.bb-btn,
.form-button-default.bb-btn-primary {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border-radius: 6px;
  min-width: 0;
  margin: 0;
  padding: 11px 20px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.form-button-default.bb-btn {
  color: #446034;
  color: var(--bb-green);
  background-color: #ffffff;
  border: 2px solid #b9cdb2;
}

.form-button-default.bb-btn:hover {
  color: #446034;
  color: var(--bb-green);
  background-color: #f0f5ee;
  border-color: #6a8246;
  border-color: var(--bb-green-mid);
  transform: none;
}

.form-button-default.bb-btn-primary {
  color: #ffffff;
  background-color: #446034;
  background-color: var(--bb-green);
  border: 2px solid #446034;
  border: 2px solid var(--bb-green);
}

.form-button-default.bb-btn-primary:hover {
  color: #ffffff;
  background-color: #6a8246;
  background-color: var(--bb-green-mid);
  border-color: #6a8246;
  border-color: var(--bb-green-mid);
  transform: none;
}

.form-button-default.bb-btn:focus-visible,
.form-button-default.bb-btn-primary:focus-visible {
  outline: 3px solid rgba(68, 96, 52, 0.35);
  outline-offset: 2px;
}

.bb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}


/* --- ShoppingCart.aspx -------------------------------------------- */

/* `.shopping-cart-page-container` stays on this div: the active-step
   rule in the header block keys off it. */
#content-container.bb-cart {
  background-color: #eef2ec;
  background-color: var(--bb-canvas);
  padding: 0;
}

#content-container-display.bb-cart-main {
  background-color: #eef2ec;
  background-color: var(--bb-canvas);
  padding: 28px 24px 32px;
}

/* On this page the notice sits above a full-width table and above a
   right-aligned action axis, so it takes the full column rather than
   the 64ch measure used on the prose pages. */
#content-container-display.bb-cart-main .bb-note { max-width: none; }

.shopping-cart-table-wrapper.bb-cart-table {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #d3e0ce;
  border: 1px solid var(--bb-hairline);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31, 48, 24, 0.06);
  overflow-x: auto;
  margin: 0 0 20px;
}

/* No cart, no frame. The wrapper is written in the .aspx with no
   whitespace inside it, so an unbound DataGrid -- which renders
   nothing at all -- leaves it genuinely `:empty`. */
.shopping-cart-table-wrapper.bb-cart-table:empty { display: none; }

/* The borders. Previously three sources disagreed: `border-bottom`
   from pagestyles.css, a full `1px solid #ddd !important` box on every
   cell from the page's own <style> block, and a `border-left: solid
   1px gray` on three inline divs inside the cells. All three are gone.
   Rows are separated horizontally and nothing else is drawn. */
table.bb-cart-grid {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin: 0;
}

table.bb-cart-grid td {
  font-size: 14px;
  line-height: 1.4;
  color: #333333;
  color: var(--bb-ink);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #d3e0ce;
  border-bottom: 1px solid var(--bb-hairline);
  vertical-align: middle;
  height: auto;
  padding: 14px 12px;
}

table.bb-cart-grid tr:last-child td { border-bottom: 0; }

table.bb-cart-grid tr:hover:not(:first-child) td { background-color: #f7faf6; }

/* asp:DataGrid renders its header row as plain `td`, not `th` -- verified
   against the live populated cart -- so the header is addressed by
   position. The `th` shape is listed too in case UseAccessibleHeader is
   ever turned on, which would swap the tag out from under this rule. */
table.bb-cart-grid tr:first-child td,
table.bb-cart-grid th {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #446034;
  color: var(--bb-green);
  background-color: #f4f8f2;
  border: 0;
  border-bottom: 2px solid #446034;
  border-bottom: 2px solid var(--bb-green);
  padding: 12px;
}

table.bb-cart-grid .bb-cell-media {
  width: auto;
  text-align: center;
}

/* max-height:none is load bearing. pagestyles.css clamps
   `.shopping-cart-table-wrapper img` to max-height 50px, 30px at 768 and
   25px at 480 while leaving width alone. A max-height beats height:auto:
   the auto height resolves correctly and is then clipped, so the card
   renders squashed rather than smaller. Releasing it lets width alone
   drive the size and keeps the aspect true. Same fix as Checkout.aspx. */
table.bb-cart-grid .bb-cell-media img {
  display: block;
  max-width: 76px;
  max-height: none;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}

table.bb-cart-grid .bb-cell-num {
  height: auto;
  text-align: center;
}

table.bb-cart-grid .bb-money {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* TIE WATCH: `.shopping-cart-table-wrapper input[type="text"]` in
   pagestyles.css is (0,2,1) -- an attribute selector counts as a
   class. A `.bb-cart-grid .bb-qty` shape would only tie and lose from
   first position, so both element names are named too: (0,2,2). */
table.bb-cart-grid input.bb-qty {
  width: 56px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  color: #333333;
  color: var(--bb-ink);
  background-color: #ffffff;
  border: 1px solid #b9cdb2;
  border-radius: 4px;
  padding: 7px 6px;
}

table.bb-cart-grid input.bb-qty:focus {
  border-color: #446034;
  border-color: var(--bb-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(68, 96, 52, 0.18);
}

/* The promo card row arrives with its quantity field disabled. */
table.bb-cart-grid input.bb-qty:disabled {
  color: #6b6b6b;
  color: var(--bb-muted);
  background-color: #f2f1ec;
  border-color: #cdd3c6;
}

/* --- The remove control                                 (Round 2) ---
   ShoppingCart.aspx:54 is an asp:ImageButton -- a SERVER CONTROL whose
   ID and CommandName the Delete postback depends on -- pointing at a
   17x16 GIF from the same vintage as the rest of the old art. The
   markup is left BYTE UNTOUCHED and the whole treatment is done here,
   which is the only one of the two available routes that adds no new
   file to the deploy and cannot alter a control attribute at all.

   ASP.NET renders it as `<input type="image" src="images/delete-x.gif">`.
   The GIF is the element's replaced content, so it cannot be hidden by
   `background` alone. `box-sizing: border-box` plus padding equal to
   the full box collapses the content box to 0x0, which gives the
   replaced image nothing to paint into, and the background then paints
   across the whole 44x44 padding box. Verified in the live DOM:
   content box 0x0, `src` attribute untouched, `name` still
   "...:gridShoppingCart:_ctl2:btnDelete", `elementFromPoint` at the
   centre still returns the input.

   THE X IS TWO GRADIENTS, NOT A DATA URI, and that is deliberate. A
   `data:image/svg+xml` background was written first and could not be
   verified: every `data:` image load, SVG and GIF alike, was blocked
   in the verification browser, so the control rendered as an empty
   44x44 box with no mark on it. That failure mode is silent and it
   lands on the one control that empties a cart line, so the mark is
   drawn with `linear-gradient` instead. A gradient is a CSS image, not
   a fetched one: nothing can block it, it is resolution independent
   the same way a vector is, and it was verified rendering on the live
   page. Each layer paints one diagonal band across a 17px tile;
   together they cross at the centre.

   `currentColor` in both gradients means the two states differ by one
   `color` declaration rather than by a second copy of the artwork.

   44x44 is the WCAG 2.2 AAA target size, and the radius is kept at
   12px rather than 50% so the whole 44x44 stays hittable -- a circle
   would give up the corners to hit testing. 12px is also the radius
   the header menu button uses. The cell is 60x60, so nothing reflows
   to make room. */
table.bb-cart-grid input[type="image"] {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 44px 0 0 44px;
  opacity: 1;
  color: #6b6b6b;
  color: var(--bb-muted);
  background-color: transparent;
  background-image:
    linear-gradient(to bottom right, rgba(0, 0, 0, 0) calc(50% - 1.05px), currentColor calc(50% - 1.05px), currentColor calc(50% + 1.05px), rgba(0, 0, 0, 0) calc(50% + 1.05px)),
    linear-gradient(to bottom left, rgba(0, 0, 0, 0) calc(50% - 1.05px), currentColor calc(50% - 1.05px), currentColor calc(50% + 1.05px), rgba(0, 0, 0, 0) calc(50% + 1.05px));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 17px 17px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Grey until you reach for it, then it commits to what it does. */
table.bb-cart-grid input[type="image"]:hover,
table.bb-cart-grid input[type="image"]:focus-visible {
  color: #ffffff;
  background-color: #a32b21;
}

table.bb-cart-grid input[type="image"]:focus-visible {
  outline: 2px solid #446034;
  outline: 2px solid var(--bb-green);
  outline-offset: 2px;
}

/* Update Cart acts on the table, so it sits with it rather than
   floating in the centre of the page. Hidden with the cart when the
   codebehind sets it Visible = False. */
.shopping-cart-button-container.bb-cart-update {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 26px;
}

.shopping-cart-button-container.bb-cart-update:empty { display: none; }

/* The one place this page spends any boldness: the figure the customer
   is about to pay, set as a receipt line under a green rule. */
.shopping-cart-total-container.bb-summary {
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: right;
  background-color: #ffffff;
  border: 1px solid #d3e0ce;
  border: 1px solid var(--bb-hairline);
  border-top: 3px solid #446034;
  border-top: 3px solid var(--bb-green);
  border-radius: 8px;
  margin: 0 0 20px;
  margin-left: auto;
  padding: 16px 18px;
}

/* lblTotalAmount is left unset on an empty cart. */
.shopping-cart-total-container.bb-summary:has(> span:empty) { display: none; }

.bb-summary .bb-total {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #446034;
  color: var(--bb-green);
}

.shopping-cart-actions.bb-cart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin: 0;
}


/* --- OrderConfirmation.aspx --------------------------------------- */

/* This page has no `#content-container-display`, so its h3, error div,
   <br>s and <p> were direct children of the flex container in
   pagestyles.css -- i.e. they were laid out as flex items side by
   side. Restoring block flow is the whole fix. */
#content-container.bb-confirm {
  display: block;
  background-color: #eef2ec;
  background-color: var(--bb-canvas);
  padding: 32px 24px 40px;
}

.bb-receipt {
  box-sizing: border-box;
  max-width: 640px;
  background-color: #ffffff;
  border: 1px solid #d3e0ce;
  border: 1px solid var(--bb-hairline);
  border-top: 3px solid #446034;
  border-top: 3px solid var(--bb-green);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31, 48, 24, 0.06);
  margin: 0;
  padding: 28px;
}

.item_text.bb-confirm-text {
  display: block;
  width: auto;
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
  color: var(--bb-ink);
  text-align: left;
  margin: 0;
}

/* The customer name and email address the codebehind wraps in
   <strong> are the two facts worth finding again later. */
.bb-confirm-text strong {
  font-weight: 700;
  color: #446034;
  color: var(--bb-green);
}


/* --- Verify.aspx -------------------------------------------------- */

#content-container-display.bb-verify {
  background-color: #ffffff;
  padding: 28px 24px 32px;
}

table.bb-facts {
  width: auto;
  max-width: 540px;
  border-collapse: collapse;
  margin: 0;
}

table.bb-facts td {
  font-family: "Signika", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-family: var(--bb-font);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
  border-bottom: 1px solid #d3e0ce;
  border-bottom: 1px solid var(--bb-hairline);
  padding: 12px 0;
}

table.bb-facts td.bb-fact-term {
  width: 150px;
  white-space: nowrap;
  color: #6b6b6b;
  color: var(--bb-muted);
  padding-right: 20px;
}

table.bb-facts td.bb-fact-value {
  color: #333333;
  color: var(--bb-ink);
}

/* The two structural rows at the foot of the table are not facts. */
table.bb-facts td.bb-fact-plain {
  border-bottom: 0;
  padding: 0;
}

table.bb-facts td.bb-fact-plain p {
  margin: 0;
  padding: 0;
}

table.bb-facts td.bb-actions-cell {
  border-bottom: 0;
  padding: 0;
}

/* Spacing lives on the wrapper, not the cell, so that a hidden pair of
   buttons leaves no gap. Verified against the live "record not found"
   state, where the codebehind renders neither button. */
table.bb-facts td.bb-actions-cell .bb-actions { margin-top: 26px; }

.bb-actions:empty { display: none; }

/* HideControls() leaves these cells rendered but contentless. Written
   tight in the .aspx they match :empty and the row collapses; without
   this the page draws four blank ruled rows. Placed after the term and
   value rules deliberately -- all three are (0,2,2) and this one has to
   win the tie on source order. */
table.bb-facts td:empty {
  border-bottom: 0;
  padding: 0;
}


/* --- ErrorPage.aspx ----------------------------------------------- */

#content-container.bb-errpage {
  background-color: #eef2ec;
  background-color: var(--bb-canvas);
}

#content-container-display.bb-errpage-main {
  background-color: #ffffff;
  padding: 28px 24px 32px;
}


/* ==================================================================
   Checkout.aspx -- accepted card marks                     (Round 2)
   ==================================================================
   Replaces `<img src="../../images/creditcards.gif">`, a 111x26 GIF
   drawn at 1:1 and therefore soft on every HiDPI screen, whose path
   also walked two directories above the site root and only resolved
   because browsers clamp at "/". The three marks are now inline SVG:
   same origin, no new asset in the deploy, sharp at any density.
   Both occurrences carry `role="img"` and an `aria-label` that says
   what the old `alt="Payment Methods"` said and names the three
   networks; the individual svgs are `aria-hidden` so the group is
   announced once.

   Sized a little larger than the GIF's ~35px per card because the
   marks now have to read as themselves rather than as a picture of a
   strip of cards.
   ------------------------------------------------------------------ */

.bb-cardmarks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  line-height: 0;
}

.bb-cardmarks .bb-cardmark {
  display: block;
  flex: none;
  width: 40px;
  height: 26px;
}


/* ==================================================================
   Checkout.aspx -- item table on narrow screens            (Round 2)
   ==================================================================
   MEASURED on the live page in a 390px same-origin same-session iframe
   (resize_window is broken in this environment), one line item in the
   cart:

     iframe 390px -> document clientWidth 375px (15px scrollbar)
     wrapper clientWidth 339px, table 385px
     column widths 162 / 79.6 / 30.9 / 69.5 / 42.5
     -> 46px of horizontal overflow, and TOTAL, the last column and the
        number the customer most needs, scrolled out of sight entirely

   Five columns do not fit a phone, so at <=768px each row becomes a
   card: the thumbnail holds a fixed left rail and DESCRIPTION, QTY,
   ITEM PRICE and TOTAL stack beside it as labelled rows. The column
   headings the layout throws away come back as generated ::before
   labels on the cells that need them, so nothing is lost.

   WHY THIS FILE AND NOT THE PAGE'S OWN <style> BLOCK. Checkout.aspx
   carries its own sheet, gated on `.checkout-container`, and it loads
   LAST. This file loads FIRST, so source order never helps here and
   every rule below has to out-specify the page block outright rather
   than merely follow it. The ladder, all of it verified against the
   page block as it stands:

     .checkout-container .shopping-cart-table-wrapper td        (0,2,1)
     .checkout-container .shopping-cart-table-wrapper
                                        tr:last-child td        (0,3,1)
     -> tr:not(:first-child) td                                 (0,3,2)
     -> tr:not(:first-child) td:nth-child(n)                    (0,4,2)

   The one page-block rule NOT beaten is the (0,4,1) hover background,
   deliberately: it only fires on hover, which a touch device does not
   have, and its single declaration is a background colour.

   `.checkout-container` exists on Checkout.aspx and nowhere else in
   the store -- the same gate the active-step probe near the top of
   this file already relies on -- so none of this can reach
   ShoppingCart.aspx, whose own table is styled as `.bb-cart-grid`.
   ------------------------------------------------------------------ */

@media (max-width: 768px) {
  /* asp:DataGrid renders the headings as an ordinary first `tr` of
     `td`s, not a `thead`. Hiding that row is what frees the width. */
  .checkout-container .shopping-cart-table-wrapper tr:first-child {
    display: none;
  }

  .checkout-container .shopping-cart-table-wrapper table,
  .checkout-container .shopping-cart-table-wrapper tbody {
    display: block;
  }

  /* LAYOUT MECHANISM, chosen for WebKit. An earlier version of this
     card used display:grid on the tr with the thumbnail cell spanning
     rows. Chrome renders that; Safari has longstanding bugs applying
     grid and flex to table internals, and on iOS the thumbnail ended up
     painting over the Qty label. Block rows with an absolutely
     positioned thumbnail rail render identically in every engine and
     need nothing from the table layout model at all. The row reserves
     the rail with padding-left: 14 pad + 68 rail + 14 gap = 96px. */
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) {
    display: block;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #d3e0ce;
    border-bottom: 1px solid var(--bb-hairline);
    padding: 14px 14px 12px 96px;
    min-height: 66px;
  }

  .checkout-container .shopping-cart-table-wrapper tr:last-child {
    border-bottom: 0;
  }

  /* ItemStyle Width="80px" arrives as an INLINE `width` on three of
     these cells, which would hold them to 80px inside the card.
     `min-width` has no inline competitor and outranks `width`, so it is
     what makes the cells fill the row. Same technique the page block
     documents for the same reason. */
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td {
    display: block;
    box-sizing: border-box;
    min-width: 100%;
    text-align: left;
    border: 0;
    padding: 0;
  }

  /* The thumbnail rail, absolutely positioned in the reserved gutter.

     68px, not 90px, because the page block already caps the image at
     60px below 768px and that cap is left alone: every thumbnail in
     the catalogue is served with a fixed width in the markup regardless
     of the file's real size, so raising the cap would upscale any
     product whose thumbnail is narrower. The rail is sized to the
     image instead of the image to the rail. min-width resets the
     min-width:100% from the shared td rule above, which would otherwise
     stretch the rail across the whole card. */
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(1) {
    position: absolute;
    left: 14px;
    top: 16px;
    width: 68px;
    min-width: 0;
  }

  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(1) > div {
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* The item name leads the card. Block flow follows DOM order, which
     is already name, qty, price, total, so no placement is needed. */
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(2) {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #333333;
    color: var(--bb-ink);
    padding-bottom: 8px;
  }

  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(3),
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(4),
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(5) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    padding: 3px 0;
  }

  /* The headings the hidden row used to carry, restored per cell in the
     same 11px uppercase the desktop header uses. */
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(3)::before,
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(4)::before,
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(5)::before {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #446034;
    color: var(--bb-green);
  }

  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(3)::before {
    content: "Qty";
  }

  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(4)::before {
    content: "Item price";
  }

  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(5)::before {
    content: "Total";
  }

  /* The line total closes the card, ruled off and weighted, because it
     is the figure the customer is checking. */
  .checkout-container .shopping-cart-table-wrapper tr:not(:first-child) td:nth-child(5) {
    font-size: 16px;
    font-weight: 700;
    color: #446034;
    color: var(--bb-green);
    border-top: 1px solid #d3e0ce;
    border-top: 1px solid var(--bb-hairline);
    margin-top: 6px;
    padding-top: 8px;
  }

  /* The page block's `overflow-x: auto` on the wrapper is left exactly
     as it is. It is a tie at (0,2,0) that this file would lose anyway
     from first position, and it should stay: `auto` shows a scrollbar
     only if something overflows, so it is the honest failure mode if a
     future line item is wider than expected. `hidden` would silently
     clip that instead. Measured after this change at 390px: wrapper
     scrollWidth equals clientWidth, so nothing is shown. */
}


/* --- Content pages on narrow screens ------------------------------ */

@media (max-width: 768px) {
  h3.bb-title {
    font-size: 26px;
    margin-bottom: 16px;
  }

  p.bb-lede,
  p.bigger.bb-lede { font-size: 15px; }

  p.bb-body { font-size: 15px; }

  #content-container-display.bb-cart-main { padding: 20px 14px 24px; }

  #content-container-display.bb-verify,
  #content-container-display.bb-errpage-main { padding: 20px 16px 26px; }

  #content-container.bb-confirm { padding: 20px 14px 28px; }

  .bb-receipt { padding: 20px 18px; }

  .shopping-cart-table-wrapper.bb-cart-table {
    border-radius: 8px;
    margin: 0 0 18px;
  }

  /* --- Cart line items as cards --------------------------------------
     The cart's six rendered columns (Delete, Item, Description, Qty,
     Item Price, Total) measured 382px of table against a 339px content
     box at a 390px viewport, so the TOTAL column lived behind a
     horizontal scrollbar. Same treatment the checkout table got, and
     the same engine-proof mechanism: block rows with absolutely
     positioned rails, never grid or flex on table internals, which
     Safari mishandles. Thumbnail rail left with the delete control
     directly below it, text stacked beside: padding is 14 + 68 rail +
     14 gap = 96 left. The delete is deliberately NOT pinned to the
     right edge: the page carries a pre-existing ~14px horizontal
     overhang at phone widths, so a right-anchored control renders
     partly off screen. The left rail is always visible. */
  table.bb-cart-grid,
  table.bb-cart-grid tbody {
    display: block;
    width: 100%;
  }

  table.bb-cart-grid tr:first-child { display: none; }

  table.bb-cart-grid tr:not(:first-child) {
    display: block;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #d3e0ce;
    border-bottom: 1px solid var(--bb-hairline);
    padding: 14px 14px 12px 96px;
    /* 16 img top + 38 img + 10 gap + 44 delete + 8 = the rail's needs */
    min-height: 116px;
  }

  table.bb-cart-grid tr:last-child { border-bottom: 0; }

  /* ItemStyle emits INLINE widths (60/240/65px) on these cells;
     min-width outranks width, so the cells fill the card. */
  table.bb-cart-grid tr:not(:first-child) td {
    display: block;
    box-sizing: border-box;
    min-width: 100%;
    height: auto;
    text-align: left;
    border: 0;
    padding: 0;
    font-size: 14px;
  }

  /* Rail and control cells escape the min-width stretch. */
  table.bb-cart-grid tr:not(:first-child) td:nth-child(1),
  table.bb-cart-grid tr:not(:first-child) td:nth-child(2) {
    position: absolute;
    min-width: 0;
  }

  /* Delete control, in the rail directly below the thumbnail, keeping
     its 44px round-2 target. ItemStyle emits INLINE width:60px and
     height:60px on this cell, and an inline width beats any author
     `width`. `max-width` clamps the used width regardless of where
     `width` came from, so it is the declaration doing the work here --
     without it the cell overlaps the text column. left 26 centres the
     44px control under the 68px rail (14 + (68-44)/2). */
  table.bb-cart-grid tr:not(:first-child) td:nth-child(1) {
    left: 26px;
    top: 64px;
    width: 44px;
    max-width: 44px;
    max-height: 44px;
  }

  /* Thumbnail rail. */
  table.bb-cart-grid tr:not(:first-child) td:nth-child(2) {
    left: 14px;
    top: 16px;
    width: 68px;
  }

  table.bb-cart-grid .bb-cell-media { width: auto; }
  table.bb-cart-grid .bb-cell-media img { max-width: 60px; max-height: none; }

  /* Description leads the card. */
  table.bb-cart-grid tr:not(:first-child) td:nth-child(3) {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #333333;
    color: var(--bb-ink);
    padding-bottom: 8px;
  }

  /* Qty, Item price and Total become labelled rows, restoring the
     headings the hidden first row carried. */
  table.bb-cart-grid tr:not(:first-child) td:nth-child(4),
  table.bb-cart-grid tr:not(:first-child) td:nth-child(5),
  table.bb-cart-grid tr:not(:first-child) td:nth-child(6) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
  }

  table.bb-cart-grid tr:not(:first-child) td:nth-child(4)::before,
  table.bb-cart-grid tr:not(:first-child) td:nth-child(5)::before,
  table.bb-cart-grid tr:not(:first-child) td:nth-child(6)::before {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #446034;
    color: var(--bb-green);
  }

  table.bb-cart-grid tr:not(:first-child) td:nth-child(4)::before { content: "Qty"; }
  table.bb-cart-grid tr:not(:first-child) td:nth-child(5)::before { content: "Item price"; }
  table.bb-cart-grid tr:not(:first-child) td:nth-child(6)::before { content: "Total"; }

  table.bb-cart-grid tr:not(:first-child) td:nth-child(6) {
    font-size: 16px;
    font-weight: 700;
    color: #446034;
    color: var(--bb-green);
    border-top: 1px solid #d3e0ce;
    border-top: 1px solid var(--bb-hairline);
    margin-top: 6px;
    padding-top: 8px;
  }

  /* The centring divs inside Qty/Price/Total cells must not stretch
     between the flex label and value. */
  table.bb-cart-grid .bb-cell-num { width: auto; }

  table.bb-cart-grid input.bb-qty {
    width: 56px;
    padding: 6px 4px;
    text-align: center;
  }

  .shopping-cart-total-container.bb-summary { max-width: none; }

  .form-button-default.bb-btn,
  .form-button-default.bb-btn-primary {
    flex: 1 1 auto;
    font-size: 15px;
    padding: 12px 18px;
  }

  table.bb-facts td.bb-fact-term { width: 120px; }
}


@media (prefers-reduced-motion: reduce) {
  .form-button-default.bb-add { transition: none; }
  .navitem-main.bb-navlink a { transition: none; }
  .navitem-bottom.bb-storelink a { transition: none; }
  .form-button-default.bb-btn,
  .form-button-default.bb-btn-primary { transition: none; }
  table.bb-cart-grid input[type="image"] { transition: none; }
  /* Round 2 */
  .mobile-menu-button.bb-menu-btn,
  .mobile-menu-button.bb-menu-btn span { transition: none; }
  #footer-store-quicklinks.bb-footer-links a { transition: none; }
}


/* ==================================================================
   Product thumbnail aspect guard                          (round 2b)
   ==================================================================
   The cart and checkout item cells render thumbnails at a fixed
   width/height in markup. Those attributes were 90x50 (aspect 1.80)
   against sources that are 95x60 or 96x60 (aspect 1.583-1.600), so
   every card was being stretched ~12% horizontally as well as being
   resampled at a non-integer ratio. The markup is now 76x48, which
   matches 95x60 exactly and downsamples 1.25x, so it resolves sharper.

   height:auto here is the safety net: images/madloot_tn.gif (60x95)
   and images/madloot2_tn.gif (65x103) are PORTRAIT, and no single
   fixed height can serve both orientations. Letting height derive from
   width keeps any future thumbnail undistorted whatever its shape. */
.bb-cell-media img,
.checkout-container td img {
  height: auto;
  max-height: none;
}