/* ======================================================================
   STORE, FINAL (judge's pick: draft a "pure Apple" + grafts from b and c).
   Ships as css/pages/store.css. Grafts are marked GRAFT-B / GRAFT-C / JUDGE.
   Every number cites builder/pages-team/store/SPEC.md (§). "BORROWED" = a measured
   Apple value reused for a spot Apple has no exact twin. Static markup uses .stx-;
   cards made by js/store.js keep their .st- hooks and are styled here through the
   ids #st-latest / #pgrid / #stx-dev / #st-types, so the old .st- rules in
   css/style.css (home team's file) can stay or go without changing this page.
   ====================================================================== */
.stx{
  --stx-ink:#1d1d1f;          /* §10.1 */
  --stx-ink-2:#6e6e73;        /* §10.2 */
  --stx-eye:#424245;          /* §10.3 */
  --stx-bg:#f5f5f7;           /* §10.4 */
  --stx-card:#fff;            /* §10.5 */
  --stx-track:#e8e8ed;        /* §10.6 */
  --stx-bur:#800020;          /* §10.10 star burgundy (img/logo-star.svg) */
  --stx-link:var(--link,#0066cc);            /* §10.9 Apple blue text links (Sir, Oct 24) */
  --stx-link-h:var(--link,#0066cc);
  --stx-shadow:2px 4px 12px rgba(0,0,0,.08);       /* §4B.3 */
  --stx-shadow-h:2px 4px 16px rgba(0,0,0,.16);     /* §4B.4 */
  --stx-ease:cubic-bezier(0,0,.5,1);               /* §4B.6 */
  --stx-edge:clamp(22px,calc(-268.46154px + 28.36538vw),140px);  /* §1.3: 140 at >=1440, Apple's formula 1024-1440, 22 below */
  --stx-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='28 28 191 191'%3E%3Cpath d='M88.2,218.8 87.7,217.2 87.2,215.6 86.5,210.2 84.8,201.4 82.6,193.8 81.7,191.0 80.7,188.0 77.7,181.0 75.2,176.0 72.5,171.7 69.7,167.8 68.5,166.2 67.2,164.8 65.8,163.0 61.7,159.0 56.8,155.0 55.2,153.9 53.8,152.9 50.5,151.0 48.2,149.8 41.5,146.8 39.2,146.0 37.2,145.5 33.4,144.2 33.1,144.0 33.5,143.6 34.0,143.3 34.5,143.2 40.2,143.1 44.2,143.2 102.5,143.1 104.2,143.3 104.8,143.5 105.2,143.9 105.4,144.2 105.4,145.0 105.0,147.2 103.7,153.0 102.9,156.0 101.9,161.0 100.0,169.0 99.0,174.2 98.2,177.2 97.8,179.5 96.2,185.9 95.6,189.2 93.2,199.2 92.6,203.0 92.2,204.2 90.7,211.0 90.2,212.6 89.5,216.3 88.5,218.8Z'/%3E%3Cpath d='M118.0,142.8 115.5,142.6 111.2,142.6 110.0,142.4 109.0,142.1 108.2,141.6 107.8,141.1 107.0,140.0 106.6,138.8 106.6,137.0 107.0,134.0 108.0,128.0 108.4,125.2 109.2,122.2 109.7,118.0 110.7,112.2 111.0,110.2 111.5,104.2 113.0,96.7 113.4,93.2 114.0,90.2 114.3,87.2 115.2,81.2 115.7,77.2 116.0,76.2 116.4,75.0 116.7,74.0 117.1,70.0 117.9,65.0 118.4,61.2 118.8,59.1 119.2,55.8 120.0,51.0 120.7,45.2 121.6,42.2 121.9,39.2 122.2,37.0 123.2,33.5 124.5,29.9 125.2,28.6 125.5,28.4 126.2,28.2 126.5,28.2 126.8,28.5 127.2,29.0 127.4,29.2 129.2,34.4 130.1,38.0 130.7,42.2 131.7,45.0 132.2,47.2 133.1,50.2 134.8,54.0 135.3,55.2 136.1,59.0 138.1,65.2 139.5,68.0 141.3,71.2 141.7,72.2 142.4,74.2 142.8,75.0 144.0,77.0 144.7,79.0 145.2,80.2 146.1,81.5 147.5,83.1 148.2,84.2 151.2,90.2 153.2,93.0 154.3,95.0 155.0,96.0 157.7,99.0 161.1,103.8 164.5,107.4 166.5,110.2 171.0,114.2 175.4,118.0 180.0,122.0 181.2,123.0 184.5,124.7 187.7,127.2 191.2,129.4 193.2,130.4 200.2,133.3 206.5,136.5 209.2,137.8 211.5,138.7 212.2,139.1 213.5,140.0 213.8,140.2 214.3,141.0 214.3,141.2 213.3,142.0 212.2,142.4 211.2,142.5 203.2,142.7 198.2,142.8 166.5,142.7 161.5,142.8Z'/%3E%3C/svg%3E");
  background:var(--stx-bg);                       /* §1.1 */
  color:var(--stx-ink);
  font-family:var(--font);
  font-size:17px;line-height:25px;font-weight:400;letter-spacing:-.374px;   /* §1.2 */
  overflow-x:clip;                                 /* §1.9 no sideways page scroll */
}
@media (min-width:1440px){.stx{--stx-edge:140px}}  /* exact 140, no 139.98 */
@media (max-width:734px){.stx{--stx-edge:16px}}    /* Sir's 16px phone gutter (beats Apple's 22) */
.stx *,.stx *::before,.stx *::after{box-sizing:border-box}
:where(.stx) ul{list-style:none;margin:0;padding:0}        /* :where = zero weight, so the classes below always win */
:where(.stx) :is(h1,h2,h3,p){margin:0}

/* Marvans star after a headline: the approved size/place (.st-h2 b::after = .34em, .08em, .62em) */
.stx-starred::after{content:"";display:inline-block;width:.34em;height:.34em;margin-left:.08em;vertical-align:baseline;position:relative;top:-.62em;
  background:var(--stx-bur);-webkit-mask:var(--stx-star) center/contain no-repeat;mask:var(--stx-star) center/contain no-repeat}

/* text link with Apple's chevron (§2.7, §8.7) */
.stx-more{color:var(--stx-link);text-decoration:none}
.stx-more::after{content:"\203A";padding-inline-start:.24em}
@media (hover:hover){a.stx-more:hover{text-decoration:underline}}
.stx-hero .stx-more{color:var(--stx-link)}   /* FIX: #800020 on #f5f5f7 is ~4.3:1; #5E0018 is ~5.2:1 (passes 4.5:1) */

/* ---------- 1 · hero (§2) ---------- */
.stx-hero{display:flex;align-items:flex-start;padding:0 var(--stx-edge)}           /* §2.1, §1.4; flex-start (FIX): our tagline wraps to 3 lines (96px, measured), so 'Store' keeps Apple's 80px top */
.stx-hero-l{flex:1 1 auto;min-width:0;max-width:640px;padding:80px 0 64px}           /* §2.2 */
.stx-h1{display:flex;align-items:flex-start;font-size:80px;line-height:84px;font-weight:600;letter-spacing:-1.2px;color:var(--stx-ink)}  /* §2.3 */
.stx-h1-star{flex:none;width:.2em;height:.2em;margin:.13em 0 0 .05em;fill:var(--stx-bur)}   /* GRAFT-B/C: approved H1 star, style.css .st-title-star */
.stx-hero-r{flex:0 1 317px;min-width:0;margin-left:auto;padding:90px 0 54px;display:flex;flex-direction:column;align-items:flex-end;text-align:right} /* §2.4 */
.stx-tagline{max-width:317px;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.196px}   /* §2.5 */
.stx-hero-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:16px}     /* measured apple.com/store Oct 22: .rf-shop-chat-section pt 16, .rs-shop-neareststore pt 8 (line boxes 260/288) */
.stx-hero-links li{font-size:14px;line-height:20px;letter-spacing:-.224px}                           /* §2.6 */
@media (max-width:734px){
  .stx-hero{flex-direction:column;align-items:stretch}
  .stx-hero-l{max-width:none;padding:56px 0 0}                                                        /* §2.2 M */
  .stx-h1{font-size:48px;line-height:52px;letter-spacing:-.144px}                                     /* §2.3 M */
  .stx-hero-r{flex:none;margin-left:0;padding:0 0 28px;align-items:flex-start;text-align:start}       /* §2.4 M */
  .stx-tagline{max-width:300px;padding-top:8px;font-size:21px;line-height:25px;letter-spacing:.231px} /* §2.5 M */
  .stx-hero-links{align-items:flex-start;gap:12px;margin-top:32px}                                    /* measured apple.com/store M: chat pt 32, nearest-store pt 12 (hero 278 = §2.8) */
}

/* ---------- shared sideways shelf (§3.2-3.4, §4.1-4.9) ---------- */
.stx-rail{position:relative}
.stx-clip{box-sizing:content-box;overflow:hidden;height:500px;padding-bottom:38px}                     /* §4.6 (the 38px hides the scrollbar) */
.stx-scroller{overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;  /* §3.3, §4.9, §9.8 */
  scroll-padding-inline:var(--stx-edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stx-scroller::-webkit-scrollbar{display:none}
.stx-platter{display:inline-flex;vertical-align:top;gap:20px;padding:16px var(--stx-edge) 40px}  /* §3.4, §4.5 16px top, §4.7 20px gap, §4.8 edges */
.stx-platter>li{flex:none;scroll-snap-align:start}
.stx-shelf{position:relative;padding-bottom:46px}                                /* §4.1 */
.stx-shelf-head{margin:0 var(--stx-edge);padding-bottom:8px}                     /* §4.2 */
.stx-h2{font-size:28px;line-height:32px;font-weight:600;letter-spacing:.196px;color:var(--stx-ink)}  /* §4.3 */
.stx-h2 b{font-weight:600}
.stx-h2 span{color:var(--stx-ink-2)}                                             /* §4.4 */
@media (max-width:734px){
  .stx-clip{height:450px}                                                         /* §4.6 M */
  .stx-shelf{padding-bottom:28px}                                                 /* §4.1 M */
  .stx-shelf-head{max-width:87.5%;margin-right:0}                                 /* §4.2 M */
  .stx-h2{font-size:24px;line-height:28px;letter-spacing:.216px}                  /* §4.3 M */
}

/* card skin (§4B) */
.stx-card{background:var(--stx-card);border-radius:18px;box-shadow:var(--stx-shadow);overflow:hidden;
  transition:transform .3s var(--stx-ease),box-shadow .3s var(--stx-ease)}
@media (hover:hover) and (pointer:fine){
  .stx-card:hover,.stx-card:focus-within{box-shadow:var(--stx-shadow-h)}
  .stx-card:hover{transform:scale3d(1.01,1.01,1.01)}                              /* §4B.5 */
  .stx-sliding .stx-card:hover{transform:none}                                    /* §4B.5 not while sliding */
}

/* shelf paddles (§5): hover devices only, never on phones */
.stx-paddle{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:735px){
  .stx-paddle{display:block;position:absolute;z-index:2;top:49%;margin-top:-28px;width:56px;height:56px;padding:0;border:0;border-radius:56px;  /* §5.1, §5.2 */
    background:rgba(210,210,215,.64);cursor:pointer;opacity:1;transform:scale(1);                                                          /* §5.3, §5.6 */
    transition:transform .5s ease-in,opacity .5s cubic-bezier(.15,0,.2,1) .1s,background-color .1s linear}                                /* §5.7 */
  .stx-prev{left:18px}.stx-next{right:18px}                                                                                                /* §5.2 */
  .stx-paddle svg{display:block;width:36px;height:36px;margin:auto;fill:none;stroke:rgba(0,0,0,.56);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .1s linear} /* §5.4 */
  .stx-paddle:hover{background:hsla(240,7%,88%,.698)}
  .stx-paddle:hover svg,.stx-paddle:active svg{stroke:rgba(0,0,0,.64)}
  .stx-paddle:active{background:hsla(240,4%,77%,.654)}
  .stx-paddle:disabled{opacity:0;transform:scale(.8);pointer-events:none;transition:transform .5s ease-in,opacity .7s cubic-bezier(.15,0,.2,1) .1s}  /* §5.5 */
  .stx-static .stx-paddle{display:none}
}

/* ---------- 2 · category row (§3) ---------- */
.stx-cats{padding-bottom:62px}                                                    /* §3.1 */
.stx-clip-cats{height:148px}                                                       /* §3.2 */
.stx-platter-cats{gap:10px}                                                        /* §3.5 */
.stx-platter-cats>li{min-width:136px}                                              /* §3.5, §3.6 */
.stx-cat{display:block;min-width:136px;padding:18px 8px 16px;border-radius:18px;text-align:center;color:var(--stx-ink);text-decoration:none}  /* §3.6 */
.stx-cat-img{display:block;padding-bottom:16px}                                    /* §3.7 */
.stx-cat-img img{display:block;margin:0 auto;height:78px;width:auto;max-width:120px;object-fit:contain}  /* §3.7 max-height 78, shown 120 wide */
.stx-cat-t{display:block;font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.224px;white-space:nowrap}  /* §3.8 */
@media (max-width:734px){
  .stx-cats{padding-bottom:30px}                                                   /* §3.1 M */
  .stx-clip-cats{padding-bottom:15px}                                              /* §3.2 M */
  .stx-platter-cats>li,.stx-cat{min-width:96px}                                    /* §3.5 M */
  .stx-cat{padding:16px 4px}                                                       /* §3.6 M */
  .stx-cat-img{padding-bottom:12px}
  .stx-cat-img img{height:60px;max-width:92px}                                     /* §3.7 M */
}

/* ---------- 3 · "The latest." product cards made by js/store.js (§4A.1 400x500, §4C text) ---------- */
#st-latest .st-prod{position:relative;width:400px;height:500px;margin:0;padding:28px;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--stx-card);border-radius:18px;box-shadow:var(--stx-shadow);overflow:hidden;transform:none;
  transition:transform .3s var(--stx-ease),box-shadow .3s var(--stx-ease)}
#st-latest .st-corner,#pgrid .st-corner{display:none}
#st-latest .st-eye{order:1;margin:0;padding-bottom:8px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.12px;text-transform:uppercase;color:var(--stx-eye)} /* §4C.2 */
#st-latest .st-prod h3{order:2;max-width:340px;min-height:64px;margin:0;padding:0;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.196px;color:var(--stx-ink)} /* §4C.3, §4C.1 width; 2 lines kept so prices line up */
#st-latest .st-price{order:3;margin:0;padding-top:10px;font-size:14px;line-height:18px;letter-spacing:-.224px;color:var(--stx-ink)}  /* §4C.4 */
#st-latest .st-pimg{order:4;position:relative;flex:1 1 auto;align-self:stretch;width:auto;height:auto;min-height:0;margin:20px 0 0;aspect-ratio:auto}  /* BORROWED §4E.3 20px info gap */
#st-latest .st-pimg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
#st-latest .st-vars{order:5;margin:0;padding:19px 0 0}                                     /* §4E.4 19px top */
#st-latest .st-add{order:6;align-self:flex-start;margin:14px 0 0}                          /* §4E.4 14px bottom */
@media (hover:hover) and (pointer:fine){
  #st-latest .st-prod:hover{transform:scale3d(1.01,1.01,1.01);box-shadow:var(--stx-shadow-h)}
  .stx-sliding #st-latest .st-prod:hover{transform:none}
}
@media (max-width:734px){
  #st-latest .st-prod{width:309px;height:450px}                                            /* §4A.1 M */
  #st-latest .st-eye{padding-bottom:7px}                                                   /* §4C.2 M */
  #st-latest .st-prod h3{max-width:253px;min-height:50px;font-size:21px;line-height:25px;letter-spacing:.231px}  /* §4C.3 M, §4C.1 M */
}

/* variant choices (BORROWED §8.3 small button; colours §10.6 / §10.8; gap §4E.4 7px) */
#st-latest .st-vars,#pgrid .st-vars{display:flex;flex-wrap:wrap;gap:7px}
#st-latest .st-var,#pgrid .st-var{height:auto;min-width:45px;padding:4px 11px;border:0;border-radius:980px;background:var(--stx-track);color:var(--stx-ink);
  font-family:inherit;font-size:12px;line-height:16px;font-weight:400;letter-spacing:-.12px;box-shadow:none;cursor:pointer;transform:none;
  transition:background-color .12s ease-out,color .12s ease-out}
#st-latest .st-var[aria-pressed=true],#pgrid .st-var[aria-pressed=true]{background:var(--stx-ink);color:#fff;font-weight:400;box-shadow:none}

/* "Add to bag" = Apple base button in the site pink (§8.1) */
#st-latest .st-add,#pgrid .st-add{display:inline-flex;align-items:center;justify-content:center;height:auto;min-width:60px;padding:8px 15px;
  border:1px solid var(--stx-link);border-radius:980px;background:var(--stx-link);color:#fff;font-family:inherit;font-size:14px;line-height:18px;font-weight:400;letter-spacing:-.224px;box-shadow:none;filter:none}   /* §8.1 Apple base button: no shadow (drops the site .pill glow) */
@media (hover:hover){#st-latest .st-add:hover,#pgrid .st-add:hover{background:var(--stx-link-h);border-color:var(--stx-link-h);box-shadow:none}}
#st-latest .st-add.added,#pgrid .st-add.added{background:var(--stx-ink);border-color:var(--stx-ink);box-shadow:none}   /* §8.5 dark neutral = "Added" */

/* ---------- 4 · "Help is here." (§4A.2 480x500, §4C) ---------- */

                      /* §4C.1: 28px padding, 340px text */
  /* §4C.2 */
  /* §4C.3; 64 = 2 lines, same as #st-latest h3 */
  /* §4C.4; 52 = 10 + 18 + 6 + 18, keeps 'Ask for price' level */
                           /* §4C.4 bold lead line */
  /* GRAFT-B/C: own price line; §4E.7 size, §4C.4 10px */
  /* BORROWED §4C.4 10px */
  /* BORROWED §4E.3 20px; 28px = card padding §4C.1 */

  /* GRAFT-C; §2.6 link size; sits in the shelf's 46px bottom (§4.1) */

#help{padding-bottom:68px}                                                         /* FIX equal gap: 68 = 22 clip left visible + 46 shelf bottom, same as every card bottom */
@media (max-width:734px){#help{padding-bottom:50px}}                               /* 50 = 22 + 28 M */

/* ---------- 5 + 7 · half-height cards (§4A.5, §4D) ---------- */
   /* §4D.5 */
.stx-half{display:block;width:313px;height:240px;padding:28px 28px 0;color:var(--stx-ink);text-decoration:none}  /* §4D.1, §4D.2 */
                                                      /* one row of half cards */
.stx-hicon{display:block;height:53px;padding-bottom:5px}                          /* §4D.3 */
.stx-hicon svg{display:block;height:48px;width:auto;fill:none;stroke:var(--stx-bur);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}  /* §4D.3 colour = burgundy; 1.6 = site icon stroke */
.stx-hicon svg *{vector-effect:non-scaling-stroke}
  /* GRAFT-B: Marvans star as the "Since 2007" icon; 40 = §4D.3 low end; +4 centres it on the 48px icon line */                                /* same line weight for 24- and 48-unit icons */
.stx-htitle{font-size:24px;line-height:28px;font-weight:600;letter-spacing:.216px}  /* §4D.4 */
.stx-hl{color:var(--stx-bur)}                                                     /* §4D.4 highlight in the icon colour */

/* ---------- 6 · all accessories (§6, §7) ---------- */
.stx-grid-sec{padding:144px 0}                                                    /* §7.1 */
.stx-in{padding:0 var(--stx-edge)}
.stx-h2-big{font-size:48px;line-height:52px;letter-spacing:-.144px}              /* §7.2 */
.stx-noscript{margin-top:40px;font-size:17px;line-height:25px;color:var(--stx-ink-2)}

/* pill bar with the sliding black pill (§6.1-6.5) */
.stx-tabs{position:relative;display:flex;width:max-content;max-width:100%;height:44px;margin-top:48px;padding:4px;  /* §6.1, §6.2 */
  background:var(--stx-track);border-radius:999px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.stx-tabs::-webkit-scrollbar{display:none}
.stx-tabs::before{content:"";position:absolute;z-index:0;top:4px;left:0;height:36px;width:var(--stx-iw,0px);
  transform:translateX(var(--stx-ix,0px));background:var(--stx-ink);border-radius:99px}  /* §6.4 */
.stx-tabs.stx-ready::before{transition:transform .32s ease-out,width .32s ease-out}       /* §6.4 .32s ease-out */
.stx-tabs-type{margin-top:20px}                                                   /* BORROWED §7.4 grid gap (Apple has no 2nd bar, §13) */
#stx-dev .st-chip,#st-types .st-chip{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;height:36px;padding:0 16px;margin:0;  /* §6.3 */
  border:0;border-radius:99px;background:transparent;box-shadow:none;color:var(--stx-ink);font-family:inherit;font-size:14px;line-height:18px;
  font-weight:400;letter-spacing:-.224px;white-space:nowrap;cursor:pointer;transform:none;transition:color .12s ease-out}  /* §6.4 others */
#stx-dev .st-chip::before,#st-types .st-chip::before{display:none}
#stx-dev .st-chip[aria-pressed=true],#st-types .st-chip[aria-pressed=true]{color:#fff;font-weight:400;background:transparent;box-shadow:none;
  transition:color .16s ease-in .16s}                                             /* §6.4 selected */
#stx-dev:not(.stx-ready) .st-chip[aria-pressed=true],#st-types:not(.stx-ready) .st-chip[aria-pressed=true]{background:var(--stx-ink)}   /* before the pill is measured */

/* grid (§7.4) */
#pgrid.stx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,300px));gap:20px;margin-top:40px}  /* §7.4, §7.3 */
#pgrid .st-prod{position:relative;width:auto;height:auto;min-width:0;margin:0;padding:28px;display:flex;flex-direction:column;align-items:stretch;  /* §7.6 */
  background:var(--stx-card);border-radius:28px;box-shadow:none;transform:none;
  transition:transform .3s var(--stx-ease),box-shadow .3s var(--stx-ease)}
#pgrid .st-pimg{order:-1;position:relative;width:100%;height:auto;aspect-ratio:1/1;margin:0;background:var(--stx-bg);border-radius:18px}  /* §7.8 square; bg §10.4 (IMAGES.md: models sit best on #f5f5f7); radius §4B.2 */
#pgrid .st-pimg img{position:absolute;inset:28px;width:calc(100% - 56px);height:calc(100% - 56px);max-width:none;max-height:none;object-fit:contain}  /* BORROWED §7.6 28px */
#pgrid .st-eye{margin:0;padding:16px 0 8px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.12px;text-transform:none;color:var(--stx-eye)}  /* §7.9 16px, §7.11 size, BORROWED §4C.2 8px + grey */
#pgrid .st-prod h3{min-height:42px;margin:0;padding:0;font-size:17px;line-height:21px;font-weight:600;letter-spacing:-.374px;color:var(--stx-ink)}  /* §7.12 */
#pgrid .st-vars{margin:0;padding:12px 0 0}                                        /* BORROWED §7.10 12px */
#pgrid .st-price{margin:auto 0 0;padding-top:12px;font-size:14px;line-height:18px;letter-spacing:-.224px;color:var(--stx-ink)}  /* §7.13; auto = rows end level */
#pgrid .st-add{align-self:flex-start;margin:12px 0 0}                             /* BORROWED §7.13 12px */
#pgrid .st-more-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:0;margin:0;padding:28px;  /* §7.6 */
  background:var(--stx-card);border-radius:28px;box-shadow:none;text-align:start;text-decoration:none;color:var(--stx-ink);gap:0}
