/* sst-coupon-bar-20261023: owner 10/23 — JPY 30,000 coupon progress bar (coupon-bar.js) + no "Your order" panel on any
   Quick Order tab. Same look as the 10/22 home-boost "cartbar" preview it comes from. */

/* no "Your order" panel on desktop, every tab: the main column takes the full width (phones keep the theme's cart dock) */
@media (min-width:901px){
  .sst-qo .sst-qo__layout{grid-template-columns:minmax(0,1fr) !important}
  .sst-qo .sst-qo__side{display:none !important}
}

/* bar */
@property --sst-cb-p{syntax:'<number>'; inherits:true; initial-value:0}
.sst-cb{--sst-cb-from:#efb3cd; --sst-cb-to:#9e2c5f; display:block; margin:8px 0; padding:9px 10px; border:1px solid #f0d9e3; border-radius:6px; background:#fff7fa; font-size:12px; line-height:1.35; color:#1a1a1a; cursor:default; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none}
.sst-cb b{color:#9e2c5f}
.sst-cb__track{position:relative; margin-top:6px; height:6px; border-radius:3px; background:#f3e3ea; overflow:hidden}
/* the fill is always full width and grows with transform:scaleX (set by coupon-bar.js, smooth on the GPU); its colour goes
   from a light site pink to the site maroon with --sst-cb-p (0..100); at the goal a rainbow layer slides through it */
.sst-cb__track i{position:relative; display:block; height:100%; width:100%; overflow:hidden; transform-origin:0 50%; transform:scaleX(0); will-change:transform;
  background-color:color-mix(in srgb, var(--sst-cb-to) calc(var(--sst-cb-p, 0) * 1%), var(--sst-cb-from));
  transition:transform .7s cubic-bezier(.34,1.56,.64,1), --sst-cb-p .7s ease}
.sst-cb__track i::after{content:""; position:absolute; top:0; bottom:0; left:0; width:200%; opacity:0;
  background:linear-gradient(90deg,#ff3b3b,#ff9f1c,#ffe14d,#3ad46a,#2fa8ff,#7a5cff,#ff4fd8,#ff3b3b,#ff9f1c,#ffe14d,#3ad46a,#2fa8ff,#7a5cff,#ff4fd8,#ff3b3b);
  transition:opacity .25s ease}
.sst-cb--ok .sst-cb__track i::after{opacity:1; animation:sstCbRainbow 2.4s linear infinite}
.sst-cb--ok b{background:linear-gradient(90deg,#e0262f,#e88a00,#1f9d4c,#1f7fe0,#7a3cff,#d42aa8); -webkit-background-clip:text; background-clip:text; color:transparent !important}
@keyframes sstCbRainbow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sstCbBump{0%{transform:translateY(0)}30%{transform:translateY(-7px)}55%{transform:translateY(2px)}80%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.sst-cb-short{display:none}
html[data-sst-theme="dark"] .sst-cb{--sst-cb-from:#7a2d50; --sst-cb-to:#e58bb5; background:var(--sst-surface,#1a1a1c); border-color:#4a2a3a; color:var(--sst-ink,#e8e8e8)}
html[data-sst-theme="dark"] .sst-cb__track{background:#3a2530}
html[data-sst-theme="dark"] .sst-cb b{color:var(--sst-accent-text,#e58bb5)}

/* header copy: desktop next to Cart, short one-line wording; in the header row from 1560px (narrower the menu would
   wrap) -> 750–1559px it hangs under Cart */
.sst-cb--header{position:absolute; top:calc(100% - 4px); right:16px; z-index:30; margin:0; box-shadow:0 6px 18px rgba(0,0,0,.08)}
@media (min-width:750px){
  .sst-cb--header{width:178px; padding:6px 10px; font-size:11.5px; line-height:1.25; white-space:nowrap}
  .sst-cb--header .sst-cb-long{display:none}
  .sst-cb--header .sst-cb-short{display:inline}
  .sst-cb--header .sst-cb__track{margin-top:5px; height:5px}
}
@media (min-width:1560px){
  .sst-cb--header{position:relative; top:auto; right:auto; flex:0 0 auto; align-self:center; margin:0 0 0 10px; box-shadow:none}
}
/* phone: fixed at the bottom of the screen on the TOP tab (Add to cart photos fly into it, fly-cart.js); other tabs keep
   the theme's mobile cart dock, so no bar there */
@media (max-width:749px){
  .sst-cb--header{position:fixed; top:auto; bottom:0; left:0; right:0; z-index:9990; border-radius:12px 12px 0 0; border-bottom:0; padding:13px 16px calc(13px + env(safe-area-inset-bottom)); font-size:13.5px; text-align:center; box-shadow:0 -6px 18px rgba(0,0,0,.1)}
  .sst-cb--header .sst-cb__track{margin-top:8px; height:9px; border-radius:5px}
  .sst-cb--header.sst-cb--bump{animation:sstCbBump .55s ease}
  body:not(.sstt-top-active) .sst-cb--header{display:none}
  body.sstt-top-active:has(.sst-cb--header){padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){ .sst-cb__track i{transition:none} .sst-cb--ok .sst-cb__track i::after,.sst-cb--bump{animation:none} }

/* sst-cart-drawer-no-updating-20261023: owner 10/23 — header cart drawer: no green "Updating..." under a line while − /
   Remove is sent (theme cart-drawer.js writes it as a .is-success item status); errors and notices still show */
.sst-cart-drawer .sst-cart-drawer__item-status.is-success{display:none !important}

/* the theme's green "Coupons and discounts are available from JPY 30,000" note takes the same light pink (light + dark).
   The theme sets the green in quick-order.css, qo-mobile-dock.css (!important, 5 classes) and dark-mode(-qo).css
   (!important), so the :is(#…) gives this rule id weight; the id itself never exists */
html body .sst-qo .sst-qo__promotion-policy-note:is(#sst-cb-pink-note,.sst-qo__promotion-policy-note){border:1px solid #f0d9e3 !important; background:#fff7fa !important; color:#7d2249 !important}
html[data-sst-theme="dark"] body .sst-qo .sst-qo__promotion-policy-note:is(#sst-cb-pink-note,.sst-qo__promotion-policy-note){border-color:#4a2a3a !important; background:#2a1c23 !important; color:var(--sst-accent-text,#e58bb5) !important}