/* ============================================================
   School-Products Secure Checkout — Modern Layer v1.0
   Additive override: loaded AFTER /style.css
   SAFE TO REMOVE this file to restore original appearance.
   ============================================================ */

/* ============================================================
   1. BRAND TOKENS
   ============================================================ */
:root {
  --navy:      #003974;
  --navy-dark: #002a58;
  --teal:      #2bcaa5;
  --teal-dark: #23a88a;
  --yellow:    #fbbf3d;
  --ink:       #1e2733;
  --muted:     #5a6374;
  --surface:   #f5f7fb;
  --border:    #dde2eb;
  --white:     #ffffff;
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(0, 57, 116, 0.08);
  --shadow-md: 0 6px 24px rgba(0, 57, 116, 0.13);
  --t:         0.22s ease;
}

/* ============================================================
   2. BASE + GLOBAL TYPE SCALE
   style.css uses html{font-size:12px} with large em multipliers
   (h1=4em=48px, h3=2.5em=30px). These are fine for marketing
   pages but too heavy for a compact checkout flow. We scale
   headings down to proportional sizes for the checkout context.
   ============================================================ */
body {
  color: var(--ink);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a { transition: color var(--t); }

/* Page titles — checkout context (48px → ~32px) */
h1 {
  font-size: 2.6em !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* Section headings */
h2 {
  font-size: 1.6em !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
/* Sub-headings — "Pay by Invoice", "Forgotten something?", qty h3s */
h3 {
  font-size: 1.35em !important;
  line-height: 1.3;
  margin: 0;
}

/* ---- Customer details form: tighten label + field sizes ---- */
.customer_details label {
  font-size: 1.1em !important;
  font-weight: 600;
  color: var(--navy);
  display: block;
  margin-bottom: 3px;
}
.customer_details p {
  font-size: 1.1em !important;
}
.customer_details h1 { margin-bottom: 0.4em; }
.customer_details h2 {
  font-size: 1.3em !important;
  margin: 1em 0 0.3em 0;
}

/* ---- Sidebar summary h3 (Subtotal / Delivery / Total lines) ---- */
.sidebar h3 {
  font-size: 1.3em !important;
  font-weight: 700;
  margin: 0.3em 0 !important;
}

/* ---- Payment page card headings ---- */
#card_payment_container h2 {
  font-size: 1.5em !important;
  margin: 0 0 0.5em 0;
  color: var(--navy);
}
#invoice_payment h3,
#invoice_payment h2 {
  font-size: 1.4em !important;
  margin: 0 0 0.5em 0;
  color: var(--navy);
}
/* "Forgotten something?" helper — readable but understated */
div.flex_container_row.flex_center h3 {
  font-size: 1.1em !important;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.4em !important;
}

/* ============================================================
   3. HEADER
   ============================================================ */
.header {
  padding: 0.75em 0;
  border-bottom: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
}
.header-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
.header-image a img {
  height: 52px;
  width: auto;
  display: block;
}

/* ============================================================
   4. FOOTER
   ============================================================ */
footer {
  background: var(--surface);
  border-top: 3px solid var(--teal);
  font-size: 1.15em;
  color: var(--muted);
  padding: 2em 0;
  margin-top: 3em;
}
footer a {
  color: var(--yellow);
  transition: color var(--t);
}
footer a:hover { color: var(--teal); }

/* ============================================================
   5. SIDEBAR / ORDER SUMMARY CARD
   ============================================================ */
.sidebar {
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Heading: white, not yellow — more professional */
.sidebar h2 {
  font-size: 1.6em !important;
  color: var(--white) !important;
  margin: 0 0 0.75em 0 !important;
  padding-bottom: 0.6em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
}
.sidebar h3 {
  color: var(--white);
  font-size: 1.4em;
  margin: 0.35em 0;
}
.sidebar .item-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2em;
}
.sidebar .item-row:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.summary-container.sidebar { border-radius: var(--radius-lg); }

/* Delivery select inside sidebar */
.sidebar select {
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0.6em 0.8em;
  font-family: 'Catamaran', Helvetica, Arial, sans-serif;
  color: var(--navy);
  font-weight: 600;
  background: var(--white);
  cursor: pointer;
  width: 100%;
  margin-bottom: 0.75em;
}

/* ============================================================
   SIDEBAR BUTTONS — fix navy-on-navy invisibility
   style.css sets .sidebar input[type=submit] { background:#003974 }
   which is the same as the sidebar background. Override to teal.
   Exclude the discount "Apply" button (needs 30% width, inline).
   ============================================================ */
.sidebar input[type=submit]:not([value="Apply"]) {
  background: var(--teal) !important;
  color: var(--white) !important;
  border: none !important;
  padding: 0.65em 1.4em !important;
  font-size: 1.3em !important;
  width: 100%;
  margin-top: 0.5em;
}
.sidebar input[type=submit]:not([value="Apply"]):hover {
  background: var(--teal-dark) !important;
  box-shadow: 0 4px 14px rgba(43, 202, 165, 0.4) !important;
  transform: translateY(-1px);
}

/* ============================================================
   DISCOUNT SECTION inside sidebar — flex row layout
   so "Discount Code:" label is above, and input + Apply
   button sit inline side by side at all screen sizes.
   ============================================================ */
form.discount div.discount {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-top: 1em !important;
  margin-top: 1em !important;
}
form.discount div.discount h3 {
  width: 100%;
  flex: 0 0 100%;
  font-size: 1em !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5em 0 !important;
  color: rgba(255, 255, 255, 0.75);
}
form.discount div.discount input[type=text] {
  flex: 1 1 auto;
  width: auto !important;
  float: none !important;
  min-height: 40px;
  font-size: 14px !important;
  padding: 0.5em 0.75em !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
form.discount div.discount input[type=text]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
form.discount div.discount input[type=text]:focus {
  border-color: var(--teal) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
  outline: none !important;
}
form.discount div.discount input[type=submit] {
  flex: 0 0 auto;
  width: auto !important;
  float: none !important;
  background: var(--teal) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 0.5em 1em !important;
  font-size: 14px !important;
  font-weight: 700;
  min-height: 40px;
  margin-top: 0 !important;
  cursor: pointer;
}
form.discount div.discount input[type=submit]:hover {
  background: var(--teal-dark) !important;
  transform: none !important;
}

/* ============================================================
   ORDER CONFIRMATION — billing/delivery columns
   Always stacked inside the narrow sidebar (not side by side).
   Both columns have style="float:left" inline which !important
   overrides. Also protect email from overflowing.
   ============================================================ */
.sidebar .grid_6 {
  width: 100% !important;
  float: none !important;
  display: block;
  margin: 0 0 1.25em 0 !important;
  font-size: 1.2em !important;
}
.sidebar .grid_6 h2 {
  font-size: 1em !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  margin: 0 0 0.5em 0 !important;
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
/* Address lines — each span is display:block, empty lines skipped in PHP */
.addr-line {
  display: block;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.addr-block {
  overflow-wrap: break-word;
}

/* Order confirmation buttons: even side-by-side in sidebar */
.sidebar .button-container {
  display: flex !important;
  gap: 0.5em !important;
  width: 100% !important;
  margin: 0 0 0.75em 0 !important;
}
.sidebar .button-container input {
  flex: 1 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0.6em 1em !important;
  font-size: 1.1em !important;
  text-align: center;
  min-height: 42px;
}

/* ============================================================
   6. BUTTONS — hierarchy: teal = primary, navy = secondary
   ============================================================ */
.button-container input,
input.shop-button,
button.shop-button {
  border-radius: var(--radius-sm) !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  font-family: 'Catamaran', Helvetica, Arial, sans-serif;
  padding: 0.65em 1.6em !important;
}

/* Primary (Next / Submit) → teal */
.button-container input[type=submit],
.button-container input:first-of-type {
  background: var(--teal) !important;
  color: var(--white) !important;
}
.button-container input[type=submit]:hover,
.button-container input:first-of-type:hover {
  background: var(--teal-dark) !important;
  box-shadow: 0 4px 14px rgba(43, 202, 165, 0.4);
  transform: translateY(-1px);
}

/* Secondary (Back) → subtle outlined style */
.button-container input[type=button],
.button-container input:last-of-type {
  background: var(--surface) !important;
  color: var(--navy) !important;
  border: 2px solid var(--border) !important;
}
.button-container input[type=button]:hover,
.button-container input:last-of-type:hover {
  background: var(--border) !important;
  transform: translateY(-1px);
}

/* Payment page primary actions */
#pay_by_invoice {
  background: var(--teal) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--t), box-shadow var(--t);
}
#pay_by_invoice:hover {
  background: var(--teal-dark) !important;
  box-shadow: 0 4px 14px rgba(43, 202, 165, 0.35);
}
#invoice-submit {
  background: var(--navy) !important;
  border-radius: var(--radius-sm);
}
#change_payment {
  background: var(--surface) !important;
  color: var(--navy) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-sm);
}