#pgrid .st-more-card::before{display:none}
#pgrid .st-more-card b{font-size:17px;line-height:21px;font-weight:600;letter-spacing:-.374px;color:var(--stx-ink)}     /* §7.12 */
#pgrid .st-more-card span{padding-top:10px;font-size:14px;line-height:18px;letter-spacing:-.224px;color:var(--stx-ink-2)}  /* §4C.4 */
#pgrid .st-more-card .more{margin:0;padding-top:12px;font-style:normal;font-size:14px;line-height:18px;letter-spacing:-.224px;color:var(--stx-link)}  /* §7.13 */
@media (hover:hover) and (pointer:fine){
  #pgrid .st-prod:hover,#pgrid .st-more-card:hover{transform:scale3d(1.01,1.01,1.01);box-shadow:var(--stx-shadow-h)}  /* §7.7 */
}

/* products with no real picture (GRAFT-B/C): grey tile, burgundy Marvans star, type name. No drawings.
   Star 40px = §4D.3 icon low end; 16px gap = §3.7 image-to-label. The star <img> stays visible so the
   "fly to bag" copy in js/store.js has something to fly. */
#pgrid .stx-noimg .st-pimg,#st-latest .stx-noimg .st-pimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#pgrid .stx-noimg .st-pimg img,#st-latest .stx-noimg .st-pimg img{position:static;inset:auto;flex:none;width:40px;height:40px;max-width:none;max-height:none}
#pgrid .stx-noimg .st-pimg::after,#st-latest .stx-noimg .st-pimg::after{content:attr(data-stx-type);
  font-size:17px;line-height:21px;font-weight:600;letter-spacing:-.374px;color:var(--stx-ink-2)}   /* §7.12 size, §10.2 colour */
