/* -----------------------------------------------------------------------
 *  gw-shop overlay stylesheet
 *  Dropped into every page to style the cart drawer + checkout / order
 *  pages. Kept self-contained so it never clashes with the static UI.
 * --------------------------------------------------------------------- */

/* ---- base tokens (pulled from original Ledger site) ---- */
:root {
  --gw-ink:      #0a0a0a;
  --gw-ink-2:    #1a1a1a;
  --gw-ink-3:    #3a3a3a;
  --gw-muted:    #767676;
  --gw-line:     #e5e5e5;
  --gw-line-2:   #dddddd;
  --gw-bg:       #ffffff;
  --gw-bg-soft:  #f7f7f7;
  --gw-bg-dark:  #0a0a0a;
  --gw-accent:   #0a0a0a;        /* text-on-white actions */
  --gw-accent-2: #3f5af0;        /* ledger blue accent */
  --gw-success:  #10b981;
  --gw-danger:   #e11d48;
  --gw-radius:   0px;            /* Ledger design: crisp corners */
  --gw-radius-s: 2px;
  --gw-font:     "Inter", "HelveticaNeue", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---- shared utility ---- */
.gw-hidden { display: none !important; }
.gw-visually-hidden {
  position: absolute !important; clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Cart drawer (slides in from the right; sits above everything)
 * ------------------------------------------------------------- */
.gw-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 10, 0.48);
  z-index: 2147483645;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.gw-drawer-backdrop.gw-open { opacity: 1; pointer-events: auto; }

.gw-drawer {
  position: fixed; top: 0; right: 0;
  width: min(480px, 100vw); height: 100vh;
  background: var(--gw-bg);
  color: var(--gw-ink);
  z-index: 2147483646;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,.0,.2,1);
  display: flex; flex-direction: column;
  font-family: var(--gw-font);
  box-shadow: -24px 0 60px rgba(0,0,0,.18);
}
.gw-drawer.gw-open { transform: translateX(0); }

.gw-drawer__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gw-line);
  display: flex; align-items: center; justify-content: space-between;
}
.gw-drawer__title {
  font-size: 18px; font-weight: 600; margin: 0;
  letter-spacing: -.01em;
}
.gw-drawer__close {
  background: none; border: 0; padding: 6px; cursor: pointer;
  color: var(--gw-ink-3); font-size: 20px; line-height: 1;
}
.gw-drawer__close:hover { color: var(--gw-ink); }

.gw-drawer__body {
  flex: 1; overflow-y: auto; padding: 0 24px;
}
.gw-drawer__body::-webkit-scrollbar { width: 6px; }
.gw-drawer__body::-webkit-scrollbar-thumb { background: var(--gw-line-2); border-radius: 4px; }

.gw-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px; padding: 18px 0;
  border-bottom: 1px solid var(--gw-line);
  align-items: center;
}
.gw-cart-item:last-child { border-bottom: 0; }
.gw-cart-item__img {
  width: 72px; height: 72px; object-fit: contain;
  background: var(--gw-bg-soft);
}
.gw-cart-item__title {
  margin: 0 0 4px; font-size: 14px; font-weight: 500;
  color: var(--gw-ink); line-height: 1.35;
}
.gw-cart-item__meta { font-size: 12px; color: var(--gw-muted); }
.gw-cart-item__remove {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gw-danger);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.gw-cart-item__price { font-size: 14px; font-weight: 600; white-space: nowrap; }