/* "Go Back" button on payment page (has inline yellow background)
   Override inline style with higher specificity */
#shop_container a[href="/order-confirmation.php"],
div.flex_container_row.flex_center > a {
  background: var(--surface) !important;
  color: var(--navy) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  text-align: center;
  transition: border-color var(--t), color var(--t);
}
#shop_container a[href="/order-confirmation.php"]:hover,
div.flex_container_row.flex_center > a:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* Address search button */
.btn.orange,
input.btn {
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6em 1.4em;
  font-weight: 700;
  transition: background var(--t);
  cursor: pointer;
}
.btn.orange:hover { background: var(--teal-dark); }

/* General hover lift */
input[type=submit]:hover,
input[type=button]:hover {
  transform: translateY(-1px);
  transition: transform var(--t);
}

/* ============================================================
   7. FORM INPUTS / LABELS
   ============================================================ */
.customer_details label,
#pay_form label {
  font-weight: 600;
  color: var(--navy);
  display: block;
  margin-bottom: 4px;
}
.payment-field,
.customer_details .grid_6 input,
.customer_details .grid_12 input,
.customer_details .grid_6 select,
.customer_details .grid_12 select,
#pay_form input[type=text],
#pay_form input[type=email],
#pay_form select {
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.55em 0.8em !important;
  transition: border-color var(--t), box-shadow var(--t);
  background: var(--white);
  color: var(--ink);
  font-family: 'Catamaran', Helvetica, Arial, sans-serif;
}
.payment-field:focus,
.customer_details .grid_6 input:focus,
.customer_details .grid_12 input:focus,
.customer_details .grid_6 select:focus,
.customer_details .grid_12 select:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(43, 202, 165, 0.18) !important;
  outline: none !important;
}
input:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(43, 202, 165, 0.18) !important;
}
.action-required {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.18) !important;
}
ul.error-message,
.error-message {
  background: #fff5f5;
  border: 2px solid #e53e3e;
  border-radius: var(--radius-sm);
  padding: 0.75em 1em;
  color: #c53030;
  margin-bottom: 1em;
}
.form_select {
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--t) !important;
}
.form_select:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(43, 202, 165, 0.18) !important;
}

