/* =====================================================================
   STORE THEME -- BUCKET OUTLET
   =====================================================================
   This is the other-sites css/store-theme.css with the colour block changed
   for this site, then SECTION B (repaints the template parts) and SECTION C
   (choices specific to this site). The colours come from this site's own
   bucket.css, mobile.css and logo (Steve, 11/7/26: "use the colors found in
   the pages and style sheet"):
   navy #041251 (the four menu tabs: top bar, footer, headings, buttons; hover #070F30),
   link blue #4962D7 (links, accent lines), periwinkle #C6CBE1 and #8B9BE5 (borders),
   wine #740227 (the "Bucket" of the logo: prices, urgent text), page grey #F5F5F5,
   and the green #006100 of the "Go to Checkout" button (same on every site).
   To change a colour, change it in the colour block at the top and nowhere
   else.                                                                    */

/* =====================================================================
   STORE THEME — single file to reskin this cart/checkout for another site
   =====================================================================
   Everything that varies between AllAmericanCanner.com, Bucket Outlet,
   Pressure Cooker Outlet, etc. lives in this ONE block. Nothing else in
   this file, and nothing in basket.php / securecheckout.php, needs to
   change to reskin a site — swap these values, redeploy this one file.

   Values below are this site's own (see the note at the top of the file). */

:root {
  /* --- brand colors: THE part that changes per site --- */
  --aa-navy:        #041251;   /* primary brand color -- headers, links, focus rings */
  --aa-navy-dark:    #070F30;   /* navy hover/active state */
  --aa-green:        #006100;   /* call-to-action buttons (Continue, Place Order) */
  --aa-green-dark:   #004d00;   /* green hover state */
  --aa-price:        #740227;   /* prices, order totals emphasis, urgent banner text */
  --aa-tan:          #4962D7;   /* trust-bar / express-rates accent (matches site's existing trust-bar) */

  /* Shipping-method row colors -- match the site's existing upsground /
     upsred / upsblue / upsthreeday / upsfree classes so Ground/Express/
     Free read the same way here as they do elsewhere on the site. */
  --aa-ship-ground:  #5E2F00;
  --aa-ship-express: #740227;
  --aa-ship-blue:    #2B3F9E;
  --aa-ship-orange:  #c66a00;
  --aa-ship-free:    #006100;

  /* Typography -- Roboto is already loaded site-wide via Google Fonts */
  /* The template (Canvas) has its own link/accent colour. Without these two
     lines links and a few template parts stay in the Canner blue. */
  --cnvs-themecolor:     #041251;
  --cnvs-themecolor-rgb: 4, 18, 81;

  --store-font: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;

  /* --- everything below is derived from the brand colors above and the
     site's existing neutral palette. It should rarely need to change
     when reskinning -- only the block above usually does. --- */
  --surface-bg:        #F5F5F5;
  --surface-card:       #ffffff;
  /* Was a separate, slightly-different off-white (#f8f9fa) from
     --surface-bg (#f4f5f4) -- close enough to look like a mismatch, not a
     deliberate second shade. Aliased to --surface-bg (9/25/26, Red Hill
     staff feedback: "too many shades... distracting") so every shaded
     panel across cart + checkout (note boxes, sunken inputs, table
     stripes) reads as ONE consistent light gray instead of two near-twins. */
  --surface-sunken:     var(--surface-bg);
  --surface-border:     #C6CBE1;
  --surface-border-strong: #8B9BE5;
  /* --text-body was a near-black dark gray (#212529, Bootstrap's default)
     -- changed to solid black (9/26/26) along with --text-muted/
     --text-faint below, per Steve's request that ALL text be black, not
     just the muted/secondary text fixed on 9/25/26. */
  --text-body:          #000000;
  /* Both were mid/light grays (Bootstrap's defaults). Changed to solid
     black (9/25/26, Red Hill staff feedback: "anywhere there is muted or
     gray text must be changed to black... must consider older or
     visually disabled customers"). Hierarchy between body text and these
     "secondary" tokens now comes from font-size/weight only, not color --
     deliberate, since color alone is a poor way to convey hierarchy for
     low-vision readers anyway. */
  --text-muted:         #000000;
  --text-faint:         #000000;
  --brand-tint:         #E6E9F7;   /* light navy wash for selected/focus states */
  --accent-tint:        #e6f0e6;   /* light green wash */
  --price-tint:         #f6e7ec;   /* light garnet wash for warnings tied to price/shipping */
  --tan-tint:           #EEF0F9;   /* light tan wash, matches the site's existing trust-bar background */
  --danger:             #dc3545;
  --paypal-yellow:      #ffc439;
  --paypal-text:        #10151a;

  --radius-card:    10px;
  --radius-control: 7px;
  --shadow-card: 0 1px 2px rgba(30, 42, 48, 0.06), 0 1px 1px rgba(30, 42, 48, 0.04);
}

