/* WanderHeat ember theme layer for the order and contact pages.
   Loaded LAST, after the order component stylesheets. Re-skins only —
   never redefines layout, spacing or anything the order logic depends on.

   Rules of this file
   - Consumes the tokens from wanderheat.css (:root) — never redefines them.
   - Touches colour, surface, border, shadow, filter and typography only.
     No display / position / width / flex / grid / padding / margin.
   - Every selector is prefixed with `.js-body` (the <body> class from
     header.php). contact.php carries an inline <style> that loads AFTER
     this file, and bg-courier-methods.js injects its own <style> into
     <head> at runtime; the extra class wins those ties without !important.
   - `border-color` is used instead of the `border` shorthand so the
     component files keep their own border widths (they differ per
     breakpoint and the card layout depends on them).
   ----------------------------------------------------------------------- */

/* =====================================================================
   1. PAGE GROUND
   (embed mode sets `background: none !important` on the same element —
    that is intended: the iframe parent shows through)
   ===================================================================== */
.js-body .site[data-page="order"] .main-content.main-content {
  color: var(--text);
  background:
    radial-gradient(60% 40% at 8% 0%, rgba(242, 103, 45, .16), transparent 70%),
    radial-gradient(40% 30% at 100% 100%, rgba(248, 172, 50, .07), transparent 70%),
    var(--bg);
}
.js-body .site[data-page="contact"] .main-content.main-content {
  color: var(--text);
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(242, 103, 45, .16), transparent 70%),
    radial-gradient(40% 30% at 90% 20%, rgba(248, 172, 50, .08), transparent 70%),
    var(--bg);
}

/* =====================================================================
   2. RIGHT COLUMN — summary panel + form panel
   ===================================================================== */
