section.cart_section {
   padding-top: 4rem;
 }

 input[type="checkbox"]:checked {
   background: #1c3f73;
   border-color: #1f1f1f;
 }

 .cart_header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #D2EAFF;
   border: 1px solid #000000;
   border-radius: 10px;
   padding: 16px 24px;
   margin-bottom: 30px;
 }

 .cart_header h1 {
   font-size: 32px;
 }

 a.cart_edit_link img {
   width: 12px;
 }

 .cart_header h1 span {
   font-family: "Instrument Serif", serif;
   font-weight: 400;
 }

 .cart_title small {
   font-weight: 700;
   font-style: normal;
   margin-left: 4px;
 }

 .cart_header_action {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
   border-radius: 30px;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }

 .cart_header_action .cart_amount_style {
   background: #3E8CCA;
   padding: 10px 45px 10px 25px;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
 }

 .cart_header_action .cart_checkout_style {
   background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
   color: #fff;
   padding: 10px 22px;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.5px;
   border-radius: 30px;
   margin-left: -20px;
 }

 .cart_layout {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 20px;
 }

 .cart_item {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 22px 0;
   border-bottom: 1px solid #1D4A8499;
 }

 .cart_badges span {
   font-size: 14px;
   display: inline-block;
   width: 90px;
   padding-top: 5px;
 }

 .cart_remove {
   color: #14213d;
   font-size: 18px;
   cursor: pointer;
   width: 20px;
 }

 .cart_thumb {
   width: 100px;
   height: 100px;
   border-radius: 8px;
   background: #e7e9ec;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   flex-shrink: 0;
 }

 .cart_thumb img {
   max-width: 70%;
   max-height: 85%;
 }

 .cart_info {
   flex: 1;
 }

 .cart_name {
   font-size: 17px;
   font-weight: 500;
   margin: 0 0 6px;
   display: block;
   color: #000000;
 }

 .cart_qty {
   font-size: 16px;
   margin: 0 0 14px;
   display: block;
   font-weight: 500;
   color: #000;
 }

 .cart_note {
   font-size: 13px;
   color: #000000;
   margin: 0;
   display: block;
 }

 .cart_qty_control {
   display: flex;
   align-items: center;
   gap: 9px;
   border: 1px solid #1D4A84;
   border-radius: 34px;
   padding: 8px 15px;
   color: #000000;
   font-weight: 500;
   font-size: 24px;
 }

 .cart_qty_control button {
   background: none;
   border: none;
   color: var(--text-color);
   font-size: 22px;
   cursor: pointer;
   font-weight: 500;
   line-height: 1;
 }

 .cart_price_block {
   text-align: right;
   min-width: 100px;
 }

 .cart_price_now {
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: 500;
   color: var(--text-color);
   font-size: 21px;
 }

 .cart_price_old {
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: 500;
   font-size: 21px;
   text-decoration: line-through;
   color: #9aa4b2;

 }

 .cart_item_row {
   display: flex;
   align-items: center;
   width: 100%;
   gap: 20px;
 }

 .cart_side {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .cart_summary,
 .cart_address {
   border: 1px solid #1D4A84;
   border-radius: 10px;
   padding: 20px 22px;
 }

 .cart_panel_title {
   font-size: 24px;
   font-weight: 600;
   color: var(--text-color);
   margin: 0 0 10px;
 }

 .cart_discount_row {
   display: flex;
   gap: 10px;
   margin-bottom: 18px;
 }

 .cart_discount_input {
   flex: 1;
   border: 1px solid #1D4A84;
   border-radius: 50px;
   padding: 15px 16px;
   font-size: 13px;
   color: var(--text-color);
 }

 .cart_apply_btn {
   border: 1px solid #1D4A84;
   background: #fff;
   color: var(--text-color);
   border-radius: 50px;
   padding: 8px 20px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
 }

 .cart_discount_row input::placeholder {
   color: var(--text-color);
 }

 .cart_line {
   display: flex;
   justify-content: space-between;
   font-size: 17px;
   font-weight: 500;
   margin-bottom: 8px;
   color: var(--text-color);
 }

 .cart_divider {
   border: none;
   border: 1px solid #1D4A8499;
   margin: 14px 0;
 }

 .cart_total_row {
   display: flex;
   justify-content: space-between;
   font-weight: 500;
   font-size: 16px;
   color: var(--text-color);
   padding-bottom: 10px;
 }

 .cart_confirm {
   /* Flex row (checkbox + text as two items) rather than plain inline flow
      — plain inline flow wraps continuation lines back to the far-left
      edge under the checkbox instead of indenting them under the text,
      which is what made this look cramped/misaligned. */
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 15px;
   color: #000000;
   margin-bottom: 10px;
   line-height: 1.45;
   cursor: pointer;
 }

 .cart_confirm input {
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
   margin-top: 2px;
 }

 .cart_confirm_error {
   /* Overrides the global `p { text-align: justify }` rule (style.css) —
      justify on a short 2-line message stretches the word spacing and
      makes it look broken rather than like a validation message. */
   text-align: left;
   display: none;
   align-items: flex-start;
   gap: 6px;
   color: #d92c2c;
   font-size: 13px;
   line-height: 1.4;
   background: #fdeaea;
   border: 1px solid #f4c7c7;
   border-radius: 8px;
   padding: 8px 10px;
   margin: 10px 0 16px;
 }

 .cart_confirm_error:not(:empty) {
   display: flex;
 }

 .cart_confirm_error::before {
   content: "!";
   flex: 0 0 auto;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #d92c2c;
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1px;
 }

 .cart_secure_btn {
   display: block;
   width: 100%;
   background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
   color: #fff;
   border: none;
   border-radius: 50px;
   padding: 17px;
   font-size: 17px;
   font-weight: 500;
   cursor: pointer;
   margin: 15px 0;
 }

 .cart_badges {
   display: flex;
   justify-content: space-around;
   text-align: center;
   font-size: 15px;
   color: #000000;
 }

 .cart_badges div {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
 }

 .cart_address_name {
   font-weight: 700;
   display: inline-block;
   border-bottom: 3px solid var(--text-color);
   padding-bottom: 4px;
   margin-bottom: 12px;
   color: #000;
   font-size: 18px;
 }

 .cart_default_tag {
   float: right;
   background: #1c3f73;
   color: #fff;
   font-size: 16px;
   padding: 7px 25px;
   border-radius: 5px;
 }

 .cart_address_text {
   font-size: 16px;
   line-height: 1.6;
   color: #000000;
   margin-bottom: 10px;
 }

 .cart_address_phone {
   font-size: 16px;
   margin-bottom: 4px;
 }

 .cart_edit_link {
   font-size: 16px;
   color: var(--text-color);
   text-decoration: none;
   font-weight: 500;
   display: inline-block;
   margin-bottom: 16px;
 }

 .cart_addr_btn {
   display: block;
   width: 100%;
   text-align: center;
   border-radius: 40px;
   padding: 18px;
   font-weight: 500;
   margin-bottom: 12px;
   text-decoration: none;
   cursor: pointer;
   font-size: 17px;
 }

 .cart_addr_btn.cart_filled {
   color: #fff;
   border: none;
   background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
 }

 .cart_line img {
   width: 19px;
 }

 .cart_total_row img {
   width: 18px;
 }

 .cart_badges img {
   width: 20px;
 }

 .delivery_badges img {
   width: 28px;
 }

 .cart_addr_btn.cart_outline {
   background: #fff;
   color: #1c3f73;
   border: 1px solid #1D4A84;
 }

 .cart_billing_check {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 16px;
   color: #000000;
   justify-content: start;
 }

 section.relatd_product .container {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
 }

 a.view_all:hover {
   background-color: #1d4a84;
   color: #fff;
 }

 section.relatd_product h2 span {
   font-family: "Instrument Serif", serif;
   font-weight: 400;
 }

 section.relatd_product {
   padding-top: 3rem;
 }

 .Related_Products {
   padding-left: 3rem;
   padding-top: 20px;
   padding-bottom: 20px;
 }

 a.view_all {
   border: 1px solid #1D4A84;
   display: block;
   padding: 9px 20px;
   border-radius: 50px;
 }

 .Related_Products .best_card {
   box-shadow: -3px -1px 33px #b3b3b32b, 1px -1px 13px #B3B3B317, 0px 133px 80px #B3B3B30D, 0px 237px 95px #B3B3B303;
 }

 .cart_line img {
   width: 17px;
 }

 span.cart_price_now img {
   width: 21px;
 }

 button.cart_secure_btn:hover {
   background: #1c3f73;
   color: #ffffff;
 }

 .cart_addr_btn.cart_filled:hover  {
   background: #1c3f73;
   color: #ffffff;
 }
 .cart_addr_btn.cart_outline:hover  {
   background: #1c3f73;
   color: #ffffff;
 } 

/* =========================================================================
   CART / CHECKOUT — MOBILE
   =========================================================================
   This file had no media queries at all, so the cart kept its desktop
   proportions on a phone: a fixed 2fr/1fr layout grid and a four-across
   nowrap item row, which together pushed the page ~430px wider than a
   390px viewport. Matches the spacing scale used on home/about/products.
   ========================================================================= */

@media (max-width: 768px) {

  .cart_layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cart_item {
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
  }

  /* thumbnail + title on the first line, quantity + price on the second,
     instead of all four fighting for one 390px row */
  .cart_item_row {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
  }

  .cart_thumb {
    flex: 0 0 80px;
  }

  .cart_info {
    flex: 1 1 calc(100% - 94px);
    min-width: 0;
  }

  .cart_qty_control {
    flex: 0 0 auto;
  }

  .cart_price_block {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }

  .cart_price_now,
  .cart_price_old {
    font-size: 18px;
    justify-content: flex-end;
  }

  .cart_summary,
  .cart_address {
    padding: 18px;
  }
}

/* =========================================================================
   CART — STICKY BAR, CTA PILL, TOTALS, BADGES, RELATED CARDS
   ========================================================================= */

/* ---- 1. "Your Cart" bar sticks on scroll ----
   style.css sets `body { overflow-x: hidden }`, which makes the body its own
   scroll container and silently disables position:sticky for anything inside
   it. Scoped so only the cart drops that guard; html keeps overflow-x:hidden
   so sideways overflow is still clipped. */
body:has(.cart_section) {
  overflow-x: visible;
}

.cart_header {
  position: sticky;
  top: 16px;
  z-index: 40;
}



/* ---- 2. Checkout pill ----
   The two halves were butted together with a negative margin, which left a
   visible seam where the flat blue met the gradient. One pill, one gradient
   running the whole width, with the amount sitting in a rounded inset — so
   the shape reads as a single control. */
.cart_header_action {
  gap: 0;
  padding: 5px 5px 5px 6px;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  box-shadow: 0 2px 10px rgba(29, 74, 132, .28);
  transition: box-shadow .22s ease, transform .12s ease, filter .22s ease;
}

.cart_header_action .cart_amount_style {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .16);
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.cart_header_action .cart_checkout_style {
  background: none;
  margin-left: 0;
  padding: 8px 20px;
  line-height: 1.2;
}

.cart_header_action:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(29, 74, 132, .38);
}