/* ============================================================
   8. QUANTITY +/- BUTTONS
   ============================================================ */
.qtyplus,
.qtyminus {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2em !important;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer !important;
  transition: background var(--t), transform var(--t);
}
.qtyplus:hover,
.qtyminus:hover {
  background: #e8ad2a !important;
  transform: scale(1.08);
}
input.qty {
  text-align: center;
  width: 52px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4em;
}

/* ============================================================
   8b. BASKET TABLE
   ============================================================ */

/* ---- Header row ---- */
.grid_8 > .grid_12:first-child h2 {
  font-size: 1em !important;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.grid_8 > .grid_12:first-child {
  padding-bottom: 0.75em !important;
}

/* ---- Item rows ---- */
.grid_8 .item-row {
  padding: 0.9em 0;
  align-items: center;
  font-size: 1.3em;
}
/* Product name: stronger */
.grid_8 .item-row .grid_3:first-child {
  font-weight: 600;
  color: var(--ink);
}

/* ---- Options column: hide photo img AND its "Photo:" label ---- */
/* Hide the img */
.grid_8 .item-row .grid_3 img,
div.item-row img[style*="width:100px"] {
  display: none !important;
}
/* Hide the <b>Photo: </b> label using :has() */
.grid_8 .item-row .grid_3 b:has(+ img) {
  display: none !important;
}
/* Collapse the <br> after the hidden img */
.grid_8 .item-row .grid_3 img + br {
  display: none !important;
}
/* Options text: subtle */
.grid_8 .item-row .grid_3 b {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9em;
}

/* ---- Quantity control: unified horizontal pill ----
   Wrap the form in a bordered flex pill; remove individual
   borders so the border doesn't push the input out of alignment */
.grid_8 .item-row form {
  display: inline-flex !important;
  align-items: stretch !important;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
  width: auto !important;
}
/* Minus and plus buttons inside the qty form */
.grid_8 .item-row form .qtyminus,
.grid_8 .item-row form .qtyplus {
  width: 30px !important;
  height: 34px !important;
  background: var(--surface) !important;
  color: var(--navy) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 1.1em !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--t) !important;
}
.grid_8 .item-row form .qtyminus {
  border-right: 1px solid var(--border) !important;
}
.grid_8 .item-row form .qtyplus {
  border-left: 1px solid var(--border) !important;
}
.grid_8 .item-row form .qtyminus:hover,
.grid_8 .item-row form .qtyplus:hover {
  background: var(--teal) !important;
  color: var(--white) !important;
  transform: none !important;
}
/* Qty input: no individual border (pill provides the border) */
.grid_8 .item-row form input.qty,
input.qty {
  width: 44px !important;
  max-width: 44px !important;
  height: 34px !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  text-align: center;
  font-weight: 700;
  font-size: 1em !important;
  color: var(--ink);
  padding: 0 4px !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---- Remove → bin icon ---- */
.grid_8 .item-row .grid_2:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background var(--t);
  /* Hide the "Remove" text */
  text-indent: -9999px;
  overflow: hidden;
  /* Trash icon via SVG background */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6374' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}
.grid_8 .item-row .grid_2:last-child a:hover {
  background-color: #fff0f0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e53e3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>");
}

/* ============================================================
   9. PAYMENT PAGE LAYOUT + CONTAINERS
   The default float layout wastes ~20% of the wrapper because
   grid_4 (31%) + grid_6 (48.5%) ≠ 100%. Replace with flex
   so the payment section fills the remaining space.
   Scoped with :has(#shop_container) which only matches this page.
   ============================================================ */

/* Wrapper becomes a flex row on the payment page */
.wrapper:has(#shop_container) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 1.5em;
}
/* Page title lines: full-width above the two columns */
.wrapper:has(#shop_container) > h1,
.wrapper:has(#shop_container) > h2 {
  flex: 0 0 100%;
  float: none !important;
  width: 100% !important;
}
/* Basket summary sidebar: comfortable fixed column */
.wrapper:has(#shop_container) > .summary-container.sidebar {
  flex: 0 0 280px;
  width: 280px !important;
  float: none !important;
  margin: 0 !important;
  align-self: flex-start;
}
/* Payment section: fills all remaining space */
#shop_container {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* ---- Sub-containers ---- */
#pay_form_container {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
}
/* Ensure the flex row containing the card payment fills full width */
#payments {
  width: 100%;
}
#card_payment_container {
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  border: 2px solid var(--border) !important;
  box-shadow: none !important;
  padding: 1.5em !important;
  width: 100%;
  box-sizing: border-box;
}
/* Invoice section: same card style, full width */
#invoice_payment {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5em;
  margin-top: 1.25em;
  width: 100%;
  box-sizing: border-box;
  display: block;
}
/* ============================================================
   INVOICE ORDER FORM
   #invoice_order ends up outside .wrapper due to malformed div
   nesting in payment-details.php. Constrain it here.
   Also override the inline <style> block inside the PHP include
   which sets garish pixel-based sizes.
   ============================================================ */

