/* LMC phone look 5C/E4 (Garry 22 Oct 2026). Phone only (max-width:640px); desktop unchanged. Rules: scratch-phone-look-20261022/DESIGN-NOTES.md */
.ph-top,.ph-subbar,.ph-menu-wrap,.ph-filters,.ph-foot,.ph-tag,.ph-sizes{display:none}
@media (max-width:640px){
  :root{--e4:#1b3a8a;--e4l:#eaf0ff;--e4b:#c9d6ff}
  html,body{overflow-x:hidden;background:#fffaf2}
  body{display:flex;flex-direction:column;background:#fffaf2;padding-top:0!important;margin-top:0}
  body>.ph-top{order:-4}
  body>.seo-head{order:-3}
  body>.ph-subbar{order:-2}
  body>.ph-menu-wrap{order:-1}
  .ph-top{display:block;background:var(--e4);color:#fff;margin:0 -14px;padding:10px 14px 0}
  .ph-subbar{display:block;background:var(--e4);margin:0 -14px;padding:0 14px 14px;border-radius:0 0 22px 22px}
  .ph-bar{display:flex;align-items:center;gap:10px;min-height:44px}
  .ph-logo{display:block;flex:0 0 auto;line-height:0;padding:3px 0}
  .ph-logo img{width:90px;height:38px;object-fit:contain;background:#fff;border-radius:8px;padding:2px}
  .ph-name{flex:1;font-size:14px;font-weight:600;opacity:.95;text-align:center;line-height:1.2;word-spacing:100vw;overflow:hidden}
  .ph-call{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;background:#fff;color:var(--e4);font-weight:800;font-size:15px;border-radius:22px;text-decoration:none}
  .ph-crumb{margin:8px 0 0;font-size:14px}
  .ph-crumb a{color:#dbe4ff;text-decoration:none;display:inline-block;line-height:24px;padding:10px 12px 10px 0;margin:-10px 0}
  .ph-home-title{font-size:26px;font-weight:800;margin:2px 0 0;line-height:1.15;text-align:center}
  .seo-head{background:var(--e4);color:#fff;margin:0 -14px 0!important;padding:0 14px}
  .seo-head h1{color:#fff!important;font-size:26px!important;line-height:1.15;margin:2px 0 0!important}
  .seo-head p{display:none}
  .page-links,.tabs,#dataHint,.note{display:none!important}
  .ph-sub{margin:4px 0 0;font-size:14px;color:#dbe4ff;min-height:19px}
  .ph-menu-wrap{display:block;margin:12px 0 0;position:relative}
  .ph-more{width:100%;min-height:48px;border:0;border-radius:24px;background:var(--e4);color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
  .ph-menu{margin:8px 0 0;background:#fff;border:2px solid var(--e4b);border-radius:16px;overflow:hidden}
  .ph-menu a{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-bottom:1px solid #eef1fb;color:var(--e4);font-weight:700;text-decoration:none;font-size:15px}
  .ph-menu a.on{background:var(--e4l)}
  .ph-menu a .n{font-weight:500;font-size:13px;color:#5b6678;white-space:nowrap}
  .ph-menu a.sale{color:#c8102e}
  .ph-menu a.home{border-top:3px solid var(--e4);border-bottom:0;background:#f4f7ff}
  .ph-filters{display:block;margin:12px 0 0}
  .ph-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .ph-row+.ph-row{margin-top:8px}
  .ph-seg{display:inline-flex;background:var(--e4);border-radius:24px;padding:3px}
  .ph-seg button{min-height:44px;border:0;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:700;padding:0 12px;border-radius:20px;cursor:pointer}
  .ph-seg button.on{background:#fff;color:var(--e4)}
  .ph-btn{min-height:44px;border:2px solid var(--e4b);background:#fff;color:var(--e4);font:inherit;font-size:14px;font-weight:700;padding:0 14px;border-radius:24px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .ph-btn[hidden]{display:none}
  .ph-btn.ph-clear{background:#fff;border-color:var(--e4);color:var(--e4)}
  .ph-btn.on{background:var(--e4);border-color:var(--e4);color:#fff}
  .ph-sw{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #9aa4b8;vertical-align:middle}
  .ph-colours{display:none}
  #phColour #phColSw{display:none}
  .ph-colours.open{display:flex}
  .ph-count{margin:10px 2px 0;font-size:13px;color:#5b6678;min-height:17px}
  #grid:empty{min-height:100vh}
  /* existing side panel: search + size + brand chips, under the phone filter bar */
  .layout>.side{margin:0}
  .layout>.side .panel{display:flex;flex-direction:column;background:transparent;border:0;box-shadow:none;padding:0}
  #stockWrap,#rideWrap,#genderWrap,.panel>.chip-label{display:none!important}
  body.ph-type-open .panel>#rideWrap{display:block!important;order:0;margin:4px 0 6px;padding-bottom:76px}
  #rideWrap .chip-label{display:none}
  #rideChips .chip[data-n]::after{content:" (" attr(data-n) ")";font-weight:500}
  .panel>#chips{order:1;display:none;margin:4px 0 6px}
  body.ph-brand-open .panel>#chips{display:flex}
  .panel>#sizeWrap{order:2;display:none!important;margin:4px 0 6px}
  body.ph-size-open .panel>#sizeWrap{display:block!important}
  #sizeWrap .chip-label{display:none}
  .panel>label[for=q]{display:none}
  .panel>#q{order:3;min-height:44px;font-size:16px;margin:6px 0 0}
  .panel .chips{flex-wrap:wrap;gap:8px}
  .panel .chip{min-height:44px;padding:0 14px;border-radius:22px;font-size:14px}
  .meta{margin:10px 0 6px}
  .meta .count{display:none}
  /* product cards */
  .card{border:2px solid #dbe4ff;border-radius:16px}
  .card h2{font-size:13px!important;line-height:1.25!important;color:#222}
  .card .price{font-size:16px!important;color:var(--e4);font-weight:800}
  .card .brand{font-size:10px!important}
  .ph-tag{display:inline-block;font-size:11px;font-weight:800;border-radius:6px;padding:2px 6px;margin-right:4px}
  .ph-tag.in{background:#e3f6e8;color:#1f7a45}
  .ph-tag.order{background:#dbe4ff;color:var(--e4)}
  .ph-sizes{display:inline;font-size:11px;color:#5b6678}
  .ph-meta{line-height:1.6}
  .card[data-for-modal="0"] .sizes-meta,.card[data-for-modal="0"] .card-desc,.card[data-for-modal="0"] .size-row,.card[data-for-modal="0"] .size-label{display:none!important}
  .card[data-for-modal="0"] .cta.enlarge{font-size:0!important;min-height:44px;width:100%;background:var(--e4);color:#fff;border-color:var(--e4);border-radius:12px}
  .card[data-for-modal="0"] .cta.enlarge::after{content:"View";font-size:15px;font-weight:800}
  .tile-host .sz{min-height:44px;min-width:44px}
  .tile-host .cta{min-height:44px}
  /* cart + quote buttons: plain grey browser buttons on phone before (existing fault, also on production) */
  #quoteCheckout,#quoteFormSubmit,#quoteSuccessOk{min-height:48px;border:0;border-radius:12px;background:var(--e4);color:#fff;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
  #quoteFormCancel{min-height:48px;border:2px solid var(--e4b);border-radius:12px;background:#fff;color:var(--e4);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
  /* Garry 22 Oct 3:35pm: option counts (data-n), zero options hidden, room under an open panel so the Cart button never covers an option */
  #sizeChips .chip[data-n]::after,#chips .chip[data-n]::after{content:" (" attr(data-n) ")";font-weight:500}
  .panel .chip.ph-zero{display:none!important}
  body.ph-size-open .panel>#sizeWrap,body.ph-brand-open .panel>#chips,.ph-colours.open{padding-bottom:76px}
  body.ph-type-open .quote-fab,body.ph-size-open .quote-fab,body.ph-brand-open .quote-fab,body.ph-colour-open .quote-fab{display:none!important}
  /* Garry 22 Oct 4:11pm: short heading only on phones (Boots, Helmets, Sale ...). The full keyword H1 stays in the HTML, visually hidden (not display:none). */
  .ph-top{padding-bottom:12px;border-radius:0 0 22px 22px}
  .ph-crumb,.ph-subbar{display:none!important}
  .seo-head{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0!important;padding:0!important;border:0!important}
  .ph-home-title{font-size:24px;margin:4px 0 0}
  .ph-foot{display:block;margin:18px -14px 0;padding:18px 14px 90px;background:var(--e4);color:#dbe4ff;font-size:14px;line-height:1.6;text-align:center}
  .ph-foot b{color:#fff}
  .ph-foot a{color:#fff;font-weight:700;display:inline-block;line-height:24px;padding:10px 8px;margin:-6px 0}
}

@media (max-width:640px){.ph-seg button:disabled{background:#eef0f3!important;color:#9aa1ab!important;border-color:#d5d9df!important;cursor:not-allowed;pointer-events:none}}