/* =====================================================================
   Accessibility pass (9/26/26) -- Steve: "We have a lot of older
   customers and some who are visually impaired... adjust font sizes if
   needed." Every explicit font-size in this file (labels, item names,
   prices, summary lines, trust-row text, etc.) was bumped up roughly
   1-1.5px from its previous value -- small enough not to break any of
   the fixed-width layouts below, large enough to noticeably help
   readability on a phone screen. The one deliberate exception is
   .rhz-step-num further down (the small numbered circle in the Billing/
   Shipping step headers) -- it's a tightly-sized 26x26px badge holding a
   single digit, so it was left at its original size rather than risk
   crowding the glyph against the circle's edge. */

/* =====================================================================
   Shared layout — used by basket.php and the checkout page
   ===================================================================== */
.rhz-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
  font-family: var(--store-font);
  color: var(--text-body);
}
@media (max-width: 880px) {
  .rhz-shell { grid-template-columns: 1fr; padding: 16px 16px 64px; }
  .rhz-summary-col { order: -1; }
}
.rhz-main-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.rhz-ship-banner {
  text-align: center;
  color: var(--aa-price);
  font-weight: 700;
  font-size: 15px;
  max-width: 1180px;
  margin: 12px auto 0;
  padding: 0 24px;
  font-family: var(--store-font);
}
.rhz-ship-banner span { font-weight: 400; color: var(--text-muted); }

.rhz-crumb-row {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--text-faint);
  font-family: var(--store-font);
}
.rhz-crumb-row a { color: var(--text-faint); text-decoration: none; }
.rhz-crumb-row a:hover { color: var(--aa-navy); text-decoration: underline; }
.rhz-crumb-row .is-current { color: var(--text-body); font-weight: 600; }

/* =====================================================================
   Cards (both plain content cards and the checkout accordion steps)
   ===================================================================== */
.rhz-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.rhz-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-border);
  font-size: 16.5px; font-weight: 700;
}
.rhz-card-head svg { color: var(--aa-navy); flex-shrink: 0; }
.rhz-card-body { padding: 18px 20px; }

.rhz-two-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .rhz-two-card-row { grid-template-columns: 1fr; } }