/* Constrain and centre regardless of DOM position.
   If inside the flex wrapper: flex: 0 0 100% forces a new full row.
   If outside wrapper: width+margin:auto centres it. */
#invoice_order {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  clear: both;
  padding: 0 0 2em 0;
}

/* Container card — centred within the full-width flex row */
#invoice_order_container {
  max-width: 1216px;
  width: 95%;
  margin: 0 auto !important;
  background: var(--white) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 2em 2.5em !important;
  box-shadow: var(--shadow-sm);
}

/* Header row inside the form */
#invoice_order_container h2 {
  font-size: 1.3em !important;
  border-bottom: 2px solid var(--border) !important;
  padding-bottom: 0.4em;
  margin-bottom: 0.75em !important;
  color: var(--navy);
}

/* Override inline <style> pixel sizes — !important needed because
   the <style> block is injected into <body> after our <link> */
#invoice_order_container .invoice-title {
  font-size: 1.15em !important;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.75em !important;
  float: none !important;
  display: block !important;
}
#invoice_order_container .grid_6 label {
  font-size: 0.95em !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin-bottom: 3px !important;
  display: block !important;
  float: none !important;
}
#invoice_order_container .grid_6 input[type=text],
#invoice_order_container .grid_6 input[type=email] {
  font-size: 14px !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.5em 0.75em !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
  margin-bottom: 0.75em !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  transition: border-color var(--t) !important;
}
#invoice_order_container .grid_6 input:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(43, 202, 165, 0.18) !important;
}

