@charset "UTF-8";

body.stm-engine-storefront .stm-header-commerce-action{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  line-height:1;
}

body.stm-engine-storefront .stm-engine-header-action__button{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--stm-space-2);
  min-width:var(--stm-header-action-size);
  height:var(--stm-header-action-size);
  margin:0;
  padding-inline:var(--stm-header-action-padding-x);
  border:var(--stm-header-action-border);
  border-radius:var(--stm-header-action-radius);
  box-shadow:none;
  background:var(--stm-color-surface);
  color:var(--stm-header-main-text);
  text-decoration:none;
  cursor:pointer;
  transition:
    border-color var(--stm-transition-fast),
    background var(--stm-transition-fast),
    color var(--stm-transition-fast),
    transform var(--stm-transition-fast);
}

body.stm-engine-storefront .stm-engine-header-action__button:hover,
body.stm-engine-storefront .stm-header-commerce-action.is-open>.stm-engine-header-action__button{
  border-color:var(--stm-color-primary);
  background:var(--stm-header-action-hover-bg);
  color:var(--stm-header-action-hover-text);
}

body.stm-engine-storefront .stm-engine-header-action__button:active{
  transform:scale(.97);
}

body.stm-engine-storefront .stm-engine-header-action__icon{
  display:block;
  flex:0 0 auto;
  width:var(--stm-header-action-icon-size);
  height:var(--stm-header-action-icon-size);
  background:currentColor;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}

body.stm-engine-storefront .stm-engine-header-badge{
  position:absolute;
  z-index:2;
  top:-6px;
  right:-4px;
  display:grid;
  min-width:var(--stm-badge-size);
  height:var(--stm-badge-size);
  place-items:center;
  padding-inline:var(--stm-badge-padding-x);
  border:var(--stm-badge-border);
  border-radius:var(--stm-badge-radius);
  background:var(--stm-badge-bg);
  color:var(--stm-badge-text);
  font-size:var(--stm-badge-font-size);
  font-weight:var(--stm-badge-font-weight);
  line-height:1;
  box-sizing:border-box;
}

body.stm-engine-storefront .stm-engine-header-badge[hidden]{
  display:none;
}

body.stm-engine-storefront .stm-engine-header-panel{
  position:absolute;
  z-index:var(--stm-header-panel-z);
  top:calc(100% + var(--stm-header-panel-offset));
  right:0;
  width:var(--stm-header-panel-width);
  max-width:calc(100vw - (var(--stm-content-gutter-mobile) * 2));
  overflow:hidden;
  border:var(--stm-panel-border);
  border-radius:var(--stm-panel-radius);
  background:var(--stm-panel-bg);
  color:var(--stm-color-ink);
  opacity:0;
  visibility:hidden;
  transform:translateY(var(--stm-space-2));
  pointer-events:none;
  transition:
    opacity var(--stm-transition-fast),
    visibility var(--stm-transition-fast),
    transform var(--stm-transition-fast);
}

body.stm-engine-storefront .stm-engine-header-panel::before{
  content:"";
  position:absolute;
  right:0;
  bottom:100%;
  left:0;
  height:var(--stm-header-panel-offset);
}

body.stm-engine-storefront .stm-engine-header-panel::after{
  content:"";
  position:absolute;
  top:calc(var(--stm-header-panel-arrow-offset, -7px));
  right:20px;
  width:14px;
  height:14px;
  border-top:1px solid var(--stm-color-border);
  border-left:1px solid var(--stm-color-border);
  background:var(--stm-panel-bg);
  transform:rotate(45deg);
}

body.stm-engine-storefront .stm-header-commerce-action.is-open>.stm-engine-header-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

body.stm-engine-storefront .stm-engine-header-panel[hidden]{
  display:none;
}


html[data-stm-layout="tablet"] body.stm-engine-storefront .stm-engine-header-action__button,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-engine-header-action__button {
  min-width:var(--stm-header-action-size-tablet);
  height:var(--stm-header-action-size-tablet);
  padding-inline:var(--stm-header-action-padding-x-tablet);
}
html[data-stm-layout="tablet"] body.stm-engine-storefront .stm-engine-header-action__icon,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-engine-header-action__icon {
  width:var(--stm-header-action-icon-tablet);
  height:var(--stm-header-action-icon-tablet);
}
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-engine-header-action__button,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-notify__toggle {
  min-width:var(--stm-header-action-size-mobile);
  width:var(--stm-header-action-size-mobile);
  height:var(--stm-header-action-size-mobile);
  padding:0;
  border:var(--stm-header-action-border);
  border-radius:var(--stm-header-action-radius);
  background:var(--stm-color-surface);
}
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-engine-header-action__button:hover,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-header-commerce-action.is-open>.stm-engine-header-action__button {
  background:var(--stm-color-primary);
  color:var(--stm-color-on-primary);
}
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-engine-header-action__icon {
  width:var(--stm-header-action-icon-size-mobile);
  height:var(--stm-header-action-icon-size-mobile);
}
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-engine-header-badge {
  top:var(--stm-badge-offset-mobile);
  right:var(--stm-badge-offset-mobile);
  min-width:var(--stm-badge-size-mobile);
  height:var(--stm-badge-size-mobile);
  padding-inline:var(--stm-badge-padding-x-mobile);
  border:var(--stm-badge-border-mobile);
  font-size:var(--stm-badge-font-size-mobile);
}
/*
 * Compact Header-widget placement contract.
 * The existing Theme-owned .stm-header-actions container remains the single
 * positioning boundary. Commerce actions become static only in compact
 * layouts, so every Engine panel opens directly below the Header actions row,
 * inherits the row's real right margin, and never falls back to a viewport-
 * bottom sheet.
 */
html[data-stm-layout="tablet"] body.stm-engine-storefront .stm-header-actions .stm-header-commerce-action,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-header-actions .stm-header-commerce-action {
  position:static;
}

html[data-stm-layout="tablet"] body.stm-engine-storefront .stm-header-actions .stm-engine-header-panel,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-header-actions .stm-engine-header-panel {
  position:absolute;
  top:calc(100% + var(--stm-header-panel-offset));
  right:0;
  bottom:auto;
  left:auto;
}

/* Compact panels share one clean edge; desktop keeps the directional arrow. */
html[data-stm-layout="tablet"] body.stm-engine-storefront .stm-header-actions .stm-engine-header-panel::after,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-header-actions .stm-engine-header-panel::after,
html[data-stm-layout="tablet"] body.stm-engine-storefront .stm-header-actions .stm-header-commerce-action.is-open::after,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-header-actions .stm-header-commerce-action.is-open::after {
  content:none;
}

/* Shared front-layer contract for Account, Cart, Compare, Wishlist and Notifications. */
body.stm-engine-storefront .stm-header-commerce-action.is-open{z-index:var(--stm-header-panel-z)}
body.stm-engine-storefront .stm-header-commerce-action.is-open>.stm-engine-header-panel{z-index:var(--stm-header-panel-z)}
html[data-stm-layout="tablet"] body.stm-engine-storefront .stm-engine-header-panel,
html[data-stm-layout="mobile"] body.stm-engine-storefront .stm-engine-header-panel{z-index:var(--stm-header-panel-z)}