/* Checkout accordion steps */
.rhz-step {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.rhz-step-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  background: none; border: none; width: 100%; text-align: left; font-family: inherit;
}
.rhz-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.rhz-step.is-active .rhz-step-num { background: var(--aa-navy); color: #fff; }
.rhz-step.is-done .rhz-step-num { background: var(--aa-green); color: #fff; }
.rhz-step.is-done .rhz-step-num::before { content: "\2713"; }
.rhz-step-title-wrap { flex: 1; min-width: 0; }
.rhz-step-title { font-size: 17.5px; font-weight: 700; }
.rhz-step-subtitle {
  font-size: 14.5px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rhz-step-edit {
  font-size: 14.5px; font-weight: 600; color: var(--aa-navy);
  background: none; border: none; cursor: pointer; padding: 6px 8px; flex-shrink: 0;
}
.rhz-step-chevron { color: var(--text-faint); flex-shrink: 0; transition: transform .18s ease; }
.rhz-step.is-active .rhz-step-chevron { transform: rotate(180deg); }
.rhz-step:not(.is-active) .rhz-step-body { display: none; }
.rhz-step-body { padding: 4px 20px 22px; }

/* =====================================================================
   Forms
   ===================================================================== */
.rhz-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rhz-field-grid.cols-3 { grid-template-columns: 1.4fr 0.8fr 1fr; }
.rhz-field-grid.cols-2-even { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
  .rhz-field-grid, .rhz-field-grid.cols-3, .rhz-field-grid.cols-2-even { grid-template-columns: 1fr; }
}
.rhz-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.rhz-field label {
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.rhz-field label .opt { text-transform: none; font-weight: 400; letter-spacing: 0; }
.rhz-field input, .rhz-field select {
  font-family: var(--store-font);
  font-size: 16.5px;
  padding: 10px 12px;
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-body);
}
.rhz-field input:focus, .rhz-field select:focus {
  outline: none; border-color: var(--aa-navy);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.rhz-radio-inline-group { display: flex; gap: 18px; margin: -2px 0 14px; flex-wrap: wrap; }
.rhz-radio-inline { display: flex; align-items: center; gap: 7px; font-size: 15.5px; cursor: pointer; }
.rhz-radio-inline input { accent-color: var(--aa-navy); width: 16px; height: 16px; }
.rhz-section-label {
  font-size: 14px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--surface-border);
}
.rhz-section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rhz-check-line {
  display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--text-muted);
  margin: 2px 0 14px;
}
.rhz-check-line input { width: 16px; height: 16px; accent-color: var(--aa-navy); flex-shrink: 0; }

/* Shipping method options */
.rhz-option-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.rhz-option-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.rhz-option-row:hover { border-color: var(--surface-border-strong); }
.rhz-option-row.is-checked { border-color: var(--aa-navy); background: var(--brand-tint); }
.rhz-option-row input[type="radio"], .rhz-option-row input[type="checkbox"] {
  accent-color: var(--aa-navy); width: 17px; height: 17px; flex-shrink: 0;
}
.rhz-option-main { flex: 1; min-width: 0; }
.rhz-option-name { font-size: 16px; font-weight: 600; }
.rhz-option-desc { font-size: 14px; color: var(--text-muted); margin-top: 1px; }
.rhz-option-price { font-size: 16px; font-weight: 700; flex-shrink: 0; }
.rhz-option-price.is-free { color: var(--aa-ship-free); }
.rhz-option-price.c-ground { color: var(--aa-ship-ground); }
.rhz-option-price.c-express { color: var(--aa-ship-express); }
.rhz-option-price.c-blue { color: var(--aa-ship-blue); }
.rhz-option-price.c-orange { color: var(--aa-ship-orange); }

/* Payment method tabs */
.rhz-pay-tabs { display: flex; gap: 8px; margin: 14px 0 20px; flex-wrap: wrap; }
.rhz-pay-tab {
  flex: 1; min-width: 120px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px;
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-muted);
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  font-family: var(--store-font);
}
.rhz-pay-tab.is-active { border-color: var(--aa-navy); background: var(--brand-tint); color: var(--aa-navy); }
.rhz-pay-panel { display: none; }
.rhz-pay-panel.is-active { display: block; }

.rhz-note-box {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-control);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.rhz-note-box strong { color: var(--text-body); }

/* Insurance + billing-same toggles */
.rhz-toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--surface-border-strong);
  border-radius: var(--radius-control);
  margin: 4px 0 14px;
}
.rhz-toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--aa-green); flex-shrink: 0; }
.rhz-toggle-main { flex: 1; }
.rhz-toggle-title { font-size: 15.5px; font-weight: 600; }
.rhz-toggle-desc { font-size: 14px; color: var(--text-muted); margin-top: 1px; }
.rhz-toggle-price { font-size: 15.5px; font-weight: 700; color: var(--text-muted); }