/* Two-column layout inside the form */
#invoice_order_container .flex_container_row_invoice {
  display: flex !important;
  gap: 2em;
  align-items: flex-start;
  flex-wrap: wrap;
}
#invoice_order_container .grid_6 {
  width: calc(50% - 1em) !important;
  float: none !important;
  flex: 1 1 240px;
}

/* "Pay by Invoice" submit button */
#invoice-submit {
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.7em 2em !important;
  font-size: 1.1em !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: block !important;
  margin: 1.5em auto 0 !important;
  max-width: 300px !important;
  width: 100%;
  transition: background var(--t) !important;
}
#invoice-submit:hover {
  background: var(--teal) !important;
}

/* Declaration checkboxes */
#invoice_order_container .checkboxes-font {
  font-size: 1em !important;
}
#invoice_order_container hr {
  margin: 1em 0 !important;
  border-color: var(--border) !important;
}

/* Mobile: stack the two columns */
@media only screen and (max-width: 768px) {
  #invoice_order_container .grid_6 {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* h3 size/colour set in section 2 */
/* "Forgotten something?" is an orphaned wrapper-level div caused by
   malformed closing tags in payment-details.php. Hidden because the
   Go Back link now lives in the sidebar via order-summary.php. */
.wrapper > div.flex_container_row.flex_center {
  display: none !important;
}

/* Sidebar back link — payment page only, PHP-conditional in order-summary.php */
.sidebar-back-btn {
  display: flex;
  align-items: center;
  gap: 0.35em;
  color: var(--white) !important;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.45em 0.85em;
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 1.1em;
  transition: background var(--t), border-color var(--t);
  text-decoration: none;
  width: fit-content;
}
.sidebar-back-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white) !important;
}
.flex_container_row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25em;
  align-items: stretch;
}
.flex_item { flex: 1; min-width: 240px; }

/* ============================================================
   10. ITEM ROWS (general)
   ============================================================ */
.item-row {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75em;
  margin-bottom: 0.75em;
}
.item-row:first-of-type { border-top: 1px solid var(--border); }

/* ============================================================
   11. DISCOUNT SECTION
   ============================================================ */
form .discount input[type=text] {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 0.55em 0.8em;
}
form .discount input[type=submit] {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  border: 2px solid var(--navy) !important;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  transition: background var(--t), border-color var(--t);
}
form .discount input[type=submit]:hover {
  background: var(--teal);
  border-color: var(--teal) !important;
}

/* ============================================================
   12. SECTION DIVIDERS
   ============================================================ */