#st-latest .stx-noimg .st-pimg{background:var(--stx-bg);border-radius:18px}

@media (max-width:1068px){#pgrid.stx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* keeps columns near the measured 300px */
@media (max-width:734px){
  .stx-grid-sec{padding:112px 0}                                                   /* §7.1 M */
  .stx-h2-big{font-size:32px;line-height:36px;letter-spacing:.128px}               /* §7.2 M */
  .stx-tabs{width:100%;margin-top:32px}                                            /* §7.3 M; 100% = §6.2 M platter edge to edge, both bars end level */
  .stx-tabs.stx-fade{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}  /* §6.6 22px fade, only while the bar can still scroll (final.js) */
  .stx-tabs-type{margin-top:11px}                                                  /* BORROWED §7.4 M gap */
  #pgrid.stx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:24px}   /* §7.4 M, §7.3 M */
  #pgrid .st-prod,#pgrid .st-more-card{padding:20px}                               /* §7.6 M */
  #pgrid .st-pimg img{inset:20px;width:calc(100% - 40px);height:calc(100% - 40px)}
  #pgrid .stx-noimg .st-pimg{gap:12px}                                             /* §3.7 M */
  #pgrid .stx-noimg .st-pimg img{width:40px;height:40px}
  #pgrid .st-eye{padding-top:12px;padding-bottom:7px}                              /* §7.9 M, §4C.2 M */
  #pgrid .st-prod h3{min-height:36px;font-size:14px;line-height:18px;letter-spacing:-.224px}  /* §7.12 M */
  #pgrid .st-price{font-size:12px;line-height:16px;letter-spacing:-.12px}          /* §7.13 M */
  #pgrid .stx-noimg .st-pimg::after{font-size:14px;line-height:18px;letter-spacing:-.224px}
  #pgrid .st-more-card b{font-size:14px;line-height:18px;letter-spacing:-.224px}
}

/* ---------- 8 · quick links (§8.4) + fine print (§1.8) ---------- */
                                        /* BORROWED §4.1 shelf bottom */
  /* §8.4 */

                                         /* §8.4 */
    /* §8.4 */
                 /* §8.7 */
.stx-fine{padding:0 var(--stx-edge) 46px;font-size:12px;line-height:16px;letter-spacing:-.12px;color:rgba(0,0,0,.56)}  /* §1.8; ls -0.12px measured on apple.com .as-globalfooter */
.stx-fine p+p{margin-top:16px}                                                    /* one 16px line */
.stx-fine a{color:rgba(0,0,0,.72);text-decoration:none}
@media (hover:hover){.stx-fine a:hover{text-decoration:underline}}
@media (max-width:734px){
  
               /* §8.4 M */
  .stx-fine{padding-bottom:28px}
}

/* bag drawer: pickup-only line (drawer styles stay in css/style.css) */
.stx-bag-pickup{margin:0;font-size:14px;line-height:20px;letter-spacing:-.224px;color:var(--ink-2,#6e6e73)}

/* ---------- reduced motion (§9.7) ---------- */
@media (prefers-reduced-motion:reduce){
  .stx-card,#st-latest .st-prod,#pgrid .st-prod,#pgrid .st-more-card,.stx-paddle,.stx-paddle svg,.stx-tabs.stx-ready::before,
  #stx-dev .st-chip,#st-types .st-chip,#st-latest .st-var,#pgrid .st-var{transition:none!important}
  .stx-card:hover,#st-latest .st-prod:hover,#pgrid .st-prod:hover,#pgrid .st-more-card:hover{transform:none!important}
  .stx-paddle:disabled{transform:none}
  #st-latest .st-add:active,#pgrid .st-add:active,#bag-send:active{transform:none}
}

/* Touch only: 44px hit areas without changing the look (::before, since .stx-more::after is the chevron) */
@media (pointer:coarse){
  .stx-more,#st-latest .st-add,#pgrid .st-add,#st-latest .st-var,#pgrid .st-var,#stx-dev .st-chip,#st-types .st-chip{position:relative}
  .stx-more::before,#st-latest .st-add::before,#pgrid .st-add::before,#st-latest .st-var::before,#pgrid .st-var::before,#stx-dev .st-chip::before,#st-types .st-chip::before{content:"";display:block;position:absolute;left:0;right:0;top:50%;height:44px;min-width:44px;transform:translateY(-50%)}
  #stx-dev .st-chip::before,#st-types .st-chip::before,#stx-dev .st-chip[aria-pressed=true]::before,#st-types .st-chip[aria-pressed=true]::before{width:auto;margin:0;background:none;-webkit-mask:none;mask:none}
  #st-latest .st-vars,#pgrid .st-vars{row-gap:20px}
  #bag .bag-x,#bag-list .qty button{position:relative}
  #bag .bag-x::before,#bag-list .qty button::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .storepage .ln-bag,.storepage .ln-title{position:relative}
  .storepage .ln-bag::before,.storepage .ln-title::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
/* "The latest." cards: Marvans mark + "Coming soon" instead of a product picture (Sir, Oct 23) */
#st-latest .stx-noimg .st-pimg img{width:72px;height:72px}

/* Help cards: Marvans mark on a grey panel instead of product pictures (Sir, Oct 23) */

/* tighter gap between "The latest." and "All accessories." (Sir, Oct 23: too much space) */
.stx-grid-sec{padding-top:56px}
@media (max-width:734px){.stx-grid-sec{padding-top:40px}}

/* ===== filter toolbar: your model + search + count + clear (Sir, Oct 23) ===== */
.stx-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin-top:20px}
.stx-model{display:flex;flex-wrap:wrap;gap:12px}
.stx-field{position:relative;display:flex;flex-direction:column;gap:6px}
.stx-field[hidden]{display:none}
.stx-flabel{font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.12px;color:var(--stx-ink-2,#6e6e73);padding-left:4px}
.stx-select select,.stx-other input,.stx-search input{height:44px;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:#fff;
  font:inherit;font-size:15px;letter-spacing:-.2px;color:var(--stx-ink,#1d1d1f);outline:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.stx-select select{appearance:none;-webkit-appearance:none;min-width:220px;padding:0 42px 0 18px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center/12px 8px no-repeat}
.stx-select select:disabled{color:#86868b;cursor:default;background-color:rgba(255,255,255,.6)}
.stx-other input{width:240px;padding:0 18px}
.stx-search{flex:1 1 220px;max-width:340px}
.stx-search input{width:100%;padding:0 18px 0 42px}
.stx-search svg{position:absolute;left:16px;bottom:13px;width:18px;height:18px;fill:none;stroke:#86868b;stroke-width:2;stroke-linecap:round;pointer-events:none}
.stx-select select:focus-visible,.stx-other input:focus,.stx-search input:focus{border-color:var(--stx-bur,#800020);box-shadow:0 0 0 3px rgba(128,0,32,.15)}
.stx-count{margin:0 0 12px auto;font-size:14px;line-height:18px;color:var(--stx-ink-2,#6e6e73);white-space:nowrap}
.stx-clear{margin-bottom:6px;height:32px;padding:0 14px;border:0;border-radius:999px;background:rgba(210,210,215,.64);color:#1d1d1f;
  font:inherit;font-size:14px;cursor:pointer;transition:background-color .1s linear}
.stx-clear[hidden]{display:none}
@media (hover:hover){.stx-clear:hover{background:rgba(223,223,227,.7)}}
.st-empty{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:32px;text-align:left}
.st-empty b{font-size:21px;line-height:25px}
.st-empty span{font-size:15px;line-height:20px;color:var(--stx-ink-2,#6e6e73)}
@media (max-width:734px){
  .stx-tools{gap:10px}
  .stx-model,.stx-select,.stx-other,.stx-search{width:100%;max-width:none;flex:1 1 100%}
  .stx-select select,.stx-other input{width:100%;min-width:0}
  .stx-count{margin:4px 0 0}
}
.stx-grid-sec{padding-bottom:40px}                                                  /* tighter gap to "How ordering works." (Sir, Oct 23) */
@media (max-width:734px){.stx-grid-sec{padding-bottom:28px}}
/* The Marvans difference: one row of four compact cards (Sir, Oct 23: save space) */
.stx-diff-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stx-diff-grid .stx-half{width:auto;height:100%;min-height:0;padding:26px 26px 28px}
.stx-diff-grid .stx-htitle{font-size:19px;line-height:24px}
@media (max-width:1068px){.stx-diff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:734px){.stx-diff-grid{grid-template-columns:minmax(0,1fr);gap:12px}.stx-diff-grid .stx-half{padding:22px}}

@media (hover:hover){.stx-more:hover{text-decoration:underline;text-underline-offset:3px}}
/* Oct 31: real product photos (MobileSentrix, white background): multiply melts the white into the grey picture box */
#pgrid .st-prod:not(.stx-noimg) .st-pimg img,#st-latest .st-prod:not(.stx-noimg) .st-pimg img{mix-blend-mode:multiply}
#st-latest .st-prod:not(.stx-noimg) .st-pimg{background:var(--stx-bg);border-radius:18px;overflow:hidden}
#st-latest .st-prod:not(.stx-noimg) .st-pimg img{inset:8%;width:84%;height:84%}

/* (Sir, Nov 3) sale: old price crossed out before the real price */
.st-price .st-was{color:var(--stx-dim,rgba(242,241,240,.5));text-decoration:line-through;text-decoration-thickness:1px;margin-right:6px;font-weight:400}