.rhz-billing-toggle {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px;
  background: var(--surface-sunken);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-control);
  margin: 4px 0 4px;
}
.rhz-billing-toggle input { width: 17px; height: 17px; accent-color: var(--aa-navy); margin-top: 2px; flex-shrink: 0; }
.rhz-billing-toggle label { font-size: 15.5px; font-weight: 600; cursor: pointer; }
.rhz-billing-toggle .sub { font-size: 14px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
#rhzBillingFields { display: none; margin-top: 14px; }
#rhzBillingFields.is-open { display: block; }

.rhz-promo-link {
  background: none; border: none; padding: 0; margin: 2px 0 16px;
  color: var(--aa-navy); font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px; font-family: var(--store-font);
}
.rhz-promo-row { display: none; gap: 8px; margin: 0 0 16px; }
.rhz-promo-row.is-open { display: flex; }
.rhz-promo-row input {
  flex: 1; font-family: var(--store-font); font-size: 15.5px; padding: 9px 12px;
  border: 1px solid var(--surface-border-strong); border-radius: var(--radius-control);
  background: var(--surface-card); color: var(--text-body);
}
.rhz-promo-row button {
  padding: 9px 16px; border-radius: var(--radius-control); border: 1px solid var(--surface-border-strong);
  background: var(--surface-sunken); font-weight: 600; font-size: 15px; cursor: pointer; color: var(--text-body);
  font-family: var(--store-font);
}
.rhz-promo-msg { font-size: 14px; margin: 8px 0 4px; display: none; }
.rhz-promo-msg.is-error { display: block; color: var(--danger); }
.rhz-promo-msg.is-success { display: block; color: var(--aa-green-dark); }

/* =====================================================================
   Buttons
   ===================================================================== */
.rhz-btn-primary {
  width: 100%;
  background: var(--aa-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-control);
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--store-font);
  transition: background .12s ease, transform .08s ease, opacity .12s ease;
}
.rhz-btn-primary:hover { background: var(--aa-green-dark); color: #fff; }
.rhz-btn-primary:active { transform: translateY(1px); }
.rhz-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
/* 10/1/26 -- "Go to Checkout" on basket.php is an <a> styled as this button
   (so it can link to checkout.php), while "Update Shipping" right above it
   is a real <button>. Anchor tags pick up hover-color rules from elsewhere
   in the site's older stylesheets (style.css / custom.css, outside this
   delivery package) that a <button> never sees, which was turning this
   link's text black on hover even though the button above it stayed white.
   Explicitly asserting color on :hover (not just background, as above) adds
   enough selector weight to beat a plain "a:hover" rule. Any page using
   .rhz-btn-primary on an <a> -- including "Go to Checkout" -- now keeps the
   same white hover text as a real <button> does. */
.rhz-btn-secondary {
  background: var(--surface-card);
  color: var(--aa-navy);
  border: 1px solid var(--aa-navy);
  border-radius: var(--radius-control);
  padding: 11px 16px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--store-font);
}
.rhz-btn-secondary:hover { background: var(--brand-tint); }
.rhz-btn-navy {
  width: 100%;
  background: var(--aa-navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-control);
  padding: 13px 18px;
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--store-font);
}
.rhz-btn-navy:hover { background: var(--aa-navy-dark); }
.rhz-btn-paypal {
  width: 100%;
  background: var(--paypal-yellow);
  color: var(--paypal-text);
  border: none;
  border-radius: var(--radius-control);
  padding: 13px 18px;
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--store-font);
}
.rhz-btn-row { display: flex; gap: 10px; }
.rhz-btn-row > * { flex: 1; }
@media (max-width: 480px) { .rhz-btn-row { flex-direction: column; } }

/* =====================================================================
   Cart items (basket.php)
   ===================================================================== */
.rhz-cart-item-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--surface-border); }
.rhz-cart-item-row:last-child { border-bottom: none; padding-bottom: 4px; }
.rhz-cart-item-thumb {
  width: 76px; height: 76px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--surface-border);
  overflow: hidden; background: var(--surface-sunken);
}
.rhz-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rhz-cart-item-main { flex: 1; min-width: 0; }
.rhz-cart-item-name { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.rhz-cart-item-sku { font-size: 13.5px; color: var(--text-faint); margin-bottom: 10px; }
.rhz-cart-item-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rhz-qty-stepper {
  display: flex; align-items: center; border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-control); overflow: hidden;
}
.rhz-qty-stepper button {
  width: 30px; height: 32px; border: none; background: var(--surface-sunken); color: var(--text-body);
  font-size: 16.5px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rhz-qty-stepper button:hover { background: var(--surface-border); }
.rhz-qty-stepper input {
  width: 38px; text-align: center; font-weight: 700; font-size: 15.5px;
  border: none; border-left: 1px solid var(--surface-border-strong);
  border-right: 1px solid var(--surface-border-strong);
  padding: 6px 2px; font-family: var(--store-font);
}
.rhz-cart-item-remove {
  background: none; border: none; color: var(--aa-price); font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 0; display: flex; align-items: center; gap: 5px; font-family: var(--store-font);
}
.rhz-cart-item-remove:hover { text-decoration: underline; }
.rhz-cart-item-total { text-align: right; flex-shrink: 0; font-size: 16.5px; font-weight: 700; color: var(--aa-price); white-space: nowrap; }

.rhz-zone-nudge { border-color: var(--aa-price) !important; }
.rhz-zone-nudge .rhz-card-head { background: var(--price-tint); border-bottom-color: var(--aa-price); }
.rhz-zone-warning {
  display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--aa-price);
  background: var(--price-tint); border-radius: var(--radius-control); padding: 10px 12px; margin-top: 10px;
}

