/* =====================================================================
   SOUQ "into the bag" best-sellers section — partials/product-rail.php
   (bag variant, data-bag on the section) + assets/js/bag.js.
   Linked from the partial (home, /cart, /checkout, order success) - the
   fan.css / flip.css precedent.
   BUGFIX 0.5.159 (#49): LOAD ORDER, corrected. This sheet is linked from the
   partial, i.e. in the body BEFORE the tokens/base/components links at body
   end - on purpose: as an in-body stylesheet it holds back the section after
   it until it has loaded, so the section never paints unstyled, and none of
   these rules live in the critical CSS. The price is that a rule here LOSES
   an equal-specificity tie with base.css or components.css: out-rank them
   (as .fan__viewall does) instead of relying on order. Checked 2026-09-19 -
   no selector here collides with those two sheets.

   GEOMETRY. The bag is a paper shopping bag built from CSS 3D faces in em
   units, so one --bag-unit scales the whole object (10px desktop, 3.8px
   phones). It is split into THREE layers that share the SAME transform:
     .bag__layer--back   the inside of the bag (lining + back handle)
     .bag__layer--peeks  the cards that have already been dropped in
     .bag__layer--front  the outside (front face, gussets, front handle)
   They stack 1 / 2 / 4 and the flying card (.bag-fly, bag.js) sits at 3,
   so it passes IN FRONT of the lining and BEHIND the front face — that is
   the whole "goes inside" illusion, no WebGL. The scene must therefore
   never become a stacking context: perspective() lives inside each layer's
   transform, not on the scene.

   --bag-ry is mirrored under [dir=rtl] so the bag turns toward the cards,
   which sit on its other side there. bag.js nudges --bag-rx/--bag-ry on
   hover (fine pointers only) and toggles .is-bump on every landing.

   PAINT. Smooth paper in the store's terracotta pair (the owner preferred
   the clean bright colour over a grained kraft look, 2026-09-18): realism
   comes from light, not texture — a key light from the upper left-front
   (sheen on the front, lit near fold edge, darker far edge), a folded cuff
   at the rim with the shadow it throws, a V-pleated gusset darkest in its
   fold with a contact shadow against the front, soft shade at the base,
   cylinder-shaded cord handles, and a footprint contact shadow. Hex on
   purpose: the artwork must read the same inside a later raster bake.
   ===================================================================== */
/* CARTBAG 2026-09-18: .bag-host is a bag anywhere else (the cart page hero) - the same
   variables without the rail grid; --bag-unit per host. */
.bag-section,
.bag-host {
  --bag-unit: 10px;
  --bag-col: 300px;
  --bag-rx: -15deg;
  --bag-ry: -22deg;
  --bag-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
}
.bag-host { display: block; }
.bag-host--cart { --bag-unit: 5.2px; }
@media (max-width: 599px) { .bag-host--cart { --bag-unit: 3.6px; } }
/* COBAG 2026-09-18: checkout summary (small, beside the tagline) and order success (the
   closed bag, centred). */
.bag-host--co { --bag-unit: 3.4px; }
.bag-host--done { --bag-unit: 6px; margin-inline: auto; }
.bag-host--done .bag::before { inset: -2% -6% 16%; }
.bag-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bag-col);
  grid-template-areas: "head bag" "rail bag";
  column-gap: 24px;
  align-items: center;
}
[dir="rtl"] .bag-section, [dir="rtl"] .bag-host { --bag-ry: 22deg; }
.bag-section > .rail-head { grid-area: head; }
.bag-section > .rail-wrap { grid-area: rail; min-inline-size: 0; }
.bag-section > .bag       { grid-area: bag; align-self: end; margin-block-end: 6px; }
/* Four full cards beside the bag instead of 3.7: the 220px basis leaves a
   torn fourth card at 1200px, 200px fits four with 8px to spare. */
@media (min-width: 1024px) {
  .bag-section .rail > * { flex-basis: 200px; }
}

