/* ExSA Customer — Canonical Header V6.0
 * ONE geometry source for all customer pages.
 * Safe-area belongs to the shell; header host has exactly one reserved height.
 */

:root{
  --exsa-icon-muted:#8b8b8b;
  --exsa-header-height:64px;
  --exsa-header-total-height:calc(var(--exsa-header-height) + var(--exsa-safe-top,0px));
  --exsa-header-action-size:40px;
  --exsa-header-action-gap:8px;
  --exsa-header-action-icon-size:21px;
}

/* Browser pages reserve exactly one 56px header row. Native WebView may add its real safe-area inset. */
/* The host is the ONLY element that reserves header space. This prevents
 * page-specific wrappers (especially Cart) from adding a second top spacer. */
[data-tw-header].tw-header-host.tw-header-home-hidden{
  display:none !important;
  width:100% !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

[data-tw-header].tw-header-host{
  display:block !important;
  width:100% !important;
  height:var(--exsa-header-total-height) !important;
  min-height:var(--exsa-header-total-height) !important;
  max-height:var(--exsa-header-total-height) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  line-height:0 !important;
  box-sizing:border-box !important;
}

.tw-shared-header{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:var(--exsa-safe-top,0px) 18px 0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  position:sticky !important;
  top:0 !important;
  z-index:90 !important;
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid #eee !important;
  box-shadow:0 2px 14px rgba(0,0,0,.035) !important;
  flex:none !important;
}
.tw-shared-header:not(.tw-search){padding-right:18px !important;}
.tw-search{padding-right:18px !important;}

/* V6.9 SECONDARY STATUS-BAR VISUAL
 * The status lane remains transparent at the WebView layer.
 * The shared header paints a branded red backing only through the safe-top
 * lane, while the actual header content remains white below it. This keeps
 * light Android status icons readable without changing page content.
 */
html.tw-native-webview.tw-secondary-page .tw-shared-header{
  background:
    linear-gradient(
      to bottom,
      #d71920 0,
      #d71920 var(--exsa-safe-top,24px),
      rgba(255,255,255,.98) var(--exsa-safe-top,24px),
      rgba(255,255,255,.98) 100%
    ) !important;
}

/* Canonical Bell + Cart: one viewport-level source, isolated from legacy page CSS. */
.tw-store-actions,
.tw-store-actions.tw-canonical-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:var(--exsa-header-action-gap) !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

/* Non-home: actions are physically inside the same header row as back/title. */
.tw-shared-header > .tw-canonical-actions{
  position:static !important;
  top:auto !important;
  right:auto !important;
  transform:none !important;
  z-index:92 !important;
  pointer-events:none !important;
}
.tw-shared-header > .tw-canonical-actions .tw-header-action{
  pointer-events:auto !important;
}

/* Home: the action cluster is anchored to the same right gutter as every page.
 * Never center the cluster itself; only the page shell may be centered. */
/* V6.7 — selected secondary pages keep Bell + Cart visibly sticky while the page title/header may scroll. */
.tw-shared-header.tw-has-sticky-actions{
  padding-right:108px !important;
}
.tw-shared-header.tw-has-sticky-actions > .tw-canonical-actions{
  position:fixed !important;
}

.tw-store-actions.tw-canonical-actions.tw-sticky-actions{
  position:fixed !important;
  top:calc(var(--exsa-safe-top,0px) + 12px) !important;
  right:18px !important;
  left:auto !important;
  transform:none !important;
  z-index:99990 !important;
  pointer-events:none !important;
  width:auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
}


.tw-canonical-actions .tw-header-action{
  width:var(--exsa-header-action-size) !important;
  height:var(--exsa-header-action-size) !important;
  min-width:var(--exsa-header-action-size) !important;
  min-height:var(--exsa-header-action-size) !important;
  max-width:var(--exsa-header-action-size) !important;
  max-height:var(--exsa-header-action-size) !important;
  flex:0 0 var(--exsa-header-action-size) !important;
  inline-size:var(--exsa-header-action-size) !important;
  block-size:var(--exsa-header-action-size) !important;
  aspect-ratio:1 / 1 !important;
  box-sizing:border-box !important;
  border:1px solid #eee !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 3px 12px rgba(0,0,0,.16) !important;
  color:var(--exsa-icon-muted) !important;
  cursor:pointer !important;
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  font-family:Arial,sans-serif !important;
  writing-mode:horizontal-tb !important;
  overflow:visible !important;
  transform:none !important;
  pointer-events:auto !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.tw-canonical-actions .tw-header-action:active{transform:scale(.96) !important;}

.tw-canonical-actions .tw-action-svg{
  width:var(--exsa-header-action-icon-size) !important;
  height:var(--exsa-header-action-icon-size) !important;
  min-width:var(--exsa-header-action-icon-size) !important;
  min-height:var(--exsa-header-action-icon-size) !important;
  max-width:var(--exsa-header-action-icon-size) !important;
  max-height:var(--exsa-header-action-icon-size) !important;
  display:block !important;
  flex:0 0 var(--exsa-header-action-icon-size) !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  color:currentColor !important;
  pointer-events:none !important;
}

.tw-canonical-actions .tw-header-badge,
.tw-canonical-actions .badge{
  position:absolute !important;
  right:-2px !important;
  top:-3px !important;
  min-width:16px !important;
  width:auto !important;
  height:16px !important;
  min-height:16px !important;
  max-height:16px !important;
  padding:3px 5px !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-radius:20px !important;
  background:#d71920 !important;
  color:#fff !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  font:800 9px/1 Arial,sans-serif !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}

.tw-header-back{
  inline-size:40px !important;
  block-size:40px !important;
  min-inline-size:40px !important;
  min-block-size:40px !important;
  max-inline-size:40px !important;
  max-block-size:40px !important;
  flex:0 0 40px !important;
  aspect-ratio:1 / 1 !important;
  box-sizing:border-box !important;
  border:1px solid #e7e0da !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#D71920 !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font:400 27px/1 Arial,sans-serif !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
}
.tw-header-title-wrap{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.tw-header-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font:800 19px/1.15 Arial,sans-serif;letter-spacing:-.2px;color:#171717;}
.tw-header-sub{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;font:400 12px/1.2 Arial,sans-serif;color:#777;}

.tw-header-search{width:min(480px,calc(100% - 32px));height:46px;margin:12px auto 0;padding:0 13px;box-sizing:border-box;display:flex;align-items:center;gap:9px;border:1px solid #e8e2dc;border-radius:14px;background:#fafafa;color:#777;}
.tw-header-search input{border:0;outline:0;background:transparent;flex:1;min-width:0;font:400 13px/1.2 Arial,sans-serif;color:#333;}
.tw-search-row{width:100%;display:flex;align-items:center;gap:8px;min-width:0;}
.tw-search-box{height:46px;flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:1px solid #e8e8e8;border-radius:14px;padding:0 14px;background:#fafafa;color:#999;box-sizing:border-box;}
.tw-search-box input{border:0;outline:0;width:100%;min-width:0;background:transparent;font:400 14px/1.2 Arial,sans-serif;color:#333;}
.tw-search-icon{font:400 18px/1 Arial,sans-serif;color:#999;flex:0 0 auto;}

/* V6.1 GLOBAL PAGE RHYTHM — every non-home screen starts from the same grid. */
.tw-header-host + .content,
.tw-header-host + .section,
.tw-header-host + .fav-section{
  padding-top:24px !important;
}
.tw-header-host + .content > h2,
.tw-header-host + .section > .head h2,
.tw-header-host + .fav-section > .head h2{
  margin-top:0 !important;
}

@media (min-width:481px){
  .tw-shared-header{padding-left:28px !important;}
  .tw-shared-header:not(.tw-search){padding-right:28px !important;}
  .tw-search{padding-right:28px !important;}
  .tw-sticky-actions{right:28px !important;}
  .tw-header-search{width:min(900px,calc(100% - 56px));}
}
@media (min-width:700px){
  .tw-shared-header{padding-left:36px !important;}
  .tw-shared-header:not(.tw-search){padding-right:36px !important;}
  .tw-search{padding-right:36px !important;}
  .tw-sticky-actions{right:36px !important;}
  .tw-header-search{width:min(1024px,calc(100% - 72px));}
}
@media (min-width:1050px){
  .tw-shared-header{padding-left:48px !important;}
  .tw-shared-header:not(.tw-search){padding-right:48px !important;}
  .tw-search{padding-right:48px !important;}
  .tw-sticky-actions{right:48px !important;}
  .tw-header-search{width:min(1180px,calc(100% - 96px));}
}

/* V6.5 HOME: actions belong to the same sticky topbar as search. */
.tw-home-topbar > .tw-store-actions.tw-canonical-actions.tw-sticky-actions{
  position:absolute !important;
  top:calc(var(--exsa-safe-top,0px) + 8px) !important;
  right:14px !important;
  left:auto !important;
  transform:none !important;
  z-index:99990 !important;
}