/* ===========================================================
   מחט וחוט — חנות בדים
   A boutique fabric shop rendered entirely in CSS.
   Mobile-first, RTL, 4px spacing grid.
   =========================================================== */

:root {
  /* plaster wall */
  --wall:        #F2E7D8;
  --wall-deep:   #E6D7C3;
  --wall-shade:  #D8C6AE;

  /* walnut shelving */
  --wood-dark:   #5C3A22;
  --wood:        #7E4F2C;
  --wood-mid:    #96603A;
  --wood-light:  #B98351;
  --wood-edge:   #4A2D19;

  /* brass fittings */
  --brass:       #C9A227;
  --brass-hi:    #EBD07A;
  --brass-lo:    #8E6F12;

  /* signage */
  --sign:        #2E4A44;
  --sign-deep:   #1E332F;
  --cream:       #FBF4E9;

  /* accent */
  --rose:        #B85C6E;
  --rose-deep:   #8E3F50;

  --ink:         #34261C;
  --ink-soft:    #6E5847;

  --shadow-soft: 0 2px 8px rgba(58, 36, 20, .14);
  --shadow-mid:  0 8px 20px rgba(58, 36, 20, .22);
  --shadow-deep: 0 16px 36px rgba(58, 36, 20, .30);

  --bar-h: 72px;
}

* { box-sizing: border-box; }

/* every physical object in the shop is a <span> inside a <button> — spans are
   inline by default and would ignore width/height, so lay them out as blocks.
   [hidden] must beat the display rules below it. */
.bolt-body, .bolt-face, .bolt-band,
.crate-body, .crate-peek, .crate-stamp,
.machine, .machine-arm, .machine-head, .machine-pillar,
.machine-needle, .machine-bed, .machine-wheel, .machine-gold,
.hanger, .hanger-hook, .hanger-bar, .garment, .hanger-label,
.basket-handle, .basket-body, .tag, .tag-string, .owned {
  display: block;
}
.tag-card, .crate-peek { display: flex; }
.owned { display: none; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Heebo', system-ui, sans-serif;
  color: var(--ink);
  background: var(--wall);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* plaster grain */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.55) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 44%, rgba(120, 88, 58, .10) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 78%, rgba(255,255,255,.40) 0 1px, transparent 1.4px),
    linear-gradient(180deg, var(--wall-deep), var(--wall) 22%, var(--wall) 78%, var(--wall-shade));
  background-size: 22px 22px, 31px 31px, 26px 26px, 100% 100%;
}

/* ===========================================================
   TOP BAR — the purse
   =========================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: env(safe-area-inset-top) 0 0;
  background: linear-gradient(180deg, var(--sign-deep), var(--sign));
  box-shadow: 0 3px 0 var(--brass-lo), var(--shadow-mid);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px;
  max-width: 720px;
  margin-inline: auto;
}

.purse {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: none;
}

.coin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-self: center;
  background:
    radial-gradient(circle at 34% 28%, var(--brass-hi), var(--brass) 52%, var(--brass-lo));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30), 0 2px 4px rgba(0,0,0,.35);
  position: relative;
  flex: none;
}
.coin::after {
  content: '₪';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(70, 50, 0, .72);
}

.purse-amount {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color .2s ease;
}
.purse-amount.is-low { color: #F0A6A6; }

.purse-label {
  font-size: 12px;
  font-weight: 400;
  color: rgba(251, 244, 233, .62);
}

.purse-meter {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.purse-meter-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass), var(--brass-hi));
  transform-origin: right center;
  transition: width .45s cubic-bezier(.22,.9,.3,1);
}

/* ===========================================================
   STOREFRONT
   =========================================================== */
.shop {
  max-width: 720px;
  margin-inline: auto;
  padding-bottom: calc(var(--bar-h) + 32px + env(safe-area-inset-bottom));
}

.storefront {
  position: relative;
  padding: 0 16px 40px;
  text-align: center;
}

