/* ============================================================
   iOS Safari fixes — notch/status-bar colour + mobile drawer
   Loaded AFTER the main bundle so these rules win the cascade.
   Scope is mobile-only where it matters; env() insets are 0 on
   devices without a safe area, so desktop is unaffected.
   ============================================================ */

/* ---- 1. Status-bar / notch colour — DYNAMIC --------------------------
   The iPhone safe-area (notch / Dynamic Island) is coloured by one fixed
   strip. At the very top of the page it shows the promo-bar colour; as soon
   as the user scrolls (the promo strip scrolls away and the sticky topbar
   takes its place) it switches to the topbar colour. While the burger drawer
   or search overlay is open it matches their white panel, so the open menu
   looks clean to the very top (no stray pink strip above it).
   The page + footer themselves stay white — only this thin strip is tinted. */
@media (max-width: 991px) {
  /* White at both ends: Safari's rubber-band overscroll (pull-to-refresh at
     the top, and scrolling up at the footer) samples the root background, so
     keep it white. (item 3) */
  html, body { background: #ffffff !important; }

  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #ffffff;           /* DEFAULT WHITE — shown during page load /
                                      navigation until syncTheme() colours it,
                                      so the island never flashes a stale tint
                                      while a new page is still loading. */
    z-index: 2147483600;
    pointer-events: none;
    /* no transition → the colour swaps instantly */
  }
  /* The island states, written by syncTheme(). Order: dim/white win over
     scrolled, which wins over the top-of-page promo colour. */
  body.cea-island-store::before { background: #FFF8E1; }  /* promo cream — top of a normal page */
  body.cea-scrolled::before     { background: #F2C4C7; }  /* topbar pink — scrolled */
  body.cea-island-white::before { background: #ffffff !important; }  /* menu / search / cart drawer / cart.html — must win */
  body.cea-island-dim::before   { background: #9b938a !important; }  /* welcome modal + confirm dialog — must win */

  /* Promo-bar text clears the notch instead of hiding under it */
  .topbar-announcement {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }

  /* Sticky mobile topbar sits just below the notch strip while scrolling.
     (mobile-v2.js now mounts .mvb as a body child so this sticky persists.) */
  .mvb {
    top: env(safe-area-inset-top, 0px);
  }
}

/* ---- 2. Mobile burger drawer + search overlay fill the whole screen ----
   iOS 15+ Safari mis-sizes `position:fixed; top:0; bottom:0` (and `inset:0`):
   the bottom edge lands BEHIND the dynamic toolbar, so on iPhone X and newer
   the drawer wasn't full height and its Help / Sign In footer was cut off.
   `100vh`/`100dvh` alone aren't reliable either (they can report the large
   viewport behind the collapsed URL bar). The fix: anchor to the top only and
   drive the height from the REAL visible height — `--app-dvh`, which
   mobile-v2.js sets from `window.visualViewport.height` (the one value that
   always excludes the browser chrome). `100dvh`/`100vh` remain as fallbacks
   for browsers that never set the JS variable. */
@media (max-width: 991px) {
  .mvm-drawer,
  .mvs-overlay {
    top: 0 !important;
    bottom: 0 !important;       /* anchor BOTH edges → fills the whole screen,
                                   under the notch down to the home indicator */
    height: auto !important;
    max-height: none !important;
    z-index: 2000 !important;   /* ABOVE the fixed topbar (z 95) and .mvb (z 90) */
  }
  .mvm-drawer { width: min(86vw, 400px) !important; }  /* real width, never collapsed */
  .mvm-overlay { z-index: 1999 !important; }           /* scrim covers the topbar too */
  /* The cart drawer is full-screen on phones; pad its content past the notch so
     the close button never sits under the island strip (which now paints on
     top of everything in the safe area). */
  .cart-dropdown .cart-content-wrap {
    padding-top: calc(30px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ---- 3. Keep the floating chat bubble out of the open menu --------
   #etChatWidget sits at z-index 99999 and was overlapping the drawer's
   Help / Sign In footer. Hide it whenever the menu drawer is open. */
body.mvm-no-scroll #etChatWidget {
  display: none !important;
}

/* =====================================================================
   Confirm dialog (showConfirm → .e-confirm) — these styles were missing
   project-wide, so clicking "End" on the live chat appended an invisible,
   unstyled element and nothing appeared. Styling it makes every confirm
   dialog (incl. the chat End button) work. Sits above the chat (z 99999).
   ===================================================================== */
.e-confirm {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .18s ease;
}
.e-confirm.is-visible { opacity: 1; }
.e-confirm.is-leaving { opacity: 0; }
.e-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 22, 0.55);
}
.e-confirm__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}
.e-confirm.is-visible .e-confirm__dialog { transform: none; }
.e-confirm__icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: #f1f1f4;
  color: #292930;
}
.e-confirm--warning .e-confirm__icon { background: #fff3e0; color: #b26a00; }
.e-confirm--danger  .e-confirm__icon { background: #fde8e8; color: #c0392b; }
.e-confirm--info    .e-confirm__icon { background: #e8f0fe; color: #2f6fed; }
.e-confirm__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: #292930;
}
.e-confirm__msg {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
}
.e-confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.e-confirm__btn {
  flex: 1;
  max-width: 160px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.e-confirm__btn--cancel {
  background: #f3f4f6;
  color: #292930;
  border-color: #e5e7eb;
}
.e-confirm__btn--cancel:hover { background: #e9eaed; }
.e-confirm__btn--confirm {
  background: #1a1a1f;
  color: #fff;
}
.e-confirm__btn--confirm:hover { background: #000; }
@media (max-width: 575px) {
  .e-confirm__dialog { max-width: 100%; padding: 24px 20px 18px; }
}

/* =====================================================================
   Live chat "Start new conversation" button — was a blue→pink gradient.
   Make it solid black & white to match the rest of the storefront.
   ===================================================================== */
.et-chat-newconvo-btn {
  background: #1a1a1f !important;
  color: #fff !important;
  border: 1px solid #1a1a1f !important;
  transition: background .15s ease, color .15s ease !important;
}
.et-chat-newconvo-btn:hover {
  background: #fff !important;
  color: #1a1a1f !important;
}

/* =====================================================================
   Toast above the welcome modal. The toast host was z-index 99999 but the
   discount/welcome modal backdrop is 100000, so a "Code copied!" / success
   toast was rendered BEHIND the dimmed, blurred modal and couldn't be seen.
   Lift the toast above the modal (and the confirm dialog) so it's always
   visible. ===================================================================== */
#eTradeToastHost {
  z-index: 1000002 !important;
}

/* =====================================================================
   (3) iOS Safari auto-zoom on input focus. iOS zooms the page whenever a
   focused field has font-size < 16px, and the zoom then sticks across
   navigation. Forcing >= 16px on form controls on small screens stops the
   zoom without disabling the user's pinch-zoom. Applies site-wide
   (checkout, search, order-confirmed, etc.).
   ===================================================================== */
@media (max-width: 991px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  /* keep the editorial auth fields at their design size (still >= 16px) */
  .cea-auth .cea-field__row > input { font-size: 17px !important; }
}

/* =====================================================================
   (5) "Load more" button — replace the bright pink gradient hover/active
   with the brand ink/gold so it matches the rest of the site.
   ===================================================================== */
.load-more-btn:hover:not(:disabled) {
  background: #1c1a17 !important;
  color: #fbf9f5 !important;
  border-color: #1c1a17 !important;
  box-shadow: 0 8px 20px rgba(28, 26, 23, 0.18) !important;
}
.load-more-btn:active:not(:disabled) {
  background: #a8843f !important;
  color: #fff !important;
  border-color: #a8843f !important;
}

/* =====================================================================
   (6) Active filter rows should not carry a background tint.
   ===================================================================== */
.shop-filter-row.is-checked > .shop-filter-link,
.shop-filter-link.is-active {
  background: transparent !important;
}

/* =====================================================================
   (3) Brand "Show more" modal — matches the supplied design.
   Built by pill-sidebar.js (.cbm-* markup) inside the existing
   .cl-modal-backdrop. pill-sidebar.css is compiled into the bundle, so
   these win from here. Responsive: 3 cols → 2 → 1 (full-screen on phones).
   ===================================================================== */
.cl-modal-backdrop { background: rgba(20, 24, 34, 0.55) !important; }

.cbm {
  --cbm-ink: #1a1d23; --cbm-ink-soft: #3d4148; --cbm-muted: #9aa0a8;
  --cbm-line: #e8e9ec; --cbm-line-soft: #f0f1f3; --cbm-field: #f6f7f8;
  --cbm-link: #2f6df0; --cbm-accent: #1c2230;
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  color: var(--cbm-ink);
  width: min(1120px, 100%);
  max-height: min(860px, calc(100vh - 56px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(20,24,34,.35), 0 8px 22px -12px rgba(20,24,34,.22);
  display: flex; flex-direction: column; overflow: hidden;
  animation: cbm-pop .3s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes cbm-pop { from { transform: translateY(14px) scale(.98); } to { transform: none; } }

.cbm-top {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 20px 24px 18px; border-bottom: 1px solid var(--cbm-line-soft);
}
.cbm-tab { font-size: 17px; font-weight: 700; letter-spacing: .2px; color: var(--cbm-ink); }
.cbm-close {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent;
  color: var(--cbm-ink); cursor: pointer; display: grid; place-items: center;
  transition: background .18s ease;
}
.cbm-close:hover { background: var(--cbm-field); }
.cbm-close svg { width: 18px; height: 18px; }

.cbm-body { padding: 24px 36px 6px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.cbm-toolbar { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }

.cbm-search { position: relative; flex: 1; max-width: 420px; }
.cbm-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--cbm-muted); pointer-events: none;
}
.cbm-search-input {
  width: 100%; height: 48px; padding: 0 46px; border: 1.5px solid var(--cbm-line);
  border-radius: 999px; background: var(--cbm-field);
  font-family: inherit; font-size: 15px; color: var(--cbm-ink); outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cbm-search-input::placeholder { color: var(--cbm-muted); }
.cbm-search-input:focus { background: #fff; border-color: var(--cbm-ink); box-shadow: 0 0 0 4px rgba(28,34,48,.07); }
.cbm-clear-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(.8);
  width: 30px; height: 30px; border-radius: 50%; border: none; background: #e9ebee;
  color: var(--cbm-ink-soft); cursor: pointer; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.cbm-search.has-text .cbm-clear-btn { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.cbm-clear-btn svg { width: 13px; height: 13px; }

.cbm-az {
  margin-left: auto; color: var(--cbm-link); font-size: 14px; font-weight: 600;
  background: none; border: none; cursor: pointer; border-bottom: 1.5px solid currentColor;
  padding: 0 0 1px; white-space: nowrap; font-family: inherit;
}
.cbm-az:hover { opacity: .7; }

.cbm-meta { font-size: 12.5px; color: var(--cbm-muted); letter-spacing: .3px; margin-bottom: 12px; min-height: 16px; }
.cbm-meta b { color: var(--cbm-ink-soft); font-weight: 600; }

.cbm-gridwrap { overflow-y: auto; overflow-x: hidden; margin: 0 -8px; padding: 2px 8px 18px; flex: 1; min-height: 0; }
.cbm-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 44px; row-gap: 2px; }
@media (max-width: 920px) { .cbm-grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; } }

.cbm-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 9px;
  cursor: pointer; user-select: none; transition: background .15s ease;
}
.cbm-row:hover { background: var(--cbm-field); }
.cbm-cbinput { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cbm-checkbox {
  width: 19px; height: 19px; flex: 0 0 auto; border: 1.6px solid #c8ccd2; border-radius: 5px;
  display: grid; place-items: center; transition: background .16s ease, border-color .16s ease;
}
.cbm-checkbox svg { width: 12px; height: 12px; opacity: 0; transform: scale(.4); transition: opacity .16s ease, transform .16s ease; }
.cbm-cbinput:checked + .cbm-checkbox { background: var(--cbm-accent); border-color: var(--cbm-accent); }
.cbm-cbinput:checked + .cbm-checkbox svg { opacity: 1; transform: scale(1); }
.cbm-name { flex: 1; font-size: 15px; color: var(--cbm-ink-soft); line-height: 1.3; }
.cbm-cbinput:checked ~ .cbm-name { color: var(--cbm-ink); font-weight: 600; }
.cbm-name mark { background: rgba(47,109,240,.16); color: inherit; border-radius: 3px; padding: 0 1px; }
.cbm-count { font-size: 14px; color: var(--cbm-muted); font-variant-numeric: tabular-nums; }

.cbm-empty { text-align: center; padding: 56px 20px; color: var(--cbm-muted); display: none; }
.cbm-empty.show { display: block; }
.cbm-empty-big { font-size: 16px; color: var(--cbm-ink-soft); margin-bottom: 6px; font-weight: 600; }

.cbm-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 36px 20px; border-top: 1px solid var(--cbm-line-soft);
}
.cbm-clear-all {
  background: none; border: none; color: var(--cbm-link); font-family: inherit;
  font-size: 14.5px; font-weight: 600; cursor: pointer; border-bottom: 1.5px solid currentColor; padding: 0 0 2px;
}
.cbm-clear-all:hover { opacity: .65; }
.cbm-clear-all:disabled { color: var(--cbm-muted); cursor: default; opacity: .6; border-bottom-color: transparent; }
.cbm-show {
  flex: 0 0 auto; min-width: 320px; height: 56px; border: none; border-radius: 999px;
  background: var(--cbm-accent); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: .2px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s ease, box-shadow .2s ease, transform .16s ease;
}
.cbm-show:hover { background: #11151f; box-shadow: 0 10px 24px -10px rgba(17,21,31,.55); }
.cbm-show:active { transform: scale(.985); }
.cbm-pill {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px; background: rgba(255,255,255,.18); font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cbm-show.has-sel .cbm-pill { background: rgba(255,255,255,.28); }

/* ── Phone: full-screen modal, single column, larger touch targets ── */
@media (max-width: 760px) {
  .cl-modal-backdrop { padding: 0 !important; }
  .cbm {
    border-radius: 0; width: 100%;
    height: 100vh; height: 100dvh; height: var(--app-dvh, 100dvh);
    max-height: none;
  }
  .cbm-top { padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px; }
  .cbm-body { padding: 16px 16px 4px; }
  .cbm-toolbar { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 14px; }
  .cbm-search { max-width: none; }
  .cbm-search-input { height: 52px; font-size: 16px; }   /* 16px = no iOS zoom */
  .cbm-az { margin-left: 0; align-self: flex-start; }
  .cbm-grid { grid-template-columns: 1fr; column-gap: 0; }
  .cbm-row { padding: 14px 8px; min-height: 52px; }
  .cbm-name { font-size: 16px; }
  .cbm-foot {
    flex-direction: column-reverse; gap: 12px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .cbm-show { width: 100%; min-width: 0; }
  .cbm-clear-all { align-self: center; }
}

/* ---- Brand modal: re-assert the design over the theme's global form rules.
   The bundle sets `input,button,select,textarea{width:100%}` and
   `input[type=text]{line-height:60px;border;border-radius;padding;background}`,
   both of which out-specify the plain .cbm-* classes — that stretched the
   "View A–Z" button and "Show Results" to full width and stripped the search
   field's pill. These higher-specificity rules restore the intended look. ---- */
.cbm .cbm-az,
.cbm .cbm-clear-all,
.cbm .cbm-show { width: auto; }

.cbm input.cbm-search-input {
  width: 100%;
  height: 48px;
  line-height: normal;
  padding: 0 46px;
  border: 1.5px solid var(--cbm-line);
  border-radius: 999px;
  background: var(--cbm-field);
  font-size: 15px;
  color: var(--cbm-ink);
  box-shadow: none;
}
.cbm input.cbm-search-input:focus {
  background: #fff;
  border-color: var(--cbm-ink);
  box-shadow: 0 0 0 4px rgba(28, 34, 48, 0.07);
}
@media (max-width: 760px) {
  .cbm input.cbm-search-input { height: 52px; font-size: 16px; }
  .cbm .cbm-show { width: 100%; }   /* full-width CTA on phones */
}

/* =====================================================================
   (4) Footer bottom padding doubling on iPhone (home-indicator area).
   Safari adds its own bottom inset; combined with the footer's existing
   padding it left a big white gap. max() collapses the two into one so
   the footer ends cleanly at the gesture bar instead of leaving a band.
   ===================================================================== */
@media (max-width: 991px) {
  .axil-footer-area .copyright-area {
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }
  /* The footer's last colour fills the home-indicator strip so there is no
     stray white sliver beneath it. */
  .axil-footer-area { background: #fff; }
}

/* =====================================================================
   FIXED + CONDENSING HEADER — SAFARI ONLY (item 7). Chrome and other
   mobile browsers keep a normal scrolling header (mobile-v2.js only adds
   `html.cea-safari` for Safari, and only reserves the spacer there).
   In Safari the header is position:fixed; on scroll it gets `.is-condensed`
   (mobile-v2.js): the promo strip slides up and the topbar pins to the top,
   animated so it "cuts" to fixed.
   ===================================================================== */
@media (max-width: 991px) {
  html.cea-safari header.axil-header,
  html.cea-safari header.header.axil-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 95 !important;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  }
  /* condensed: slide the promo strip up out of view, topbar pins to top */
  html.cea-safari header.axil-header.is-condensed {
    transform: translateY(calc(-1 * var(--cea-promo-h, 38px)));
  }
  .mvb-header-spacer { width: 100%; flex: 0 0 auto; }
  /* topbar no longer sticks on its own (header handles pinning in Safari) */
  .mvb {
    position: static !important;
    transition: padding-top .3s cubic-bezier(.4, 0, .2, 1);
  }
  /* when pinned at the very top, give the topbar safe-area padding so its
     logo/icons clear the notch / dynamic island */
  html.cea-safari header.axil-header.is-condensed .mvb {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

/* =====================================================================
   (7) Scroll-lock WITHOUT position:fixed on <body>.
   The theme's lock set `body{position:fixed}`, which in iOS Safari makes
   position:fixed children resolve against the body box instead of the
   viewport — so the drawer slipped below the dynamic island and ran under
   the bottom bar. We lock with overflow:hidden + a JS touchmove guard
   instead, so the drawer stays truly viewport-fixed (top:0 / bottom:0 =
   under the island, down to the home indicator).
   ===================================================================== */
@media (max-width: 991px) {
  body.mvm-no-scroll,
  body.mvs-no-scroll {
    position: static !important;
    width: auto !important;
    top: auto !important;
    overflow: hidden !important;
  }
  html.cea-locked { overflow: hidden !important; }

  /* (3) Carousels: let horizontal swipes go to the slider and vertical to the
     page, so swiping the product/hero carousels is no longer "sticky". */
  .slick-list,
  .slick-track { touch-action: pan-y; }
  .slick-slide { -webkit-user-select: none; user-select: none; }

  /* (4) Empty-cart block: a clean, horizontally-centred block like the
     sidebar drawer's empty state — NOT stretched to full height. */
  td.cart-empty-cell {
    display: table-cell;
    text-align: center;
    padding: 56px 16px !important;
    vertical-align: middle;
  }
  td.cart-empty-cell i { display: block; margin: 0 auto 12px; }
}

/* =====================================================================
   Checkout — Shipping method + hotel delivery. New design, fully scoped
   under .cea-ship so the generic class names (.opt, .field, .price, .tag,
   .summary, .radio …) can never leak into the rest of the site.
   ===================================================================== */
.cea-ship {
  --cs-ink:#111114; --cs-ink-soft:#3a3a40; --cs-muted:#8a8a92; --cs-faint:#b6b6bd;
  --cs-line:#e7e7ea; --cs-line2:#ededf0; --cs-fill:#fafafa; --cs-fill2:#f5f5f6;
  --cs-ease:cubic-bezier(.22,.61,.36,1);
  color:var(--cs-ink);
}
/* STANDARD / HOTEL badge added into the section header */
.cea-ship-meta {
  margin-left:auto; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cs-faint); font-weight:500;
}
.checkout-section-title.cea-has-ship-meta { display:flex; align-items:center; gap:12px; }

/* Tourist toggle */
.cea-ship .tourist {
  display:flex; align-items:center; gap:18px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; padding:18px 2px; margin:0 0 26px;
  border-top:1px solid var(--cs-line2); border-bottom:1px solid var(--cs-line2);
  font:inherit; color:inherit; -webkit-appearance:none;
}
.cea-ship .tg-box {
  width:24px; height:24px; border-radius:7px; flex:none; border:1.5px solid var(--cs-faint);
  background:#fff; position:relative; transition:border-color .25s var(--cs-ease), background .25s var(--cs-ease);
}
.cea-ship .tg-box svg {
  position:absolute; inset:0; margin:auto; width:14px; height:14px; stroke:#fff; stroke-width:2.4;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:22; stroke-dashoffset:22; transition:stroke-dashoffset .32s var(--cs-ease) .04s;
}
.cea-ship .tg-text { display:flex; flex-direction:column; gap:3px; }
.cea-ship .tg-label { font-size:16px; font-weight:600; color:var(--cs-ink); letter-spacing:-.005em; }
.cea-ship .tg-sub { font-size:12.5px; color:var(--cs-muted); }
.cea-ship .tg-state {
  margin-left:auto; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cs-faint); font-weight:600; transition:color .2s var(--cs-ease);
}
.cea-ship .tourist[aria-pressed="true"] .tg-box { background:var(--cs-ink); border-color:var(--cs-ink); }
.cea-ship .tourist[aria-pressed="true"] .tg-box svg { stroke-dashoffset:0; }
.cea-ship .tourist[aria-pressed="true"] .tg-state { color:var(--cs-ink); }

/* Option list */
.cea-ship .opts { display:flex; flex-direction:column; gap:12px; }
.cea-ship .opt {
  display:flex; align-items:center; gap:18px; border:1px solid var(--cs-line); border-radius:12px;
  padding:20px 24px; cursor:pointer; background:#fff; margin:0;
  transition:border-color .22s var(--cs-ease), background .22s var(--cs-ease), box-shadow .22s var(--cs-ease);
}
.cea-ship .opt:hover { border-color:#d3d3d8; background:var(--cs-fill); }
.cea-ship .opt.sel { border-color:var(--cs-ink); background:var(--cs-fill2); box-shadow:inset 0 0 0 1px var(--cs-ink); }
.cea-ship .radio {
  width:20px; height:20px; border-radius:50%; flex:none; border:1.5px solid var(--cs-faint);
  position:relative; background:#fff; transition:border-color .22s var(--cs-ease);
}
.cea-ship .radio::after {
  content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; border-radius:50%;
  background:var(--cs-ink); transform:scale(0); transition:transform .24s var(--cs-ease);
}
.cea-ship .opt.sel .radio { border-color:var(--cs-ink); }
.cea-ship .opt.sel .radio::after { transform:scale(1); }
.cea-ship .opt-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.cea-ship .opt-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cea-ship .opt-name { font-size:15.5px; font-weight:600; color:var(--cs-ink); letter-spacing:-.005em; }
.cea-ship .opt-sub { font-size:13px; color:var(--cs-muted); }
.cea-ship .tag {
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--cs-ink-soft); border:1px solid var(--cs-line); border-radius:100px;
  padding:4px 10px 3px; white-space:nowrap; background:#fff;
}
.cea-ship .opt.sel .tag { border-color:#cfcfd4; }
.cea-ship .price {
  margin-left:auto; font-size:15px; font-weight:600; color:var(--cs-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cea-ship .price.free { font-size:12px; letter-spacing:.14em; text-transform:uppercase; }

/* Hotel details form */
.cea-ship .hotel-form {
  margin-top:26px; padding-top:30px; border-top:1px solid var(--cs-line2);
  opacity:0; transform:translateY(8px); transition:opacity .45s var(--cs-ease), transform .45s var(--cs-ease);
}
.cea-ship .hotel-form.show { opacity:1; transform:none; }
.cea-ship .concierge { display:flex; gap:14px; align-items:flex-start; margin-bottom:28px; }
.cea-ship .concierge .glyph {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--cs-line);
  display:grid; place-items:center; flex:none; margin-top:2px;
}
.cea-ship .concierge .glyph svg { width:17px; height:17px; stroke:var(--cs-ink-soft); fill:none; stroke-width:1.4; }
.cea-ship .concierge .ctext { display:flex; flex-direction:column; gap:6px; }
.cea-ship .concierge .clabel { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cs-faint); font-weight:600; }
.cea-ship .concierge .cnote {
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:19px;
  line-height:1.4; color:var(--cs-ink-soft); max-width:64ch;
}
.cea-ship .grid { display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; }
.cea-ship .field { display:flex; flex-direction:column; gap:9px; }
.cea-ship .field.full { grid-column:1 / -1; }
.cea-ship .field label {
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--cs-muted);
  font-weight:600; display:flex; align-items:center; gap:5px;
}
.cea-ship .field label .req { color:var(--cs-faint); font-weight:500; }
.cea-ship .field input {
  border:0; border-bottom:1.5px solid var(--cs-line); background:transparent; border-radius:0;
  padding:8px 2px 11px; font:inherit; font-size:15px; color:var(--cs-ink);
  transition:border-color .22s var(--cs-ease);
}
.cea-ship .field input::placeholder { color:var(--cs-faint); }
.cea-ship .field input:focus { outline:none; border-bottom-color:var(--cs-ink); box-shadow:none; }

/* Selected summary */
.cea-ship .summary {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:30px; padding-top:24px; border-top:1px solid var(--cs-line2);
  font-size:13.5px; color:var(--cs-ink-soft);
}
.cea-ship .summary .s-key { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cs-faint); font-weight:600; }
.cea-ship .summary .dot { width:3px; height:3px; border-radius:50%; background:var(--cs-faint); }
.cea-ship .summary b { font-weight:600; color:var(--cs-ink); }
.cea-ship .summary .s-price { margin-left:auto; font-weight:600; color:var(--cs-ink); font-variant-numeric:tabular-nums; }

@media (max-width:640px){
  .cea-ship .grid { grid-template-columns:1fr; }
  .cea-ship .opt { padding:18px; gap:14px; }
  .cea-ship .summary .s-price { margin-left:0; width:100%; }
  .cea-ship .concierge .cnote { font-size:17px; }
  .cea-ship .tg-label { font-size:15px; }
}

/* =====================================================================
   My-account address modal — hotel-delivery option (classes only present
   on my-account.html).
   ===================================================================== */
.addr-hotel-row { margin-top:4px; }
.addr-hotel-check { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:#1c1a17; }
.addr-hotel-check input { width:auto; }
.addr-hotel-fields { margin-top:14px; padding:14px; border:1px solid #e7e0d4; border-radius:12px; background:#faf7f1; }
.addr-hotel-fields[hidden] { display:none !important; }
.addr-hotel-note { margin:0 0 12px; font-size:13px; line-height:1.5; color:#6f675c; }

/* Wishlist empty state — rendered as a full-width block OUTSIDE the table so
   it always centres in the viewport (the table can scroll horizontally). */
.wishlist-empty-block {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; width:100%; padding:60px 20px; color:#777;
}
.wishlist-empty-block i { font-size:42px; color:#ddd; margin-bottom:14px; line-height:1; }
.wishlist-empty-block p { margin:0 0 18px; font-size:16px; }
.wishlist-empty-block .axil-btn { display:inline-block; }