.gw-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--gw-line-2);
  margin-top: 6px;
}
.gw-qty button {
  width: 28px; height: 28px; border: 0; background: transparent;
  cursor: pointer; color: var(--gw-ink-3); font-size: 14px;
}
.gw-qty button:hover { color: var(--gw-ink); }
.gw-qty .gw-qty__n {
  min-width: 28px; text-align: center; font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.gw-empty {
  padding: 48px 0; text-align: center; color: var(--gw-muted);
  font-size: 14px;
}
.gw-empty p { margin: 0 0 18px; }

/* ---- upsell / add-on (Coincover-style card) ---- */
.gw-addon {
  margin: 16px 0 0; padding: 16px;
  border: 1px solid var(--gw-line);
  background: var(--gw-bg-soft);
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px;
  align-items: center;
}
.gw-addon__icon {
  width: 40px; height: 40px; background: #fff;
  border: 1px solid var(--gw-line-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.gw-addon__title {
  font-size: 13px; font-weight: 600; margin: 0 0 2px;
}
.gw-addon__desc { font-size: 12px; color: var(--gw-muted); margin: 0; line-height: 1.4; }
.gw-addon__btn {
  border: 1px solid var(--gw-ink); background: transparent;
  padding: 6px 12px; font-size: 12px; cursor: pointer;
  color: var(--gw-ink); white-space: nowrap;
}
.gw-addon__btn.gw-on { background: var(--gw-ink); color: #fff; }

/* ---- drawer footer (total + checkout button) ---- */
.gw-drawer__foot {
  padding: 20px 24px;
  border-top: 1px solid var(--gw-line);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--gw-bg);
}
.gw-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px;
}
.gw-total__amount { font-size: 18px; font-weight: 700; }
.gw-total__hint { font-size: 12px; color: var(--gw-muted); }

.gw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px; border: 1px solid var(--gw-ink);
  background: var(--gw-ink); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: opacity .15s ease;
  font-family: var(--gw-font);
}
.gw-btn:hover { opacity: .88; }
.gw-btn[disabled] { opacity: .5; cursor: not-allowed; }
.gw-btn--ghost {
  background: transparent; color: var(--gw-ink);
}
.gw-btn--block { width: 100%; }

/* ---------------------------------------------------------------
 * Checkout page  (left: form, right: order summary)
 * ------------------------------------------------------------- */
.gw-checkout {
  font-family: var(--gw-font);
  background: var(--gw-bg);
  color: var(--gw-ink);
  min-height: 100vh;
}
.gw-checkout__topbar {
  border-bottom: 1px solid var(--gw-line);
  padding: 16px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.gw-checkout__logo {
  font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  color: var(--gw-ink); text-decoration: none;
}
.gw-checkout__topbar small { color: var(--gw-muted); font-size: 12px; }

.gw-checkout__layout {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 480px;
  gap: 48px; padding: 40px 32px 80px;
}
@media (max-width: 900px) {
  .gw-checkout__layout { grid-template-columns: 1fr; padding: 24px 16px 48px; }
}

.gw-section { margin-bottom: 32px; }
.gw-section h2 {
  font-size: 16px; font-weight: 600; margin: 0 0 14px;
  letter-spacing: -.01em;
}
.gw-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 560px) { .gw-grid-2 { grid-template-columns: 1fr; } }

.gw-field { display: flex; flex-direction: column; gap: 6px; }
.gw-field label {
  font-size: 12px; color: var(--gw-muted);
}
.gw-field input,
.gw-field select,
.gw-field textarea {
  border: 1px solid var(--gw-line-2);
  padding: 12px 14px; font-size: 14px;
  font-family: var(--gw-font);
  background: #fff; color: var(--gw-ink);
  transition: border-color .15s ease;
}
.gw-field input:focus,
.gw-field select:focus,
.gw-field textarea:focus {
  outline: none; border-color: var(--gw-ink);
}
.gw-field .gw-err { font-size: 11px; color: var(--gw-danger); }

.gw-summary {
  border: 1px solid var(--gw-line);
  padding: 24px;
  background: var(--gw-bg-soft);
  position: sticky; top: 24px;
  align-self: start;
  display: flex; flex-direction: column; gap: 16px;
}
.gw-summary h2 { margin: 0; font-size: 14px; text-transform: uppercase;
  color: var(--gw-muted); font-weight: 600; letter-spacing: .04em; }

.gw-summary__items {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.gw-summary__item {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 12px; align-items: center;
}
.gw-summary__thumb {
  position: relative; width: 56px; height: 56px;
  background: #fff; border: 1px solid var(--gw-line-2);
}
.gw-summary__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gw-summary__badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: #767676; color: #fff; border-radius: 9px;
  font-size: 11px; line-height: 18px; text-align: center;
}
.gw-summary__title { font-size: 13px; margin: 0 0 2px; }
.gw-summary__price { font-size: 13px; font-weight: 600; white-space: nowrap; }

.gw-totals {
  border-top: 1px solid var(--gw-line); padding-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.gw-totals__row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--gw-ink-3);
}
.gw-totals__row--grand {
  font-size: 18px; color: var(--gw-ink); font-weight: 700;
  padding-top: 8px; border-top: 1px solid var(--gw-line);
}

.gw-error-bar {
  padding: 12px 14px; background: #fef2f2;
  border: 1px solid #fecaca; color: var(--gw-danger);
  font-size: 13px; margin-bottom: 16px;
}