.rhz-express-card .rhz-card-head { background: var(--tan-tint); border-bottom-color: var(--aa-tan); }
.rhz-express-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--surface-border); font-size: 15px; font-weight: 600;
}
.rhz-express-row:last-of-type { border-bottom: none; }
.rhz-express-row .lbl { display: flex; align-items: center; gap: 7px; }
.rhz-express-hint { font-size: 13px; color: var(--text-faint); margin-top: 10px; }

/* =====================================================================
   Order summary sidebar
   ===================================================================== */
.rhz-summary-col { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 880px) { .rhz-summary-col { position: static; } }
.rhz-summary-title { font-size: 16.5px; font-weight: 700; margin-bottom: 14px; }
.rhz-summary-item { display: flex; gap: 12px; margin-bottom: 14px; }
.rhz-summary-item-thumb {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--surface-border); overflow: hidden; background: var(--surface-sunken);
}
.rhz-summary-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rhz-summary-item-main { flex: 1; min-width: 0; }
/* 10/1/26 -- product names here are long, unbroken strings (SKU-style, no
   spaces for the browser to wrap at). Without a break rule, a name longer
   than the sidebar column just overflows past its box with nowhere to
   wrap, visually running into the price column next to it. overflow-wrap
   lets the browser break mid-word when it has to, instead of overflowing. */
.rhz-summary-item-name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; word-break: break-word; }
.rhz-summary-item-qty { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.rhz-summary-item-price { font-size: 15px; font-weight: 700; white-space: nowrap; }
.rhz-summary-divider { border: none; border-top: 1px solid var(--surface-border); margin: 14px 0; }
.rhz-summary-line { display: flex; justify-content: space-between; font-size: 15px; color: var(--text-muted); margin-bottom: 9px; }
.rhz-summary-line span:last-child { color: var(--text-body); font-weight: 500; }
.rhz-summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 16.5px; font-weight: 700; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--surface-border);
}
.rhz-summary-total .amount { font-size: 21px; color: var(--aa-navy); }

/* 10/10/26 -- checkout.php's Order Summary now uses the same item card as the
   Order Summary on the payment page (secure/securecheckout.php): picture on
   top, Part #, the FULL product name, then Qty / Price / Total -- instead of
   the old tiny thumbnail beside a name squeezed against the price. The
   sidebar column was also widened (checkout.php: col-lg-4) so these fit. */
.rhz-sumcard {
  border: 1px solid var(--surface-border); border-radius: 8px;
  background: var(--surface-card); padding: 14px; margin-bottom: 14px;
}
.rhz-sumcard-thumb { text-align: center; margin-bottom: 12px; }
.rhz-sumcard-thumb img { max-width: 120px; width: 100%; height: auto; border-radius: 8px; }
.rhz-sumcard-part { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.rhz-sumcard-label { display: block; font-size: 13px; color: var(--text-body); }
.rhz-sumcard-name { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; overflow-wrap: break-word; word-break: break-word; }
.rhz-sumcard-grid { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 8px; }
.rhz-sumcard-grid strong { display: block; font-size: 15px; }
.rhz-sumcard-grid .is-end { text-align: right; }
.rhz-sumcard-total { color: var(--aa-navy); }
.rhz-sumcard-totals { margin-bottom: 0; }
.rhz-sumcard-totals .rhz-summary-line { color: var(--text-body); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--surface-border); }
.rhz-sumcard-totals .rhz-summary-total { margin-top: 4px; border-top: none; padding-top: 6px; }

.rhz-trust-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.rhz-trust-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); }
.rhz-trust-row svg { flex-shrink: 0; margin-top: 1px; color: var(--aa-navy); }
.rhz-trust-row strong { color: var(--text-body); font-weight: 600; }

/* =====================================================================
   Confirmation / receipt
   ===================================================================== */
