:root{--shop-ink:var(--color-black,#000000);--shop-paper:var(--color-white,#fff);--shop-pink:var(--color-magenta,#FF3D7F);--shop-green:var(--color-neon,#39FF14);--shop-line:var(--border-color-subtle,#D9D9D9);--shop-serif:var(--font-display,"Cormorant Garamond",Georgia,serif);--shop-sans:var(--font-body,"DM Sans",Arial,sans-serif)}*{box-sizing:border-box}.shop5{background:var(--shop-paper);color:var(--shop-ink);font-family:var(--shop-sans)}
/* Collapsible wrapper around .shop5-records, added 2026-09-17 (salience fix: the
   campaign banner is now collapsed by default behind a one-line teaser so it stops
   competing with the product grid for L1 attention -- see design/shop-real.php's
   note by the <details> markup). Colours reuse the same real shop5_records_bg/
   shop5_records_border/shop-pink/shop-paper tokens the banner itself already used;
   padding reuses shop5_story_padding, the nearest existing compact-bar token,
   rather than inventing a new one for a single summary line. */
.shop5-records-collapse{border-bottom:1px solid #32101d}
.shop5-records-collapse .shop5-records{border-bottom:0}
.shop5-records-summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:10px 12.5%;background:linear-gradient(90deg,#080808,#160a10 74%,#310d1d);color:var(--shop-paper)}
.shop5-records-summary::-webkit-details-marker{display:none}
.shop5-records-summary b{font-size:7px}
.shop5-records-summary span{flex:1;font:500 7px var(--shop-sans);letter-spacing:.02em}
.shop5-records-summary .shop5-records-chev{font-style:normal;color:var(--shop-pink);font-size:7px;font-weight:700;white-space:nowrap}
.shop5-records-collapse[open] .shop5-records-summary .shop5-records-chev{color:var(--shop-paper)}
.shop5-records{min-height:58px;background:linear-gradient(90deg,#080808,#160a10 74%,#310d1d);color:var(--shop-paper);display:grid;grid-template-columns:12.5% repeat(3,1fr) 12.5%;border-bottom:1px solid #32101d}.shop5-recordlead{padding:8px 12px;display:flex;flex-direction:column;justify-content:center}.shop5-recordlead b{color:var(--shop-pink);font-size:7px;letter-spacing:.14em}.shop5-recordlead span{font:500 18px/1.1 var(--shop-serif);margin-top:3px}.shop5-record{display:grid;grid-template-columns:22px 1fr auto;gap:7px;align-items:center;padding:7px 10px;border-left:1px solid rgba(255,255,255,.12)}.shop5-record .n{font:600 18px/1 var(--shop-serif);color:var(--acc)}.shop5-record small,.shop5-partner small{display:block;color:var(--acc);font-size:6px;font-weight:700;letter-spacing:.08em}.shop5-record strong{display:block;margin-top:2px;font-size:8px;font-weight:500}.shop5-record time{font-size:9px;font-weight:700}.shop5-partner{color:var(--shop-paper);text-decoration:none;border-left:1px solid rgba(255,255,255,.12);padding:7px 12px;display:flex;flex-direction:column;justify-content:center}.shop5-partner small{color:var(--shop-pink)}.shop5-partner strong{font:600 18px/1 var(--shop-serif);margin:3px 0}.shop5-partner span{font-size:7px;color:var(--shop-paper)}
.shop5-toolbar{height:44.0px;display:flex;align-items:center;gap:8px;padding:0 12.5%;border-bottom:1px solid var(--shop-line);position:relative}.shop5-toolbar h1{margin:0;font:600 20px/var(--leading-normal) var(--shop-serif)}.shop5-search{height:28.0px;width:min(300px,30vw);border:1px solid var(--shop-line);border-radius:var(--radius-full, 100px);display:flex;align-items:center;gap:6px;padding:0 14px;color:#666}.shop5-search svg{width:14px;height:14px;stroke:#666;flex:none}.shop5-search input{width:100%;border:0;outline:0;font:500 10px var(--shop-sans)}.shop5-tool,.shop5-filter-button{height:27.0px;padding:0 14px;border:1px solid var(--shop-line);border-radius:var(--radius-full, 100px);background:var(--shop-paper);font:600 9px var(--shop-sans)}.shop5-count{margin-left:auto;color:#666;font-size:9px}
.shop5-layout{display:grid;grid-template-columns:12.5% 75% 12.5%;align-items:start}.shop5-left,.shop5-right{padding:10px 6px;position:sticky;top:10px;align-self:start}.shop5-railtitle{font-family:var(--shop-serif);font-style:italic;color:var(--shop-pink);font-size:10.2px;line-height:var(--leading-relaxed);font-weight:700;letter-spacing:.04em;margin-bottom:10px}.shop5-filter{border:1px solid var(--shop-line);border-radius:var(--radius-md, 12px);margin-bottom:8px;padding:0 10px;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}.shop5-filter.open{border-color:var(--shop-pink)}.shop5-filter>button{width:100%;height:40px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--shop-serif);font-style:italic;font-weight:600;color:#111}.shop5-filter.open>button{color:var(--shop-pink)}.shop5-options{padding:0 0 7px}.shop5-options label{min-height:25px;display:flex;align-items:center;gap:7px;color:#333}.shop5-options input{width:12px;height:12px;accent-color:var(--shop-pink)}
.shop5-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4, 6px);padding:0;align-content:start}
/* .shop5-card/.shop5-media/.shop5-info/.shop5-price/.shop5-facts/.shop5-name/
   .shop5-intelligence/.shop5-proofrow/.shop5-actions (and their children) are
   migrated to real wc2_token rows -- product_card*/recipe_card* + pill_buy/
   pill_action/icon_favourite, scope_key 'shop'/'recipes'/'*' -- compiled into
   assets/design-language.css. Nothing for the card component lives here any
   more; only .shop5-products (grid layout) stays, out of migration scope.
   See icookmagic-shop-v5.css.php.bak-before-pre-override-fix-20260917_0950
   for the pre-migration source this was carried across from. */
.shop5-story{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:start;padding:10px;border:1px solid var(--shop-line);border-radius:var(--radius-md, 12px);margin-bottom:8px;color:#111;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease}.shop5-story.primary{border-color:var(--shop-pink)}.shop5-story i{width:22px;height:22px;border:1px solid var(--shop-ink);border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:8px}.shop5-story.primary i{border-color:var(--shop-pink);color:var(--shop-pink)}.shop5-story small{display:block;font-size:6px;color:var(--shop-pink);letter-spacing:.08em}.shop5-story strong{display:block;font-family:var(--shop-serif);font-style:italic;font-weight:600;line-height:1.3;margin-top:2px}.shop5-story em{display:block;font-size:7px;line-height:1.35;color:#666;font-style:normal;margin-top:3px}.shop-empty,.shop-loading{padding:24px;font-size:10px;color:#666}
@media(max-width:1180px){.shop5-records{grid-template-columns:150px repeat(3,1fr)}.shop5-partner{display:none}.shop5-layout{grid-template-columns:1fr}.shop5-left,.shop5-right{display:none}.shop5-products{grid-template-columns:repeat(3,minmax(0,1fr))}.shop5-toolbar{padding:0 14px}}
@media(max-width:767px){.shop5-recordlead{display:none}.shop5-records{display:flex;overflow-x:auto;min-height:50px}.shop5-record{min-width:82%}.shop5-toolbar h1,.shop5-count{display:none}.shop5-search{flex:1;width:auto}.shop5-products{grid-template-columns:repeat(2,minmax(0,1fr))}.shop5-actions small{font-size:5.8px}}
/* mobile .shop5-info/.shop5-proofrow/.shop5-intelligence overrides migrated to
   wc2_token (bp_key='mobile') alongside their base rules above. */
.shop5-toolbar h1{font-size:48.8px}
.shop5-filter>button,.shop5-search input,.shop5-tool,.shop5-filter-button{font-size:12.8px;line-height:var(--leading-relaxed)}
.shop5-record small,.shop5-partner small,.shop5-story small{font-size:10.2px;line-height:var(--leading-relaxed)}
.shop5-story strong{font-size:12.8px;line-height:var(--leading-relaxed)}
.shop5-story em,.shop5-options label,.shop5-count{font-size:12.8px;line-height:var(--leading-relaxed)}
/* .shop5-actions .pre sizing (height/padding/font-size/weight/letter-spacing/
   text-transform) migrated into the pill_buy wc2_token rows (scope_key='*'). */