/* Smart Electrical Scan2 cart + checkout. The supplied design is the visual source
   of truth; WooCommerce and Stripe retain their native form contracts. */

:root {
  /* Smart Electrical's two brand colours, straight off the theme: indigo
     carries every call to action and the footer, red is the announcement
     strip, exactly as the storefront uses them. */
  --sec-brand: var(--se-brand, #303192);
  --sec-brand-dark: var(--se-brand-dark, #26277a);
  --sec-brand-alt: var(--se-brand-alt, #ee1c25);
  --sec-teal: var(--se-teal, #303192);
  --sec-teal-dark: var(--se-teal-dark, #26277a);
  --sec-teal-deep: var(--se-teal-deep, #303192);
  --sec-teal-tint: #f5f6fc;
  --sec-ink: var(--se-ink, #202020);
  --sec-copy: #4a4f56;
  --sec-muted: #6b7077;
  --sec-sand: var(--se-sand, #f4f3ef);
  --sec-line: #eeeeee;
  --sec-line-warm: #e7e5e0;
  --sec-input: #cccccc;
  --sec-display: var(--se-font-display, 'Open Sans', Helvetica, Arial, sans-serif);
  --sec-font: var(--se-font-body, 'Manrope', system-ui, sans-serif);
}

/* Salient supplies the outer document and hooks, but its chrome and 880px
   content container are not part of the supplied checkout or confirmation
   screens — both carry their own slim header. The cart keeps theme chrome. */
body.woocommerce-checkout #header-space,
body.woocommerce-checkout #header-outer,
body.woocommerce-checkout #footer-outer,
body.woocommerce-checkout #slide-out-widget-area,
body.woocommerce-checkout #slide-out-widget-area-bg {
  display: none !important;
}

body.woocommerce-cart .container-wrap,
body.woocommerce-checkout .container-wrap {
  padding: 0 !important;
  background: #fff !important;
}
body.woocommerce-cart,
body.woocommerce-checkout { overflow: visible !important; }
body.woocommerce-cart .container.main-content,
body.woocommerce-checkout .container.main-content {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
body.woocommerce-cart .container.main-content > .row,
body.woocommerce-checkout .container.main-content > .row {
  margin: 0 !important;
}
body.woocommerce-cart .container.main-content > .row > .woocommerce,
body.woocommerce-checkout .container.main-content > .row > .woocommerce {
  width: 100%;
  min-width: 0;
}

.se-storehead,
.se-storefoot,
.se-cartpage,
.se-checkout {
  font-family: var(--sec-font);
  color: var(--sec-ink);
  -webkit-font-smoothing: antialiased;
}
.se-storehead *, .se-storehead *::before, .se-storehead *::after,
.se-storefoot *, .se-storefoot *::before, .se-storefoot *::after,
.se-cartpage *, .se-cartpage *::before, .se-cartpage *::after,
.se-checkout *, .se-checkout *::before, .se-checkout *::after { box-sizing: border-box; }
.se-storehead__announce-inner,
.se-storehead__row,
.se-storefoot__newsletter-inner,
.se-storefoot__main,
.se-storefoot__bottom,
.se-co__header > div { box-sizing: content-box; }
.se-storehead :where(a), .se-storefoot :where(a), .se-cartpage :where(a), .se-checkout :where(a) { text-decoration: none; }
.se-storehead :where(img), .se-storefoot :where(img), .se-cartpage :where(img), .se-checkout :where(img) { display: block; max-width: 100%; }
.se-storehead :where(button, input), .se-storefoot :where(button, input), .se-cartpage :where(button, input), .se-checkout :where(button, input, select, textarea) { font: inherit; }
.se-storehead :where(ul), .se-storefoot :where(ul), .se-cartpage :where(ul), .se-checkout :where(ul) { margin: 0; padding: 0; list-style: none; }
.se-storehead a:focus-visible, .se-storehead button:focus-visible,
.se-storefoot a:focus-visible, .se-storefoot input:focus-visible, .se-storefoot button:focus-visible,
.se-cartpage a:focus-visible, .se-cartpage button:focus-visible, .se-cartpage input:focus-visible,
.se-checkout a:focus-visible, .se-checkout button:focus-visible, .se-checkout input:focus-visible, .se-checkout select:focus-visible {
  outline: 2px solid var(--sec-teal-deep);
  outline-offset: 2px;
}
.se-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Shared notices */
.se-cartpage .woocommerce-error, .se-cartpage .woocommerce-message, .se-cartpage .woocommerce-info,
.se-checkout .woocommerce-error, .se-checkout .woocommerce-message, .se-checkout .woocommerce-info {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--sec-teal-tint);
  color: var(--sec-ink);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}
.se-checkout .woocommerce-error, .se-cartpage .woocommerce-error { background: #fdecea; color: #8f2019; }
.se-checkout .woocommerce-NoticeGroup { grid-column: 1 / -1; margin: 0; padding: 0; }
.se-checkout .se-co__main-inner > .woocommerce-NoticeGroup { order: -1; }
.se-checkout .woocommerce-NoticeGroup .woocommerce-error,
.se-checkout .woocommerce-NoticeGroup .woocommerce-message,
.se-checkout .woocommerce-NoticeGroup .woocommerce-info { margin: 0; }
.se-checkout .woocommerce-error { background: #fdecea !important; color: #8f2019 !important; }
.se-checkout .woocommerce-error li, .se-cartpage .woocommerce-error li { margin: 0; padding: 0; list-style: none; }
.se-checkout .woocommerce-error li + li { margin-top: 4px; }
/* Salient sets `.woocommerce .woocommerce-error a { color:#fff!important }`
   — white on its own red banner. This banner is pale, so the link vanished
   and its underline read as a strikethrough. Same !important, higher
   specificity, so it wins wherever Salient's sheet lands in the order. */
body .se-checkout .woocommerce-error a,
body .se-cartpage .woocommerce-error a,
body .se-checkout .woocommerce-error strong,
body .se-cartpage .woocommerce-error strong,
body .se-checkout .woocommerce-error li a,
body .se-cartpage .woocommerce-error li a {
  color: #8f2019 !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
  line-height: inherit;
}

/* The message itself, not just its link. */
body .se-checkout .woocommerce-error,
body .se-cartpage .woocommerce-error,
body .se-checkout .woocommerce-error li,
body .se-cartpage .woocommerce-error li { color: #8f2019 !important; }
.se-checkout .woocommerce-message a, .se-checkout .woocommerce-info a,
.se-cartpage .woocommerce-message a, .se-cartpage .woocommerce-info a { color: var(--sec-teal-deep) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.se-checkout .woocommerce-error li, .se-checkout .woocommerce-message li, .se-checkout .woocommerce-info li { color: inherit; }

/* --------------------------------------------------------------------------
   CART HEADER
   ----------------------------------------------------------------------- */
.se-storehead {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: #fff;
}
.se-storehead__announce { background: var(--sec-brand-alt); color: #fff; font-size: 13px; }
.se-storehead__announce-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.se-storehead__announce-inner > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.se-storehead__announce-inner > div { display: flex; gap: 18px; flex: none; font-weight: 600; }
.se-storehead__announce a { color: #fff !important; }
.se-storehead__main { position: relative; border-bottom: 1px solid var(--sec-line-warm); background: #fff; }
.se-storehead__row { max-width: 1240px; height: 76px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.se-storehead__logo { display: flex; flex: none; }
.se-storehead__logo img { width: auto; height: 50px; }
.se-storehead__nav { align-self: stretch; display: flex; align-items: stretch; flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.se-storehead__nav a { padding: 0 14px; display: flex; align-items: center; gap: 5px; color: var(--sec-ink) !important; white-space: nowrap; border-bottom: 2px solid transparent; }
.se-storehead__nav a:hover { color: var(--sec-teal-deep) !important; border-color: var(--sec-ink); }
.se-storehead__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.se-storehead__actions > a:not(.se-storehead__design) { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--sec-ink) !important; }
.se-storehead__cart { position: relative; }
.se-storehead__cart span { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--sec-teal); color: var(--sec-ink); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.se-storehead__design { min-height: 44px; margin-left: 10px; padding: 0 18px; border-radius: 4px; display: flex; align-items: center; background: var(--sec-teal); color: var(--sec-ink) !important; font-size: 14px; font-weight: 800; white-space: nowrap; }
.se-storehead__design:hover { background: var(--sec-teal-dark); }
.se-storehead__menu { display: none; width: 44px; height: 44px; margin-left: -10px; padding: 0; border: 0; background: none; color: var(--sec-ink); align-items: center; justify-content: center; cursor: pointer; }
.se-storehead__mobile { display: none; }

/* --------------------------------------------------------------------------
   CART
   ----------------------------------------------------------------------- */
.se-cartpage { width: 100%; background: #fff; font-size: 15px; line-height: 1.55; }
.se-cartpage__inner { box-sizing: content-box; max-width: 1240px; margin: 0 auto; padding: 40px 24px 80px; display: flex; flex-direction: column; gap: 10px; }
/* No rule under the title: the items table already draws its own header
   line a few pixels below, and two rules that close together read as a
   mistake rather than as structure. */
.se-cartpage__head { padding-bottom: 0; border-bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.se-cartpage__title { margin: 0; color: var(--sec-ink); font-family: var(--sec-display); font-size: clamp(34px, 4vw, 46px); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.se-cartpage__title span { font-family: var(--sec-font); font-size: .5em; color: var(--sec-muted); letter-spacing: 0; }
.se-cartpage__continue { display: inline-flex; align-items: center; gap: 6px; color: var(--sec-ink) !important; font-size: 14px; font-weight: 700; }
.se-cartpage__continue:hover { color: var(--sec-teal-deep) !important; }
.se-cartpage__emptystate { padding: 72px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.se-cartpage__emptystate > svg { color: var(--sec-muted); }
.se-cartpage__emptystate > b { font-size: 20px; }
.se-cartpage__emptystate > span { max-width: 380px; color: var(--sec-copy); line-height: 1.6; }
.se-cartpage__emptystate > div { padding-top: 6px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.se-cartpage__empty-primary, .se-cartpage__empty-secondary { min-height: 48px; padding: 0 22px; border-radius: 4px; display: flex; align-items: center; font-size: 14px; font-weight: 800; }
.se-cartpage__empty-primary { background: var(--sec-brand); color: #fff !important; }
.se-cartpage__empty-secondary { border: 1px solid var(--sec-input); color: var(--sec-ink) !important; }
.se-cartpage__grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.se-cartpage__form { flex: 1 1 560px; min-width: 0; margin: 0; }
.se-cartpage__tablehead { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 16px; padding: 0 0 10px; border-bottom: 1px solid var(--sec-line); color: var(--sec-muted); font-size: 12px; font-weight: 700; }
.se-cartpage__tablehead span:last-child { text-align: right; }
.se-cartpage__line { padding: 24px 0; border-bottom: 1px solid var(--sec-line); display: flex; flex-direction: column; gap: 14px; }
.se-cartpage__line-main { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.se-cartpage__thumb { width: 96px; height: 96px; display: block; overflow: hidden; border-radius: 4px; background: var(--sec-sand); }
/* contain, not cover: an appliance shot is the whole unit against white, and
   a square crop takes the doors off a tall fridge. The customer has to
   recognise the thing they bought. */
.se-cartpage__thumb img { width: 100%; height: 100%; object-fit: contain; }
.se-cartpage__info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.se-cartpage__name { color: var(--sec-ink) !important; font-size: 16px; font-weight: 700; line-height: 1.3; }
.se-cartpage__meta { color: var(--sec-copy); font-size: 14px; line-height: 1.5; }
/* Labelled line specs: label left, value right-of-label, one per row. */
.se-cartpage__specs {
  margin: 2px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 14px;
  font-size: 13.5px;
  line-height: 1.45;
}
.se-cartpage__specs dt { color: var(--sec-muted); white-space: nowrap; }
.se-cartpage__specs dd { margin: 0; color: var(--sec-ink); font-weight: 600; }
.se-cartpage__art { display: flex; align-items: center; gap: 6px; color: var(--sec-copy); font-size: 13px; }
.se-cartpage__art svg { flex: none; color: var(--sec-teal-deep); }
/* Positioning only, for an image-preview trigger sitting under a cart line's
   details. Nothing in this plugin renders one now; the hooks stay so a
   product gallery add-on drops in without fighting the line grid. */
.se-cartpage__previewbtn,
.se-cartpage__info .se-preview-open { align-self: flex-start; margin: 2px 0 0; }

.se-cartpage__controls { padding-top: 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.se-cartpage__stepper { height: 40px; display: flex; align-items: stretch; border: 1px solid var(--sec-input); border-radius: 4px; overflow: hidden; background: #fff; }
.se-cartpage__stepper button { width: 38px; height: 100%; padding: 0; border: 0; background: #fff; color: var(--sec-ink); font-size: 17px; cursor: pointer; box-shadow: none; }
.se-cartpage__stepper button:hover { background: var(--sec-sand); }
.se-cartpage__stepper input[type='number'] { width: 70px; height: 100%; padding: 0 4px; border: 0; border-left: 1px solid var(--sec-line); border-right: 1px solid var(--sec-line); border-radius: 0; background: #fff; color: var(--sec-ink); text-align: center; font-size: 14px; font-weight: 700; appearance: textfield; box-shadow: none; }
.se-cartpage__stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.se-cartpage__unit { color: var(--sec-copy); font-size: 14px; }
.se-cartpage__links { display: flex; gap: 14px; font-size: 13px; font-weight: 700; }
.se-cartpage__links a { min-height: 40px; display: inline-flex; align-items: center; color: var(--sec-copy) !important; text-decoration: underline; text-underline-offset: 3px; }
.se-cartpage__linetotal { color: var(--sec-ink); font-size: 16px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.se-cartpage__upgrade { margin-left: 114px; padding: 10px 12px 10px 14px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--sec-teal-tint); }
.se-cartpage__upgrade-copy { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--sec-copy); font-size: 14px; line-height: 1.45; }
.se-cartpage__upgrade-copy svg { flex: none; color: var(--sec-teal-deep); }
.se-cartpage__upgrade-copy b { color: var(--sec-ink); }
.se-cartpage__upgrade > button { min-height: 36px; padding: 0 14px; border: 1px solid var(--sec-teal-deep); border-radius: 4px; background: #fff; color: var(--sec-teal-deep); font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: none; }
.se-cartpage__upgrade > button:hover { background: var(--sec-teal-deep); color: #fff; }
.se-cartpage__formfoot { padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--sec-copy); font-size: 13px; }
.se-cartpage__formfoot a { min-height: 40px; display: inline-flex; align-items: center; color: var(--sec-copy) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.se-cartpage__actions { position: absolute; left: -9999px; }
.se-cartpage__aside { flex: 1 1 388px; max-width: 468px; position: sticky; top: 96px; min-width: 0; }
.se-cartpage .cart_totals { padding: 26px 24px; border: 0; border-radius: 4px; background: var(--sec-sand); display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: normal; box-shadow: none; }
body.woocommerce-cart .se-cartpage .cart_totals h2 { margin: 0 0 4px; padding: 0; color: var(--sec-ink); font-family: var(--sec-font); font-size: 18px; font-weight: 800; line-height: 24px !important; }
.se-cartpage__row { display: flex; justify-content: space-between; gap: 12px; line-height: normal; }
.se-cartpage__row span { color: var(--sec-copy); }
.se-cartpage__row b { color: var(--sec-ink); text-align: right; font-variant-numeric: tabular-nums; }
.se-cartpage__shipping { color: var(--sec-teal-deep) !important; }
.se-cartpage__coupon-remove { margin-left: 8px; color: #92251f !important; font-size: 12px; text-decoration: underline; }
.se-cartpage__coupon-toggle { align-self: flex-start; min-height: 0; padding: 0; border: 0; background: none; color: var(--sec-ink); font-size: 14px; font-weight: 700; line-height: normal; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }
.se-cartpage__couponform { display: flex; gap: 8px; }
.se-cartpage__couponform[hidden] { display: none !important; }
.se-cartpage__couponform input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--sec-input); border-radius: 4px; background: #fff; box-shadow: none; }
/* Salient styles every submit button (teal fill, 15px 22px) from
   `body[data-form-submit] .container-wrap button[type="submit"]` with
   !important, so the supplied outline button has to match that weight. */
body.woocommerce-cart .container-wrap .se-cartpage__couponform button,
.se-cartpage__couponform button {
  height: 44px;
  min-height: 44px;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 1px solid var(--sec-ink) !important;
  border-radius: 4px;
  background: #fff !important;
  color: var(--sec-ink) !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
body.woocommerce-cart .container-wrap .se-cartpage__couponform button:hover,
.se-cartpage__couponform button:hover { background: var(--sec-sand) !important; color: var(--sec-ink) !important; }
.se-cartpage__saved { margin: 0; color: var(--sec-teal-deep); font-size: 13px; font-weight: 700; }
.se-cartpage__grand { padding-top: 16px; border-top: 1px solid #dedbd4; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; line-height: normal; }
.se-cartpage__grand > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.se-cartpage__grand > span:first-child b { font-size: 16px; }
.se-cartpage__grand small { color: var(--sec-copy); font-size: 12px; }
.se-cartpage__grand-money { display: flex; align-items: baseline; gap: 6px; }
.se-cartpage__grand-amount { color: var(--sec-ink); font-family: var(--sec-display); font-size: 32px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.se-cartpage .wc-proceed-to-checkout { margin: 4px 0 0; padding: 0; line-height: normal; }
body.woocommerce-cart .se-cartpage .cart_totals .wc-proceed-to-checkout a.se-cartpage__checkout.checkout-button { width: 100%; height: 56px; min-height: 56px; margin: 0 !important; padding: 20px !important; border: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--sec-brand) !important; background-color: var(--sec-brand) !important; color: #fff !important; font-size: 15px; font-weight: 800; line-height: normal !important; box-shadow: none; }
body.woocommerce-cart .se-cartpage .cart_totals .wc-proceed-to-checkout a.se-cartpage__checkout.checkout-button:hover { background: var(--sec-brand-dark) !important; background-color: var(--sec-brand-dark) !important; color: #fff !important; }
.se-cartpage__secure { margin: 0; padding: 0 !important; display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--sec-copy); font-size: 12px; line-height: normal; }
.se-cartpage__secure svg { color: var(--sec-teal-deep); }
.se-cartpage__payicons { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 5px; flex-wrap: wrap; line-height: normal; }
.se-cartpage__payicons li { list-style: none !important; }
.se-cartpage__payicons img { width: 32px; height: 20px; object-fit: contain; }
.se-cartpage__trust { margin-top: 6px; padding-top: 16px; border-top: 1px solid #dedbd4; display: flex; flex-direction: column; gap: 12px; }
.se-cartpage__trust p { margin: 0; padding: 0 !important; display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--sec-copy); font-size: 13px; line-height: 1.5; }
.se-cartpage__trust svg { margin-top: 1px; color: var(--sec-teal-deep); }
.se-cartpage__trust b { color: var(--sec-ink); }
.se-cartpage__ups { border-top: 1px solid var(--sec-line); }
.se-cartpage__ups-inner { box-sizing: content-box; max-width: 1240px; margin: 0 auto; padding: 48px 24px 88px; display: flex; flex-direction: column; gap: 20px; }
.se-cartpage__ups-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.se-cartpage__ups-head h2 { margin: 0; color: var(--sec-ink); font-family: var(--sec-display); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.se-cartpage__ups-head > div { display: flex; gap: 8px; }
.se-cartpage__ups-head button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--sec-input); border-radius: 4px; background: #fff; color: var(--sec-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; }
.se-cartpage__ups-head button:disabled { opacity: .35; cursor: default; }
.se-cartpage__ups-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.se-cartpage__ups-track::-webkit-scrollbar { display: none; }
.se-cartpage__ups-track > li { flex: 0 0 min(78%, 280px); scroll-snap-align: start; list-style: none !important; }
.se-cartpage__ups-track a { display: flex; flex-direction: column; gap: 12px; color: var(--sec-ink) !important; }
.se-cartpage__ups-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--sec-sand); }
.se-cartpage__ups-img img { width: 100%; height: 100%; object-fit: cover; }
.se-cartpage__ups-copy { display: flex; flex-direction: column; gap: 3px; }
.se-cartpage__ups-copy b { font-size: 15px; }
.se-cartpage__ups-copy span { color: var(--sec-copy); font-size: 13px; }
.se-cartpage__ups-copy strong { padding-top: 2px; font-size: 14px; }

/* Cart footer */
.se-storefoot { background: var(--sec-brand); color: #fff; }
.se-storefoot__newsletter { background: var(--sec-teal); color: var(--sec-ink); }
.se-storefoot__newsletter-inner { max-width: 1240px; margin: 0 auto; padding: 44px 24px; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.se-storefoot__newsletter-inner > div { max-width: 560px; display: flex; flex-direction: column; gap: 6px; }
.se-storefoot__newsletter h2 { margin: 0; font-family: var(--sec-display); font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.se-storefoot__newsletter p { margin: 0; font-size: 15px; line-height: 1.6; }
.se-storefoot__newsletter form { flex: 1; max-width: 460px; min-width: 260px; display: flex; gap: 8px; flex-wrap: wrap; }
.se-storefoot__newsletter input { flex: 1; min-width: 180px; height: 48px; padding: 0 16px; border: 0; border-radius: 3px; background: #fff; color: var(--sec-ink); font-size: 15px; }
body.woocommerce-cart .se-storefoot__newsletter button { height: 48px; padding: 0 26px; border: 0; border-radius: 3px; background: var(--sec-brand-alt) !important; background-color: var(--sec-brand-alt) !important; color: #fff !important; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.se-storefoot__main { max-width: 1240px; margin: 0 auto; padding: 64px 24px 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; }
.se-storefoot__about { grid-column: span 2; max-width: 360px; display: flex; flex-direction: column; gap: 18px; }
.se-storefoot__about img { width: auto; height: 64px; align-self: flex-start; }
.se-storefoot__about p { margin: 0; color: #c9ccd0; font-size: 14px; line-height: 1.7; }
.se-storefoot__main nav { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.se-storefoot__main nav b { color: #a7abb1; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.se-storefoot__main a { color: #fff !important; }
.se-storefoot__main a:hover { color: var(--sec-teal) !important; }
.se-storefoot__bottom { max-width: 1240px; margin: 0 auto; padding: 22px 24px 30px; border-top: 1px solid #3a3d42; display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center; color: #a7abb1; font-size: 12px; }
.se-storefoot__bottom > div { display: flex; gap: 24px; flex-wrap: wrap; }
.se-storefoot__bottom a { color: #a7abb1 !important; }
.se-storefoot__social { gap: 18px !important; }
.se-storefoot__social a { color: #fff !important; }

/* --------------------------------------------------------------------------
   CHECKOUT
   ----------------------------------------------------------------------- */
.se-checkout { min-height: 100vh; display: flex; flex-direction: column; background: #fff; font-size: 15px; line-height: 1.55; }
.se-co__header { border-bottom: 1px solid var(--sec-line-warm); background: #fff; }
/* The logo is a 250×143 bitmap. Sizing it by height let the theme's own
   `img { width: auto }` reassert itself on the live site and it came through
   at natural size; pinning the width is the one dimension nothing else
   fights over. The row's own padding carries the height. */
/* Shouted for the same reason the logo is: the theme pads its own header
   rows and wins on specificity, which left a band of empty white above and
   below the mark. The logo's own height sets the bar. */
.se-co__header > div { max-width: 1160px; margin: 0 auto; padding: 0 24px !important; display: flex; justify-content: space-between; align-items: center; }
.se-checkout .se-co__header img,
.se-co__header img { width: 131px !important; height: auto !important; max-width: 131px !important; margin: 12px !important; display: block; }
.se-co__cartlink { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--sec-ink) !important; }
.se-co__sum-toggle { display: none; }
.se-checkout > .woocommerce-notices-wrapper,
.se-checkout > .woocommerce-error,
.se-checkout > .woocommerce-info,
.se-checkout > .woocommerce-message { width: min(1112px, calc(100% - 48px)); margin: 18px auto 0; }
.se-checkout > .woocommerce-notices-wrapper:empty { display: none; }
/* 1.32 : 1 splits the 1160 header container into 660 + 500, so the form
   column is the wider of the two and both edges line up with the header. */
.se-co__layout { flex: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); align-items: stretch !important; margin: 0; }
.se-co__main { min-width: 0; display: flex; justify-content: flex-end; border-right: 1px solid var(--sec-line-warm); background: #fff; }
/* Its left edge lands under the logo; the rail's right edge lands under
   the cart icon. Together they are the header's 1160 container. */
.se-co__main-inner { width: 100%; max-width: 660px; margin-right: 0; padding: 36px 24px 40px; display: flex; flex-direction: column; gap: 32px; }
.se-co__express { display: flex; flex-direction: column; gap: 12px; }
.se-co__express > span { color: var(--sec-copy); text-align: center; font-size: 13px; }
.se-co__express-slot:empty { display: none; }
.se-co__express-slot #wc-stripe-express-checkout-element { margin: 0 !important; }
.se-co__express-slot #wc-stripe-express-checkout-button-separator {
  height: 22px;
  margin: 12px 0 0 !important;
  padding: 6px 0 0 !important;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sec-muted);
  font-size: 13px;
  line-height: 16px;
  text-transform: lowercase;
}
.se-co__express-slot #wc-stripe-express-checkout-button-separator::before,
.se-co__express-slot #wc-stripe-express-checkout-button-separator::after { content: ''; height: 1px; flex: 1; background: var(--sec-line-warm); }
.se-co__details { display: flex; flex-direction: column; gap: 32px; }
.se-co__section { display: flex; flex-direction: column; gap: 12px; }
/* One size for every section heading. Contact, Delivery address, Billing
   address, Shipping method and Payment are peers; sizing three of them at
   21px and two at 17px made the form read as if it had sub-sections. */
.se-co__section h1, .se-co__section h2 { margin: 0; color: var(--sec-ink); font-family: var(--sec-font); font-size: 17px; font-weight: 800; letter-spacing: 0; line-height: 1.25; }
.se-co__address { padding: 0 !important; }
.se-co__address::before, .se-co__address::after { content: none !important; display: none !important; }

/* Three invisible things hang off `woocommerce_after_checkout_billing_form`
   and every one of them was claiming a row gap in the flex column — which is
   the whole of the hole between Billing address and Shipping method.
   
   1. `<wc-order-attribution-inputs>`: a custom element wrapping core's
      hidden attribution inputs. `display: contents` keeps the inputs in the
      form (they must still post) while taking the element itself out of the
      layout — `display: none` would not do, as it is also a flex item.
   2. A `<style>` block injected by the Zoho Campaigns integration, which an
      unknown-element default makes an inline box rather than nothing.
   3. Zoho's own "Subscribe to our newsletter" checkbox, invisible only
      because this form hides every `.form-row` label — so it was reserving
      the height of a field nobody could see. The contact section already
      asks the same question, so it goes rather than becoming a second one. */
.se-checkout wc-order-attribution-inputs { display: contents; }
.se-checkout style { display: none !important; }
.se-checkout #zc-optin-field { display: none !important; }

/* And the general case: an action with nothing hooked to it still prints its
   wrapper. */
.se-co__section > div:empty,
.se-co__section > p:empty,
.se-co__details > div:empty { display: none !important; }
.se-co__section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.se-co__section-head a { color: var(--sec-teal-deep) !important; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
body.woocommerce-checkout .se-checkout .form-row { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }
.se-checkout .form-row:not(.place-order) label { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.se-checkout .form-row .optional { display: none; }
.se-checkout .form-row input.input-text,
.se-checkout .form-row textarea,
.se-checkout .form-row select { width: 100%; height: 50px; min-height: 50px; padding: 0 14px; border: 1px solid var(--sec-input); border-radius: 4px; background: #fff; color: var(--sec-ink); font-size: 15px; box-shadow: none; }
.se-checkout .form-row textarea { min-height: 96px; padding-top: 14px; }
.se-checkout #billing_address_1,
.se-checkout #shipping_address_1 { padding-right: 14px; background-image: none; }
.se-checkout .form-row input:focus, .se-checkout .form-row textarea:focus, .se-checkout .form-row select:focus { border-color: var(--sec-teal-deep); outline: 2px solid var(--sec-teal-deep); outline-offset: -1px; }
/* A field named in the error list is marked, not just outlined faintly. */
.se-checkout .form-row.woocommerce-invalid input.input-text,
.se-checkout .form-row.woocommerce-invalid select,
.se-checkout .form-row.woocommerce-invalid textarea {
  border-color: #b3261e;
  box-shadow: inset 0 0 0 1px #b3261e;
  background: #fff8f7;
}
.se-checkout .form-row.woocommerce-invalid input.input-text:focus,
.se-checkout .form-row.woocommerce-invalid select:focus,
.se-checkout .form-row.woocommerce-invalid textarea:focus { outline-color: #b3261e; border-color: #b3261e; }
.se-checkout .form-row.woocommerce-invalid::before { color: #b3261e; }
.se-checkout .se-co__terms.is-invalid { padding: 12px; border: 1px solid #b3261e; border-radius: 4px; background: #fff8f7; }
.se-checkout .se-co__terms.is-invalid input[type='checkbox'] { accent-color: #b3261e; outline: 2px solid #b3261e; outline-offset: 2px; }
.se-checkout .select2-container { width: 100% !important; }
.se-checkout .select2-container .select2-selection--single { height: 56px; border: 1px solid var(--sec-input); border-radius: 4px; }
.se-checkout .select2-container .select2-selection--single .select2-selection__rendered { padding: 17px 40px 0 14px; color: var(--sec-ink); line-height: 36px; }
.se-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 54px; right: 8px; }
/* The two address blocks are built the same way, so every rule below names
   both. The delivery block is the shipping field set and the billing block
   the billing one; before they were twins, only billing had styling and the
   delivery fields fell back to one-per-row. */
.se-checkout #billing_country_field,
.se-checkout #shipping_country_field { position: relative; min-height: 50px; grid-column: 1 / -1; }
.se-checkout #billing_country_field::before,
.se-checkout #shipping_country_field::before { content: 'Country/Region'; position: absolute; z-index: 2; top: 6px; left: 14px; color: var(--sec-muted); font-size: 12px; line-height: 1; pointer-events: none; }
/* No floating caption on State: unlike Country it is always a real choice
   the customer just made, and the word above the value only cramped it. */
.se-checkout #billing_state_field,
.se-checkout #shipping_state_field { position: relative; }

/* The design uses the native select, which the floating label is drawn
   around. selectWoo still initialises and injects a control of its own — two
   State pickers stacked on top of each other — and it sits inside
   `.woocommerce-input-wrapper`, not directly under `.form-row`, which is why
   a child selector missed it. */
.se-checkout .form-row .select2-container { display: none !important; }

/* selectWoo also clips the real select out of sight when it takes over. It
   has to come back, because it is the one being styled. */
.se-checkout .form-row select,
.se-checkout .form-row select.select2-hidden-accessible {
  position: static !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px;
  margin: 0 !important;
  padding: 0 38px 0 14px !important;
  border: 1px solid var(--sec-input) !important;
  border-radius: 4px !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  appearance: auto;
  background: #fff;
  color: var(--sec-ink);
  font-size: 15px;
  display: block !important;
}

/* Country and State carry a label above the value, so their text sits lower
   than a plain select's would. */
.se-checkout #billing_country_field select,
.se-checkout #shipping_country_field select { padding-top: 15px !important; }

/* A store that ships to one country only gets a bare word from WooCommerce
   where a field would be. Left alone it reads as a stray line of text in the
   middle of the form, so it is given the shape of the disabled field it is. */
.se-checkout #billing_country_field > strong,
.se-checkout #shipping_country_field > strong,
.se-checkout #billing_country_field .woocommerce-input-wrapper > strong,
.se-checkout #shipping_country_field .woocommerce-input-wrapper > strong {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 50px;
  padding: 0 14px 13px;
  border: 1px solid var(--sec-input);
  border-radius: 4px;
  background: var(--sec-sand);
  color: var(--sec-copy);
  font-size: 15px;
  font-weight: 400;
}

.se-co__fields { width: 100% !important; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.se-co__fields > .form-row { grid-column: 1 / -1; }
.se-co__fields > #billing_country_field,
.se-co__fields > #shipping_country_field { order: 1; }
.se-co__fields > #billing_first_name_field,
.se-co__fields > #shipping_first_name_field { order: 2; grid-column: span 3; }
.se-co__fields > #billing_last_name_field,
.se-co__fields > #shipping_last_name_field { order: 2; grid-column: span 3; }
.se-co__fields > #billing_company_field,
.se-co__fields > #shipping_company_field { order: 3; }
.se-co__fields > #billing_address_1_field,
.se-co__fields > #shipping_address_1_field { order: 4; }
.se-co__fields > #billing_city_field,
.se-co__fields > #shipping_city_field { order: 6; grid-column: span 2; }
.se-co__fields > #billing_state_field,
.se-co__fields > #shipping_state_field { order: 6; grid-column: span 2; }
.se-co__fields > #billing_postcode_field,
.se-co__fields > #shipping_postcode_field { order: 6; grid-column: span 2; }
.se-co__fields > #billing_phone_field,
.se-co__fields > #shipping_phone_field { order: 7; }

/* Collapsed, the billing block is a heading and a tick-box; it should not
   leave the hole a full field set would. */
.se-co__billing { gap: 0 !important; }
label.se-co__check.se-co__billing-same { margin: 12px 0 !important; }
/* `hidden` has to beat the grid display the field wrapper is given, or the
   collapsed block keeps its row gap and the section below it sits low. */
.se-co__billing > [data-se-billing-fields][hidden] { display: none !important; margin: 0 !important; }

.se-co__check { display: flex; align-items: center; gap: 10px; color: var(--sec-ink); font-size: 14px; cursor: pointer; }
.se-co__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--sec-ink); }
.se-co__check--boxed { padding: 16px; border: 1px solid var(--sec-input); border-radius: 4px; }
.se-checkout .create-account { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.se-co__ship-slot:empty { display: none; }
/* One bordered box, hairline-divided rows. Tighter and quieter than the
   boxed-per-rate treatment it replaces: a long pickup list was reading as
   six competing cards rather than one list to pick from. */
.se-co__ship-none { margin: 0; padding: 10px 12px; border: 1px dashed var(--sec-input); border-radius: 4px; color: var(--sec-copy); background: #fff; font-size: 13px; }
.se-co__ship-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: 1px solid var(--sec-input); border-radius: 4px; overflow: hidden; background: #fff; }
.se-co__ship-list li { list-style: none !important; margin: 0; }
.se-co__ship-list li + li { border-top: 1px solid var(--sec-line); }
.se-co__ship-single, .se-co__ship-option { min-height: 46px; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; }
.se-co__ship-single { border: 1px solid var(--sec-input); border-radius: 4px; background: #fff; }
.se-co__ship-single::before { content: ''; width: 14px; height: 14px; flex: none; border: 4px solid var(--sec-ink); border-radius: 50%; }
.se-co__ship-option { cursor: pointer; }
.se-co__ship-option:has(input:checked) { background: var(--sec-teal-tint); }
.se-co__ship-option:has(input:checked) .se-co__ship-label { font-weight: 700; }
.se-co__ship-option input { width: 14px; height: 14px; flex: none; margin: 0; accent-color: var(--sec-ink); }
/* Every row the same height: the label is held to two lines, so a long
   centre name cannot make its row twice the size of the one above it. The
   full text stays in the title attribute. */
.se-co__ship-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.se-co__ship-cost { white-space: nowrap; font-size: 13px; font-weight: 600; }
.se-co__ship-package { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--sec-copy); }
.se-co__payment-head { display: flex; flex-direction: column; gap: 4px; }
/* Salient pads every paragraph 21px underneath, which here opened a gap
   between "All transactions are secure" and the card panel wide enough to
   read as a missing element. */
.se-checkout .se-co__payment-head p { margin: 0; padding: 0; color: var(--sec-copy); font-size: 14px; }
.se-co__payment { position: relative; }
.se-co__order-review { width: 100%; margin: 0 !important; padding: 0 !important; }
.se-checkout #payment.woocommerce-checkout-payment { background: transparent; border-radius: 0; display: flex; flex-direction: column; }
.se-checkout #payment ul.wc_payment_methods { margin: 0; padding: 0; border: 1px solid var(--sec-input); border-radius: 4px; display: flex; flex-direction: column; gap: 0; overflow: hidden; background: #fff; }
.se-checkout #payment ul.wc_payment_methods > li { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--sec-line-warm); border-radius: 0; list-style: none !important; background: #fff; overflow: hidden; }
.se-checkout #payment ul.wc_payment_methods > li:first-child { border-top: 0; }
.se-checkout #payment ul.wc_payment_methods li > label { min-height: 56px; margin: 0; padding: 0 16px; display: flex; align-items: center; gap: 10px; color: var(--sec-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
/* WooCommerce prints the real radio as a sibling BEFORE the label, so it
   lands on its own line above the row. We draw the control on the label
   instead; the input stays in the accessibility tree and keeps its focus
   ring, it just stops being painted twice. */
.se-checkout #payment ul.wc_payment_methods > li > input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.se-checkout #payment ul.wc_payment_methods li > label::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--sec-input);
  border-radius: 50%;
  background: #fff;
}

/* Checked: the same filled ring the shipping options use. */
.se-checkout #payment ul.wc_payment_methods > li > input[type='radio']:checked + label::before {
  border: 5px solid var(--sec-ink);
}

.se-checkout #payment ul.wc_payment_methods > li > input[type='radio']:focus-visible + label::before {
  outline: 2px solid var(--sec-ink);
  outline-offset: 2px;
}
.se-checkout #payment .se-co__cardmarks { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
/* Match the brand marks Stripe draws inside its own card-number field: ~26px
   wide on a 4px gap. The theme adds margins to payment-row images, hence the
   explicit override. */
.se-checkout #payment .se-co__cardmarks img { width: 30px; height: auto; margin: 0 !important; padding: 0 !important; display: block; }

.se-checkout #payment div.payment_box { position: static; margin: 0; padding: 16px; border-top: 1px solid var(--sec-line-warm); border-radius: 0; background: var(--sec-sand); color: var(--sec-copy); font-size: 14px; }
.se-checkout #payment div.payment_box::before { display: none; }
.se-checkout #payment .testmode-info { display: none; }
.se-checkout #wc-stripe-hidden-style-input,
.se-checkout #wc-stripe-hidden-input,
.se-checkout #wc-stripe-hidden-invalid-input {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid var(--sec-input) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--sec-ink) !important;
  font-family: var(--sec-font) !important;
  font-size: 15px !important;
  line-height: normal !important;
  box-shadow: none !important;
}
.se-checkout #wc-stripe-hidden-valid-active-label { color: var(--sec-copy) !important; font-family: var(--sec-font) !important; font-size: 14px !important; }
.se-checkout #payment .se-co__remember { margin-top: 32px; gap: 12px; }
.se-checkout #payment .se-co__remember h2 { line-height: normal; }
.se-checkout #payment .se-co__remember .woocommerce-account-fields { width: 100%; }
.se-checkout #payment .form-row.place-order { display: block !important; width: 100% !important; margin: 32px 0 0 !important; padding: 0 !important; }
.se-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px; color: var(--sec-copy); font-size: 13px; }
.se-checkout .woocommerce-terms-and-conditions-wrapper:empty { display: none; }
.se-checkout .woocommerce-privacy-policy-text p { margin: 0 0 12px; }
.se-checkout .se-co__terms { margin: 0 0 16px; }
.se-checkout .se-co__terms .se-co__check {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  min-height: 24px;
  display: flex;
  align-items: flex-start;
  color: var(--sec-copy);
  line-height: 1.55;
}
.se-checkout .se-co__terms input[type='checkbox'] { margin-top: 1px; flex: 0 0 auto; }
/* One line at the column's width: the default 14px wrapped "Privacy Policy"
   onto a second row, which read as a stray link under the checkbox. */
.se-checkout .se-co__terms .se-co__check > span { font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.se-checkout .se-co__terms a { color: var(--sec-teal-deep) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.se-checkout #payment #place_order { appearance: none; display: block; width: 100%; height: 58px; min-height: 58px; float: none; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 4px !important; background: var(--sec-teal) !important; color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1 !important; filter: none !important; font-family: var(--sec-font) !important; font-size: 17px !important; font-weight: 800 !important; line-height: normal !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important; }
.se-checkout #payment #place_order::before,
.se-checkout #payment #place_order::after { content: none !important; display: none !important; }
.se-checkout #payment #place_order:hover { background: var(--sec-teal-dark); color: var(--sec-ink); }
.wc-proceed-to-checkout .button.checkout-button,
.woocommerce #order_review #payment #place_order,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { padding: 20px !important; }
.se-co__proof-note { margin: 0; padding: 0 !important; color: var(--sec-copy); font-size: 13px; line-height: 1.6; text-align: center; }
.se-co__payloader { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; border-radius: 4px; background: rgba(255, 255, 255, .78); }
.se-co__payloader.is-on { display: flex; }
.se-co__spinner { width: 28px; height: 28px; border: 3px solid #d9eeee; border-top-color: var(--sec-teal-deep); border-radius: 50%; animation: se-co-spin .7s linear infinite; }
@keyframes se-co-spin { to { transform: rotate(360deg); } }
.se-co__legal-links { padding-top: 18px; border-top: 1px solid var(--sec-line-warm); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.se-co__legal-links a { color: var(--sec-teal-deep) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Checkout summary */
.se-co__aside { min-width: 0; min-height: 100%; align-self: stretch !important; background: var(--sec-sand); display: flex; justify-content: flex-start; }
.se-co__aside-inner { width: 100%; max-width: 500px; padding: 36px 24px; position: sticky; top: 0; align-self: flex-start; }
body.admin-bar .se-co__aside-inner { top: 32px; }
.se-co__sum { display: flex; flex-direction: column; gap: 18px; }
.se-co__sum-lines { display: flex; flex-direction: column; gap: 14px; }
.se-co__sum-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; list-style: none !important; }
/* Same frame as the confirmation page's: it clips, so a photo that fills the
   square cannot keep its own corners and spill past the rounded border. */
.se-co__sum-thumb { position: relative; box-sizing: border-box; flex: none; width: 64px; height: 64px; padding: 3px; border: 1px solid #dedbd4; border-radius: 6px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* contain, not cover: a tall fridge or a wide TV loses its ends to a square
   crop, and the whole point of the thumbnail is recognising the appliance. */
.se-co__sum-thumb img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 0; object-fit: contain; }
/* Inside the corner, because the frame clips now. */
.se-co__sum-qty { position: absolute; top: 2px; right: 2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--sec-copy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.se-co__sum-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--sec-copy); font-size: 13px; }
.se-co__sum-copy b { color: var(--sec-ink); font-size: 14px; }
.se-co__sum-meta { overflow: hidden; text-overflow: ellipsis; }
.se-co__sum-price { color: var(--sec-ink); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.se-co__coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-top: 4px; }
.se-co__coupon input { min-width: 0; height: 50px; padding: 0 14px; border: 1px solid var(--sec-input); border-radius: 4px; background: #fff; color: var(--sec-ink); font-size: 15px; box-shadow: none; }
body.woocommerce-checkout .container-wrap .se-co__coupon button,
.se-co__coupon button {
  height: 50px;
  min-height: 50px;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 1px solid var(--sec-input) !important;
  border-radius: 4px;
  background: #fff !important;
  color: var(--sec-ink) !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.se-co__coupon button:hover { background: var(--sec-sand) !important; color: var(--sec-ink) !important; }
.se-co__coupon button:disabled { opacity: .55; cursor: wait; }
.se-co__coupon p { grid-column: 1 / -1; margin: -4px 0 0; color: var(--sec-copy); font-size: 12px; }
/* `auto` for the value column let a long shipping label eat the whole row
   and wrap the label to one word per line. The label keeps its width, the
   value takes what is left and wraps inside it. */
.se-co__sum-totals { margin: 0; display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 10px 14px; color: var(--sec-copy); font-size: 14px; align-items: start; }
.se-co__sum-totals dt { font-weight: 400; text-wrap: pretty; }
.se-co__sum-totals dd { margin: 0; min-width: 0; color: var(--sec-ink); font-weight: 700; text-align: right; text-wrap: pretty; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* The saved line belongs to the rows above it, so it sits tight under them
   and pulls the Total back up rather than floating between the two. */
.se-co__sum-saved { margin: -10px 0 -8px; color: var(--sec-teal-deep); font-size: 13px; font-weight: 700; }
.se-co__sum-grand { padding-top: 14px; border-top: 1px solid var(--sec-line-warm); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.se-co__sum-grand > b { font-size: 19px; }
.se-co__sum-grand > span { display: flex; align-items: baseline; gap: 8px; }
.se-co__sum-grand small { color: var(--sec-copy); font-size: 12px; }
.se-co__sum-grand-amount { color: var(--sec-ink); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.se-co__sum-gst { margin: -14px 0 0; color: var(--sec-copy); font-size: 13px; }
.se-checkout .blockUI.blockOverlay { background: rgba(255, 255, 255, .65) !important; }

@media (max-width: 1050px) {
  .se-storehead__nav { display: none; }
  .se-storehead__menu { display: flex; }
  .se-storehead__design { display: none !important; }
  .se-storehead__mobile { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; padding: 8px 20px 32px; border-bottom: 1px solid var(--sec-line-warm); background: #fff; flex-direction: column; box-shadow: 0 24px 34px -28px rgba(32, 32, 32, .35); }
  .se-storehead__mobile:not([hidden]) { display: flex; }
  .se-storehead__mobile > a { min-height: 52px; border-bottom: 1px solid var(--sec-line); display: flex; align-items: center; color: var(--sec-ink) !important; font-size: 16px; font-weight: 700; }
  .se-storehead__mobile .se-storehead__mobile-design { margin-top: 18px; border: 0; border-radius: 4px; justify-content: center; background: var(--sec-teal); }
  .se-storehead__mobile .se-storehead__mobile-call { margin-top: 10px; border: 1px solid var(--sec-input); border-radius: 4px; justify-content: center; }
}

@media (max-width: 900px) {
  .se-cartpage__grid { flex-direction: column; }
  .se-cartpage__form, .se-cartpage__aside { width: 100%; max-width: none; flex-basis: auto; }
  .se-cartpage__aside { position: static; }
  .se-co__layout { grid-template-columns: minmax(0, 1fr); display: flex; flex-direction: column; }
  .se-co__main { border-right: 0; justify-content: center; }
  .se-co__main-inner { max-width: 620px; margin: 0 auto; }
  .se-co__sum-toggle { width: 100%; min-height: 58px; padding: 12px 24px; border: 0; border-bottom: 1px solid var(--sec-line-warm); background: var(--sec-sand); color: var(--sec-teal-deep); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: none; }
  .se-co__sum-toggle > span { display: flex; align-items: center; gap: 8px; }
  .se-co__sum-toggle svg { transition: transform .15s ease; }
  .se-co__sum-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
  .se-co__sum-toggle b { color: var(--sec-ink); font-size: 17px; }
  .se-co__aside { display: none; order: -1; border-bottom: 1px solid var(--sec-line-warm); }
  .se-co__aside.is-open { display: flex; }
  .se-co__aside-inner { max-width: 620px; margin: 0 auto; padding: 24px; position: static; }
}

@media (max-width: 782px) {
  body.admin-bar .se-co__aside-inner { top: 46px; }
}

/* Below this the six-column address grid stops helping: a first/last name
   pair is readable side by side, everything else is not. */
@media (max-width: 620px) {
  .se-co__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .se-co__fields > .form-row { grid-column: 1 / -1 !important; }
  .se-co__fields > #billing_first_name_field,
  .se-co__fields > #shipping_first_name_field,
  .se-co__fields > #billing_last_name_field,
  .se-co__fields > #shipping_last_name_field { grid-column: span 1 !important; }
  .se-checkout .form-row input.input-text,
  .se-checkout .form-row textarea,
  .se-checkout .form-row select,
  .se-checkout .form-row select.select2-hidden-accessible { width: 100% !important; }
}

@media (max-width: 680px) {
  .se-storehead__announce-inner { padding-inline: 16px; }
  .se-storehead__announce-extra { display: none; }
  .se-storehead__row { height: 72px; padding-inline: 16px; gap: 10px; }
  .se-storehead__logo img { height: 44px; }
  .se-cartpage__inner { padding: 28px 16px 56px; gap: 10px; }
  .se-cartpage__head { align-items: center; }
  .se-cartpage__line-main { grid-template-columns: 82px minmax(0, 1fr) auto; gap: 12px; }
  .se-cartpage__thumb { width: 82px; height: 82px; }
  .se-cartpage__linetotal { font-size: 14px; }
  .se-cartpage__upgrade { margin-left: 0; }
  .se-cartpage__upgrade > button { width: 100%; }
  .se-cartpage__tablehead { grid-template-columns: minmax(0, 1fr) 100px; }
  .se-cartpage__controls { margin-left: -94px; padding-top: 14px; }
  .se-cartpage__unit { order: 2; }
  .se-cartpage__links { order: 3; }
  .se-cartpage__ups-inner { padding: 36px 16px 64px; }
  .se-storefoot__newsletter-inner { padding: 36px 16px; }
  .se-storefoot__newsletter form { min-width: 0; width: 100%; }
  .se-storefoot__main { padding: 48px 16px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .se-storefoot__about { grid-column: 1 / -1; }
  .se-storefoot__main nav:last-child { grid-column: 1 / -1; }
  .se-storefoot__bottom { padding-inline: 16px; }
  .se-co__header > div,
  .se-ty__head-inner { padding: 0 20px !important; }
  .se-checkout .se-co__header img,
  .se-co__header img,
  .se-ty__logo img { width: 112px !important; max-width: 112px !important; }
  .se-co__sum-toggle { padding-inline: 20px; }
  .se-co__main-inner { padding: 28px 20px 40px; gap: 28px; }
  .se-co__details { gap: 28px; }
  .se-co__fields { grid-template-columns: minmax(0, 1fr); }
  /* Both field sets, not just billing — the delivery block is the shipping
     one and was still being laid out in six columns here. */
  .se-co__fields > .form-row { grid-column: 1 / -1 !important; }
  .se-co__sum-line { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; }
  .se-co__sum-thumb { width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .se-storehead *, .se-storefoot *, .se-cartpage *, .se-checkout * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Sign-in dialog on the checkout

   Signing in must not cost the customer their place: this overlays the page
   and reloads it in situ once the session changes.
   ----------------------------------------------------------------------- */
.se-co__signin {
  font: inherit;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sec-teal-deep);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  box-shadow: none;
}
.se-co__signin:hover { color: var(--sec-ink); }

.se-login { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.se-login[hidden] { display: none !important; }
.se-login__backdrop { position: absolute; inset: 0; background: rgba(32, 32, 32, .55); }
.se-login__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 24px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(32, 32, 32, .28);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.se-login__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.se-login__head h2 { margin: 0; font-family: var(--sec-display); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.se-login__close {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sec-line-warm);
  border-radius: 4px !important;
  background: #fff;
  color: var(--sec-ink);
  cursor: pointer;
  box-shadow: none;
}
.se-login__close:hover { background: var(--sec-sand); }
/* The panel is a flex column with its own gap; the theme's paragraph margin
   stacked on top of it and opened a hole under the lede. */
.se-login__lede { margin: -6px 0 0 !important; padding: 0 !important; color: var(--sec-copy); font-size: 13px; line-height: 1.55; }
.se-login__hint { margin: -4px 0 0 !important; padding: 0 !important; color: var(--sec-muted); font-size: 12.5px; }

/* Tabs: one dialog, two jobs. */
.se-login__tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--sec-input); border-radius: 4px; background: var(--sec-sand); }
.se-login__tab { flex: 1 1 0; min-height: 36px; padding: 0 12px; border: 0; border-radius: 3px; background: none; color: var(--sec-copy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.se-login__tab.is-on { background: #fff; color: var(--sec-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
/* display wins over the hidden attribute, so the panes say it twice. */
.se-login [data-se-login-pane][hidden] { display: none !important; }
.se-login__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.se-login__field { display: flex; flex-direction: column; gap: 6px; }
.se-login__field label { font-size: 13px; font-weight: 700; }
.se-login__field input {
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--sec-input);
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  box-shadow: none;
}
.se-login__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.se-login__row a { color: var(--sec-teal-deep) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.se-login__msg { margin: 0; font-size: 13px; font-weight: 600; color: var(--sec-copy); }
.se-login__msg.is-error { color: #8f2019; }
.se-login__submit {
  min-height: 52px;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--sec-brand) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none !important;
}
.se-login__submit:hover { background: #000 !important; color: #fff !important; }
.se-login__submit:disabled { opacity: .6; cursor: wait; }
.se-login__foot { margin: 0 !important; padding: 0 !important; color: var(--sec-muted); font-size: 12.5px; line-height: 1.5; text-align: center; }

/* The account opt-in now carries an explanation under its label. */
.se-checkout .se-co__check--boxed span { display: flex; flex-direction: column; gap: 2px; }
.se-checkout .se-co__check--boxed b { font-size: 14px; font-weight: 700; }
.se-checkout .se-co__check--boxed small { font-size: 12.5px; line-height: 1.5; color: var(--sec-copy); }

/* --------------------------------------------------------------------------
   ORDER RECEIVED — a 1:1 transcription of Scan/ThankYou.dc.html.

   Every length here is the supplied inline value: the 1160px header bar, the
   auto-fit 440px two-column split, the 600px/460px column caps, 44px column
   padding, 32px/20px stacks, 22px card padding, the 28px step markers and the
   78px props indent. The design owns the chrome on this page, so Salient's
   header and footer are hidden for it alongside the checkout.
   ----------------------------------------------------------------------- */
.se-ty {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--sec-ink);
  font-family: var(--sec-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.se-ty *, .se-ty *::before, .se-ty *::after { box-sizing: border-box; }
.se-ty a:not(.se-ty__btn) { color: var(--sec-teal-deep) !important; text-decoration: none; }
.se-ty a:not(.se-ty__btn):hover { color: var(--sec-ink) !important; }
.se-ty img { display: block; max-width: 100%; }
.se-ty ul, .se-ty ol { margin: 0; padding: 0; list-style: none !important; }
.se-ty li { margin: 0; list-style: none !important; }
.se-ty h1, .se-ty h2 { margin: 0; }
.se-ty a:focus-visible, .se-ty button:focus-visible { outline: 2px solid var(--sec-teal-deep); outline-offset: 2px; }

/* Header: logo left, phone right, 1160px bar. */
.se-ty__head { border-bottom: 1px solid var(--sec-line-warm); background: #fff; }
.se-ty__head-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px !important; display: flex; justify-content: space-between; align-items: center; }
.se-ty__logo { display: flex; }
/* Shouted, and sized by width. Themes set img dimensions from several
   directions at once — Salient alone has rules for `img`, for images inside
   links and for its own lazy-load wrapper — and the mark is a 250×143 bitmap
   that arrives at full size the moment any of them wins. */
.se-ty__logo img { width: 131px !important; height: auto !important; max-width: 131px !important; margin: 12px !important; display: block; }
.se-ty__phone { font-size: 14px; font-weight: 700; color: var(--sec-ink) !important; }

/* Collapsible summary control (small screens only). */
.se-ty__sum-toggle {
  display: none;
  width: 100%;
  min-height: 58px;
  padding: 12px 24px;
  border: 0;
  border-bottom: 1px solid var(--sec-line-warm);
  border-radius: 0 !important;
  background: var(--sec-sand);
  color: var(--sec-teal-deep);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}
.se-ty__sum-toggle > span { display: flex; align-items: center; gap: 8px; }
.se-ty__sum-toggle svg { transition: transform .15s ease; }
.se-ty__sum-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.se-ty__sum-toggle b { color: var(--sec-ink); font-size: 17px; }

/* The same 1.32 : 1 split as the checkout, so the confirmation lines up with
   its header exactly as the checkout does with its own. */
.se-ty__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
.se-ty__main { display: flex; justify-content: flex-end; }
.se-ty__main-inner { width: 100%; max-width: 660px; padding: 44px 24px 56px; display: flex; flex-direction: column; gap: 32px; }

/* Hero: 52px ring, order number above the title. */
.se-ty__hero { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; }
.se-ty__tick { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--sec-teal-deep); border-radius: 50%; color: var(--sec-teal-deep); }
.se-ty__hero-copy { display: flex; flex-direction: column; gap: 2px; }
.se-ty__hero-copy > span { font-size: 14px; color: var(--sec-copy); }
/* Themes size h1 globally and with !important, which on the live site blew
   this up and pushed the confirmation card below the fold. Shouted back, and
   the margin too — a theme's heading margin was adding to the grid gap. */
html body .se-ty__hero-copy h1,
.se-ty__hero-copy h1 { margin: 0 !important; font-family: var(--sec-display); font-weight: 600 !important; letter-spacing: -.02em; font-size: clamp(28px, 3.2vw, 36px) !important; line-height: 1.1 !important; }

/* Confirmation card: head, optional notice strip, step list. */
.se-ty__card { border: 1px solid var(--sec-line-warm); border-radius: 4px; overflow: hidden; }
.se-ty__card-head { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--sec-line-warm); }
.se-ty__card-head h2 { font-size: 18px; font-weight: 800; }
.se-ty__card-head p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sec-copy); }
.se-ty__card-head p b { color: var(--sec-ink); word-break: break-all; }

.se-ty__proofnote { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 22px; border-bottom: 1px solid var(--sec-line-warm); background: var(--sec-teal-tint); font-size: 14px; line-height: 1.55; }
.se-ty__proofnote svg { margin-top: 1px; color: var(--sec-teal-deep); }
.se-ty__proofnote b { font-weight: 800; }
.se-ty__proofnote span span { color: var(--sec-copy); }

/* `.se-ty ol` above zeroes padding and outranks a single class, so the step
   list states its own padding at matching specificity. */
.se-ty ol.se-ty__steps { padding: 22px; display: flex; flex-direction: column; }
.se-ty__step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.se-ty__step-rail { display: flex; flex-direction: column; align-items: center; }
.se-ty__step-mark { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: #fff; color: var(--sec-copy); font-size: 12px; font-weight: 800; }
.se-ty__step.is-done .se-ty__step-mark { background: var(--sec-teal-deep); color: #fff; }
.se-ty__step.is-now .se-ty__step-mark { background: var(--sec-brand); color: #fff; }
.se-ty__step.is-next .se-ty__step-mark { border: 1.5px solid var(--sec-input); background: #fff; color: var(--sec-copy); }
.se-ty__step-line { flex: 1; width: 2px; min-height: 18px; background: var(--sec-line-warm); }
.se-ty__step.is-done .se-ty__step-line { background: var(--sec-teal-deep); }
.se-ty__step.is-last .se-ty__step-line { display: none; }
.se-ty__step-body { display: flex; flex-direction: column; gap: 3px; padding: 3px 0 20px; }
.se-ty__step.is-last .se-ty__step-body { padding-bottom: 0; }
.se-ty__step-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.se-ty__step-top b { font-size: 15px; font-weight: 700; }
.se-ty__step-top span { font-size: 13px; font-weight: 700; color: var(--sec-copy); }
.se-ty__step.is-done .se-ty__step-top span { color: var(--sec-teal-deep); }
.se-ty__step.is-now .se-ty__step-top span { color: var(--sec-ink); }
.se-ty__step-desc { font-size: 14px; line-height: 1.55; color: var(--sec-copy); }

/* Order details: auto-fit 200px columns inside one bordered card. */
/* The card is a two-column list of short facts. 22px between rows and 6px
   inside each one put more air between a label and its own value than
   between unrelated pairs, which is what made it read as loose. */
.se-ty__details { padding: 20px 22px; border: 1px solid var(--sec-line-warm); border-radius: 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 28px; }
.se-ty__details h2 { grid-column: 1 / -1; margin: 0 0 2px !important; font-size: 18px; font-weight: 800; }
.se-ty__detail { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.55; }
.se-ty__detail > span { margin: 0 !important; }
.se-ty__detail > span:first-child { font-weight: 800; }
.se-ty__detail > span:last-child { color: var(--sec-copy); word-break: break-word; }
.se-ty__detail address { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-style: normal; line-height: inherit; color: inherit; }

.se-ty__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--sec-copy); }
.se-ty__foot a { font-weight: 700; }
.se-ty__foot-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.se-ty a.se-ty__btn { color: #fff !important; }
.se-ty a.se-ty__btn--ghost { color: var(--sec-ink) !important; }
.se-ty__btn { min-height: 50px; padding: 0 22px; display: flex; align-items: center; border-radius: 4px; background: var(--sec-brand); color: #fff !important; font-size: 14px; font-weight: 800; text-decoration: none; }
.se-ty__btn:hover { background: #000; color: #fff !important; }
.se-ty__btn--ghost { padding: 0 20px; border: 1px solid var(--sec-input); background: #fff; color: var(--sec-ink) !important; }
.se-ty__btn--ghost:hover { background: #fff; color: var(--sec-ink) !important; }

/* Summary rail. */
.se-ty__aside { background: var(--sec-sand); border-left: 1px solid var(--sec-line-warm); }
.se-ty__aside-inner { width: 100%; max-width: 500px; padding: 44px 24px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; }
body.admin-bar .se-ty__aside-inner { top: 32px; }
/* The spec list belongs to the line above it, so it sits closer to its own
   title than the next product does. */
.se-ty__line { display: flex; flex-direction: column; gap: 8px; }
.se-ty__line-top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
/* The frame clips the photo. Without this the image keeps its square
   corners and pokes out past the rounded border — and a theme that sets its
   own img width wins inside the box, not outside it. */
.se-ty__line-img { position: relative; box-sizing: border-box; flex: none; width: 64px; height: 64px; padding: 3px; border: 1px solid #dedbd4; border-radius: 6px; background: #fff; overflow: hidden; }
/* The thumbnail opens the full product image. It is a button, so it says so
   on hover and answers the keyboard. */
.se-ty__line-img--open { padding: 0; cursor: pointer; }
.se-ty__line-img--open:hover { border-color: var(--sec-ink); }
.se-ty__line-img--open:focus-visible { outline: 2px solid var(--sec-ink); outline-offset: 2px; }
.se-ty__line-zoom { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--sec-ink); color: #fff; }
.se-ty__line-copy .se-preview-open { margin-top: 4px; align-self: flex-start; }
.se-ty__line-img img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 0; object-fit: contain; }
.se-ty__line-badge { position: absolute; top: 2px; right: 2px; min-width: 22px; height: 22px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--sec-copy); color: #fff; font-size: 11px; font-weight: 800; }
.se-ty__line-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.se-ty__line-copy b { font-size: 14px; font-weight: 700; line-height: 1.35; }
.se-ty__line-copy span { font-size: 13px; line-height: 1.5; color: var(--sec-copy); }
.se-ty__line-total { font-size: 14px; font-weight: 700; white-space: nowrap; }
.se-ty__line-props { margin: 0 0 0 78px !important; padding: 0 !important; display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 13px; }
.se-ty__line-props dt { color: var(--sec-copy); }
.se-ty__line-props dd { margin: 0; font-weight: 700; text-align: right; }

.se-ty__sums { padding-top: 16px; border-top: 1px solid #dedbd4; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.se-ty__sums > div { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 14px; align-items: start; }
.se-ty__sums > div > span:first-child { text-wrap: pretty; }
.se-ty__sums > div > span:last-child { min-width: 0; font-weight: 700; text-align: right; text-wrap: pretty; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.se-ty__sums-total { align-items: baseline !important; margin-top: 4px; padding-top: 14px; border-top: 1px solid #dedbd4; }
.se-ty__sums-total b { font-size: 18px; font-weight: 700; }
.se-ty__sums-total > span { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.se-ty__sums-total strong { font-family: var(--sec-display); font-size: 28px; font-weight: 600; line-height: 1; }

.se-ty__print { align-self: flex-start; min-height: 40px; padding: 0; border: 0; background: none; color: var(--sec-ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Order notices land in this column; they keep the column's own geometry
   rather than the stock WooCommerce notice margins. */
.se-ty .se-proof-banner { margin: 0 !important; border-radius: 4px; }

@media (max-width: 920px) {
  .se-ty__main { justify-content: center; }
  .se-ty__main-inner { margin: 0 auto; }
  /* The rail becomes a drawer under its toggle, as on the checkout. */
  .se-ty__grid { display: flex; flex-direction: column; }
  .se-ty__sum-toggle { display: flex; }
  .se-ty__aside {
    order: -1;
    display: none;
    border-left: 0;
    border-bottom: 1px solid var(--sec-line-warm);
    border-top: 0;
  }
  .se-ty__aside.is-open { display: flex; }
  .se-ty__aside-inner { max-width: 600px; margin: 0 auto; padding: 24px; position: static; }
}

@media print {
  /* A printed confirmation is a record: it carries the items, the per-item
     specs and the totals whether or not the summary was open on screen, and
     it stacks into one column so nothing is cropped at the page edge. */
  .se-ty [data-noprint] { display: none !important; }
  .se-ty, .se-ty__grid { display: block !important; }
  .se-ty__main, .se-ty__main-inner { display: block !important; max-width: none !important; padding: 0 !important; }
  .se-ty__aside {
    display: block !important;
    max-width: none !important;
    border-left: 0;
    border-top: 1px solid var(--sec-line-warm);
    background: transparent !important;
  }
  .se-ty__aside-inner { max-width: none !important; padding: 16px 0 0 !important; position: static; }
  .se-ty__line, .se-ty__card, .se-ty__details, .se-ty__sums { break-inside: avoid; page-break-inside: avoid; }
  .se-ty__line-props { display: grid !important; }
  .se-ty__sum-toggle { display: none !important; }
  /* Salient paints its own chrome; the record should not carry it. */
  #header-outer, #header-space, #footer-outer, .nectar-social { display: none !important; }
}

/* ---- billing address, only when it differs ------------------------------ */

/* The tick-box is a real control here, not the visually-hidden label the
   rest of the form uses, so it has to opt back out of `.se-co__check`'s
   clipping. */
.se-checkout .se-co__billing-same {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 4px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--sec-copy);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.se-checkout .se-co__billing-same input[type='checkbox'] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--sec-teal);
}


/* ---- upstairs delivery ------------------------------------------------- */

/* One line, switch on the right. It is a yes/no question with a price on
   one side, which a pair of buttons gave the weight of a whole section. */
.se-checkout .se-co__upstairs-row {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--sec-input);
  border-radius: 4px;
  background: #fff;
}

.se-checkout .se-co__upstairs-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; cursor: pointer; }

.se-checkout .se-co__upstairs-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--sec-ink);
  font-size: 14px;
  font-weight: 700;
}

.se-checkout .se-co__upstairs-title b { color: var(--sec-brand); font-weight: 700; }
.se-checkout .se-co__upstairs-title .amount { color: inherit; }

.se-checkout .se-co__upstairs-note { color: var(--sec-copy); font-size: 12.5px; line-height: 1.45; }

.se-checkout .se-co__switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.se-checkout .se-co__switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.se-checkout .se-co__switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d4d6db;
  transition: background .15s ease;
}
.se-checkout .se-co__switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .15s ease;
}
.se-checkout .se-co__switch input:checked ~ .se-co__switch-track { background: var(--sec-brand); }
.se-checkout .se-co__switch input:checked ~ .se-co__switch-track::after { transform: translateX(20px); }
.se-checkout .se-co__switch input:focus-visible ~ .se-co__switch-track { outline: 2px solid var(--sec-brand); outline-offset: 2px; }

/* ---- the seconds acknowledgement --------------------------------------- */

/* Set like the terms line directly below it: same size, same rhythm, no box.
   It keeps the shop's red because it is the one thing about these goods a
   customer must not be able to say they were never told. */
.se-checkout #payment .se-co__ack,
.se-checkout .se-co__ack {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.se-checkout .se-co__ack input[type='checkbox'] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--sec-brand-alt);
  opacity: 1;
  cursor: default;
}

.se-checkout #payment .se-co__ack label,
.se-checkout .se-co__ack label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  color: var(--sec-brand-alt);
  font-size: 13px !important;
  /* Salient sets a 2.0 line-height on form labels, which left the three
     wrapped lines floating apart from each other and from the terms line
     above. Matched to the terms line instead. */
  line-height: 1.5 !important;
  text-wrap: pretty;
  cursor: default;
}

/* ---- the gateway's own note on the confirmation ------------------------ */

/* Cash on delivery, bank transfer details, a cheque address: whatever the
   gateway prints after the order. Boxed and set at body size so it reads as
   part of the confirmation rather than a stray line under the page. */
.se-ty__gateway-note {
  padding: 16px 18px;
  border: 1px solid var(--sec-line-warm);
  border-radius: 4px;
  background: var(--sec-sand);
  color: var(--sec-copy);
  font-size: 14px;
  line-height: 1.6;
}

.se-ty__gateway-note > :first-child { margin-top: 0; }
.se-ty__gateway-note > :last-child { margin-bottom: 0; }
.se-ty__gateway-note h2,
.se-ty__gateway-note h3 { margin: 0 0 6px; color: var(--sec-ink); font-size: 15px; font-weight: 800; }
.se-ty__gateway-note p { margin: 0 0 8px; }
.se-ty__gateway-note a { color: var(--sec-brand) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Core's own "order received" paragraph is said better by the hero above it. */
.se-ty .woocommerce-thankyou-order-received { display: none; }