/* ---------------------------------------------------------------
 * Order success page
 * ------------------------------------------------------------- */
.gw-order-wrap {
  max-width: 720px; margin: 0 auto; padding: 80px 24px;
  font-family: var(--gw-font);
}
.gw-order-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--gw-bg-soft); color: var(--gw-ink-3);
  border: 1px solid var(--gw-line-2);
}
.gw-order-status.gw-is-paid { color: var(--gw-success); border-color: var(--gw-success); }
.gw-order-status.gw-is-failed { color: var(--gw-danger); border-color: var(--gw-danger); }

.gw-order-card {
  margin-top: 28px;
  border: 1px solid var(--gw-line);
  padding: 28px; background: #fff;
}
.gw-order-card h1 {
  font-size: 26px; letter-spacing: -.02em; margin: 0 0 6px;
}
.gw-order-card p { color: var(--gw-ink-3); margin: 0; }

.gw-kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin-top: 20px; font-size: 14px; }
.gw-kv dt { color: var(--gw-muted); }
.gw-kv dd { margin: 0; color: var(--gw-ink); }

/* ---- toast (top-center) ---- */
.gw-toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px);
  background: var(--gw-ink); color: #fff;
  padding: 10px 18px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
  z-index: 2147483647; font-family: var(--gw-font);
  pointer-events: none;
}
.gw-toast.gw-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------
 * Cookie consent — OneTrust (and any generic consent dialog)
 * Force the banner to stick to the bottom of the viewport instead
 * of floating as a centered modal. Kill the page-dimming backdrop
 * so the rest of the site stays usable while the banner is visible.
 * ------------------------------------------------------------- */

/* OneTrust backdrop / dim layer — remove */
.onetrust-pc-dark-filter,
#onetrust-pc-dark-filter,
body .ot-floating-button,
body .ot-fade-in,
body .ot-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}
.onetrust-pc-dark-filter.ot-fade-in,
#onetrust-pc-dark-filter.ot-fade-in { opacity: 0 !important; }

/* OneTrust main banner — pin to bottom, full width, card-like */
#onetrust-banner-sdk,
#onetrust-consent-sdk #onetrust-banner-sdk {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  transform: none !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12) !important;
  border-top: 1px solid var(--gw-line, #e5e5e5) !important;
  z-index: 2147483600 !important;
  font-family: var(--gw-font, "Inter", sans-serif) !important;
}

/* Inner flex row: text on the left, buttons on the right */
#onetrust-banner-sdk .ot-sdk-container,
#onetrust-banner-sdk .ot-sdk-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
}
#onetrust-banner-sdk #onetrust-group-container,
#onetrust-banner-sdk #onetrust-policy {
  flex: 1 1 420px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#onetrust-banner-sdk #onetrust-policy-text,
#onetrust-banner-sdk .ot-b-addl-desc {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #3a3a3a !important;
}
#onetrust-banner-sdk #onetrust-button-group-parent {
  position: static !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
#onetrust-banner-sdk #onetrust-button-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  width: auto !important;
}
#onetrust-banner-sdk #onetrust-button-group button {
  /* OneTrust default CSS ships `position: absolute; left: 0; top: 0` on
     each CTA, which — once we took ownership of the layout above — causes
     every button to stack on the same top-left corner of the row (the
     "接受所有 Cookie" sitting on top of "全部拒绝" symptom). Force
     each button back into the normal flow so the parent flex row can
     actually distribute them with its `gap`. Reset float too in case an
     older OneTrust build falls back to `float: left` on older browsers. */
  position: static !important;
  float: none !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: 2px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Accept = solid black, Reject / Settings = outlined */
#onetrust-banner-sdk #onetrust-accept-btn-handler {
  background: #0a0a0a !important;
  border: 1px solid #0a0a0a !important;
  color: #fff !important;
}
#onetrust-banner-sdk #onetrust-accept-btn-handler:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}
#onetrust-banner-sdk #onetrust-reject-all-handler,
#onetrust-banner-sdk #onetrust-pc-btn-handler {
  background: #ffffff !important;
  border: 1px solid #0a0a0a !important;
  color: #0a0a0a !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#onetrust-banner-sdk #onetrust-reject-all-handler:hover,
#onetrust-banner-sdk #onetrust-pc-btn-handler:hover {
  background: #f5f5f5 !important;
}

/* Close (×) keep corner-docked */
#onetrust-banner-sdk .ot-close-icon,
#onetrust-banner-sdk #onetrust-close-btn-container button {
  top: 10px !important;
  right: 14px !important;
}