hr {
  background: var(--border);
  border-color: var(--border);
  height: 1px;
  margin: 1.5em 0;
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   Root fix: float:none so elements stack in DOM order.
   float:left at 96% was causing the navy sidebar to bleed
   visually behind the basket content above it.
   ============================================================ */
@media only screen and (max-width: 768px) {

  html { font-size: 14px; }
  body { padding-top: 6em; }
  .wrapper { width: 96%; }
  .header { padding: 0.6em 0; }
  .header-image a img { height: 42px; }

  /* Stack ALL outer grids — float:none so each is a block
     and the navy sidebar can never bleed behind them */
  .grid_1, .grid_2, .grid_3, .grid_4,
  .grid_5, .grid_6, .grid_7, .grid_8,
  .grid_9, .grid_10, .grid_11, .grid_12,
  .footer_grid_1, .footer_grid_2, .footer_grid_3,
  .footer_grid_4, .footer_grid_5, .footer_grid_6,
  .footer_grid_7, .footer_grid_8, .footer_grid_9,
  .footer_grid_10, .footer_grid_11, .footer_grid_12,
  .products_grid_5, .products_grid_7 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
  }
  .alpha { margin-left: 0 !important; }
  .omega { margin-right: 0 !important; }

  /* ---- Sidebar: full-width block, clears any residual floats ---- */
  .sidebar,
  .summary-container.sidebar {
    width: 100% !important;
    float: none !important;
    clear: both;
    border-radius: var(--radius) !important;
    padding: 1.5em !important;
    margin: 1.25em 0 0 0 !important;
    box-sizing: border-box;
  }

  /* ---- BASKET TABLE: card layout ----
     Hide the column-header row (meaningless when stacked) */
  .grid_8 > .grid_12:first-child {
    display: none !important;
  }
  /* Each item row becomes a flex card */
  .grid_8 .item-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0.9em 0 !important;
    border-bottom: 1px solid var(--border) !important;
    gap: 0.4em 0 !important;
  }
  /* Product name: full width, first line */
  .grid_8 .item-row > .grid_3:first-child {
    width: 100% !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    margin-bottom: 0.2em !important;
    order: 1;
  }
  /* Options: full width, second line */
  .grid_8 .item-row > .grid_3:nth-child(2) {
    width: 100% !important;
    margin-bottom: 0.4em !important;
    order: 2;
  }
  /* Qty control: auto width, inline */
  .grid_8 .item-row > .grid_2:nth-child(3) {
    width: auto !important;
    flex-shrink: 0;
    order: 3;
    margin-right: 1em !important;
  }
  /* Price: auto width, inline next to qty */
  .grid_8 .item-row > .grid_2:nth-child(4) {
    width: auto !important;
    font-weight: 600 !important;
    order: 4;
    flex-grow: 1;
  }
  /* Remove/trash: pushed to the right */
  .grid_8 .item-row > .grid_2:last-child {
    width: auto !important;
    order: 5;
    margin-left: auto !important;
  }

  /* ---- Forms / inputs ---- */
  .payment-field,
  .customer_details .grid_6 input,
  .customer_details .grid_12 input,
  .customer_details .grid_6 select,
  .customer_details .grid_12 select,
  .form_select,
  .sidebar select {
    width: 100% !important;
    min-height: 48px;
    font-size: 16px !important;
    box-sizing: border-box;
  }

  /* ---- Buttons ---- */
  .button-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 1.5em;
    display: flex;
    gap: 0.75em;
  }
  .button-container input {
    flex: 1;
    float: none !important;
    min-height: 48px;
    font-size: 16px !important;
  }
  input[type=submit],
  input[type=button],
  #pay_by_invoice {
    min-height: 48px;
  }

  /* ---- Payment page ---- */
  .flex_container_row { flex-direction: column; gap: 1em; }
  .flex_item { min-width: 0; }
  /* Stack the payment page flex layout on mobile */
  .wrapper:has(#shop_container) {
    flex-direction: column;
  }
  .wrapper:has(#shop_container) > .summary-container.sidebar {
    flex: 0 0 100%;
    width: 100% !important;
  }
  #shop_container {
    width: 100% !important;
    float: none !important;
    clear: both;
    margin: 0 !important;
  }

  /* ---- Headings ---- */
  h1 { font-size: 2em !important; }
  h2 { font-size: 1.6em !important; }
  h3 { font-size: 1.35em !important; }

  /* ---- iOS: prevent auto-zoom on focus ---- */
  select,
  input[type=text],
  input[type=email],
  input[type=tel] {
    font-size: 16px !important;
  }

  /* ---- Discount section ---- */
  form .discount input[type=text],
  form .discount input[type=submit] {
    min-height: 48px;
    font-size: 16px;
  }
}