.awning {
  height: 46px;
  margin: 0 -16px 20px;
  background: repeating-linear-gradient(90deg,
    var(--sign) 0 28px, var(--cream) 28px 56px);
  -webkit-mask-image: radial-gradient(14px 18px at 14px 100%, transparent 0 13px, #000 13.5px);
  mask-image: radial-gradient(14px 18px at 14px 100%, transparent 0 13px, #000 13.5px);
  -webkit-mask-size: 28px 100%;
  mask-size: 28px 100%;
  box-shadow: 0 6px 14px rgba(58, 36, 20, .22);
  filter: saturate(.95);
}

.signboard {
  display: inline-block;
  padding: 14px 28px 16px;
  background: linear-gradient(165deg, var(--sign), var(--sign-deep));
  border: 3px solid var(--brass);
  border-radius: 6px;
  box-shadow: var(--shadow-mid), inset 0 0 0 1px rgba(255,255,255,.10);
  position: relative;
}
.signboard::before,
.signboard::after {
  /* the two chains holding the sign */
  content: '';
  position: absolute;
  top: -18px;
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, transparent, var(--brass-lo));
}
.signboard::before { inset-inline-start: 24px; }
.signboard::after  { inset-inline-end: 24px; }

.sign-orn {
  display: block;
  color: var(--brass);
  font-size: 13px;
  letter-spacing: 8px;
  margin-bottom: 2px;
}

.sign-name {
  margin: 0;
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 900;
  font-size: 34px;
  line-height: 1.1;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}

.sign-sub {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--brass-hi);
}

.storefront-note {
  margin: 24px auto 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.storefront-note strong {
  color: var(--ink);
  font-weight: 700;
}

.scroll-cue {
  margin-top: 24px;
  display: grid;
  place-items: center;
}
.scroll-cue span {
  width: 22px;
  height: 22px;
  border-inline-start: 2px solid var(--wood-mid);
  border-bottom: 2px solid var(--wood-mid);
  transform: rotate(-45deg);
  opacity: .5;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: rotate(-45deg) translate(0, 0); opacity: .35; }
  50%      { transform: rotate(-45deg) translate(4px, 4px); opacity: .7; }
}

/* ===========================================================
   AISLE — a section of the shop
   =========================================================== */
.aisle {
  padding: 8px 0 12px;
}

.aisle-sign {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 20px;
}
.aisle-sign::before,
.aisle-sign::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wood-mid), transparent);
  opacity: .45;
}
.aisle-sign-text { text-align: center; flex: none; }
.aisle-sign h2 {
  margin: 0;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--wood-dark);
}
.aisle-sign p {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-soft);
}

/* ===========================================================
   SHELVES — fabric bolts standing on walnut planks
   =========================================================== */
.shelf {
  margin-bottom: 4px;
  padding: 0 12px;
}

.shelf-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: 0 6px;
  min-height: 172px;
}

.shelf-board {
  height: 16px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.10) 0 1px, transparent 1px 7px, rgba(255,255,255,.07) 7px 8px, transparent 8px 26px),
    linear-gradient(180deg, var(--wood-light) 0 4px, var(--wood-mid) 4px 11px, var(--wood-dark));
  box-shadow: 0 6px 12px rgba(58, 36, 20, .28), inset 0 1px 0 rgba(255,255,255,.22);
  position: relative;
}
.shelf-board::before,
.shelf-board::after {
  /* brass shelf brackets */
  content: '';
  position: absolute;
  top: 100%;
  width: 8px;
  height: 14px;
  background: linear-gradient(180deg, var(--brass), var(--brass-lo));
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.25);
}
.shelf-board::before { inset-inline-start: 22px; }
.shelf-board::after  { inset-inline-end: 22px; }

/* ---------- the bolt itself ---------- */
.bolt {
  position: relative;
  width: 100px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: bottom center;
  transition: transform .22s cubic-bezier(.3,1.4,.5,1);
  font-family: inherit;
}
.bolt:active { transform: translateY(-4px) scale(1.03); }

.bolt-body {
  position: relative;
  height: 164px;
  border-radius: 7px 7px 3px 3px;
  overflow: hidden;
  box-shadow:
    var(--shadow-mid),
    inset -8px 0 12px -6px rgba(0,0,0,.28),
    inset 8px 0 10px -8px rgba(255,255,255,.30);
}

/* the rolled top edge — layers of folded fabric */
.bolt-body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 15px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.16) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(0,0,0,.20));
  border-radius: 7px 7px 40% 40% / 7px 7px 12px 12px;
}
/* the side edge showing wound layers */
.bolt-body::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 13px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0 1px, rgba(255,255,255,.10) 1px 3px, transparent 3px 4px);
  box-shadow: inset 2px 0 6px rgba(0,0,0,.22);
}