/* Mobile: stack text over buttons, buttons full-width */
@media (max-width: 720px) {
  #onetrust-banner-sdk { padding: 14px 16px !important; }
  #onetrust-banner-sdk .ot-sdk-container,
  #onetrust-banner-sdk .ot-sdk-row { flex-direction: column !important; align-items: stretch !important; }
  #onetrust-banner-sdk #onetrust-button-group { width: 100% !important; }
  #onetrust-banner-sdk #onetrust-button-group button { flex: 1 1 auto !important; min-width: 0 !important; }
}

/* Generic fallback: any dialog containing the word "Cookie" that is
   centered via inline style — we can't target OneTrust-only variants,
   but we can re-dock any fixed dialog whose class hints "cookie". */
body > div[class*="cookie" i][class*="banner" i],
body > div[class*="cookie" i][class*="consent" i],
body > div[id*="cookie" i][id*="banner" i],
body > div[id*="cookie" i][id*="consent" i] {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ===================================================================
 * icomoon 字体缺失回退
 * --------------------------------------------------------------------
 * 原站用 Private-Use-Area 字符 + icomoon 字体来渲染 .icon-* 图标和
 *  .button::after / .read-more::after 的小箭头。仓库里的 icomoon.ttf
 *  是 90 字节的占位符，导致全部图标渲染成 “缺字符豆腐块 □”。
 * 这里用 SVG mask + currentColor 统一替换，颜色会自动跟随父元素文字。
 * =================================================================*/

/* 公共 util：把伪元素改成正方形色块，用 mask 裁出 SVG 形状 */
.icon-shield-security::before,
.button:not(:empty):not(.no-icon)::after,
.read-more:not(.reverse)::after,
.read-more.reverse::before {
  content: "" !important;
  font-family: inherit !important; /* 避免保留 icomoon 的豆腐块宽度 */
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  display: inline-block;
  vertical-align: middle;
}

/* 右箭头（→）用于 .button::after / .read-more::after */
.button:not(:empty):not(.no-icon)::after,
.read-more:not(.reverse)::after,
.read-more.reverse::before {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8h10M8.5 3.5L13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8h10M8.5 3.5L13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.read-more.reverse::before {
  transform: rotate(180deg);
  margin: 0 6px 0 0;
}

/* 盾牌（.icon-shield-security — 首页 “零黑客攻击” 那个图标） */
.icon-shield-security::before {
  width: 32px;
  height: 32px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4l16 6v12c0 10-7 18.5-16 22-9-3.5-16-12-16-22V10l16-6z' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><path d='M16 24l6 6 12-12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4l16 6v12c0 10-7 18.5-16 22-9-3.5-16-12-16-22V10l16-6z' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><path d='M16 24l6 6 12-12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 通用兜底：凡是 icomoon 类但未被上面显式覆盖的，至少别保留豆腐块 */
[class^="icon-"]:not(.icon-shield-security):not([class*=" icon-shield-security"])::before,
[class*=" icon-"]:not(.icon-shield-security):not([class*=" icon-shield-security"])::before {
  font-family: inherit !important;
  content: "" !important;
}

/* gw-price is injected by hijack.js into [data-testid="priceDisplay"] to
   replace Shopify's client-side loading spinner with the price resolved
   by our gateway. We inherit typography so it matches whatever skin the
   surrounding Next.js component is using (hero / sticky-nav / compare). */
.gw-price {
  display: inline-block;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
[data-testid="priceDisplay"] > [role="status"],
[data-testid="priceDisplay"] [data-testid="price-display__loading"] {
  min-width: 72px;
  min-height: 1em;
  color: transparent !important;
}
[data-testid="priceDisplay"] > [role="status"] svg,
[data-testid="priceDisplay"] [data-testid="price-display__loading"] svg {
  opacity: 0.25;
}
[data-testid="priceDisplay"][data-gw-price] > [role="status"],
[data-testid="priceDisplay"][data-gw-price] [data-testid="price-display__loading"] {
  display: none !important;
}

/* ---------------------------------------------------------------
 * Mobile safety net
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  .gw-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .gw-drawer__head,
  .gw-drawer__body,
  .gw-drawer__foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .gw-cart-item {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
  }

  .gw-cart-item__img {
    width: 60px;
    height: 60px;
  }

  .gw-cart-item__price {
    grid-column: 2;
    justify-self: start;
  }

  .gw-addon {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .gw-addon__btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .gw-toast {
    left: 16px;
    right: 16px;
    transform: translateY(-20px);
    text-align: center;
  }

  .gw-toast.gw-show {
    transform: translateY(0);
  }

  [data-testid="priceDisplay"] {
    min-width: 0 !important;
  }

  .gw-price {
    max-width: 100%;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------
 * Gateway-owned mobile navigation fallback
 * ------------------------------------------------------------- */
@media (max-width: 1199px) {
  .burger-menu {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .navigation.navigation--mobile {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--gw-mobile-nav-top, 104px);
    bottom: 0;
    z-index: 2147483000;
    background: #fff;
    color: #0a0a0a;
    overflow: hidden;
    font-family: var(--gw-font);
  }

  html.gw-mobile-nav-open .navigation.navigation--mobile {
    display: flex !important;
    flex-direction: column;
  }

  .navigation--mobile .navigation__tabs {
    display: flex !important;
    flex: 0 0 auto;
    overflow-x: auto;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    scrollbar-width: none;
  }

  .navigation--mobile .navigation__tabs::-webkit-scrollbar { display: none; }
  .navigation--mobile .navigation__tabs > div { flex: 0 0 auto; border-right: 1px solid #e5e5e5; }

  .navigation--mobile .navigation__tabs__trigger,
  .navigation--mobile .navigation__tabs__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 0 24px;
    border: 0;
    background: transparent;
    color: #0a0a0a !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }

  .navigation--mobile .navigation__tabs__trigger.active { box-shadow: inset 0 -2px #ff5a1f; }

  .navigation--mobile .navigation__tabs__content {
    display: none !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 18px 36px;
    background: #fff;
  }

  .navigation--mobile .navigation__tabs__content.active { display: block !important; }

  .navigation--mobile .navigation-sections__primary__items {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .navigation--mobile .has-fixed-shadow {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 92px;
    padding: 12px;
    border: 1px solid #e5e5e5;
    color: #0a0a0a !important;
    text-decoration: none;
    background: #fafafa;
  }

  .navigation--mobile .visual-container,
  .navigation--mobile .visual {
    width: 76px !important;
    height: 68px !important;
    min-width: 76px;
  }

  .navigation--mobile .visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .navigation--mobile .shadow { display: none !important; }
  .navigation--mobile .texts p { margin: 0; color: #0a0a0a !important; }
  .navigation--mobile .text-body-highlight { font-weight: 700; }
  .navigation--mobile .text-caption { margin-top: 4px; color: #666 !important; }

  .navigation--mobile .navigation-sections__secondary__items .container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }

  .navigation--mobile .navigation-sections__secondary__items a {
    color: #0a0a0a !important;
    text-decoration: none;
  }
}

@media (max-width: 768px) {
  .navigation.navigation--mobile { top: 132px; }

  header#header.gw-mobile-nav-open {
    background: #fff !important;
    color: #0a0a0a !important;
  }

  header#header.gw-mobile-nav-open .hamburger path,
  header#header.gw-mobile-nav-open svg path {
    stroke: #0a0a0a !important;
  }
}

/* Language switcher fallback for static Next/Radix comboboxes. */
.gw-lang-menu {
  display: none;
  min-width: 168px;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  z-index: 2147483001;
}
.gw-lang-menu--fixed {
  position: fixed;
}
.gw-lang-menu.gw-open { display: grid; gap: 2px; }
.gw-lang-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #0a0a0a !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.gw-lang-menu a:hover { background: #f3f3f3; }

/* Keep testimonial author meta anchored per card even if swiper base CSS
   fails to load, preventing stacked/overlapped usernames near avatars. */
.testimonials-block .swiper-slide {
  position: relative;
}

/* Header top-banner arrow fallback:
   the captured theme uses icon-font glyphs in :after. When icon font files
   fail or are cached inconsistently, users see tofu boxes. Force plain text
   arrows so all locales/pages render consistently. */
.header-top-banner--container .row .header-top-banner--text p:after,
.header-top-banner--container .row .header-top-banner--button span:after {
  content: " →" !important;
  font-family: inherit !important;
}

/* Product page nav interaction fix:
   keep main header navigation above commerce sticky bars so
   Products/Wallet dropdown remains clickable after language switch/scroll. */
nav[aria-label="Main"] {
  z-index: 1200 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
nav[aria-label="Main"] .navigation__item__content,
nav[aria-label="Main"] .navigation__item__content__container {
  z-index: 1210 !important;
}
main > nav {
  z-index: 200 !important;
}

/* Independent mobile menu trigger/panel injected by hijack.js. This bypasses
   the captured theme burger when its click area is broken or swallowed. */
.gw-mobile-menu-trigger,
.gw-mobile-menu-panel {
  display: none !important;
}

@media (max-width: 1199px) {
  .gw-native-burger-hidden {
    display: none !important;
  }

  .gw-mobile-menu-trigger {
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    margin-left: 8px;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    position: relative;
    z-index: 2147483600;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    color: inherit !important;
  }

  nav .gw-mobile-menu-trigger,
  header .gw-mobile-menu-trigger {
    color: inherit !important;
  }

  .gw-mobile-menu-trigger span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }

  .gw-mobile-menu-trigger.gw-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .gw-mobile-menu-trigger.gw-active span:nth-child(2) { opacity: 0; }
  .gw-mobile-menu-trigger.gw-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .gw-mobile-menu-panel {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--gw-mobile-menu-top, 132px);
    bottom: 0;
    z-index: 2147483500;
    background: #fff;
    color: #0a0a0a;
    overflow: hidden;
    padding-top: 0;
    font-family: var(--gw-font);
  }

  html.gw-mobile-menu-open .gw-mobile-menu-panel {
    display: flex !important;
    flex-direction: column;
  }

  html.gw-mobile-menu-open header#header,
  html.gw-mobile-menu-open nav.gw-mobile-menu-open {
    background: #fff !important;
    color: #0a0a0a !important;
    z-index: 2147483601 !important;
  }

  html.gw-mobile-menu-open nav.gw-mobile-menu-open {
    position: sticky !important;
    top: 0 !important;
    background: #000 !important;
    color: #fff !important;
  }

  .gw-mobile-menu-panel__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .gw-mobile-menu-panel .navigation__tabs {
    display: flex !important;
    flex: 0 0 auto;
    overflow-x: auto;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    scrollbar-width: none;
  }

  .gw-mobile-menu-panel .navigation__tabs::-webkit-scrollbar { display: none; }
  .gw-mobile-menu-panel .navigation__tabs > div { flex: 0 0 auto; border-right: 1px solid #e5e5e5; }

  .gw-mobile-menu-panel .navigation__tabs__trigger,
  .gw-mobile-menu-panel .navigation__tabs__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0 22px;
    border: 0;
    background: transparent;
    color: #0a0a0a !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
  }

  .gw-mobile-menu-panel .navigation__tabs__trigger.active { box-shadow: inset 0 -2px #ff5a1f; }

  .gw-mobile-menu-panel .navigation__tabs__content {
    display: none !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 16px 40px;
    background: #fff;
  }

  .gw-mobile-menu-panel .navigation__tabs__content.active { display: block !important; }

  .gw-mobile-menu-panel .navigation-sections__primary,
  .gw-mobile-menu-panel .navigation-sections--tablet,
  .gw-mobile-menu-panel .navigation-sections,
  .gw-mobile-menu-panel .navigation-sections__secondary,
  .gw-mobile-menu-panel .navigation-sections__secondary__container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
  }

  .gw-mobile-menu-panel .heading-6 {
    display: block !important;
    margin: 0 0 14px !important;
    color: #0a0a0a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .gw-mobile-menu-panel .navigation-sections__primary__items {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gw-mobile-menu-panel .has-fixed-shadow {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    min-height: 92px;
    padding: 12px !important;
    border: 1px solid #e5e5e5;
    color: #0a0a0a !important;
    text-decoration: none;
    background: #fafafa;
  }

  .gw-mobile-menu-panel .visual-container,
  .gw-mobile-menu-panel .visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 86px !important;
    height: 68px !important;
    min-width: 86px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    position: static !important;
    transform: none !important;
  }

  .gw-mobile-menu-panel .visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .gw-mobile-menu-panel .shadow { display: none !important; }
  .gw-mobile-menu-panel .texts {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
    transform: none !important;
  }
  .gw-mobile-menu-panel .texts p,
  .gw-mobile-menu-panel .text-body-highlight {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #0a0a0a !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .gw-mobile-menu-panel .text-caption { margin-top: 4px; color: #666 !important; }

  .gw-mobile-menu-panel .navigation-sections__secondary__items .container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }

  .gw-mobile-menu-panel .navigation-sections__secondary__items a {
    color: #0a0a0a !important;
    text-decoration: none;
  }
}