.rhz-confirm-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px 32px;
  text-align: center;
}
.rhz-confirm-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-tint); color: var(--aa-green-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.rhz-confirm-card h2 { font-size: 23px; margin-bottom: 8px; color: var(--text-body); }
.rhz-confirm-card p { color: var(--text-muted); margin: 0 auto 4px; max-width: 380px; }
.rhz-confirm-order-no {
  display: inline-block; margin-top: 14px; padding: 8px 16px;
  background: var(--surface-sunken); border-radius: var(--radius-control);
  font-weight: 700; letter-spacing: 0.02em;
}

.rhz-tabular { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* =====================================================================
   "Select your state first" nudge — shipping calculator card, basket.php
   ===================================================================== */
@keyframes rhz-shipping-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 49, 54, 0.45); }
  50%       { box-shadow: 0 0 0 8px rgba(167, 49, 54, 0); }
}
.rhz-zone-nudge-card {
  animation: rhz-shipping-pulse 2s ease-in-out 3;
  border-color: var(--aa-price) !important;
}
.rhz-zone-nudge-card .rhz-card-head {
  background: var(--price-tint) !important;
  border-bottom-color: var(--aa-price) !important;
  color: var(--text-body);
}
/* On mobile, float the shipping calculator to the top of the stacked
   column (ahead of the coupon card) when no zone has been selected yet,
   so customers see it before anything else. */
@media (max-width: 700px) {
  .rhz-zone-nudge-card { order: -1; }
}

/* =====================================================================
   Readability pass (9/25/26) — Red Hill staff feedback after reviewing
   the redesign in person: muted/gray text must read as black, and the
   assortment of gray/tan panel shades across cart + checkout should
   read as one consistent shade instead of several slightly-different
   ones. See the --text-muted/--text-faint/--surface-sunken changes near
   the top of this file for the token-level half of this; the rules below
   catch the spots that don't go through those tokens.
   ===================================================================== */

/* basket.php and secure/securecheckout.php also use Bootstrap's own
   .text-muted utility class directly (not just our --text-muted token) in
   a handful of places -- Bootstrap ships that class with `!important`, so
   it has to be matched here to actually win. */
.text-muted {
  color: #000 !important;
}

/* secure/securecheckout.php still uses Bootstrap's stock .alert-warning
   (tan/yellow) for two ALWAYS-visible notices -- the privacy notice at
   the top of the page and the "if paying by check or money order" box in
   Payment Information -- which read as a third, unrelated shade next to
   everything else on the page. Recolored to the same shared
   --surface-sunken panel shade as every other note box on these pages,
   keeping a colored left edge (rather than a full tan fill) as the "this
   is a notice" cue. Doesn't touch .alert-info/.alert-danger/.alert-success,
   which only appear situationally (PayPal cancelled, card declined,
   coupon applied) and whose color there is carrying real meaning, not
   just decoration. */
.alert-warning {
  background-color: var(--surface-sunken);
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--aa-tan);
  color: var(--text-body);
}
.alert-warning .text-muted { color: var(--text-body) !important; }


/* "We accept" payment-options strip (basket.php + checkout.php), 10/15/26.
   A framed, labelled block directly under the main buttons so shoppers see
   the accepted payment methods before they commit. The picture itself is
   pics/logos/paymentoptions.webp -- replace that one file and every page
   that uses it updates. */
.rhz-accepted {
  margin-top: 1.25rem;
  padding: .85rem 1rem 1rem;
  text-align: center;
  background-color: #fff;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}
.rhz-accepted-label {
  margin-bottom: .6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-body);
}
.rhz-accepted-label i { margin-right: 6px; }
.rhz-accepted img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
}
/* Compact one-row version used near the top of basket.php and checkout.php:
   label on the left, card/PayPal/Google Pay image on the right (stacks on a phone). */
.rhz-accepted.rhz-accepted--bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.25rem;
  margin-top: .75rem;
  padding: .6rem 1rem;
}
.rhz-accepted--bar .rhz-accepted-label { margin: 0; }
.rhz-accepted--bar img { flex: 0 1 300px; width: 100%; max-width: 300px; margin: 0; }
/* Desktop and laptop (768px and wider): larger payment-options picture, easier to read.
   Phones are untouched (300px, above). */
@media (min-width: 768px) {
  .rhz-accepted--bar img { flex-basis: 460px; max-width: 460px; }
}

/* ---- "Orders Placed Before 4 PM Eastern..." line, sized 1rem (10/20/26; was smaller 10/19) ----------
   custom.css (shared site-wide) makes this line 1.1em. In the cart pages it
   should inform, not compete with the buttons. Same text, same colour. */
body .free-shipping-bannercart { font-size: 1rem; line-height: 1.35; }

