html { scroll-behavior:smooth; }
  body { margin:0; background:#F5F8FD; }
  .mppx { --nav:#0B1457; --ink:#0C1538; --tx:#4C5670; --page:#F5F8FD; --line:#E4E9F2; --gold:#F0C31F; --blue:#2563EB; --cyan:#38BDF8; --purple:#7C3AED; --teal:#14B8A6; }
  .wrap { max-width:1240px; margin-inline:auto; padding-inline:56px; }
  a { text-decoration:none; }
  .nl { color:rgba(255,255,255,.82); font:600 14px/1 var(--font-body); display:inline-flex; align-items:center; gap:5px; }
  .nl:hover { color:#fff; }
  .nl.on { color:#fff; position:relative; }
  .nl.on::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:3px; background:var(--gold); border-radius:3px; }
  .pcard { transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .frow { transition:color var(--dur-fast) var(--ease-out); }
  .flink { color:rgba(255,255,255,.6); }
  .flink:hover { color:#fff; }
  .pc-add, .pc-buy, .addbtn { transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
  .pc-add:active, .pc-buy:active, .addbtn:active { transform:translateY(1px); }
  @media (hover: hover) and (min-width: 900px){
    .pcard:hover { transform:translateY(-5px); box-shadow:0 24px 46px rgba(12,21,56,.16); }
    .pcard:hover .pcard-thumb img { transform:scale(1.05); }
    .frow:hover { color:var(--blue); }
    .addbtn:hover { background:var(--nav) !important; color:#fff !important; border-color:var(--nav) !important; }
  }

  /* ===== Product cards (thumbnail-forward) ===== */
  .shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
  .pcard { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 18px rgba(12,21,56,.05); }
  .pcard.hide { display:none; }
  .pcard-thumb { display:block; }
  .pcard-thumb { overflow:hidden; }
  .pcard-thumb img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
  .pcard-body { padding:16px 16px 18px; display:flex; flex-direction:column; gap:13px; flex:1; align-items:center; text-align:center; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  /* Tags: always one row. Type tag never shrinks; subject tag shrinks/ellipsises if tight. */
  .pcard-tags { display:flex; gap:6px; flex-wrap:nowrap; align-items:center; justify-content:center; max-width:100%; }
  .ptag { font:800 10px/1 var(--font-body); letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ptag-type { flex:0 0 auto; }
  .ptag-subject { flex:0 1 auto; min-width:0; }
  /* Price + both buttons on ONE line */
  .pcard-foot { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }
  .pcard-price { font-family:var(--font-display); font-weight:800; font-size:25px; color:var(--ink); display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap; }
  .pcard-price s { font:400 13px var(--font-body); color:#9AA4B8; }
  .pcard-free { font-family:var(--font-display); font-weight:800; font-size:22px; color:#1F7A55; white-space:nowrap; }
  .pc-btns { display:flex; gap:8px; width:100%; }
  .pc-add, .pc-buy { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; border:none; font:800 13px/1 var(--font-body); padding:12px 14px; border-radius:10px; text-decoration:none; white-space:nowrap; }
  .pc-add { background:var(--gold); color:var(--nav); }
  .pc-buy { background:var(--nav); color:#fff; }
  @media (hover: hover) and (min-width: 900px){
    .pc-add:hover { filter:brightness(1.04); transform:translateY(-2px); box-shadow:0 10px 20px rgba(240,195,31,.34); }
    .pc-buy:hover { filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 10px 22px rgba(11,20,87,.30); }
  }

  /* ===== Filter checkboxes ===== */
  .frow .ck { flex:none; width:19px; height:19px; border-radius:5px; display:grid; place-items:center; background:#fff; border:1.5px solid #CBD3E2; }
  .frow.on .ck { background:var(--blue); border-color:var(--blue); }
  .frow.on .ck::after { content:"✓"; color:#fff; font:800 12px/1 var(--font-body); }
  .frow.on { color:var(--blue); }

  @media (max-width:980px){ .shop-grid { grid-template-columns:1fr 1fr; } }
  @media (max-width:620px){ .shop-grid { grid-template-columns:1fr; } }

  /* ===== Mobile reflow (Phase 2) ===== */
  @media (max-width:860px){
    .shop-hero { padding:32px 24px 24px !important; text-align:center; }
    .shop-hero p { margin-left:auto; margin-right:auto; }
    .shop-h1 { font-size:clamp(30px, 7vw, 42px) !important; }
    .shop-side { position:static !important; }        /* stacked filters shouldn't stick */
    .shop-grid { grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){
    .shop-hero { padding:24px 16px 18px !important; }
    .shop-grid { grid-template-columns:1fr; }
  }