.js-body .site[data-page="order"] .order-details,
.js-body .site[data-page="order"] .order-form-wrapper {
  color: var(--text);
  border-color: var(--line-strong);
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(246, 239, 230, .05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* panel headers ("Order summary", "Shipping address") */
.js-body .site[data-page="order"] .order-header,
.js-body .site[data-page="order"] .order-details header.order-header {
  color: var(--text);
  background: linear-gradient(135deg, rgba(248, 172, 50, .16) 0%, rgba(242, 103, 45, .06) 100%);
  border-bottom-color: var(--line);
  font-weight: 800;
  letter-spacing: .01em;
}
.js-body .site[data-page="order"] .order-header::before { background-color: var(--amber); }
.js-body .site[data-page="order"] .order-header .icon-basket,
.js-body .site[data-page="order"] .order-header .icon-truck { color: var(--amber); }

/* cart line */
.js-body .site[data-page="order"] .order-layout .order-summary {
  color: var(--text);
  border-color: var(--line);
  background: rgba(18, 16, 15, .5);
  box-shadow: none;
}
.js-body .site[data-page="order"] .order-layout .order-summary-item { color: var(--text); }
.js-body .site[data-page="order"] .remove-item-btn {
  background: linear-gradient(135deg, var(--ember), var(--red));
  box-shadow: 0 8px 18px -6px var(--glow);
}
.js-body .site[data-page="order"] .remove-item-btn::before,
.js-body .site[data-page="order"] .remove-item-btn::after { background-color: #fff; }

/* shipping / total rows */
.js-body .site[data-page="order"] .order-details-list { border-top-color: var(--line); }
.js-body .site[data-page="order"] .order-details-item {
  color: var(--text-2);
  border-bottom-color: var(--line);
}
.js-body .site[data-page="order"] #total-row.order-details-item { color: var(--text); }
.js-body .site[data-page="order"] #total-row .total-price { color: var(--amber); }
.js-body .site[data-page="order"] .order-layout .red-text { color: var(--amber); }

/* delivery-option tabs (only rendered when a channel has several) */
.js-body .site[data-page="order"] .order-tabs-link {
  color: var(--text-2);
  background-color: var(--bg-3);
}
.js-body.non-touch .site[data-page="order"] .order-tabs-link:hover,
.js-body .site[data-page="order"] .order-tabs-link.selected {
  color: var(--on-ember);
  background-color: var(--amber);
}

/* shipping-info / payment accordions */
.js-body .site[data-page="order"] .order-accordion {
  border-color: var(--line);
  background: rgba(18, 16, 15, .4);
}
.js-body .site[data-page="order"] .order-accordion-link {
  color: var(--text);
  background: rgba(246, 239, 230, .04);
}
.js-body .site[data-page="order"] .order-accordion-link::before {
  border-right-color: var(--amber);
  border-bottom-color: var(--amber);
  border-left-color: var(--amber);
}
.js-body .site[data-page="order"] .order-accordion-content {
  color: var(--text-2);
  border-top-color: var(--line);
  background: transparent;
}
.js-body .site[data-page="order"] .order-accordion-content strong,
.js-body .site[data-page="order"] .order-accordion-content b { color: var(--text); }
/* translation strings carry hard-coded inline colours (e.g. a navy
   <strong style="color:#1e417a">) — unreadable on the dark card; an inline
   style can only be beaten with !important */
.js-body .site[data-page="order"] .order-accordion-content [style*="color"] { color: var(--amber) !important; }

/* =====================================================================
   3. FORM FIELDS (shared by order + contact)
   ===================================================================== */
.js-body .site[data-page="order"] .order-input,
.js-body .site[data-page="order"] .order-textarea,
.js-body .site[data-page="contact"] .order-input,
.js-body .site[data-page="contact"] .order-textarea {
  font-family: inherit;               /* dist forces 'roboto' — keep Cyrillic/Greek coverage */
  color: var(--bg);
  caret-color: var(--ember);
  border-color: var(--line-strong);
  background: #fff5ce;
  box-shadow: inset 0 1px 2px rgba(18, 16, 15, .08);
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.js-body .site[data-page="order"] .order-input::placeholder,
.js-body .site[data-page="order"] .order-textarea::placeholder,
.js-body .site[data-page="contact"] .order-input::placeholder,
.js-body .site[data-page="contact"] .order-textarea::placeholder {
  color: rgba(18, 16, 15, .5);
  opacity: 1;
}
.js-body .site[data-page="order"] .order-input:focus,
.js-body .site[data-page="order"] .order-textarea:focus,
.js-body .site[data-page="contact"] .order-input:focus,
.js-body .site[data-page="contact"] .order-textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: #fff5ce;
  box-shadow: 0 0 0 4px rgba(248, 172, 50, .28);
}
.js-body .site[data-page="order"] .order-input:disabled,
.js-body .site[data-page="order"] .order-textarea:disabled,
.js-body .site[data-page="contact"] .order-input:disabled,
.js-body .site[data-page="contact"] .order-textarea:disabled {
  color: rgba(18, 16, 15, .45);
  background: #ece3c0;
  border-color: var(--line);
}

/* native <select> popup */
.js-body .site[data-page="order"] select.order-input option,
.js-body .site[data-page="contact"] select.order-input option {
  color: var(--bg);
  background: #fff5ce;
}

/* Chrome autofill would otherwise paint the field pale yellow */
.js-body .site .order-input:-webkit-autofill,
.js-body .site .order-input:-webkit-autofill:hover,
.js-body .site .order-input:-webkit-autofill:focus,
.js-body .site .order-textarea:-webkit-autofill,
.js-body .site .order-textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff5ce inset;
  -webkit-text-fill-color: var(--bg);
  caret-color: var(--ember);
  border-color: var(--line-strong);
  transition: background-color 9999s ease-out;
}
.js-body .site .order-input:autofill,
.js-body .site .order-textarea:autofill {
  box-shadow: 0 0 0 1000px #fff5ce inset;
  -webkit-text-fill-color: var(--bg);
}

/* select chevron — the original sel-arrow.svg asset does not exist, draw it */
.js-body .site[data-page="order"] .order-select::before {
  background: var(--ember);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 1;
  pointer-events: none;
}

/* --- validation: red must stay clearly distinct from the amber focus ring --- */
.js-body .site[data-page="order"] .field.invalid .order-input,
.js-body .site[data-page="order"] .field.invalid .order-textarea,
.js-body .site[data-page="order"] .field.invalid .order-select select,
.js-body .site[data-page="order"] .field.invalid .select2-selection--single,
.js-body .site[data-page="order"] form .invalid input.order-input,
.js-body .site[data-page="order"] form .invalid textarea.order-textarea,
.js-body .site[data-page="contact"] .field.invalid .order-input,
.js-body .site[data-page="contact"] .field.invalid .order-textarea,
.js-body .site[data-page="contact"] form .invalid input.order-input,
.js-body .site[data-page="contact"] form .invalid textarea.order-textarea {
  color: #8A1216;
  border-color: var(--red);
  background: #FFE4DC;
  box-shadow: 0 0 0 4px rgba(236, 34, 39, .18);
}
.js-body .site[data-page="order"] .field.invalid .order-input:focus,
.js-body .site[data-page="order"] .field.invalid .order-textarea:focus,
.js-body .site[data-page="contact"] .field.invalid .order-input:focus,
.js-body .site[data-page="contact"] .field.invalid .order-textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(236, 34, 39, .3);
}
.js-body .site[data-page="order"] form .invalid span,
.js-body .site[data-page="contact"] form .invalid span { color: #FFB4B4; }
.js-body .site[data-page="order"] form label.labelError,
.js-body .site[data-page="contact"] form label.labelError {
  color: #FFB4B4;
  background: rgba(236, 34, 39, .16);
  border: 1px solid rgba(236, 34, 39, .35);
}

/* --- consent checkbox + legal links --- */
.js-body .site[data-page="order"] .order-form-wrapper .check-radio,
.js-body .site[data-page="order"] .order-form-wrapper .check-radio-element,
.js-body .site[data-page="contact"] .check-radio,
.js-body .site[data-page="contact"] .check-radio-element { color: var(--text-2); }
.js-body .site[data-page="order"] .order-form-wrapper .check-radio-input,
.js-body .site[data-page="contact"] .check-radio-input {
  accent-color: var(--ember);
  color-scheme: dark;
}
/* fallback drawn checkbox (only shows where the native one is hidden) */
.js-body .site .check-radio-element::before {
  background-color: rgba(18, 16, 15, .6);
  border-color: var(--line-strong);
}
.js-body .site .check-radio-input[type="checkbox"]:checked ~ .check-radio-element::before {
  background-color: var(--ember);
  border-color: var(--ember);
}
.js-body .site[data-page="order"] .order-form-wrapper a[href*="terms.php"],
.js-body .site[data-page="order"] .order-form-wrapper a[href*="privacy.php"],
.js-body .site[data-page="order"] .order-form-wrapper .check-radio-element a,
.js-body .site[data-page="contact"] .check-radio-element a {
  color: var(--amber);
  text-decoration: none;
}
.js-body.non-touch .site[data-page="order"] .order-form-wrapper a[href*="terms.php"]:hover,
.js-body.non-touch .site[data-page="order"] .order-form-wrapper a[href*="privacy.php"]:hover,
.js-body.non-touch .site[data-page="order"] .order-form-wrapper .check-radio-element a:hover,
.js-body.non-touch .site[data-page="contact"] .check-radio-element a:hover {
  color: var(--text);
  text-decoration: underline;
}
.js-body .site[data-page="order"] .order-form-wrapper .check-radio.invalid .check-radio-input,
.js-body .site[data-page="contact"] .check-radio.invalid .check-radio-input {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(236, 34, 39, .18);
}
.js-body .site[data-page="order"] .order-form-wrapper .check-radio.invalid .check-radio-element,
.js-body .site[data-page="order"] .order-form-wrapper .check-radio.invalid .check-radio-element a,
.js-body .site[data-page="contact"] .check-radio.invalid .check-radio-element,
.js-body .site[data-page="contact"] .check-radio.invalid .check-radio-element a,
.js-body .site form .invalid label.check-radio-element { color: #FFB4B4; }

/* --- submit / finish order — the most important button on the site --- */
.js-body .site[data-page="order"] .submit-btn,
.js-body .site[data-page="contact"] .submit-btn {
  color: var(--on-ember);
  background-image: linear-gradient(120deg, #F8AC32 0%, #F2672D 45%, #EC2227 100%);
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: 0 0 34px -8px var(--glow), var(--shadow-cta);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform var(--t), box-shadow var(--t), background-position .5s var(--ease);
}
.js-body.non-touch .site[data-page="order"] .submit-btn:hover,
.js-body.non-touch .site[data-page="contact"] .submit-btn:hover {
  background-image: linear-gradient(120deg, #F8AC32 0%, #F2672D 45%, #EC2227 100%);
  background-position: 100% 50%;
  box-shadow: 0 0 48px -6px rgba(242, 103, 45, .6), var(--shadow-cta-hover);
  filter: none;
  transform: translateY(-2px);
}
.js-body .site .submit-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.js-body .site .submit-btn[disabled],
.js-body.non-touch .site .submit-btn[disabled]:hover {
  color: var(--muted);
  background-image: none;
  background-color: var(--bg-3);
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* =====================================================================
   4. PACKAGE CARDS (1x / 2x bundles)
   ===================================================================== */
.js-body .site[data-page="order"] .order-layout-updated .order-link {
  color: var(--text);
  border-color: var(--line-strong);
  background: linear-gradient(160deg, #221E1C 0%, #1A1716 100%);
  box-shadow: var(--shadow-md);
  filter: none;          /* dist greys the whole unselected card — kills the ember text */
  opacity: 1;
}
.js-body .site[data-page="order"] .order-layout-updated .order-link::after {
  box-shadow: inset 0 1px 0 rgba(246, 239, 230, .06);
}
.js-body.non-touch .site[data-page="order"] .order-layout-updated .order-item:hover .order-link {
  border-color: rgba(248, 172, 50, .45);
  box-shadow: var(--shadow-lg), 0 0 40px -18px var(--glow);
}
.js-body .site[data-page="order"] .order-layout-updated .order-item.selected .order-link,
.js-body.non-touch .site[data-page="order"] .order-layout-updated .order-item.selected:hover .order-link {
  border-color: var(--amber);
  background:
    radial-gradient(circle at 88% 8%, rgba(248, 172, 50, .18), transparent 40%),
    linear-gradient(160deg, #272220 0%, #1C1918 100%);
  box-shadow: var(--shadow-lg), 0 0 54px -14px var(--glow);
}

/* product shot: unselected sits a touch quieter, selected gets the ember lift */
.js-body .site[data-page="order"] .order-layout-updated .order-img > img {
  filter: saturate(.9) drop-shadow(0 18px 28px rgba(20, 8, 2, .6));
  transition: filter .3s var(--ease);
}
.js-body .site[data-page="order"] .order-layout-updated .order-item.selected .order-img > img,
.js-body.non-touch .site[data-page="order"] .order-layout-updated .order-item:hover .order-img > img {
  filter: saturate(1) drop-shadow(0 18px 28px rgba(20, 8, 2, .6)) drop-shadow(0 0 28px rgba(242, 103, 45, .22));
}

.js-body .site[data-page="order"] .order-layout-updated .order-link-text { color: var(--text); }
.js-body .site[data-page="order"] .order-layout-updated .order-link-text .purple-text { color: var(--amber); }
.js-body .site[data-page="order"] .order-layout-updated .package-coverage-text { color: var(--amber); }
.js-body .site[data-page="order"] .order-layout-updated .order-price .old,
.js-body .site[data-page="order"] .order-layout-updated .old-price {
  color: var(--muted);
  text-decoration-color: rgba(166, 156, 145, .8);
}
.js-body .site[data-page="order"] .order-layout-updated .order-price .new,
.js-body .site[data-page="order"] .order-layout-updated .new-price { color: var(--text); }
.js-body .site[data-page="order"] .order-layout-updated .save-badge {
  color: #fff;
  background: linear-gradient(135deg, var(--ember), var(--red));
  box-shadow: 0 10px 20px -8px var(--glow);
}
.js-body .site[data-page="order"] .order-layout-updated .price-per-pcs { color: var(--muted); }
.js-body .site[data-page="order"] .order-layout-updated .gratis,
.js-body .site[data-page="order"] .order-layout-updated .free_delivery_badge {
  color: var(--on-ember);
  background: var(--amber);
}
.js-body .site[data-page="order"] .order-layout-updated .fast_delivery_badge {
  color: var(--text);
  background: rgba(248, 172, 50, .16);
}

/* "select / selected" strip at the foot of the card */
.js-body .site[data-page="order"] .order-layout-updated .shop-btn {
  color: var(--muted);
  border-top-color: var(--line);
  background: transparent;
}
.js-body .site[data-page="order"] .order-layout-updated .shop-btn::before {
  color: currentColor;
  background: transparent;
  border-color: currentColor;
}
.js-body.non-touch .site[data-page="order"] .order-layout-updated .order-item:hover:not(.selected) .shop-btn {
  color: var(--amber);
  border-top-color: var(--line);
}
.js-body.non-touch .site[data-page="order"] .order-layout-updated .order-item:hover:not(.selected) .shop-btn::before {
  color: var(--amber);
  background: transparent;
  border-color: var(--amber);
}
.js-body .site[data-page="order"] .order-layout-updated .order-item.selected .shop-btn,
.js-body.non-touch .site[data-page="order"] .order-layout-updated .order-item.selected:hover .shop-btn {
  color: var(--on-ember);
  background: var(--grad);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .35);
}
.js-body .site[data-page="order"] .order-layout-updated .order-item.selected .shop-btn::before,
.js-body.non-touch .site[data-page="order"] .order-layout-updated .order-item.selected:hover .shop-btn::before {
  color: var(--amber);
  background: var(--on-ember);
  border-color: var(--on-ember);
}

/* =====================================================================
   5. ACCESSORY UPSELL CARDS
   ===================================================================== */
.js-body .site[data-page="order"] .acc-layout .acc-header {
  color: var(--text);
  border-color: rgba(248, 172, 50, .3);
  background: linear-gradient(135deg, rgba(248, 172, 50, .16) 0%, rgba(242, 103, 45, .06) 100%);
  box-shadow: none;
}
.js-body .site[data-page="order"] .acc-layout .acc-header::before { background-color: var(--amber); }

.js-body .site[data-page="order"] .acc-layout .acc-item-content {
  border-color: var(--line-strong);
  background: linear-gradient(160deg, #221E1C 0%, #1A1716 100%);
  box-shadow: var(--shadow-md);
}
.js-body.non-touch .site[data-page="order"] .acc-layout .acc-item-content:hover {
  border-color: rgba(248, 172, 50, .45);
  box-shadow: var(--shadow-lg), 0 0 40px -18px var(--glow);
}
.js-body .site[data-page="order"] .acc-layout .acc-item.selected .acc-item-content {
  border-color: rgba(248, 172, 50, .55);
  box-shadow: var(--shadow-md), 0 0 36px -16px var(--glow);
}
/* the component paints every cell white — clear that, the card is the surface */
.js-body .site[data-page="order"] .acc-layout .acc-item-title,
.js-body .site[data-page="order"] .acc-layout .acc-item-text,
.js-body .site[data-page="order"] .acc-layout .acc-price { background: transparent; }
.js-body .site[data-page="order"] .acc-layout .acc-item-title { color: var(--text); }
.js-body .site[data-page="order"] .acc-layout .acc-item-text  { color: var(--muted); }
.js-body .site[data-page="order"] .acc-layout .acc-price      { color: var(--amber); }

/* accessory thumbnails are product shots on white — give them a soft
   cream plate instead of letting a hard white square float on the card */
.js-body .site[data-page="order"] .acc-layout .acc-img {
  background: linear-gradient(160deg, #FBF6EE 0%, #EFE6DA 100%);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(20, 8, 2, .08), 0 10px 24px -14px rgba(20, 8, 2, .7);
}
.js-body .site[data-page="order"] .acc-layout .acc-img > img {
  filter: drop-shadow(0 6px 10px rgba(20, 8, 2, .18));
  mix-blend-mode: multiply;   /* melts a white photo background into the plate */
}

/* add-to-cart: quiet outline by default, ember once it is in the cart */
.js-body .site[data-page="order"] .acc-layout .acc-btn {
  color: var(--text);
  background: rgba(246, 239, 230, .04);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color var(--t), background-color var(--t), box-shadow var(--t), transform var(--t);
}
.js-body.non-touch .site[data-page="order"] .acc-layout .acc-btn:hover {
  color: var(--amber);
  background: rgba(248, 172, 50, .08);
  box-shadow: inset 0 0 0 1px rgba(248, 172, 50, .55), 0 10px 30px -12px var(--glow);
  filter: none;
}
.js-body .site[data-page="order"] .acc-layout .acc-item.selected .acc-btn,
.js-body.non-touch .site[data-page="order"] .acc-layout .acc-item.selected .acc-btn:hover {
  color: var(--on-ember);
  background: var(--grad);
  box-shadow: 0 10px 24px -10px var(--glow), inset 0 1px 0 rgba(255, 236, 200, .35);
}

/* =====================================================================
   6. BULGARIAN COURIER PICKER + SELECT2 OFFICE SEARCH
   (bg-courier-methods.js appends its own <style> to <head> at runtime,
    after this file — every selector here is deliberately more specific)
   ===================================================================== */
.js-body .site[data-page="order"] .bg-courier-methods__title { color: var(--text); }
.js-body .site[data-page="order"] .bg-courier-methods__option {
  border-color: var(--line-strong);
  background: rgba(18, 16, 15, .5);
  transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}
.js-body .site[data-page="order"] .bg-courier-methods__option:hover {
  border-color: rgba(248, 172, 50, .45);
  background: rgba(248, 172, 50, .05);
}
.js-body .site[data-page="order"] .bg-courier-methods__option.is-selected {
  border-color: var(--amber);
  background: rgba(248, 172, 50, .07);
  box-shadow: 0 0 0 1px var(--amber), 0 0 30px -12px var(--glow);
}
.js-body .site[data-page="order"] .bg-courier-methods__check {
  color: var(--on-ember);
  background: var(--grad);
}
.js-body .site[data-page="order"] .bg-courier-methods__text { color: var(--text); }
/* courier logos are dark-on-white artwork: seat them on a small light plate */
.js-body .site[data-page="order"] .bg-courier-methods__logo {
  background: #FBF6EE;
  border-radius: 6px;
  box-shadow: 0 0 0 4px #FBF6EE;
}
.js-body .site[data-page="order"] .bg-courier-office__error { color: #FFB4B4; }

/* selection box */
.js-body .site[data-page="order"] .bg-courier-office .select2-container--default .select2-selection--single {
  border-color: var(--line-strong);
  border-radius: 12px;
  background: #fff5ce;
  transition: border-color var(--t), box-shadow var(--t);
}
.js-body .site[data-page="order"] .bg-courier-office .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--bg); }
.js-body .site[data-page="order"] .bg-courier-office .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(18, 16, 15, .5); }
.js-body .site[data-page="order"] .bg-courier-office .select2-container--default .select2-selection--single .select2-selection__clear { color: rgba(18, 16, 15, .5); }
.js-body .site[data-page="order"] .bg-courier-office .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--ember); }
.js-body .site[data-page="order"] .bg-courier-office .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--amber); }
.js-body .site[data-page="order"] .bg-courier-office .select2-container--default.select2-container--focus .select2-selection--single,
.js-body .site[data-page="order"] .bg-courier-office .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(248, 172, 50, .18);
}
.js-body .site[data-page="order"] .bg-courier-office.invalid .select2-container--default .select2-selection--single {
  box-shadow: 0 0 0 4px rgba(236, 34, 39, .18);
}

/* dropdown panel (dropdownParent is the .bg-courier-office wrapper, but the
   unscoped rules also cover a body-appended dropdown) */
.js-body .select2-container .select2-dropdown,
.js-body .site[data-page="order"] .bg-courier-office .select2-dropdown {
  color: var(--bg);
  border-color: var(--line-strong);
  border-radius: 12px;
  background: #fff5ce;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.js-body .select2-container .select2-search--dropdown .select2-search__field,
.js-body .site[data-page="order"] .bg-courier-office .select2-search__field {
  font-family: inherit;
  color: var(--bg);
  caret-color: var(--ember);
  border-color: rgba(18, 16, 15, .2);
  border-radius: 8px;
  background: #fffbea;
  outline: none;
}
.js-body .select2-container .select2-search--dropdown .select2-search__field:focus,
.js-body .site[data-page="order"] .bg-courier-office .select2-search__field:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(248, 172, 50, .18);
}
.js-body .select2-container .select2-search--dropdown .select2-search__field::placeholder { color: rgba(18, 16, 15, .5); }
.js-body .select2-container .select2-results__option,
.js-body .site[data-page="order"] .bg-courier-office .select2-results__option { color: var(--bg); }
.js-body .select2-container .select2-results__option .bg-courier-office-option__meta,
.js-body .site[data-page="order"] .bg-courier-office .select2-results__option .bg-courier-office-option__meta { color: rgba(18, 16, 15, .6); }
.js-body .select2-container .select2-results__option[aria-selected="true"],
.js-body .site[data-page="order"] .bg-courier-office .select2-results__option[aria-selected="true"] { background: rgba(18, 16, 15, .06); }
.js-body .select2-container .select2-results__option--highlighted[aria-selected],
.js-body .select2-container .select2-results__option--highlighted[aria-selected] .bg-courier-office-option,
.js-body .select2-container .select2-results__option--highlighted[aria-selected] .bg-courier-office-option__name,
.js-body .select2-container .select2-results__option--highlighted[aria-selected] .bg-courier-office-option__meta,
.js-body .site[data-page="order"] .bg-courier-office .select2-results__option--highlighted[aria-selected],
.js-body .site[data-page="order"] .bg-courier-office .select2-results__option--highlighted[aria-selected] .bg-courier-office-option,
.js-body .site[data-page="order"] .bg-courier-office .select2-results__option--highlighted[aria-selected] .bg-courier-office-option__name,
.js-body .site[data-page="order"] .bg-courier-office .select2-results__option--highlighted[aria-selected] .bg-courier-office-option__meta {
  color: var(--bg);
  background: rgba(248, 172, 50, .35);
}
.js-body .select2-container .select2-results__option[aria-disabled="true"],
.js-body .select2-container .select2-results__message { color: rgba(18, 16, 15, .5); }
.js-body .select2-container--default .select2-results > .select2-results__options { scrollbar-color: var(--line-strong) transparent; }
/* the script recolours these to near-black while the field is invalid — keep them readable */
.js-body .site[data-page="order"] .bg-courier-office.invalid .select2-dropdown,
.js-body .site[data-page="order"] .bg-courier-office.invalid .select2-results__option,
.js-body .site[data-page="order"] .bg-courier-office.invalid .bg-courier-office-option,
.js-body .site[data-page="order"] .bg-courier-office.invalid .bg-courier-office-option__name,
.js-body .site[data-page="order"] .bg-courier-office.invalid .select2-search__field { color: var(--text); }
.js-body .site[data-page="order"] .bg-courier-office.invalid .bg-courier-office-option__meta { color: var(--muted); }

/* =====================================================================
   7. EMBED MODE (order.php?embed=1 — header/footer hidden, page ground
      transparent so the host page shows through; the card carries the dark)
   ===================================================================== */
.js-body .site[data-page="order"] .embed-wrap {
  color: var(--text);
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line-strong);
}
.js-body .site[data-page="order"] .embed-choose-label { color: var(--text); }
.js-body .site[data-page="order"] .embed-hero img {
  filter: drop-shadow(0 24px 34px rgba(20, 8, 2, .6)) drop-shadow(0 0 36px rgba(242, 103, 45, .2));
}
.js-body .site[data-page="order"] .embed-package-grid .order-link {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(18, 16, 15, .45);
  transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}
.js-body .site[data-page="order"] .embed-package-grid .order-item:hover .order-link,
.js-body .site[data-page="order"] .embed-package-grid .order-item.best-seller-item .order-link {
  border-color: rgba(248, 172, 50, .45);
}
.js-body .site[data-page="order"] .embed-package-grid .order-item.selected .order-link {
  border-color: var(--amber);
  background: rgba(248, 172, 50, .07);
  box-shadow: 0 0 34px -14px var(--glow);
}
.js-body .site[data-page="order"] .embed-best-badge {
  color: var(--on-ember);
  background: var(--grad);
}
.js-body .site[data-page="order"] .embed-radio-dot { border-color: var(--line-strong); }
.js-body .site[data-page="order"] .embed-radio-dot::after { background: var(--amber); }
.js-body .site[data-page="order"] .embed-package-grid .order-item.selected .embed-radio-dot { border-color: var(--amber); }
.js-body .site[data-page="order"] .embed-package-name { color: var(--text); }
.js-body .site[data-page="order"] .embed-old-price { color: var(--muted); }
.js-body .site[data-page="order"] .embed-new-price { color: var(--amber); }
.js-body .site[data-page="order"] .embed-perpcs { color: var(--muted); }
.js-body .site[data-page="order"] .embed-save {
  color: var(--amber);
  background: rgba(248, 172, 50, .12);
}
.js-body .site[data-page="order"] .embed-accordions .order-accordion {
  border-color: var(--line);
  background: rgba(18, 16, 15, .4);
}
.js-body .site[data-page="order"] .embed-accordions .order-accordion-link { color: var(--text); }
.js-body .site[data-page="order"] .embed-accordions .order-accordion-link .embed-acc-icon { color: var(--amber); }
.js-body .site[data-page="order"] .embed-accordions .order-accordion-content { color: var(--text-2); }

/* =====================================================================
   8. CONTACT PAGE
   ===================================================================== */
.js-body .site[data-page="contact"] .main-title {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.02em;
}
.js-body .site[data-page="contact"] .order-layout-left {
  border: 1px solid var(--line);
  background:
    radial-gradient(closest-side at 50% 58%, rgba(242, 103, 45, .30), rgba(248, 172, 50, .06) 60%, transparent 100%),
    linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
  box-shadow: var(--shadow-md);
}
.js-body .site[data-page="contact"] .order-layout-left img {
  filter: drop-shadow(0 30px 40px rgba(20, 8, 2, .65)) drop-shadow(0 0 40px rgba(242, 103, 45, .18));
}
.js-body .site[data-page="contact"] .contact-form {
  color: var(--text);
  border-color: var(--line-strong);
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(246, 239, 230, .05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.js-body .site[data-page="contact"] .contact-form .order-text {
  color: var(--text-2);
  background: linear-gradient(135deg, rgba(248, 172, 50, .16) 0%, rgba(242, 103, 45, .06) 100%);
  border-bottom: 1px solid var(--line);
}
.js-body .site[data-page="contact"] .contact-form .order-text h2 { color: var(--text); }
.js-body .site[data-page="contact"] .contact-form .order-text strong { color: var(--amber); }
.js-body .site[data-page="contact"] .contact-form .order-text p { color: var(--muted); }
.js-body .site[data-page="contact"] #form-messages {
  color: #8FE3BE;
  background: rgba(52, 178, 122, .16);
  border: 1px solid rgba(52, 178, 122, .4);
}
.js-body .site[data-page="contact"] #turnstile-error { color: #FFB4B4 !important; } /* inline style="color:red" on the element */


/* =====================================================================
   MOBILE PACKAGE CARDS  —  horizontal layout
   -----------------------------------------------------------------
   NOTE: this is the one place this file touches layout. Everything above
   is colour-only by design. It lives here because this stylesheet loads
   last on order.php, after order-form-dist.css and the inline block in
   includes/order-section-udpated.php, so it can restructure the card
   without editing a dist build.

   The stacked card was ~257px tall each with a 148x96 image. This turns
   each package into a full-width row: image left, everything else right.
   Scoped to .order-layout-updated, so the embedded order form used by the
   advertorials and landing pages (which has its own card design and hides
   .order-img) is untouched.

   Currency-proofing: prices are rendered per market and HUF runs long
   ("199 900 Ft"), so the price column may shrink, type scales with the
   viewport, and every text cell may wrap rather than overflow.
   ===================================================================== */
@media (max-width: 899px) {

  .js-body .site[data-page="order"] .order-layout-updated .order-link {
    grid-template-columns: minmax(130px, 42%) minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: min-content;
    gap: 2px 14px;
    align-items: start;
    align-content: center;
    padding: 12px 14px;
  }

  /* image spans every row except the last, where the select control sits */
  /* order-form-dist.css positions the package image ABSOLUTELY and centres it with a
     transform, inside a figure whose height is set per breakpoint (96px here). That is
     why the image escaped its box and collided with the rows beneath it. Put the image
     back into normal flow inside a fixed-ratio slot: object-fit:contain guarantees no
     package shot is ever cropped, and every card gets an identical image box whatever
     the aspect of the individual shot. */
  .js-body .site[data-page="order"] .order-layout-updated .order-img {
    grid-column: 1;
    /* -2 cannot resolve without explicit rows; span past every possible text row
       instead. Surplus rows are min-content and collapse to zero height, so the
       image ends up exactly as tall as the text column and the select control
       still auto-places on the first free full-width row beneath. */
    grid-row: 1 / 8;
    align-self: center;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: none;
    margin: 0;
    overflow: visible;
  }
  .js-body .site[data-page="order"] .order-layout-updated .order-img > img {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0;
  }

  /* everything textual moves into the right-hand column */
  .js-body .site[data-page="order"] .order-layout-updated .order-link-text,
  .js-body .site[data-page="order"] .order-layout-updated .package-coverage-text,
  .js-body .site[data-page="order"] .order-layout-updated .price-delivery-row,
  .js-body .site[data-page="order"] .order-layout-updated .price-per-pcs,
  .js-body .site[data-page="order"] .order-layout-updated .save-badge {
    grid-column: 2;
    min-width: 0;                 /* lets long HUF figures shrink instead of overflowing */
    overflow-wrap: anywhere;
  }

  /* the inherited centring suits a stacked card; in a row layout the text column
     reads far better flush-left, and long HUF figures grow predictably. */
  .js-body .site[data-page="order"] .order-layout-updated .order-link-text,
  .js-body .site[data-page="order"] .order-layout-updated .package-coverage-text,
  .js-body .site[data-page="order"] .order-layout-updated .price-delivery-row,
  .js-body .site[data-page="order"] .order-layout-updated .price-per-pcs,
  .js-body .site[data-page="order"] .order-layout-updated .save-badge {
    text-align: left;
    justify-content: flex-start;
  }

  .js-body .site[data-page="order"] .order-layout-updated .order-link-text {
    font-size: clamp(17px, 5vw, 21px);
    line-height: 1.15;
    margin: 0;
  }

  /* the coverage line is worth showing again now there is room beside the image */
  .js-body .site[data-page="order"] .order-layout-updated .package-coverage-text {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--muted);
  }

  .js-body .site[data-page="order"] .order-layout-updated .price-delivery-row { padding: 4px 0 0; margin-top: 0; }
  .js-body .site[data-page="order"] .order-layout-updated .order-price {
    align-items: flex-start;
    text-align: left;
  }
  .js-body .site[data-page="order"] .order-layout-updated .order-price .old,
  .js-body .site[data-page="order"] .order-layout-updated .order-price .new,
  .js-body .site[data-page="order"] .order-layout-updated .price-per-pcs span {
    width: auto;
    text-align: left;
  }

  .js-body .site[data-page="order"] .order-layout-updated .order-price .old {
    font-size: 13px;
    padding: 0;
  }
  .js-body .site[data-page="order"] .order-layout-updated .order-price .new {
    padding: 0;
    font-size: clamp(19px, 6vw, 26px);
    line-height: 1.1;
  }
  .js-body .site[data-page="order"] .order-layout-updated .price-per-pcs {
    padding: 2px 0 0;
    font-size: 12.5px;
  }

  .js-body .site[data-page="order"] .order-layout-updated .save-badge {
    margin: 6px 0 0;
    justify-self: start;
    white-space: normal;          /* a long HUF saving must wrap, not clip */
    line-height: 1.25;
  }

  /* select control spans the full card width for a comfortable tap target */
  .js-body .site[data-page="order"] .order-layout-updated .shop-btn {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    justify-content: center;
  }


  /* Explicit rows for every cell.
     order-section-udpated.php's inline block and order-packages.css both assign
     fixed grid-row numbers to some of these children, so relying on auto-placement
     left the auto items competing with the fixed ones - adding the bonus badge was
     enough to push the coverage line below the select button. Pinning every row
     makes the order deterministic no matter what those sheets say. Empty rows
     collapse, because grid-auto-rows is min-content. */
  .js-body .site[data-page="order"] .order-layout-updated .order-link-text      { grid-row: 2; }
  .js-body .site[data-page="order"] .order-layout-updated .package-coverage-text{ grid-row: 3; }
  .js-body .site[data-page="order"] .order-layout-updated .price-delivery-row   { grid-row: 4; }
  .js-body .site[data-page="order"] .order-layout-updated .save-badge           { grid-row: 5; }
  .js-body .site[data-page="order"] .order-layout-updated .price-per-pcs        { grid-row: 6; }
  .js-body .site[data-page="order"] .order-layout-updated .package-wrapper      { grid-row: 7; }
  /* the .selected variant in order-packages.css is (0,6,0) and outranked a plain
     .shop-btn rule, pinning the button back onto the per-piece row on the
     preselected card - match that state explicitly so both cases land on row 8 */
  .js-body .site[data-page="order"] .order-layout-updated .shop-btn,
  .js-body .site[data-page="order"] .order-layout-updated .order-item.selected .shop-btn {
    grid-row: 8;
    grid-column: 1 / -1;
  }
}

/* very narrow phones: give the text column a little more room */
@media (max-width: 400px) {
  .js-body .site[data-page="order"] .order-layout-updated .order-link {
    grid-template-columns: minmax(118px, 38%) minmax(0, 1fr);
    gap: 2px 11px;
    padding: 10px 12px;
  }
}

/* =====================================================================
   CART + ORDER FORM  —  contrast for older eyes
   -----------------------------------------------------------------
   The buyers are 50-70. An audit of this page showed the TEXT was already
   fine (7:1 to 16.6:1), but every non-text boundary failed WCAG 1.4.11,
   which needs 3:1 for UI component edges:

       input border        1.63:1
       cart / form panel   1.63:1
       cart item box       1.23:1
       cart list divider   1.23:1
       accordion border    1.23:1

   and the field background was identical to the panel behind it, so the
   inputs had no edge and no surface - the form read as one flat dark area
   with text floating in it. That is what "too dark, low contrast" is:
   the words are legible, but nothing tells you where the boxes are.

   Fixes below raise every boundary past 3:1 and give the fields a surface
   of their own. Measured, not guessed:
       border rgba(246,239,230,.46) -> 4.07:1 on the light end of the panel
                                       gradient, 4.20:1 on the dark end
       divider rgba(246,239,230,.40) -> 3.42:1 / 3.49:1
       field #2E2926 -> cream text 12.6:1, placeholder 5.33:1

   Scope: order and contact pages only. The global theme is untouched, and
   the package cards are deliberately left alone as requested.
   ===================================================================== */
.js-body .site[data-page="order"],
.js-body .site[data-page="contact"] {
  --of-edge: rgba(246, 239, 230, .46);   /* component edges  ~4.1:1 */
  --of-divider: rgba(246, 239, 230, .40);/* internal rules   ~3.4:1 */
  --of-field: #fff5ce;                   /* field surface: warm cream with dark ink */
}

/* ---- form fields ------------------------------------------------- */
/* box-sizing is border-box here, so the 2px edge costs no layout height */
.js-body .site[data-page="order"] .order-input,
.js-body .site[data-page="order"] .order-textarea,
.js-body .site[data-page="order"] select.order-input,
.js-body .site[data-page="contact"] .order-input,
.js-body .site[data-page="contact"] .order-textarea,
.js-body .site[data-page="contact"] select.order-input {
  background: var(--of-field);
  border-width: 2px;
  border-style: solid;
  border-color: var(--of-edge);
  box-shadow: none;
}
.js-body .site[data-page="order"] .order-input:focus,
.js-body .site[data-page="order"] .order-textarea:focus,
.js-body .site[data-page="contact"] .order-input:focus,
.js-body .site[data-page="contact"] .order-textarea:focus {
  background: var(--of-field);
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(248, 172, 50, .30);
}
/* the invalid state must stay obviously different from the amber focus ring */
.js-body .site[data-page="order"] .field.invalid .order-input,
.js-body .site[data-page="order"] form .invalid.order-input,
.js-body .site[data-page="contact"] .field.invalid .order-input,
.js-body .site[data-page="contact"] form .invalid.order-input {
  border-color: #FF6B6B;
  box-shadow: 0 0 0 3px rgba(236, 34, 39, .30);
}
.js-body .site[data-page="order"] select.order-input option,
.js-body .site[data-page="contact"] select.order-input option {
  background: var(--of-field);
}

/* ---- panels ------------------------------------------------------- */
.js-body .site[data-page="order"] .order-details,
.js-body .site[data-page="order"] .order-form-wrapper {
  border: 1px solid var(--of-edge);
}

/* ---- rules and boxes inside the cart ------------------------------ */
.js-body .site[data-page="order"] .order-layout .order-summary,
.js-body .site[data-page="order"] .order-accordion {
  border-color: var(--of-divider);
}
.js-body .site[data-page="order"] .order-details-list {
  border-top-color: var(--of-divider);
}
/* the summary rows had no rule between them at all; a visible divider makes
   the shipping / total lines scannable rather than one block of text */
.js-body .site[data-page="order"] .order-details-item {
  border-bottom: 1px solid var(--of-divider);
}
.js-body .site[data-page="order"] .order-details-item:last-child {
  border-bottom: 0;
}
.js-body .site[data-page="order"] .order-accordion-content {
  border-top-color: var(--of-divider);
}
.js-body .site[data-page="order"] .order-header,
.js-body .site[data-page="order"] .order-details header.order-header {
  border-bottom: 1px solid var(--of-divider);
}

/* ---- the money, and the consent line ------------------------------ */
/* the total is the single most important number on the page */
.js-body .site[data-page="order"] #total-row .total-price,
.js-body .site[data-page="order"] #total-row .order-item-text {
  color: var(--text);
  font-weight: 800;
}
/* consent text and its links carry legal weight - keep them full strength */
.js-body .site[data-page="order"] .check-radio-element,
.js-body .site[data-page="contact"] .check-radio-element {
  color: var(--text);
}
.js-body .site[data-page="order"] .check-radio-element a,
.js-body .site[data-page="contact"] .check-radio-element a {
  color: var(--amber);
  text-decoration: underline;
}
/* the custom checkbox box, where it renders instead of the native control */
.js-body .site[data-page="order"] .check-radio-element::before,
.js-body .site[data-page="contact"] .check-radio-element::before {
  border-color: var(--of-edge);
  background: var(--of-field);
}
/* =====================================================================
   LIGHT MODE  —  the whole order page on cream
   -----------------------------------------------------------------
   Switched from PHP: Product::$orderTheme = 'light' | 'dark'.
   "light" means cream SHEETS - cards, cart, form - on the dark ember
   ground, so the elements stand out; the ground itself stays dark.
   header.php stamps data-theme="light" on .site for order.php and
   contact.php (the embedded order.php?embed=1 included); everything
   below keys off that attribute. With the attribute absent the page is
   the ember-dark build above, untouched - so 'dark' is a true revert.

   Why the whole page and not just the panels: a light cart beside dark
   package cards makes the eye re-adapt every time it moves between
   choosing and paying. The buyers are 50-70. So EVERY element they act
   on - package, accessory, cart, form - is the same cream sheet with the
   same ink, and the dark ember ground is only ever behind a sheet, never
   behind text. The eye adapts to one reading surface.

   Palette: nothing new. The cream is the theme's --text, the ink is its
   --on-ember, ember and amber remain the accents - but on cream they are
   used as SURFACES and EDGES (bars, rings, badges, the CTA). Anything
   that has to be read in the accent uses --ember-ink, the same hue
   darkened until it clears 4.5:1.

   Measured on the sheet:
       ink #1A0E07 16.7:1   ink-2 #4A3A2E 9.6:1   ink-3 #6B5B4E 5.6:1
       ember-ink #B5401A 5.0:1   field edge rgba(26,14,7,.50) 3.5:1
   ===================================================================== */