/* ------------------------------------------------ the bag column ---- */
.bag {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* BUGFIX 0.5.159 (#43): hover-only - on a touch screen a tap left it stuck. */
@media (hover: hover) { .bag:hover { color: inherit; text-decoration: none; } }
/* Warm spotlight so the bag stands on a stage instead of floating on white.
   Kept above the caption (inset-bottom) and under everything (z 0). */
.bag::before {
  content: '';
  position: absolute;
  /* -4%, not -6%: at 1024-1200px the column touches the 16px gutter and a wider
     spotlight made the document 2px wider than the viewport. */
  inset: -4% -4% 22%;
  border-radius: 50%;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 62%, var(--sq-terracotta-100) 0%, rgba(253, 240, 232, .55) 45%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
.bag__scene {
  position: relative;
  display: block;
  inline-size: 30em;
  block-size: 36em;
  margin-inline: auto;
  font-size: var(--bag-unit);
  /* body: 21 wide × 23 tall × 10 deep, centred 2.5em below the scene middle */
  --bw: 21em;
  --bh: 25em;
  --bd: 10.5em;
  --cy: 2.2em;
}
.bag__layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 33%;
  transform: perspective(120em) rotateX(var(--bag-rx)) rotateY(var(--bag-ry));
  transition: transform .55s var(--bag-ease);
  pointer-events: none;
}
.bag__layer--back  { z-index: 1; }
.bag__layer--peeks { z-index: 2; }
.bag__layer--front { z-index: 4; }

/* Every face is centred on the body's middle and then pushed out along
   its own axis. backface-visibility hides whichever gusset faces away, so
   the same markup turns for RTL. The transparent outline is the old
   anti-aliasing nudge for 3D-transformed edges in Blink/WebKit. */
.bag__face {
  position: absolute;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  outline: 1px solid transparent;
}
.bag__face--front,
.bag__face--in-back {
  inline-size: var(--bw);
  block-size: var(--bh);
}
.bag__face--left, .bag__face--right,
.bag__face--in-left, .bag__face--in-right {
  inline-size: var(--bd);
  block-size: var(--bh);
}
.bag__face--front    { transform: translate(-50%, calc(-50% + var(--cy))) translateZ(calc(var(--bd) / 2)); }
.bag__face--left     { transform: translate(-50%, calc(-50% + var(--cy))) rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.bag__face--right    { transform: translate(-50%, calc(-50% + var(--cy))) rotateY(90deg)  translateZ(calc(var(--bw) / 2)); }
.bag__face--in-back  { transform: translate(-50%, calc(-50% + var(--cy))) translateZ(calc(var(--bd) / -2)); }
.bag__face--in-left  { transform: translate(-50%, calc(-50% + var(--cy))) rotateY(90deg)  translateZ(calc(var(--bw) / -2)); }
.bag__face--in-right { transform: translate(-50%, calc(-50% + var(--cy))) rotateY(-90deg) translateZ(calc(var(--bw) / -2)); }

/* ------------------------------------------------ paint: outside ---- */
.bag__face--front {
  border-radius: .35em;
  background:
    radial-gradient(ellipse 70% 55% at 38% 42%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(100deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, 0) 50%, rgba(120, 40, 10, .06) 100%),
    linear-gradient(180deg, #FFA57C 0%, #FD9262 30%, #FC8B5A 56%, #F5793F 100%);
  box-shadow:
    inset 0 -1.2em 1.6em -1.3em rgba(120, 40, 10, .22),  /* soft shade at the base */
    inset .14em 0 0 rgba(255, 255, 255, .38),            /* the near fold edge catches the light */
    inset -.1em 0 0 rgba(120, 40, 10, .18),              /* the far fold edge turns away */
    inset 0 -.12em 0 rgba(120, 40, 10, .22),             /* fold to the bottom panel */
    inset 0 .1em 0 rgba(255, 255, 255, .34);
}
/* folded cuff at the rim + the shadow it throws */
.bag__face--front::before,
.bag__face--left::before,
.bag__face--right::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 1.5em;
  border-radius: .35em .35em 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, 0) 100%);
  border-block-end: 1px solid rgba(120, 40, 10, .22);
}
.bag__face--front::after,
.bag__face--left::after,
.bag__face--right::after {
  content: '';
  position: absolute;
  inset: 1.5em 0 auto 0;
  block-size: 1.6em;
  background: linear-gradient(180deg, rgba(120, 40, 10, .18), rgba(120, 40, 10, 0));
}
/* Gussets: a V pleat, darkest in the fold, the half nearer the front lit
   more, and a contact shadow along the edge that meets the front face
   (local left on the right gusset, local right on the left one). */
.bag__face--right {
  background:
    linear-gradient(90deg, #F27C48 0%, #E66C36 42%, #CE5722 50%, #DB6530 58%, #E9703A 100%);
  box-shadow:
    inset .9em 0 1.1em -.8em rgba(110, 35, 5, .36),
    inset 0 -1.2em 1.6em -1.3em rgba(120, 40, 10, .22),
    inset 0 .1em 0 rgba(255, 255, 255, .22);
}
.bag__face--left {
  background:
    linear-gradient(90deg, #E9703A 0%, #DB6530 42%, #CE5722 50%, #E66C36 58%, #F27C48 100%);
  box-shadow:
    inset -.9em 0 1.1em -.8em rgba(110, 35, 5, .36),
    inset 0 -1.2em 1.6em -1.3em rgba(120, 40, 10, .22),
    inset 0 .1em 0 rgba(255, 255, 255, .22);
}
.bag__face--left::before, .bag__face--right::before { border-radius: 0; }

/* ------------------------------------------------ paint: inside ---- */
/* Same paper, in shade. The cuff shows from inside as a lighter band. */
.bag__face--in-back {
  background: linear-gradient(180deg, #D4692F 0%, #B8531F 12%, #9C4318 48%, #6F2C0E 100%);
}
.bag__face--in-left, .bag__face--in-right {
  background: linear-gradient(180deg, #C25C26 0%, #A24618 14%, #83370F 50%, #5B240A 100%);
}

/* The footer cartouche printed on the front — SOUQ in its loop with the
   knot, navy + rust on kraft — and the brand tagline under it in the body
   face. A hairline of light below the ink so it reads as pressed in. */
.bag__logo {
  position: absolute;
  left: 50%;
  top: 43%;
  inline-size: 64%;
  block-size: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 .1em 0 rgba(255, 255, 255, .34));
  opacity: .96;
}
.bag__tagline {
  position: absolute;
  left: 50%;
  top: 60%;
  inline-size: 78%;
  transform: translateX(-50%);
  text-align: center;
  font: 600 1.15em/1.25 var(--sq-font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0D1D24;
  opacity: .78;
  text-shadow: 0 .06em 0 rgba(255, 255, 255, .34);
}
/* Arabic letters must stay joined and CJK/Devanagari gain nothing from tracking. */
.bag__tagline:lang(ar), .bag__tagline:lang(hi), .bag__tagline:lang(ja), .bag__tagline:lang(ko), .bag__tagline:lang(zh) { letter-spacing: 0; }

/* ------------------------------------------------ handles ---- */
/* Cotton cord through small eyelets. One arc drawn four times — a soft
   shadow under it, the cord with a top-to-bottom gradient stroke (a lit
   cylinder), a thin highlight along its upper edge, and a faint dashed
   twist. The box reaches 2em below the rim so the eyelets sit on the face;
   the back handle is the same object in the bag's shade, in the back layer,
   so dropped cards pass between the two. */
.bag__handle {
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: var(--bw);
  block-size: 11em;
  overflow: visible;
  transform: translate(-50%, calc(-50% + var(--cy) - var(--bh) / 2 - 3.5em)) translateZ(calc(var(--bd) / 2 + .15em));
}
.bag__handle--back { transform: translate(-50%, calc(-50% + var(--cy) - var(--bh) / 2 - 3.5em)) translateZ(calc(var(--bd) / -2 - .15em)); }
.bag__handle path { fill: none; stroke-linecap: round; }
.bag__handle .cord-sh { stroke: rgba(60, 20, 5, .30); stroke-width: 8; transform: translateY(1.6px); filter: blur(.6px); }
.bag__handle .cord    { stroke-width: 7; }
.bag__handle .cord-hi { stroke: rgba(255, 255, 255, .30); stroke-width: 1.5; transform: translateY(-2.1px); }
.bag__handle .twist   { stroke: rgba(255, 255, 255, .16); stroke-width: 2.4; stroke-dasharray: 2.2 5.4; }
.bag__handle .eye     { fill: #16303B; }
.bag__handle .eye-in  { fill: #2A0E03; }
.bag__handle .eye-hi  { fill: rgba(255, 255, 255, .35); }
.bag__handle--back .eye  { fill: #0B1A21; }
.bag__handle--back .cord-sh { display: none; }

/* ------------------------------------------------ ground ---- */
/* Contact shadow shaped like the base (a skewed slab, blurred) under a
   wider ambient one; 2D, below every layer. */
.bag__shadow {
  position: absolute;
  left: 50%;
  bottom: 3.1em;
  inline-size: 21em;
  block-size: 2.6em;
  transform: translateX(-46%) skewX(-32deg);
  border-radius: 40%;
  background: rgba(13, 29, 36, .26);
  filter: blur(.6em);
  z-index: 0;
  pointer-events: none;
}
.bag__shadow::after {
  content: '';
  position: absolute;
  inset: -1.6em -3em;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(13, 29, 36, .16) 0%, rgba(13, 29, 36, 0) 70%);
}

/* ------------------------------------------------ dropped cards ---- */
/* A landed card: a small white-framed photo standing inside the bag, its
   top 3.6em above the rim. --px/--py/--pz/--pr come from bag.js's slot
   table; .is-raised is the pose the flying card hands over at, 4em above
   the rim, and removing it is the drop. */
.bag__peek {
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 8em;
  block-size: 9.8em;
  padding: .38em;
  border-radius: .8em;
  background: #fff;
  box-shadow: 0 .15em .4em rgba(13, 29, 36, .18);
  transform: translate(-50%, calc(-50% + var(--cy) - 10.2em + var(--py, 0em) - var(--peek-lift, 0em)))
             translate3d(var(--px, 0em), 0, var(--pz, 0em)) rotateZ(var(--pr, 0deg));
  transition: transform .42s cubic-bezier(.34, 1.3, .64, 1), opacity .2s;
}
/* Hovering the bag lifts what is inside a little, an invitation to look. */
@media (hover: hover) and (pointer: fine) {
  .bag:hover .bag__scene { --peek-lift: 1.3em; }
}
.bag__peek.is-raised {
  transform: translate(-50%, calc(-50% + var(--cy) - 10.2em + var(--py, 0em) - 4.2em))
             translate3d(var(--px, 0em), 0, var(--pz, 0em)) rotateZ(var(--pr, 0deg));
  visibility: hidden;
  transition: none;
}
.bag__peek.is-leaving { opacity: 0; }
/* CARTBAG 2026-09-18: a card that arrives without a flight (the cart page filling the bag
   from the payload) starts raised and faint and drops in on the next frame. */
.bag__peek.is-dropping {
  transform: translate(-50%, calc(-50% + var(--cy) - 10.2em + var(--py, 0em) - 4.2em))
             translate3d(var(--px, 0em), 0, var(--pz, 0em)) rotateZ(var(--pr, 0deg));
  opacity: 0;
}
/* the rim's shade falls on the card as it goes into the bag */
.bag__peek::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(60, 20, 5, 0) 26%, rgba(60, 20, 5, .10) 38%, rgba(60, 20, 5, .42) 100%);
  pointer-events: none;
}
.bag__peek img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: .5em;
  background: var(--sq-surface-warm);
}

/* The card in flight (bag.js sizes and animates it with WAAPI). */
.bag-fly {
  position: absolute;
  z-index: 3;
  border-radius: 14px;
  padding: 4%;
  background: #fff;
  border: 1px solid var(--sq-line);
  box-shadow: var(--sq-shadow-3);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
  overflow: hidden;
}
.bag-fly img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 9px;
  background: var(--sq-surface-warm);
}

/* ------------------------------------------------ count + caption ---- */
/* Same object as the header's cart count (core.css .hdr__cart-count), sat
   on the front handle. bag.js unhides it once the cart holds something and
   re-bumps it on every change. */
.bag__count {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 4.2em;
  min-inline-size: 2.6em;
  block-size: 2.6em;
  padding-inline: .6em;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sq-sale);
  color: #fff;
  font: 700 1.25em/1 var(--sq-font-body);
  transform: translate(2.2em, 0);
  box-shadow: 0 .15em .5em rgba(196, 36, 64, .35), 0 0 0 .18em #fff;
}
.bag__count[hidden] { display: none; }
.bag__count.is-bump { animation: bag-count-bump .5s var(--bag-ease); }
/* Under the bag: what it is, and that it opens the cart. */
.bag__cap {
  position: relative;
  z-index: 1;
  display: block;
  margin-block-start: .2em;
  text-align: center;
  line-height: 1.3;
}
.bag__cap strong { display: block; font-size: 1rem; font-weight: 700; color: var(--sq-ink); }
.bag__cap span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-block-start: 3px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sq-accent-ink);
}
.bag__cap span svg { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .bag__cap span svg { transform: scaleX(-1); }
@media (hover: hover) { .bag:hover .bag__cap span { text-decoration: underline; text-underline-offset: 2px; } }

/* ------------------------------------------------ closed bag (COBAG 2026-09-18) ---- */
/* Ribbon bow on the handles (the success check's teal, same 'done' meaning) and
   a kraft tag hanging from the front handle. Both 2D, above every layer. */
.bag__bow { position: absolute; z-index: 6; left: 50%; top: -1em; inline-size: 12em; transform: translateX(-50%); pointer-events: none; }
.bag__bow .ribbon { fill: #0C7370; stroke: #084F4D; stroke-width: 2; stroke-linejoin: round; }
.bag__bow .tail { fill: none; stroke: #0C7370; stroke-width: 5; stroke-linecap: round; }
.bag__bow .knot { fill: #084F4D; }
.bag__tag {
  position: absolute;
  z-index: 6;
  left: 50%;
  /* sizes in the scene unit, not the tag's own em - the tag sets its font-size */
  top: calc(var(--bag-unit) * 5.4);
  transform: translateX(calc(var(--bag-unit) * 3.4)) rotate(8deg);
  inline-size: calc(var(--bag-unit) * 13);
  padding: .5em .7em;
  background: #FBF4EA;
  border: 1px solid #E2CFB8;
  border-radius: .6em;
  box-shadow: 0 .3em .8em rgba(13, 29, 36, .18);
  font: 600 calc(var(--bag-unit) * 1.75)/1.3 var(--sq-font-body);
  color: var(--sq-ink);
  text-align: start;
  pointer-events: none;
}
.bag__tag::before { content: ''; position: absolute; left: -1.5em; top: .9em; inline-size: 1.5em; block-size: 2px; background: #084F4D; transform: rotate(-30deg); transform-origin: right center; }
.bag__tag b { display: block; color: var(--sq-accent-ink); font-size: 1.05em; }
.bag__tag span { display: block; font-weight: 500; color: var(--sq-ink-soft); font-size: .82em; }
[dir="rtl"] .bag__tag { transform: translateX(calc(var(--bag-unit) * -16.4)) rotate(-8deg); }
[dir="rtl"] .bag__tag::before { left: auto; right: -1.5em; transform: rotate(30deg); transform-origin: left center; }

/* ------------------------------------------------ motion ---- */
/* Landing thump: squash from the ground and rebound, on all three layers.
   The translateY keeps the base on the floor while the height changes
   (the transform-origin is the perspective vanishing point, not the base). */
.bag__scene.is-bump .bag__layer { animation: bag-thump .5s cubic-bezier(.33, 1, .68, 1); transition: none; }
@keyframes bag-thump {
  0%   { transform: perspective(120em) rotateX(var(--bag-rx)) rotateY(var(--bag-ry)); }
  32%  { transform: perspective(120em) rotateX(var(--bag-rx)) rotateY(var(--bag-ry)) translateY(1.6em) scale3d(1.05, .93, 1.05); }
  66%  { transform: perspective(120em) rotateX(var(--bag-rx)) rotateY(var(--bag-ry)) translateY(-.5em) scale3d(.985, 1.025, .985); }
  100% { transform: perspective(120em) rotateX(var(--bag-rx)) rotateY(var(--bag-ry)); }
}
@keyframes bag-count-bump {
  0%   { transform: translate(2.2em, 0) scale(1); }
  35%  { transform: translate(2.2em, 0) scale(1.35); }
  100% { transform: translate(2.2em, 0) scale(1); }
}
/* Idle: a slow breathing sway so the bag reads as an object, not a sticker.
   Off while a layer is being bumped or tilted by the pointer. */
@media (hover: hover) and (pointer: fine) {
  .bag:hover .bag__layer { transition-duration: .35s; }
}
.bag-section.is-idle .bag__scene:not(.is-bump):not(.is-tilting) .bag__layer,
.bag-host.is-idle .bag__scene:not(.is-bump):not(.is-tilting) .bag__layer { animation: bag-sway 6s ease-in-out infinite; }
.bag-section.is-offscreen .bag__layer,
.bag-host.is-offscreen .bag__layer { animation-play-state: paused; }
@keyframes bag-sway {
  0%, 100% { transform: perspective(120em) rotateX(var(--bag-rx)) rotateY(var(--bag-ry)); }
  50%      { transform: perspective(120em) rotateX(calc(var(--bag-rx) - 1.5deg)) rotateY(calc(var(--bag-ry) + 4deg)); }
}

/* ------------------------------------------------ phones + tablets ---- */
/* Under 1024px the bag shrinks into the head row's end: title + arrows on
   the left, the bag on the right, the rail unchanged below. The caption and
   the tagline print are desktop details; at 4px a unit they are texture. */
@media (max-width: 1023px) {
  .bag-section {
    --bag-unit: 3.8px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head bag" "rail rail";
    column-gap: 8px;
  }
  .bag-section > .rail-head { align-self: end; }
  /* BUGFIX 0.5.160 (#26): the head column beside the bag is ~176px at 320, and
     the reserved arrow pair (#35) takes 94px of it, which left "Bestseller"
     70px for 113px of 24px type (24 of 29 languages overflowed). The arrows
     now drop to their own line when the heading needs the width, and a word
     longer than the whole column (cs "Nejprodavanejsi") still breaks or
     hyphenates instead of running under the bag. */
  .bag-section > .rail-head { flex-wrap: wrap; }
  .bag-section > .rail-head h2 { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .bag-section > .bag { align-self: end; margin-block-end: 0; }
  .bag__scene { block-size: 32em; }
  /* BUGFIX 0.5.161: the caption IS the link's accessible name (souq-bag.php),
     so display:none left an unnamed link to the cart on every phone and
     tablet (axe link-name). Hidden visually only - the .sr-only declarations
     from base.css. The tagline is decoration and stays display:none. */
  .bag__tagline { display: none; }
  .bag__cap { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .bag__logo { top: 50%; inline-size: 70%; }
  .bag::before { inset: 0 -10% 10%; }
  .bag__count { font-size: 2.8em; top: 1.2em; transform: translate(1.5em, 0); }
  /* the scene keeps 4.5em of air either side of the bag; pull it toward the gutter */
  .bag__scene { margin-inline-end: -2.5em; }
  .bag__shadow { filter: blur(.7em); }
}

/* ------------------------------------------------ reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .bag__layer, .bag__peek { transition: none; }
  .bag__peek.is-dropping { opacity: 1; }
  .bag__scene.is-bump .bag__layer,
  .bag-section.is-idle .bag__scene .bag__layer,
  .bag-host.is-idle .bag__scene .bag__layer,
  .bag__count.is-bump { animation: none; }
}