/* ---- Right-hand column (Order Summary / Express Shipping Rates / "Secure checkout" box)
   no longer clipped at the bottom on desktop and laptop (10/20/26) ----------------
   .rhz-summary-col was meant to be "sticky", but the site template (style.css) forces every
   "col-..." element to position: relative, and that rule is stronger than the one above.
   So the column was never sticky; "top: 20px" instead pushed it 20px DOWN, past the bottom
   of its row, where the page cut off the last 20px of the box. This restores the position
   it really had (normal, in the page) minus the 20px push. Phones are unchanged. */
@media (min-width: 992px) {
  body .row > .rhz-summary-col.rhz-summary-col { position: static; top: auto; }
}

/* =====================================================================
   SECTION B -- TEMPLATE PARTS THAT ARE PAINTED IN CANNER BLUE/GREEN/RED
   =====================================================================
   The Canvas template files copied from Canner (style.css, css/custom.css,
   css/shopping-cart-enhanced-fontawesome.css) have Canner's colours typed
   straight into a handful of rules. Instead of editing those big shared
   files, the rules below re-paint them from the tokens at the top of this
   file. store-theme.css loads AFTER those files, so these win.
   Nothing in this section has a colour typed in it: it follows the tokens.
   The same section works unchanged for every other site.                */

/* top bar and footer bands */
#top-bar                       { background-color: var(--aa-navy); }
.footer                        { background-color: var(--aa-navy); }
hr                             { color: var(--aa-navy); }

/* Top bar and footer text. (Added 11/7/26 after Kerosene-Wicks.com: on a server whose css/custom.css is not Canner's,
   the search button came out dark, the footer links took the footer's own colour and vanished, and the red cart-count
   bubble was lost on the bar. These rules no longer depend on what is in css/custom.css.)
   White text on the brand colour; the search button is the same green on every site; the cart count is a white bubble
   with a number in the brand colour. */