.js-body .site[data-page="order"][data-theme="light"],
.js-body .site[data-page="contact"][data-theme="light"] {
  --paper:     #FBF5EA;                 /* sheet */
  --paper-2:   #F2E8D8;                 /* deeper cream: strips, disabled */
  --paper-hi:  #FFFDF9;                 /* fields, the brightest surface */
  --ground:    var(--bg);               /* the dark page ground - the sheets sit ON the dark */
  --ink:       #1A0E07;
  --ink-2:     #4A3A2E;
  --ink-3:     #6B5B4E;
  --ink-line:  rgba(26, 14, 7, .16);
  --ink-edge:  rgba(26, 14, 7, .50);
  --ember-ink: #B5401A;
  --red-ink:   #B3261E;
  --ring:      rgba(242, 103, 45, .24);
  --ring-red:  rgba(236, 34, 39, .20);
  --sheet:     linear-gradient(165deg, #FFFCF6 0%, var(--paper) 55%, #F4EADA 100%);
  --sheet-shadow: 0 40px 80px -24px rgba(20, 8, 2, .75), 0 0 0 1px rgba(26, 14, 7, .10);
  --sheet-glow: 0 0 72px -20px rgba(242, 103, 45, .50);
}

/* ---- page ground ------------------------------------------------------ */
.js-body .site[data-page="order"][data-theme="light"] .main-content.main-content,
.js-body .site[data-page="contact"][data-theme="light"] .main-content.main-content {
  /* anything sitting directly on the ground is cream type; the sheets set their own ink */
  color: var(--text);
  background:
    radial-gradient(60% 40% at 8% 0%, rgba(242, 103, 45, .18), transparent 70%),
    radial-gradient(40% 30% at 100% 100%, rgba(248, 172, 50, .08), transparent 70%),
    var(--ground);
}

/* ---- package cards ---------------------------------------------------- */
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-link {
  color: var(--ink);
  border-color: rgba(26, 14, 7, .16);
  background: linear-gradient(160deg, #FFFEFB 0%, #FAF4E9 100%);
  box-shadow: var(--sheet-shadow);
}
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-link::after {
  box-shadow: inset 0 1px 0 #FFFFFF;
}
.js-body.non-touch .site[data-page="order"][data-theme="light"] .order-layout-updated .order-item:hover .order-link {
  border-color: rgba(242, 103, 45, .55);
  box-shadow: var(--sheet-shadow), var(--sheet-glow);
}
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-item.selected .order-link,
.js-body.non-touch .site[data-page="order"][data-theme="light"] .order-layout-updated .order-item.selected:hover .order-link {
  border-color: var(--ember);
  background:
    radial-gradient(circle at 88% 8%, rgba(248, 172, 50, .30), transparent 45%),
    linear-gradient(160deg, #FFFAF0 0%, #FBF0DE 100%);
  box-shadow: var(--sheet-shadow), 0 0 0 1px var(--ember), var(--sheet-glow);
}
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-img > img {
  filter: saturate(1) drop-shadow(0 14px 22px rgba(20, 8, 2, .28));
}
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-item.selected .order-img > img,
.js-body.non-touch .site[data-page="order"][data-theme="light"] .order-layout-updated .order-item:hover .order-img > img {
  filter: saturate(1) drop-shadow(0 14px 22px rgba(20, 8, 2, .30)) drop-shadow(0 0 24px rgba(242, 103, 45, .28));
}
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-link-text { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-link-text .purple-text { color: var(--ember-ink); }
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .package-coverage-text { color: var(--ink-2); }
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-price .old,
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .old-price {
  color: var(--ink-3);
  text-decoration-color: rgba(107, 91, 78, .8);
}
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .order-price .new,
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .new-price { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .price-per-pcs,
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .per-pcs-label { color: var(--ink-3); }
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .fast_delivery_badge {
  color: var(--ink);
  background: rgba(248, 172, 50, .26);
}
/* "select / selected" strip */
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .shop-btn {
  color: var(--ink-2);
  border-top-color: var(--ink-line);
}
.js-body.non-touch .site[data-page="order"][data-theme="light"] .order-layout-updated .order-item:hover:not(.selected) .shop-btn,
.js-body.non-touch .site[data-page="order"][data-theme="light"] .order-layout-updated .order-item:hover:not(.selected) .shop-btn::before {
  color: var(--ember-ink);
  border-color: var(--ember-ink);
}
/* selected strip keeps the ember gradient with dark type - unchanged */

/* ---- accessory cards -------------------------------------------------- */
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-header {
  /* this strip sits on the dark ground, so it is a sheet of its own, not a tint */
  color: var(--ink);
  border-color: rgba(26, 14, 7, .10);
  background:
    linear-gradient(135deg, rgba(248, 172, 50, .32) 0%, rgba(242, 103, 45, .10) 100%),
    var(--sheet);
  box-shadow: var(--sheet-shadow);
}
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-header::before { background-color: var(--ember); }
/* pure white, not cream: the accessory photos are JPGs on a white ground, and
   a white square on a cream card reads as grey bands above and below the shot */
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-item-content {
  border-color: rgba(26, 14, 7, .16);
  background: #FFFFFF;
  box-shadow: var(--sheet-shadow);
}
.js-body.non-touch .site[data-page="order"][data-theme="light"] .acc-layout .acc-item-content:hover {
  border-color: rgba(242, 103, 45, .55);
  box-shadow: var(--sheet-shadow), var(--sheet-glow);
}
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-item.selected .acc-item-content {
  border-color: var(--ember);
  box-shadow: var(--sheet-shadow), 0 0 0 1px var(--ember), var(--sheet-glow);
}
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-item-title { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-item-text  { color: var(--ink-2); }
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-price      { color: var(--ember-ink); }
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-img {
  background: #FFFFFF;
  box-shadow: none;
  border-radius: 0;
}
.js-body .site[data-page="order"][data-theme="light"] .acc-layout .acc-btn {
  color: var(--ink);
  background: rgba(26, 14, 7, .04);
  box-shadow: inset 0 0 0 1.5px rgba(26, 14, 7, .40);
}
.js-body.non-touch .site[data-page="order"][data-theme="light"] .acc-layout .acc-btn:hover {
  color: var(--ember-ink);
  background: rgba(248, 172, 50, .14);
  box-shadow: inset 0 0 0 1.5px var(--ember-ink), 0 10px 26px -14px var(--glow);
}
/* selected add-to-cart keeps the ember gradient with dark type - unchanged */

/* ---- disabled submit --------------------------------------------------- */
.js-body .site[data-page="order"][data-theme="light"] .submit-btn[disabled],
.js-body.non-touch .site[data-page="order"][data-theme="light"] .submit-btn[disabled]:hover,
.js-body .site[data-page="contact"][data-theme="light"] .submit-btn[disabled],
.js-body.non-touch .site[data-page="contact"][data-theme="light"] .submit-btn[disabled]:hover {
  color: var(--ink-3);
  background-color: var(--paper-2);
}

/* ---- embed mode (order.php?embed=1 inside the advertorials) ------------- */
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: var(--sheet-shadow), var(--sheet-glow);
}
.js-body .site[data-page="order"][data-theme="light"] .embed-choose-label { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .embed-hero img {
  filter: drop-shadow(0 20px 30px rgba(20, 8, 2, .30)) drop-shadow(0 0 36px rgba(242, 103, 45, .22));
}
.js-body .site[data-page="order"][data-theme="light"] .embed-package-grid .order-link {
  color: var(--ink);
  border-color: rgba(26, 14, 7, .18);
  background: var(--paper-hi);
}
.js-body .site[data-page="order"][data-theme="light"] .embed-package-grid .order-item:hover .order-link,
.js-body .site[data-page="order"][data-theme="light"] .embed-package-grid .order-item.best-seller-item .order-link {
  border-color: rgba(242, 103, 45, .55);
}
.js-body .site[data-page="order"][data-theme="light"] .embed-package-grid .order-item.selected .order-link {
  border-color: var(--ember);
  background: rgba(248, 172, 50, .14);
  box-shadow: 0 0 0 1px var(--ember), 0 16px 34px -18px var(--glow);
}
.js-body .site[data-page="order"][data-theme="light"] .embed-radio-dot { border-color: var(--ink-edge); }
.js-body .site[data-page="order"][data-theme="light"] .embed-radio-dot::after { background: var(--ember); }
.js-body .site[data-page="order"][data-theme="light"] .embed-package-grid .order-item.selected .embed-radio-dot { border-color: var(--ember); }
.js-body .site[data-page="order"][data-theme="light"] .embed-package-name { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .embed-old-price { color: var(--ink-3); }
.js-body .site[data-page="order"][data-theme="light"] .embed-new-price { color: var(--ember-ink); }
.js-body .site[data-page="order"][data-theme="light"] .embed-perpcs { color: var(--ink-3); }
/* "most popular" badge: the ring matches the cream sheet, not the dark --bg */
.js-body .site[data-page="order"][data-theme="light"] .embed-preferred-badge {
  box-shadow: 0 6px 14px -6px rgba(242, 103, 45, .5), 0 0 0 3px var(--paper);
}
.js-body .site[data-page="order"][data-theme="light"] .embed-save {
  color: var(--ember-ink);
  background: rgba(248, 172, 50, .22);
}
.js-body .site[data-page="order"][data-theme="light"] .embed-accordions .order-accordion {
  border-color: var(--ink-line);
  background: var(--paper-hi);
}
.js-body .site[data-page="order"][data-theme="light"] .embed-accordions .order-accordion-link { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .embed-accordions .order-accordion-link .embed-acc-icon { color: var(--ember-ink); }
.js-body .site[data-page="order"][data-theme="light"] .embed-accordions .order-accordion-content { color: var(--ink-2); }

/* ---- contact page: title and the product plate -------------------------- */
.js-body .site[data-page="contact"][data-theme="light"] .main-title { color: var(--text); }
.js-body .site[data-page="contact"][data-theme="light"] .order-layout-left {
  border-color: rgba(26, 14, 7, .10);
  background:
    radial-gradient(closest-side at 50% 58%, rgba(242, 103, 45, .28), rgba(248, 172, 50, .10) 60%, transparent 100%),
    var(--sheet);
  box-shadow: var(--sheet-shadow);
}
.js-body .site[data-page="contact"][data-theme="light"] .order-layout-left img {
  filter: drop-shadow(0 26px 36px rgba(20, 8, 2, .32)) drop-shadow(0 0 40px rgba(242, 103, 45, .20));
}

/* ---- the cart, the form, the courier picker, the contact form ----------- */
.js-body .site[data-page="order"][data-theme="light"],
.js-body .site[data-page="contact"][data-theme="light"] {
  --paper:     #FBF5EA;
  --paper-2:   #F2E8D8;                 /* deeper cream: strips, disabled fields */
  --paper-hi:  #FFFDF9;                 /* field surface, brighter than the sheet */
  --ink:       #1A0E07;
  --ink-2:     #4A3A2E;                 /* secondary copy */
  --ink-3:     #6B5B4E;                 /* placeholders, meta */
  --ink-line:  rgba(26, 14, 7, .16);    /* hairlines */
  --ink-edge:  rgba(26, 14, 7, .50);    /* component edges, 3.5:1 on the field */
  --ember-ink: #B5401A;                 /* readable ember */
  --red-ink:   #B3261E;                 /* readable red */
  --ring:      rgba(242, 103, 45, .24);
  --ring-red:  rgba(236, 34, 39, .20);
}

/* ---- the sheets ---------------------------------------------------- */
.js-body .site[data-page="order"][data-theme="light"] .order-details,
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper,
.js-body .site[data-page="contact"][data-theme="light"] .contact-form {
  color: var(--ink);
  border: 1px solid rgba(26, 14, 7, .10);
  background: linear-gradient(165deg, #FFFCF6 0%, var(--paper) 55%, #F4EADA 100%);
  box-shadow: var(--sheet-shadow), var(--sheet-glow), inset 0 1px 0 #FFFFFF;
}

/* strips: "Order summary", "Shipping address", the contact intro */
.js-body .site[data-page="order"][data-theme="light"] .order-header,
.js-body .site[data-page="order"][data-theme="light"] .order-details header.order-header,
.js-body .site[data-page="contact"][data-theme="light"] .contact-form .order-text {
  color: var(--ink);
  background: linear-gradient(135deg, rgba(248, 172, 50, .32) 0%, rgba(242, 103, 45, .10) 100%);
  border-bottom: 1px solid var(--ink-line);
}
.js-body .site[data-page="order"][data-theme="light"] .order-header::before { background-color: var(--ember); }
.js-body .site[data-page="order"][data-theme="light"] .order-header .icon-basket,
.js-body .site[data-page="order"][data-theme="light"] .order-header .icon-truck { color: var(--ember-ink); }

/* ---- cart ----------------------------------------------------------- */
.js-body .site[data-page="order"][data-theme="light"] .order-layout .order-summary {
  color: var(--ink);
  border-color: var(--ink-line);
  background: var(--paper-hi);
}
.js-body .site[data-page="order"][data-theme="light"] .order-layout .order-summary-item { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .order-details-list { border-top-color: var(--ink-line); }
.js-body .site[data-page="order"][data-theme="light"] .order-details-item {
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-line);
}
.js-body .site[data-page="order"][data-theme="light"] .order-details-item:last-child { border-bottom: 0; }
.js-body .site[data-page="order"][data-theme="light"] #total-row.order-details-item,
.js-body .site[data-page="order"][data-theme="light"] #total-row .order-item-text {
  color: var(--ink);
  font-weight: 800;
}
.js-body .site[data-page="order"][data-theme="light"] #total-row .total-price { color: var(--ember-ink); }
.js-body .site[data-page="order"][data-theme="light"] .order-layout .red-text { color: var(--ember-ink); }

.js-body .site[data-page="order"][data-theme="light"] .order-tabs-link {
  color: var(--ink-2);
  background-color: var(--paper-2);
}

/* shipping-info / payment accordions */
.js-body .site[data-page="order"][data-theme="light"] .order-accordion {
  border-color: var(--ink-line);
  background: var(--paper-hi);
}
.js-body .site[data-page="order"][data-theme="light"] .order-accordion-link {
  color: var(--ink);
  background: rgba(26, 14, 7, .035);
}
.js-body .site[data-page="order"][data-theme="light"] .order-accordion-link::before {
  border-right-color: var(--ember-ink);
  border-bottom-color: var(--ember-ink);
  border-left-color: var(--ember-ink);
}
.js-body .site[data-page="order"][data-theme="light"] .order-accordion-content {
  color: var(--ink-2);
  border-top-color: var(--ink-line);
}
.js-body .site[data-page="order"][data-theme="light"] .order-accordion-content strong,
.js-body .site[data-page="order"][data-theme="light"] .order-accordion-content b { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .order-accordion-content [style*="color"] { color: var(--ember-ink) !important; }

/* ---- fields --------------------------------------------------------- */
.js-body .site[data-page="order"][data-theme="light"] .order-input,
.js-body .site[data-page="order"][data-theme="light"] .order-textarea,
.js-body .site[data-page="order"][data-theme="light"] select.order-input,
.js-body .site[data-page="contact"][data-theme="light"] .order-input,
.js-body .site[data-page="contact"][data-theme="light"] .order-textarea,
.js-body .site[data-page="contact"][data-theme="light"] select.order-input {
  color: var(--ink);
  caret-color: var(--ember);
  background: #fff5ce;
  border-width: 2px;
  border-style: solid;
  border-color: var(--ink-edge);
  box-shadow: inset 0 1px 2px rgba(26, 14, 7, .06);
}
.js-body .site[data-page="order"][data-theme="light"] .order-input::placeholder,
.js-body .site[data-page="order"][data-theme="light"] .order-textarea::placeholder,
.js-body .site[data-page="contact"][data-theme="light"] .order-input::placeholder,
.js-body .site[data-page="contact"][data-theme="light"] .order-textarea::placeholder { color: var(--ink-3); }
.js-body .site[data-page="order"][data-theme="light"] .order-input:focus,
.js-body .site[data-page="order"][data-theme="light"] .order-textarea:focus,
.js-body .site[data-page="contact"][data-theme="light"] .order-input:focus,
.js-body .site[data-page="contact"][data-theme="light"] .order-textarea:focus {
  border-color: var(--ember-ink);
  background: #fff5ce;
  box-shadow: 0 0 0 4px var(--ring);
}
.js-body .site[data-page="order"][data-theme="light"] .order-input:disabled,
.js-body .site[data-page="order"][data-theme="light"] .order-textarea:disabled,
.js-body .site[data-page="contact"][data-theme="light"] .order-input:disabled,
.js-body .site[data-page="contact"][data-theme="light"] .order-textarea:disabled {
  color: var(--ink-3);
  background: var(--paper-2);
  border-color: var(--ink-line);
}
.js-body .site[data-page="order"][data-theme="light"] select.order-input option,
.js-body .site[data-page="contact"][data-theme="light"] select.order-input option {
  color: var(--ink);
  background: #fff5ce;
}
.js-body .site[data-theme="light"] .order-input:-webkit-autofill,
.js-body .site[data-theme="light"] .order-input:-webkit-autofill:hover,
.js-body .site[data-theme="light"] .order-input:-webkit-autofill:focus,
.js-body .site[data-theme="light"] .order-textarea:-webkit-autofill,
.js-body .site[data-theme="light"] .order-textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff5ce inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ember);
  border-color: var(--ink-edge);
}
.js-body .site[data-theme="light"] .order-input:autofill,
.js-body .site[data-theme="light"] .order-textarea:autofill {
  box-shadow: 0 0 0 1000px #fff5ce inset;
  -webkit-text-fill-color: var(--ink);
}
.js-body .site[data-page="order"][data-theme="light"] .order-select::before { background: var(--ember-ink); }

/* validation: red on paper, clearly apart from the ember focus ring */
.js-body .site[data-page="order"][data-theme="light"] .field.invalid .order-input,
.js-body .site[data-page="order"][data-theme="light"] .field.invalid .order-textarea,
.js-body .site[data-page="order"][data-theme="light"] .field.invalid .order-select select,
.js-body .site[data-page="order"][data-theme="light"] .field.invalid .select2-selection--single,
.js-body .site[data-page="order"][data-theme="light"] form .invalid input.order-input,
.js-body .site[data-page="order"][data-theme="light"] form .invalid textarea.order-textarea,
.js-body .site[data-page="order"][data-theme="light"] form .invalid.order-input,
.js-body .site[data-page="contact"][data-theme="light"] .field.invalid .order-input,
.js-body .site[data-page="contact"][data-theme="light"] .field.invalid .order-textarea,
.js-body .site[data-page="contact"][data-theme="light"] form .invalid input.order-input,
.js-body .site[data-page="contact"][data-theme="light"] form .invalid textarea.order-textarea,
.js-body .site[data-page="contact"][data-theme="light"] form .invalid.order-input {
  color: var(--ink);
  border-color: var(--red);
  background: #FFF6F5;
  box-shadow: 0 0 0 4px var(--ring-red);
}
.js-body .site[data-page="order"][data-theme="light"] .field.invalid .order-input:focus,
.js-body .site[data-page="order"][data-theme="light"] .field.invalid .order-textarea:focus,
.js-body .site[data-page="contact"][data-theme="light"] .field.invalid .order-input:focus,
.js-body .site[data-page="contact"][data-theme="light"] .field.invalid .order-textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(236, 34, 39, .32);
}
.js-body .site[data-page="order"][data-theme="light"] form .invalid span,
.js-body .site[data-page="contact"][data-theme="light"] form .invalid span { color: var(--red-ink); }
.js-body .site[data-page="order"][data-theme="light"] form label.labelError,
.js-body .site[data-page="contact"][data-theme="light"] form label.labelError {
  color: var(--red-ink);
  background: rgba(236, 34, 39, .08);
  border: 1px solid rgba(236, 34, 39, .35);
}

/* consent line + legal links */
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper .check-radio,
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper .check-radio-element,
.js-body .site[data-page="order"][data-theme="light"] .check-radio-element,
.js-body .site[data-page="contact"][data-theme="light"] .check-radio,
.js-body .site[data-page="contact"][data-theme="light"] .check-radio-element { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper .check-radio-input,
.js-body .site[data-page="contact"][data-theme="light"] .check-radio-input {
  accent-color: var(--ember);
  color-scheme: light;
}
.js-body .site[data-page="order"][data-theme="light"] .check-radio-element::before,
.js-body .site[data-page="contact"][data-theme="light"] .check-radio-element::before {
  background-color: var(--paper-hi);
  border-color: var(--ink-edge);
}
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper a[href*="terms.php"],
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper a[href*="privacy.php"],
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper .check-radio-element a,
.js-body .site[data-page="order"][data-theme="light"] .check-radio-element a,
.js-body .site[data-page="contact"][data-theme="light"] .check-radio-element a {
  color: var(--ember-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.js-body.non-touch .site[data-page="order"][data-theme="light"] .order-form-wrapper a[href*="terms.php"]:hover,
.js-body.non-touch .site[data-page="order"][data-theme="light"] .order-form-wrapper a[href*="privacy.php"]:hover,
.js-body.non-touch .site[data-page="order"][data-theme="light"] .order-form-wrapper .check-radio-element a:hover,
.js-body.non-touch .site[data-page="contact"][data-theme="light"] .check-radio-element a:hover { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper .check-radio.invalid .check-radio-element,
.js-body .site[data-page="order"][data-theme="light"] .order-form-wrapper .check-radio.invalid .check-radio-element a,
.js-body .site[data-page="contact"][data-theme="light"] .check-radio.invalid .check-radio-element,
.js-body .site[data-page="contact"][data-theme="light"] .check-radio.invalid .check-radio-element a,
.js-body .site[data-theme="light"] form .invalid label.check-radio-element { color: var(--red-ink); }

/* ---- courier picker + office search, now on paper ------------------ */
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-methods__title { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-methods__option {
  border-color: rgba(26, 14, 7, .24);
  background: var(--paper-hi);
}
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-methods__option:hover {
  border-color: rgba(242, 103, 45, .6);
  background: #FFF8EE;
}
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-methods__option.is-selected {
  border-color: var(--ember);
  background: rgba(248, 172, 50, .14);
  box-shadow: 0 0 0 1px var(--ember), 0 10px 26px -14px var(--glow);
}
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-methods__text { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-methods__logo { box-shadow: 0 0 0 4px #FBF6EE, 0 0 0 5px var(--ink-line); }
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office__error { color: var(--red-ink); }

.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-container--default .select2-selection--single {
  border: 2px solid var(--ink-edge);
  background: #fff5ce;
}
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); }
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-3); }
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--ink-3); }
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--ember-ink); }
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--ember-ink); }
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-container--default.select2-container--focus .select2-selection--single,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ember-ink);
  box-shadow: 0 0 0 4px var(--ring);
}
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office.invalid .select2-container--default .select2-selection--single {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--ring-red);
}
.js-body .site[data-theme="light"] .select2-container .select2-dropdown,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-dropdown {
  color: var(--ink);
  border-color: rgba(26, 14, 7, .24);
  background: #FFFFFF;
  box-shadow: 0 24px 48px -16px rgba(20, 8, 2, .45);
}
.js-body .site[data-theme="light"] .select2-container .select2-search--dropdown .select2-search__field,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-search__field {
  color: var(--ink);
  caret-color: var(--ember);
  border: 2px solid var(--ink-edge);
  background: var(--paper-hi);
}
.js-body .site[data-theme="light"] .select2-container .select2-search--dropdown .select2-search__field:focus,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-search__field:focus {
  border-color: var(--ember-ink);
  box-shadow: 0 0 0 3px var(--ring);
}
.js-body .site[data-theme="light"] .select2-container .select2-search--dropdown .select2-search__field::placeholder { color: var(--ink-3); }
.js-body .site[data-theme="light"] .select2-container .select2-results__option,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-results__option,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office.invalid .select2-dropdown,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office.invalid .select2-results__option,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office.invalid .bg-courier-office-option,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office.invalid .bg-courier-office-option__name,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office.invalid .select2-search__field { color: var(--ink); }
.js-body .site[data-theme="light"] .select2-container .select2-results__option .bg-courier-office-option__meta,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-results__option .bg-courier-office-option__meta,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office.invalid .bg-courier-office-option__meta { color: var(--ink-3); }
.js-body .site[data-theme="light"] .select2-container .select2-results__option[aria-selected="true"],
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-results__option[aria-selected="true"] { background: rgba(26, 14, 7, .06); }
.js-body .site[data-theme="light"] .select2-container .select2-results__option--highlighted[aria-selected],
.js-body .site[data-theme="light"] .select2-container .select2-results__option--highlighted[aria-selected] .bg-courier-office-option,
.js-body .site[data-theme="light"] .select2-container .select2-results__option--highlighted[aria-selected] .bg-courier-office-option__name,
.js-body .site[data-theme="light"] .select2-container .select2-results__option--highlighted[aria-selected] .bg-courier-office-option__meta,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-results__option--highlighted[aria-selected],
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-results__option--highlighted[aria-selected] .bg-courier-office-option,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-results__option--highlighted[aria-selected] .bg-courier-office-option__name,
.js-body .site[data-page="order"][data-theme="light"] .bg-courier-office .select2-results__option--highlighted[aria-selected] .bg-courier-office-option__meta {
  color: var(--ink);
  background: rgba(248, 172, 50, .26);
}
.js-body .site[data-theme="light"] .select2-container .select2-results__option[aria-disabled="true"],
.js-body .site[data-theme="light"] .select2-container .select2-results__message { color: var(--ink-3); }
.js-body .site[data-theme="light"] .select2-container--default .select2-results > .select2-results__options { scrollbar-color: rgba(26, 14, 7, .3) transparent; }