.bolt-face {
  position: absolute;
  inset: 0;
}

/* paper band wrapped around the bolt */
.bolt-band {
  position: absolute;
  inset-inline: -4px;
  bottom: 26px;
  padding: 4px 4px 3px;
  background: linear-gradient(180deg, #FFFDF7, #EFE4CF);
  box-shadow: 0 2px 5px rgba(0,0,0,.28), inset 0 1px 0 #fff;
  text-align: center;
  z-index: 2;
}
.bolt-band-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bolt-band-note {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-soft);
  transform: scale(.84);
  transform-origin: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================================================
   PRICE TAG — a swing tag on a string
   =========================================================== */
.tag {
  position: absolute;
  top: 6px;
  inset-inline-end: -8px;
  z-index: 3;
  transform-origin: top center;
  animation: sway 5s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
.tag-string {
  display: block;
  width: 1px;
  height: 14px;
  margin-inline: auto;
  background: var(--ink-soft);
  opacity: .6;
}
.tag-card {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: linear-gradient(160deg, #FFFCF4, #E9DCC2);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,.30);
  position: relative;
}
.tag-card::before {
  /* the punched hole */
  content: '';
  position: absolute;
  top: 3px;
  inset-inline: 0;
  margin-inline: auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wall-shade);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
}
.tag-price {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 900;
  font-size: 17px;
  line-height: 1;
  color: var(--rose-deep);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.tag-cur {
  font-size: 12px;
  font-weight: 700;
  color: var(--rose);
  padding-top: 6px;
}

/* owned badge */
.owned {
  position: absolute;
  top: -8px;
  inset-inline-start: -6px;
  z-index: 4;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  display: none;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
  color: #3E2E00;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.35);
}
.item.has-some .owned { display: grid; }

/* item states */
.item { position: relative; }
.item.too-pricey .bolt-body,
.item.too-pricey .crate-body,
.item.too-pricey .machine,
.item.too-pricey .garment { filter: grayscale(.55) brightness(.92); }
.item.too-pricey .tag-card { opacity: .6; }
.item.shake { animation: shake .38s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ===========================================================
   FABRIC SWATCHES
   =========================================================== */
.sw-cotton {
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.30) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(190,170,145,.30) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #FDF6E9, #EADCC4);
}

.sw-denim {
  background:
    repeating-linear-gradient(58deg, rgba(255,255,255,.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #4E6E9B, #2F4A70 55%, #24395A);
}

.sw-silk {
  background:
    linear-gradient(112deg,
      #F2C7D6 0%, #FFF0F5 14%, #E7A9C2 30%, #FBE2EC 46%,
      #DE96B4 62%, #FFF3F7 78%, #E9AECA 100%);
  background-size: 220% 100%;
  animation: sheen 7s ease-in-out infinite alternate;
}
@keyframes sheen {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

.sw-wool-basic {
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.22) 0 1.5px, transparent 2px),
    radial-gradient(circle at 75% 65%, rgba(0,0,0,.14) 0 1.5px, transparent 2px),
    linear-gradient(160deg, #B9B2A6, #948B7D);
  background-size: 7px 7px, 9px 9px, 100% 100%;
}

.sw-wool-premium {
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.14) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #8E6C7E, #5E4256);
}

.sw-wool-glitter {
  background:
    radial-gradient(circle at 20% 18%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 42%, #FFF6C8 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 40% 78%, #fff 0 1px, transparent 1.6px),
    linear-gradient(160deg, #7C6BB4, #4A3C86 60%, #2F2560);
  background-size: 13px 13px, 17px 17px, 11px 11px, 100% 100%;
  animation: sparkle 3.2s steps(4) infinite;
}
@keyframes sparkle {
  0%   { background-position: 0 0,     0 0,     0 0,     0 0; }
  100% { background-position: 13px 9px, -17px 11px, 11px -7px, 0 0; }
}

.sw-floral {
  background:
    radial-gradient(circle at 22% 26%, #E76A8B 0 3px, transparent 3.6px),
    radial-gradient(circle at 62% 58%, #F5B93F 0 2.4px, transparent 3px),
    radial-gradient(circle at 84% 22%, #6FA86B 0 2.6px, transparent 3.2px),
    radial-gradient(circle at 40% 82%, #C05FA0 0 2.6px, transparent 3.2px),
    linear-gradient(160deg, #FFF9EC, #F3E4CB);
  background-size: 26px 26px, 22px 22px, 30px 30px, 24px 24px, 100% 100%;
}

.sw-stripe {
  background:
    repeating-linear-gradient(90deg,
      #24405E 0 6px, #FBF6EC 6px 14px);
}

.sw-tulle {
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.75) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #F7D7E6, #E6AECB 60%, #D68FB6);
}

.sw-sequin {
  background:
    radial-gradient(circle at 25% 25%, #FFF0A8 0 3px, #C9A227 3px 4.6px, transparent 5px),
    radial-gradient(circle at 75% 75%, #FFE382 0 3px, #A98613 3px 4.6px, transparent 5px),
    linear-gradient(160deg, #6E5A12, #3D3008);
  background-size: 12px 12px, 12px 12px, 100% 100%;
}

/* ===========================================================
   COUNTER — the mystery crate
   =========================================================== */
.counter {
  margin: 0 16px;
  padding: 24px 16px 0;
  border-radius: 8px 8px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #6B4326, #4E301A);
  box-shadow: var(--shadow-mid), inset 0 2px 0 rgba(255,255,255,.16);
  display: grid;
  place-items: center;
}
.counter-lip {
  height: 12px;
  margin: 20px 12px 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, var(--wood-dark), var(--wood-edge));
  box-shadow: 0 8px 16px rgba(58,36,20,.28);
}

.crate {
  position: relative;
  width: 150px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s cubic-bezier(.3,1.4,.5,1);
  font-family: inherit;
}
.crate:active { transform: translateY(-4px) rotate(-1.5deg); }

/* the crate is drawn with PHYSICAL left/right — it is a picture, not text,
   so it must not mirror under dir="rtl". */
.crate-body {
  position: relative;
  height: 148px;
}

/* the wooden box itself */
.crate-box {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100px;
  border-radius: 3px;
  background:
    /* two diagonal braces */
    linear-gradient(74deg, transparent 44%, rgba(255,255,255,.20) 44% 52%, transparent 52%),
    linear-gradient(-74deg, transparent 44%, rgba(255,255,255,.20) 44% 52%, transparent 52%),
    /* plank gaps */
    repeating-linear-gradient(90deg, rgba(92,58,34,.42) 0 2px, transparent 2px 21px),
    linear-gradient(178deg, #D9A76D, #C08B54 45%, #A06E3C);
  box-shadow:
    var(--shadow-mid),
    inset 0 0 0 3px #8A5A31,
    inset 0 6px 10px -6px rgba(255,255,255,.55);
}
/* the top and bottom rails of the crate */
.crate-box::before,
.crate-box::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px;
  height: 15px;
  background: linear-gradient(180deg, #CF9C62, #A9713F);
  box-shadow: inset 0 0 0 2px rgba(122, 78, 44, .55);
  border-radius: 2px;
}
.crate-box::before { top: -3px; }
.crate-box::after  { bottom: -3px; }

.crate-stamp {
  position: absolute;
  left: 0; right: 0;
  top: 34px;
  text-align: center;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 34px;
  font-weight: 900;
  color: rgba(74, 45, 25, .45);
  transform: rotate(-7deg);
  text-shadow: 0 1px 0 rgba(255,255,255,.30);
}

/* the lid, leaning off the crate at an angle */
.crate-lid {
  position: absolute;
  left: -8px;
  bottom: 84px;
  width: 118px;
  height: 16px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(92,58,34,.35) 0 2px, transparent 2px 19px),
    linear-gradient(180deg, #E0B27C, #B87F49);
  box-shadow: 0 4px 8px rgba(58,36,20,.35), inset 0 0 0 2px #8A5A31;
  transform: rotate(-7deg);
}

/* the goods poking out of the open crate */
.crate-peek {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 88px;
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.crate-peek i {
  display: block;
  flex: none;
}
.peek-spool {
  /* a reel of thread */
  width: 20px; height: 30px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #E8DCC4 0 4px, transparent 4px calc(100% - 4px), #E8DCC4 calc(100% - 4px)),
    repeating-linear-gradient(15deg, #E9718F 0 3px, #C8556F 3px 6px);
  box-shadow: 0 2px 4px rgba(0,0,0,.28);
}
.peek-zip {
  width: 12px; height: 40px;
  border-radius: 2px;
  background: repeating-linear-gradient(0deg, #C9CDD4 0 3px, #7E858F 3px 5px);
  box-shadow: 0 2px 4px rgba(0,0,0,.28);
}
.peek-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFF, #E4D7BE 55%, #B6A488);
  box-shadow: 0 2px 4px rgba(0,0,0,.28), inset 0 0 0 3px rgba(120, 90, 55, .28);
  position: relative;
}
.peek-btn::after {
  /* the four thread holes */
  content: '';
  position: absolute;
  inset: 8px;
  background:
    radial-gradient(circle at 25% 25%, rgba(90,60,30,.6) 0 1.6px, transparent 2px),
    radial-gradient(circle at 75% 25%, rgba(90,60,30,.6) 0 1.6px, transparent 2px),
    radial-gradient(circle at 25% 75%, rgba(90,60,30,.6) 0 1.6px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(90,60,30,.6) 0 1.6px, transparent 2px);
}
.peek-star {
  font-size: 22px;
  font-style: normal;
  line-height: 1;
  color: var(--rose);
  text-shadow: 0 2px 3px rgba(0,0,0,.25);
}

/* ===========================================================
   VITRINE — the sewing machine under glass
   =========================================================== */
.vitrine {
  margin: 0 16px;
  padding: 20px 16px 16px;
  border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.14) 40%, rgba(255,255,255,.34));
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow-mid), inset 0 0 24px rgba(255,255,255,.5);
  backdrop-filter: blur(1px);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.vitrine::before {
  /* glass glare */
  content: '';
  position: absolute;
  top: -40%;
  inset-inline-start: -20%;
  width: 55%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(18deg);
  pointer-events: none;
}
.vitrine-base {
  height: 14px;
  margin: 0 24px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, var(--wood-dark), var(--wood-edge));
  box-shadow: 0 8px 14px rgba(58,36,20,.26);
}

.machine-btn {
  border: 0; background: none; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s cubic-bezier(.3,1.4,.5,1);
  position: relative;
  font-family: inherit;
}
.machine-btn:active { transform: translateY(-3px) scale(1.02); }
/* the vitrine is wide — hang the tag BESIDE the machine, not on it */
.machine-btn .tag { top: 18px; inset-inline-end: -56px; }

/* The machine is a PICTURE: physical left/right only, never logical —
   otherwise dir="rtl" mirrors the head away from the needle. */
.machine {
  position: relative;
  width: 190px;
  height: 132px;
}
/* the column on the right, holding up the arm */
.machine-pillar {
  position: absolute;
  right: 8px; top: 22px; bottom: 20px;
  width: 52px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(100deg, #33333D, #1A1A22 55%, #0E0E13);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14);
}
/* the arm reaching left over the bed */
.machine-arm {
  position: absolute;
  top: 22px; left: 12px; right: 8px;
  height: 30px;
  border-radius: 15px 8px 8px 4px;
  background: linear-gradient(180deg, #3A3A45, #1E1E27 60%, #14141A);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), var(--shadow-soft);
}
/* the head at the left end, where the needle lives */
.machine-head {
  position: absolute;
  top: 22px; left: 12px;
  width: 34px; height: 52px;
  border-radius: 15px 4px 6px 6px;
  background: linear-gradient(160deg, #3A3A45, #1B1B23 60%, #101016);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18);
}
.machine-needle {
  position: absolute;
  top: 74px; left: 28px;
  width: 2px; height: 24px;
  background: linear-gradient(180deg, #F0F0F6, #8E8E9A);
  animation: stitch 1.1s ease-in-out infinite;
}
@keyframes stitch {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.machine-foot {
  position: absolute;
  top: 92px; left: 22px;
  width: 15px; height: 5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #C6C6D0, #7E7E8A);
}
/* the flat bed the fabric slides on */
.machine-bed {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(180deg, #43434E, #1C1C24 55%, #101016);
  box-shadow: 0 7px 12px rgba(0,0,0,.30), inset 0 2px 0 rgba(255,255,255,.20);
}
/* the brass hand wheel */
.machine-wheel {
  position: absolute;
  top: 26px; right: -8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--brass-hi), var(--brass) 52%, var(--brass-lo));
  box-shadow: 0 2px 5px rgba(0,0,0,.40), inset 0 0 0 4px rgba(0,0,0,.18);
}
/* a reel of thread on the spool pin */
.machine-spool {
  position: absolute;
  top: 0; right: 26px;
  width: 18px; height: 24px;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #E8DCC4 0 3px, transparent 3px calc(100% - 3px), #E8DCC4 calc(100% - 3px)),
    repeating-linear-gradient(15deg, #E9718F 0 3px, #C8556F 3px 6px);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.machine-gold {
  position: absolute;
  top: 8px; left: 46px;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--brass-hi);
  letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

/* ===========================================================
   RACK — second-hand garments on hangers
   =========================================================== */
.rack {
  position: relative;
  padding: 30px 8px 0;
}
.rack-pole {
  position: absolute;
  top: 26px;
  inset-inline: 20px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #E4E7EC, #9BA2AC 45%, #6D737C);
  box-shadow: 0 3px 6px rgba(0,0,0,.22);
}
.rack-pole::before,
.rack-pole::after {
  content: '';
  position: absolute;
  top: -18px;
  width: 10px; height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brass), var(--brass-lo));
}
.rack-pole::before { inset-inline-start: -12px; }
.rack-pole::after  { inset-inline-end: -12px; }

.rack-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0 12px 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rack-row::-webkit-scrollbar { display: none; }

.hanger-item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 108px;
  transform-origin: top center;
  transition: transform .22s cubic-bezier(.3,1.4,.5,1);
  font-family: inherit;
}
.hanger-item:active { transform: rotate(-3deg) translateY(2px); }
/* on the rack the tag is pinned ONTO the garment, not floating over the hanger,
   so it never collides with the neighbouring item */
.hanger-item .tag { top: 34px; inset-inline-end: 4px; }
.hanger-item .tag-price { font-size: 15px; }

.hanger {
  position: relative;
  height: 26px;
  margin-bottom: -4px;
}
.hanger-hook {
  position: absolute;
  top: -8px; inset-inline: 0;
  margin-inline: auto;
  width: 12px; height: 14px;
  border: 2px solid #9BA2AC;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.hanger-bar {
  position: absolute;
  bottom: 2px; inset-inline: 14px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #C7CDD5, #868D97);
}
.hanger-bar::before,
.hanger-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 3px; height: 15px;
  background: #A6ADB6;
  transform-origin: bottom;
}
.hanger-bar::before { inset-inline-start: 0;  transform: rotate(-26deg); }
.hanger-bar::after  { inset-inline-end: 0;   transform: rotate(26deg); }

.garment {
  height: 122px;
  box-shadow: var(--shadow-soft), inset 0 -12px 18px -12px rgba(0,0,0,.35);
  position: relative;
}
/* silhouettes via clip-path */
.g-dress {
  clip-path: polygon(30% 0, 70% 0, 78% 16%, 66% 30%, 92% 100%, 8% 100%, 34% 30%, 22% 16%);
}
.g-skirt {
  clip-path: polygon(24% 0, 76% 0, 96% 100%, 4% 100%);
}
.g-shirt {
  clip-path: polygon(30% 0, 70% 0, 96% 14%, 90% 20%, 86% 34%, 84% 84%, 16% 84%, 14% 34%, 10% 20%, 4% 14%);
}
.g-coat {
  clip-path: polygon(28% 0, 72% 0, 96% 13%, 92% 20%, 90% 42%, 90% 100%, 10% 100%, 10% 42%, 8% 20%, 4% 13%);
}
.garment::after {
  /* a faint centre seam / fold */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 46%, rgba(0,0,0,.12) 50%, transparent 54%);
}

.hanger-label {
  margin-top: 8px;
  text-align: center;
}
.hanger-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.hanger-note {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-soft);
  transform: scale(.88);
}
.rack-hint {
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-soft);
  margin: -8px 0 8px;
}

/* ===========================================================
   OUTRO
   =========================================================== */
.shop-outro {
  text-align: center;
  padding: 36px 16px 8px;
}
.outro-line {
  margin: 0;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 19px;
  color: var(--wood-dark);
}
.outro-sub {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-soft);
}

/* ===========================================================
   BASKET BAR
   =========================================================== */
.basketbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding: 0 18px env(safe-area-inset-bottom);
  border: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--cream);
  background: linear-gradient(180deg, var(--sign), var(--sign-deep));
  box-shadow: 0 -3px 0 var(--brass-lo), 0 -10px 24px rgba(58,36,20,.28);
  -webkit-tap-highlight-color: transparent;
}

.basket-icon {
  position: relative;
  width: 36px; height: 34px;
  flex: none;
}
.basket-handle {
  position: absolute;
  top: 0; inset-inline: 7px;
  height: 12px;
  border: 2px solid var(--brass);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.basket-body {
  position: absolute;
  bottom: 0; inset-inline: 0;
  height: 24px;
  border-radius: 3px 3px 7px 7px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #C08B54, #8A5A31);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}
.basket-count {
  position: absolute;
  top: -6px; inset-inline-start: -8px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--rose);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.3,1.5,.5,1);
}
.basket-count.on { transform: scale(1); }

.basket-text {
  flex: 1;
  text-align: start;
  display: grid;
  gap: 1px;
}
.basket-title { font-size: 16px; font-weight: 700; }
.basket-sub   { font-size: 12px; font-weight: 300; color: rgba(251,244,233,.66); }
.basket-chev  { font-size: 15px; color: var(--brass-hi); }

/* ===========================================================
   BASKET SHEET
   =========================================================== */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(30, 18, 8, .52);
  backdrop-filter: blur(2px);
  animation: fade .22s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 51;
  max-width: 720px;
  margin-inline: auto;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-deep);
  padding-bottom: env(safe-area-inset-bottom);
  animation: rise .3s cubic-bezier(.22,.9,.3,1);
}
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet-grab {
  width: 44px; height: 4px;
  border-radius: 999px;
  background: var(--wall-shade);
  margin: 10px auto 4px;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 12px;
  border-bottom: 1px dashed var(--wall-shade);
}
.sheet-head h2 {
  margin: 0;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 20px;
  color: var(--wood-dark);
}
.sheet-close {
  width: 44px; height: 44px;
  border: 0;
  background: none;
  font-size: 18px;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
  -webkit-overflow-scrolling: touch;
}

.empty {
  text-align: center;
  padding: 32px 16px 40px;
  color: var(--ink-soft);
}
.empty-icon { font-size: 34px; opacity: .5; }
.empty h3 { margin: 12px 0 4px; font-size: 16px; color: var(--ink); font-weight: 700; }
.empty p  { margin: 0; font-size: 13px; font-weight: 300; }

.line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--wall-shade);
}
.line-chip {
  width: 42px; height: 42px;
  border-radius: 8px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), var(--shadow-soft);
}
.line-text { flex: 1; min-width: 0; }
.line-name { font-size: 15px; font-weight: 500; }
.line-meta { font-size: 12px; font-weight: 300; color: var(--ink-soft); }
.line-qty {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.qty-btn {
  width: 34px; height: 44px;
  border: 0;
  background: none;
  font-size: 20px;
  font-weight: 700;
  color: var(--wood);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qty-btn:disabled { opacity: .3; }
.qty-num {
  min-width: 24px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.line-sum {
  flex: none;
  min-width: 42px;
  text-align: end;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--rose-deep);
  font-variant-numeric: tabular-nums;
}

.sheet-foot {
  padding: 14px 20px 18px;
  border-top: 2px solid var(--wall-shade);
  background: #FFFCF5;
  border-radius: 0;
}
.receipt { margin-bottom: 12px; }
.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  font-weight: 700;
  padding: 3px 0;
}
.receipt-row span:last-child { font-variant-numeric: tabular-nums; }
.receipt-row--muted {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-soft);
}

.btn-primary {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--cream);
  background: linear-gradient(180deg, var(--sign), var(--sign-deep));
  box-shadow: 0 4px 0 #16241F, var(--shadow-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, opacity .2s ease;
}
.btn-primary:active:not(:disabled) { transform: translateY(2px); }
.btn-primary:disabled { opacity: .42; cursor: default; }

/* ===========================================================
   TOAST
   =========================================================== */
.toast {
  position: fixed;
  bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom));
  inset-inline: 0;
  margin-inline: auto;
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(30, 18, 8, .92);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-mid);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.on { opacity: 1; transform: translateY(0); }

/* flying coin/chip on purchase */
.fly {
  position: fixed;
  z-index: 55;
  width: 34px; height: 34px;
  border-radius: 7px;
  pointer-events: none;
  box-shadow: var(--shadow-mid);
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (min-width: 480px) {
  .shelf-row { gap: 20px; }
  .bolt { width: 112px; }
  .bolt-body { height: 162px; }
  .sign-name { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}