html body #top-bar                      { color: #fff; }
html body .footer                       { color: #fff; }
html body #top-bar .rhz-search-btn,
html body #top-bar .search-btn-green    { background-color: #008700 !important; border-color: #008700 !important; color: #fff !important; }
html body #top-bar .rhz-search-btn:hover,
html body #top-bar .search-btn-green:hover { background-color: #1a6d2e !important; border-color: #1a6d2e !important; }
html body #top-bar .top-links a,
html body #top-bar .top-links a:visited,
html body #top-bar .top-links a i       { color: #fff !important; text-decoration: none; }
html body #top-bar .top-links a:hover,
html body #top-bar .top-links a:focus   { color: #fff !important; text-decoration: underline; }
html body .footer h6                    { color: var(--surface-border); }
html body .footer a,
html body .footer a:visited             { color: #fff !important; text-decoration: none; }
html body .footer a:hover,
html body .footer a:focus               { color: #fff !important; text-decoration: underline; }
html body #top-bar .badge.cart-count-badge { background-color: #fff !important; color: var(--aa-navy) !important; font-size: 0.8rem; font-weight: 700; }

/* "Update"/"Apply" style buttons, Continue Shopping. */
.btn-stig                      { background-color: var(--aa-navy); border-color: var(--aa-navy); }
.btn-stig:hover                { background-color: var(--aa-navy-dark); border-color: var(--aa-navy-dark); }
.btn-continueshop              { background-color: var(--aa-navy); border-color: var(--aa-navy); }
.btn-continueshop:hover        { background-color: var(--aa-navy-dark); border-color: var(--aa-navy-dark); }

/* text colours */
.free-shipping-bannercart      { color: var(--aa-price); }
.carttotals                    { color: var(--aa-navy); }
.upsground                     { color: var(--aa-ship-ground); }
.upsred                        { color: var(--aa-ship-express); }
.upsblue                       { color: var(--aa-ship-blue); }
.upsfree                       { color: var(--aa-ship-free); }

/* Bootstrap's own blue (used by a few classes on the payment page and the receipt:
   "text-primary" for the totals, "border-primary", "btn-primary", "alert-info") follows the
   brand colour too, so no stray blue is left on a site that is not blue. */
.text-primary                  { color: var(--aa-navy) !important; }
.border-primary                { border-color: var(--aa-navy) !important; }
.btn-primary                   { background-color: var(--aa-navy); border-color: var(--aa-navy); }
.btn-primary:hover             { background-color: var(--aa-navy-dark); border-color: var(--aa-navy-dark); }
.alert-info                    { background-color: var(--brand-tint); border-color: var(--surface-border-strong); color: var(--text-body); }

/* =====================================================================
   SECTION C -- CHOICES THAT ARE SPECIFIC TO THIS SITE
   =====================================================================
   1. Links. The template colours links with the brand colour (#041251, almost
      black). This site's own links are the lighter blue #4962D7 (5.2:1 on white), so
      links in the cart use that, and darken to the navy when hovered. White text
      on the top bar and footer, the green search button and the cart-count bubble
      come from SECTION B.
   2. Accent lines under the top bar and above the footer: #4962D7, the link blue.
   3. Logo. This site's logo (pics/Buckets-Tubs-Pails-Logo-An-Independent-American-Business.gif)
      is 324 x 73, wide and short. It is shown at its own proportions, 56 px high on
      phones and tablets, 64 px on laptop-width screens, 73 px (its real size) on
      wide screens.
   4. Menu. Four menu words, ("Galvanized Metal Buckets", "Color Pails & Tubs",
      "Galvanized Tubs", "Plastic Buckets"), the same four tabs as the site.   */
:root { --cnvs-themecolor: #4962D7; --cnvs-themecolor-rgb: 73, 98, 215; }
html body a { color: #4962D7; }
html body a:hover, html body a:focus { color: #041251; }
html body #top-bar { border-bottom: 3px solid #4962D7; }
html body .footer { border-top: 4px solid #4962D7; }
html body #top-bar a, html body .footer a { color: #fff; }
html body #top-bar a:hover, html body .footer a:hover { color: #fff; }

html body #logo img.logo-default,
html body #logo img.rhz-logo-co,
html body #logo img.rhz-logo-img { height: 56px; max-height: 56px; width: auto; }
@media (min-width: 992px) and (max-width: 1400px) {
  html body #logo img.logo-default,
  html body #logo img.rhz-logo-co,
  html body #logo img.rhz-logo-img { height: 64px; max-height: 64px; }
}
@media (min-width: 1401px) {
  html body #logo img.logo-default,
  html body #logo img.rhz-logo-co,
  html body #logo img.rhz-logo-img { height: 73px; max-height: 73px; }
  .is-expanded-menu .header-size-lg { --cnvs-header-height: 100px; }
}
@media (min-width: 992px) {
  .is-expanded-menu .header-row { flex-wrap: nowrap !important; }
  .is-expanded-menu nav.primary-menu { flex: 1 1 0 !important; min-width: 0 !important; }
  .is-expanded-menu nav.primary-menu .menu-container { flex-wrap: nowrap !important; justify-content: flex-end !important; width: 100% !important; }
  .is-expanded-menu nav.primary-menu .menu-link { white-space: normal !important; text-align: center !important; line-height: 1.2 !important; }
}

/* =====================================================================
   CART PICTURES -- SWITCH (one place, every cart page)
   =====================================================================
   The little product picture next to each item shows on: the basket
   (basket.php), the checkout order summary (checkout.php), the payment page
   (secure/securecheckout.php) and the receipt (secure/testphp.php). The files
   come from pics/cartthumbs/<PRODUCT ID>.webp; where one is missing the page
   shows pics/cartthumbs/no-image.webp.

   A site with no cart pictures yet: TURN THEM OFF. Every page then looks as if
   the pictures never existed (no empty gaps, no grey "no image" boxes).
   TO TURN THEM OFF: delete the two marker lines that sit just above and just
   below the rule (the line starting "OFF-switch start" and the line starting
   "OFF-switch end"). TO TURN THEM BACK ON: put those two lines back.
   Nothing else on any page changes, and no payment or order file is touched.
   Needs a browser from 2023 or later to hide the empty column on the payment
   page and receipt (older browsers show a blank space there; nothing breaks). */
/* OFF-switch start: delete this whole line to turn the pictures OFF
.rhz-cart-item-thumb,
.rhz-summary-item-thumb,
.rhz-sumcard-thumb,
img.product-thumbnail,
.col-sm-2:has(> img.product-thumbnail),
.text-center:has(> img.product-thumbnail) { display: none !important; }
.row:has(> .col-sm-2 > img.product-thumbnail) { justify-content: space-between; }
OFF-switch end: delete this whole line too */