/* ---- contact page ---------------------------------------------------- */
.js-body .site[data-page="contact"][data-theme="light"] .contact-form .order-text h2 { color: var(--ink); }
.js-body .site[data-page="contact"][data-theme="light"] .contact-form .order-text strong { color: var(--ember-ink); }
.js-body .site[data-page="contact"][data-theme="light"] .contact-form .order-text p { color: var(--ink-2); }
.js-body .site[data-page="contact"][data-theme="light"] #form-messages {
  color: #0E6B45;
  background: rgba(52, 178, 122, .14);
  border: 1px solid rgba(52, 178, 122, .45);
}
.js-body .site[data-page="contact"][data-theme="light"] #turnstile-error { color: var(--red-ink) !important; }

/* the savings badge is white type on the ember gradient - 2.9:1 at the amber
   end. Fine as a glow on the dark build; on cream it is the weakest text on
   the page, so the gradient runs through the readable ember instead (5:1+) */
.js-body .site[data-page="order"][data-theme="light"] .order-layout-updated .save-badge {
  color: #FFFFFF;
  background: linear-gradient(135deg, #C2461A 0%, #B3261E 100%);
  box-shadow: 0 10px 20px -10px rgba(181, 64, 26, .6);
}

/* =====================================================================
   LIGHT EMBED — flat.
   Inside an advertorial the form sits on a light page. There, ember glows
   read as orange smears and a heavy dark shadow clipped by the iframe edge
   reads as a black frame. So in the light embed: no glow anywhere, the
   outer wrap is transparent (the host page shows through), no shadow under
   the product shot or the cards, and only the cart and the address form
   keep one very light drop shadow. Loaded last, so these win.
   ===================================================================== */
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap {
  background: transparent;
  box-shadow: none;
}
.js-body .site[data-page="order"][data-theme="light"] .embed-hero img { filter: none; }

/* package cards: edge only, no lift */
.js-body .site[data-page="order"][data-theme="light"] .embed-package-grid .order-link { box-shadow: none; }
.js-body .site[data-page="order"][data-theme="light"] .embed-package-grid .order-item.selected .order-link { box-shadow: 0 0 0 1px var(--ember); }

/* accessories */
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .acc-header,
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .acc-item-content,
.js-body.non-touch .site[data-page="order"][data-theme="light"] .embed-wrap .acc-item-content:hover { box-shadow: none; }
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .acc-item.selected .acc-item-content { box-shadow: 0 0 0 1px var(--ember); }
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .acc-btn { box-shadow: inset 0 0 0 1.5px rgba(26, 14, 7, .40); }
.js-body.non-touch .site[data-page="order"][data-theme="light"] .embed-wrap .acc-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ember-ink); }
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .acc-item.selected .acc-btn,
.js-body.non-touch .site[data-page="order"][data-theme="light"] .embed-wrap .acc-item.selected .acc-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 236, 200, .35); }

/* the cart and the address form: the one place a shadow stays, and a light one */
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .order-details,
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .order-form-wrapper {
  border-color: rgba(26, 14, 7, .12);
  box-shadow: 0 4px 16px rgba(26, 14, 7, .08), inset 0 1px 0 #FFFFFF;
}

/* inside the form: no glow on the buttons, the courier picker or the selection ring */
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .submit-btn,
.js-body.non-touch .site[data-page="order"][data-theme="light"] .embed-wrap .submit-btn:hover {
  box-shadow: 0 8px 20px -10px rgba(26, 14, 7, .35), inset 0 1px 0 rgba(255, 236, 200, .35);
}
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .remove-item-btn { box-shadow: none; }
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .bg-courier-methods__option.is-selected { box-shadow: 0 0 0 1px var(--ember); }
.js-body .site[data-page="order"][data-theme="light"] .embed-wrap .embed-accordions .order-accordion { box-shadow: none; }