.cart_header_action:active {
  transform: translateY(1px);
}

/* ---- 3. Discount "Apply" ---- */
.cart_apply_btn {
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cart_apply_btn:hover {
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  border-color: transparent;
  color: #fff;
}

.cart_apply_btn:active {
  transform: translateY(1px);
}

/* ---- 4. Total ----
   It was rendering at 16px/500 — smaller than the Subtotal and Delivery
   lines above it at 17px. The total should be the heaviest thing in the
   panel, not the lightest. */
.cart_total_row {
  font-size: 22px;
  font-weight: 700;
  align-items: center;
}

.cart_total_row span:last-child,
.cart_line span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- 5. Trust badges ----
   Three equal columns with a fixed-height icon row, so the labels all start
   on the same line no matter how tall each icon is — the delivery icon is
   wider than the other two and was pushing its caption down. */
.cart_badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: initial;
  align-items: start;
  gap: 10px;
}

.cart_badges .cart_badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cart_badge_icon {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart_badges img,
.delivery_badges img {
  width: auto;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
}

.cart_badges .cart_badge_label {
  width: 100%;
  padding-top: 0;
  line-height: 1.35;
}

/* ---- 6. Related products ----
   Same partial as the listing grid, but the 72px flat badge treatment was
   only ever scoped to the home marquee and the listing, so these fell back
   to the default 40px pale-blue circle — double-framing a badge that already
   has its own circle in the PNG. */
.Related_Products .best_feat_icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.Related_Products .best_feat_icon img {
  width: 72px;
  height: 72px;
}

@media (max-width: 768px) {

  .Related_Products .best_feat_icon img {
    width: 56px;
    height: 56px;
  }
}

/* =========================================================================
   CART — ROUND 2
   ========================================================================= */

/* Confirmation copy reads as a justified block rather than a ragged edge. */
.cart_confirm span {
  text-align: justify;
  hyphens: auto;
}

/* "Genuine Products" carries more visual weight than the other two at the
   same box size, so it is stepped down 20% (30px -> 24px). */
.cart_badges .cart_badge:nth-child(3) img {
  max-width: 24px;
  max-height: 24px;
}

/* Everything to the right of the thumbnail is one box. On desktop it is
   `display: contents`, so its children stay direct flex items of the row and
   that layout is untouched; on mobile it becomes the single right-hand column
   (see the mobile block), which is what stops the image's height from being
   dumped into the first grid row. */
.cart_item_main {
  display: contents;
}

/* Qty label + stepper are one unit now (see cart.html). */
.cart_qty_line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart_qty_line .cart_qty {
  white-space: nowrap;
  /* .cart_qty carries `margin: 0 0 14px` from when it sat inside the details
     block; on a centred flex line that margin pushes the label off the
     stepper's centre line. */
  margin: 0;
}

/* =========================================================================
   CART — MOBILE: TITLE, ITEM ROW, BOTTOM CHECKOUT BAR
   ========================================================================= */

@media (max-width: 768px) {

  /* ---- 1. The top bar becomes a plain page title ----
     No box, no sticky, no count, no CTA — the bottom bar carries the action
     on a phone. Sized to match the legal/FAQ page titles. */
  .cart_header {
    position: static;
    display: block;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 22px;
    text-align: center;
  }

  .cart_header h1 {
    font-size: 34px;
    line-height: 1.2;
    color: #18458C;
  }

  .cart_header h1 small,
  .cart_header_action {
    display: none;
  }

  /* ---- 2. Item row ----
     Row 1: close + thumb + details. Row 2: quantity stepper and the prices
     together, instead of the prices dropping to a line of their own. Within
     the details, the note sits above "Qty:" — `order` does the swap so the
     markup stays as it is. */
  .cart_info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cart_info .cart_name {
    order: 1;
  }

  .cart_info .cart_note {
    order: 2;
  }

  .cart_item_row > .cart_price_block {
    order: 5;
  }

  .cart_price_block {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
  }

  /* ---- 3. Bottom checkout bar ---- */
  .cart_mobile_bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 22px;

    border-radius: 40px;
    background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
    box-shadow: 0 8px 22px rgba(29, 74, 132, .34);
    color: #fff;
    text-decoration: none;

    /* revealed by .is-visible once the page is scrolled */
    opacity: 0;
    visibility: hidden;
    transform: translateY(120%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, visibility .28s;
  }

  .cart_mobile_bar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .cart_mobile_bar_label {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .6px;
  }

  .cart_mobile_bar_right {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .cart_mobile_bar_total {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
  }

  .cart_mobile_bar_qty {
    min-width: 44px;
    padding: 10px 12px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .22);
    font-size: 17px;
    font-weight: 700;
    text-align: center;
  }

  /* ---- 4. Header-bar to page title ----
     main's 64px plus the section's own 4rem stacked to 128px under the
     header, against 48px on FAQs. Matched to the same 26 + 22 split the
     title pages use. */
  main:has(> .cart_section:first-child) {
    padding-top: 26px;
  }

  section.cart_section:first-child {
    padding-top: 22px;
  }

  /* ---- 5. Item row ----
     Everything except the image and the remove control sits in one column
     to the right of the thumbnail: name, qty label, note, stepper, then the
     prices. Grid rather than flex order, so the thumbnail can span all
     three rows instead of only sitting beside the first one. */
  /* Three columns, one row: remove | image | everything else. The details
     stack inside .cart_item_main rather than as separate grid rows — as
     grid rows, the image spanning them had its whole 130px assigned to the
     first row, leaving a large gap under the name. */
  .cart_item_row {
    display: grid;
    grid-template-columns: 20px 130px 1fr;
    column-gap: 12px;
    align-items: start;
  }

  .cart_item_main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .cart_thumb {
    width: 130px;
    height: 130px;
  }

  .cart_item_row > .cart_remove {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .cart_item_row > .cart_thumb {
    grid-column: 2;
    grid-row: 1 / -1;
    flex: none;
  }

  /* Label left, stepper hard right. */
  .cart_qty_line {
    justify-content: space-between;
  }

  /* Compact on a phone: at the desktop 45px the stepper stood well proud of
     the 18px "Qty:" line it is bottom-aligned to, so the two did not read as
     one row. At ~32px the bottoms align and the centres are close enough
     that they do. */
  .cart_qty_control {
    gap: 8px;
    padding: 4px 12px;
    font-size: 17px;
  }

  .cart_qty_control button {
    font-size: 18px;
  }

  .cart_price_block {
    flex: none;
    min-width: 0;
    text-align: left;
  }



  .cart_price_block {
    justify-content: flex-start;
  }

  .cart_price_now,
  .cart_price_old {
    justify-content: flex-start;
  }

  /* ---- 6. Related products ----
     3rem of left padding left the first card floating away from the edge;
     home's marquee sits on a 16px gutter. */
  .Related_Products {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* "Related / Products" over two lines — one line is congested next to the
     View All button at this width. */
  section.relatd_product h2 span {
    display: block;
  }

  /* Matches the 64px every other page ends on. The checkout bar hides itself
     once the footer is in view (see the script), so it needs no extra
     clearance here. */
  body:has(.cart_mobile_bar) main {
    padding-bottom: 64px;
  }
}

/* Desktop never shows it — the sticky bar at the top has the same action. */
@media (min-width: 769px) {

  .cart_mobile_bar {
    display: none;
  }
}

/* =========================================================================
   CART — PRODUCT NAME ON ONE LINE
   =========================================================================
   Names come from the catalogue at any length, and a two-line name pushed
   the note, quantity row and prices down, breaking the item's alignment
   against the thumbnail. Clipped to a single line with an ellipsis instead.

   `min-width: 0` on the ancestors is the part that actually makes it work:
   a flex item defaults to min-width:auto, which refuses to shrink below its
   content, so the name would overflow rather than ellipsise.
   ========================================================================= */

/* The whole chain needs it, not just the text's own box: .cart_item_row and
   .cart_item_main are flex items too, and any one of them defaulting to
   min-width:auto is enough to keep the row from shrinking — on desktop that
   let a long name push the row 158px past the viewport instead of
   ellipsising. .cart_items_panel is a grid child of .cart_layout and does
   the same thing at the column level. */
.cart_items_panel,
.cart_item,
.cart_item_row,
.cart_item_main,
.cart_info {
  min-width: 0;
}

.cart_name {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================================
   CART — SITE HEADER NOT PINNED ON MOBILE
   =========================================================================
   responsive.css pins .cp-navbar-wrap to the top on every page at this
   width. On the cart that makes two fixed strips at once, since the
   checkout bar already holds the bottom of the screen, so the header is
   released here and scrolls away with the page.

   Scoped to .cart_mobile_bar rather than the page: the bar only renders
   when there is something in the cart, so an empty cart — which has no
   checkout bar — keeps the normal sticky header. `will-change` is cleared
   too, since it creates a containing block for any fixed descendant.
   ========================================================================= */

@media (max-width: 768px) {

  body:has(.cart_mobile_bar) .cp-navbar-wrap {
    position: static;
    will-change: auto;
  }

  /* the reveal/hide transform is meaningless once it is not pinned */
  body:has(.cart_mobile_bar) .cp-navbar-wrap.cp-nav-hidden {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}