/* /pages/index.css */

/* =========================================================
   GLOBAL RESET + SAFETY
========================================================= */
*{
  box-sizing:border-box;
  min-width:0;
}

/* Prevent accidental sideways scroll */
html, body{ max-width:100%; overflow-x:hidden; }

/* iOS Safari: prevent weird tap highlight & improve stability */
html{ -webkit-text-size-adjust:100%; }

/* =========================================================
   DESIGN TOKENS
========================================================= */
:root{
  --sb-blue:#12375bff;
  --sb-blue-rgb:18, 55, 91;
  --sb-orange:#ff6f10d6;
  --sb-black:#000000bf;
  --bg:#fff5f0;
  --card-bg:#d5deedbf;

  --card-image-bg: #f5f5f5ff;

  --input-bg:#f8f8f8;   /* search and input and check box and drop down backgrounds */
  --sidebar-w: minmax(165px, 180px);   /* sidebar width range */

  --maxw:1440px;
  --pad:24px;

  --top-scale:0.75;
  --gap:calc(16px * var(--top-scale));

  --input-h:calc(64px * var(--top-scale));
  --btn-h:calc(56px * var(--top-scale));
  --btn-eq-w:calc(78px * var(--top-scale));

  --input-font:calc(1.5rem * var(--top-scale));
  --search-text-inset:calc((0.90rem * var(--top-scale)) + (20px * var(--top-scale)) + (1rem * var(--top-scale)));
  --btn-font:calc(1.15rem * var(--top-scale));
  --menu-icon-size:calc(1.4875rem * var(--top-scale));

  --logo-scale:calc(2 * var(--top-scale));
  --top-rows:1;

  /* =========================================================
     GRID + CARD SYSTEM
     Card metrics are defined in .shoe-grid (which is a container)
     so --card-box-w resolves from the live 100cqw value there.
     The :root values below are ONLY fallbacks for non-container
     contexts (e.g. the daily-deals heading area).
  ========================================================= */
  --cols:5;
  --visible-cols:5;
  --grid-gap:14px;

  /* SET ALERT MODAL TOKENS */
  --sb-modal-bg:#ff660045;
  --sb-input-radius:calc(0.5rem * var(--top-scale));
  --sb-input-shadow:0px 0px 7px rgb(33 68 121 / 28%);
  --sb-focus-border:#1a3661;
  --sb-focus-ring:0 0 0 3px rgba(33,68,120,0.10);
  --sb-done-bg:rgba(232,240,255,1);

  --theme-fade-ms:180ms;
  --theme-wash-ms:160ms;

  --topbar-nav-idle:var(--sb-blue);
  --topbar-nav-active:var(--sb-orange);
}

html[data-theme="dark"]{
  --sb-blue:#b9d0f1;
  --bg:#0c0e11;
  --card-bg:#334455;

  --sb-blue-rgb:159 193 243;

  --input-bg:#000000;
  --sb-input-shadow:none;
  --sb-focus-border:#313131;
  --sb-focus-ring:0 0 0 3px rgba(159,193,243,0.10);
  --sb-done-bg:#0b0b0b;

  --topbar-nav-idle:var(--sb-blue);
  --topbar-nav-active:var(--sb-orange);
}

html[data-theme="dark"] body{
  color:#e8e8e8;
}

html[data-theme="dark"] .app,
html[data-theme="dark"] #mainContent,
html[data-theme="dark"] .daily-deals,
html[data-theme="dark"] .footer{
  background:transparent;
  color:inherit;
}

html[data-theme="dark"] .card{
  border-color:#313131;
}

html[data-theme="dark"] .card img:not(.card-save-icon){
  border-color:#3a3a3a;
}

html[data-theme="dark"] {
  --card-image-bg: #f5f5f5ee;   /* darker neutral */
}

html[data-theme="dark"] .status-message,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-store,
html[data-theme="dark"] .page-label,
html[data-theme="dark"] .disclaimer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer-copy,
html[data-theme="dark"] .footer-links,
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .price{
  color:#e8e8e8;
}

html[data-theme="dark"] .card-original-price{
  color:#a8a8a8;
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .sb-input{
background-color:var(--input-bg);
   border-color:#9fc1f373;
  box-shadow:none;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] .sb-input::placeholder{
  color:#9a9a9a;
}

html[data-theme="dark"] .suggestions,
html[data-theme="dark"] .sb-sug{
  background:#1a1a1a;
  border-color:#4a4a4a;
  color:#f1f1f1;
}

html[data-theme="dark"] .suggestion-item:hover,
html[data-theme="dark"] .suggestion-item.active,
html[data-theme="dark"] .sb-sug .item:hover,
html[data-theme="dark"] .sb-sug .item.active{
  background:#2a2a2a;
}

html[data-theme="dark"] .suggestion-rest,
html[data-theme="dark"] .sb-sug-rest{
  color:#9fc0ff;
}

html[data-theme="dark"] .slide-panel{
  background:#4c525c;
}



html[data-theme="dark"] .slide-panel-title,
html[data-theme="dark"] .slide-panel-heading,
html[data-theme="dark"] .slide-subheading,
html[data-theme="dark"] .slide-panel-link{
  color:#e8e8e8;
}

html[data-theme="dark"] .slide-divider{
  border-top-color:#656c77;
}


html[data-theme="dark"] .slide-check-box,
html[data-theme="dark"] .sb-gender-box{
background-color:var(--input-bg);
  border-color:var(--sb-blue);
}

html[data-theme="dark"] .pager-btn,
html[data-theme="dark"] .load-more-btn,
html[data-theme="dark"] .slide-panel-close,
html[data-theme="dark"] .sb-submit{
  background:#2b2b2b;
  border-color:#4a4a4a;
  color:#f1f1f1;
}

html[data-theme="dark"] .sb-secondary{
  background:#1c1c1c;
  color:#f1f1f1;
  border:2px solid #4a4a4a;
}

html[data-theme="dark"] .sb-alert-modal{
  background:#181818;
}

html[data-theme="dark"] .sb-note,
html[data-theme="dark"] .sb-confirm-details{
  background:#202020;
  color:#e8e8e8;
  border-color:#3a3a3a;
}

html[data-theme="dark"] .sb-dollar{
  color:#d8d8d8;
}

/* =========================
   PAGE TRANSITIONS
========================= */
body{
  opacity:1;
  transition:opacity 180ms ease;
}

body.page-is-leaving{
  opacity:0;
}

html.page-preload body{
  opacity:0;
}



@keyframes bookmarkPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  65%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.card-save-icon.pop{
  animation: bookmarkPop 0.25s ease;
  transform-origin:center;
}

.save-toast{
  position:fixed;
  left:50%;
  bottom:96px;
  transform:translateX(-50%);
  background:var(--sb-blue);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:700;
  line-height:1;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
  z-index:9999;
  white-space:nowrap;
}

.save-toast.show{
  opacity:1;
}

html[data-theme="dark"] .save-toast{
  background:var(--sb-blue);
  color:#fff;
}

@media (max-width:700px){
  .save-toast{
    font-size:0.85rem;
    padding:9px 14px;
  }
}

/* =========================================================
   BASE LAYOUT
========================================================= */
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:#2d2d2d;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:
    max(8px, env(safe-area-inset-top))
    max(var(--pad), env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(var(--pad), env(safe-area-inset-left));
}

html[data-theme="dark"] body{
  color:#e7eefc;
}

.app{
  width:100%;
  max-width:var(--maxw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  min-height:100vh;
  overflow-x:clip;
}

.content-heading{
  width:100%;
  display:flex;
  justify-content:left;
  align-items:flex-end;
  text-align:center;

  font-size:1.1rem;
  font-weight:600;
  color:var(--sb-blue);

  margin:0;
  padding:0 0px;   /* 👈 ADD THIS */
  box-sizing:border-box; /* 👈 ensures true centering */
}
.filters-heading-row{
  display:flex;
  align-items:baseline;
  width:100%;
}

.filters-clear-btn{
  margin-left:auto;
  font-size:0.78em;
  font-weight:400;
  color:var(--sb-blue);
  background:none;
  border:0;
  cursor:pointer;
  opacity:0.85;
}

.filters-clear-btn:hover{
  opacity:1;
  text-decoration:underline;
}
#mainContent{
  width:100%;
  flex:1 0 auto;
}


.content-header-grid{
  width:100%;
  display:grid;
  gap:18px;
  align-items:end;
  margin-bottom:0.7rem;
}

.content-header-left {
  width: 100%;
}


.content-header-right{
  display:flex;
  align-items:flex-end;
  min-width:0;
}
.content-shell{
  width:100%;
  display:grid;
  gap:18px;
  align-items:start;
}
.content-shell,
.content-header-grid {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}
/* Hide DISPLAY panel on desktop */
.left-sidebar .sidebar-panel:has([data-panel-theme]){
  display:none;
}


.left-sidebar{
  position:sticky;
  top:12px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sidebar-panel{
  border-radius:12px;
  padding:0px;
  display:flex;
  flex-direction:column;
  gap:4px;
   width:100%;
}

.sidebar-heading{
  width:100%;
  display:block;
  justify-content:center;
  align-items:flex-end;
  text-align:left;

  color:var(--sb-blue);
  font-weight:500;
  font-size:1rem;   
  margin-top:8px;
  box-sizing: border-box;   
}



.sidebar-subheading{
  color:var(--sb-blue);
  font-weight:700;
  font-size:0.92rem;
}

.sidebar-link-btn{
  appearance:none;
  border:none;
  background:none;
  color:var(--sb-blue);
  text-align:left;
  padding:0;
  cursor:pointer;
  font-weight:800;
  font-size:1rem;
}

.sidebar-placeholder{
  border:1px dashed rgba(var(--sb-blue-rgb) / 0.45);
  border-radius:10px;
  padding:10px;
  font-size:0.9rem;
  color:var(--sb-blue);
}

.content-main{
  min-width:0;
}

html[data-theme="dark"] .sidebar-panel{
  border-color:#353e4d;
}

html[data-theme="dark"] .sidebar-placeholder{
  border-color:#4b5e7e;
  color:#d6e4ff;
}


/* =========================================================
   DISPLAY MODES
========================================================= */
.theme-light-only{ display:block; }
.theme-dark-only{ display:none; }

.theme-icon-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.theme-icon{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

#modeToggleBtn{
  position:relative;
}

#modeToggleBtn img{
  display:block;
  height:calc(var(--btn-h) * 0.8);
  width:auto;
}


/* =========================================================
   MOBILE TOP BANNER
========================================================= */
.mobile-top-banner{
  display:none !important;
  width:80%;
  height:auto;
  object-fit:cover;
  margin:0 auto;
  padding:0;
}

/* =========================================================
   BACK TO TOP (base)
========================================================= */
.to-top{
  position:fixed;
  right:max(12px, env(safe-area-inset-right));
  bottom:max(12px, env(safe-area-inset-bottom));
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(var(--sb-blue-rgb) / 0.55);
  background:rgba(var(--sb-blue-rgb) / 0.75);
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 160ms ease, transform 160ms ease;
  z-index:2000;
}

/* =========================================================
   TOPBAR (inputs + logo)
========================================================= */
.topbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--gap);
  margin-top:2px;
  flex-wrap:nowrap;
}

.top-left{
  flex:1 1 0;
  width:min(600px, 100%);
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  order:1;
}

.top-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--gap);
  order:0;
  margin-right:0;
  padding-right:0;
  /* FIX: remove any left padding/margin that was causing the gap */
  margin-left:0;
  padding-left:0;
  min-width:0;
}


.topbar-heart{
  width:1em;
  height:1em;
  fill:currentColor;
  stroke:none;
  display:block;
}

/* =========================================================
   LOGO
========================================================= */
.brand-logo{
  height:calc(var(--input-h) * 1.5);
  max-height:calc(var(--input-h) * 1.5);
  width:auto;
  max-width:100%;
  object-fit:contain;
  cursor:pointer;
  transition:opacity 0.2s ease;
  display:block;
}
.brand-logo:hover{ opacity:0.9; }

/* =========================================================
   FORM ROWS
========================================================= */
form#search-form{
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  margin:0;
}

.row{
  width:100%;
  display:flex;
  gap:var(--gap);
  align-items:center;
  min-width:0;
}

#mobileSearchRow{
  gap:calc(var(--gap) * 0.5);
}



.input-wrapper{
  position:relative;
  flex:1 1 auto;
  min-width:0;
}

.input-icon{
  position:absolute;
  left:calc(0.70rem * var(--top-scale));
  top:50%;
  transform:translateY(-50%);
  width:calc(30px * var(--top-scale));
  height:calc(30px * var(--top-scale));
  display:block;
  pointer-events:none;
  z-index:10;
  color:var(--sb-blue);
}



input[type="text"], input[type="search"]{
  width:100%;
  height:var(--input-h);
  padding-right:calc(var(--input-h) * 0.65 + 4rem * var(--top-scale));
  padding-left:var(--search-text-inset);
  border-radius:calc(var(--input-h) / 2);
  border:2px solid var(--sb-blue);
  background:#f8f8f8;
  box-shadow:0px 0px 7px rgb(0 0 0 / 15%);
  font-size:var(--input-font);
  font-weight:500;
  color:#222222;
  transition:border-color 0.2s ease, background-color 0.2s ease;
  min-width:0;
}
input::placeholder{ color:#999; opacity:1; }

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"]{
  background:var(--input-bg);
  color:#e7eefc;
  box-shadow:var(--sb-input-shadow);
}

.input-fetch{
  position:absolute;
  right:calc(1.2rem * var(--top-scale));
  top:50%;
  transform:translateY(-50%);
  width:calc(var(--input-h) * 0.6);
  height:calc(var(--input-h) * 0.6);
  cursor:pointer;
  padding:2px;
  fill:var(--sb-blue);
  z-index:20;
}
.input-fetch:hover{ fill:#4f8dff; }

.input-fetch:focus {
  outline: none;
}

.input-clear{
  position:absolute;
  right:calc(var(--input-h) * 0.55 + 2rem * var(--top-scale));
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  padding:2px;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:calc(3rem * var(--top-scale));
  line-height:1;
  font-weight:400;
  color:#888;
  z-index:20;
}
.input-clear:hover{ color:#555; }
.input-wrapper:has(input:not(:placeholder-shown)) .input-clear{ display:flex; }

/* =========================================================
   SUGGESTIONS
========================================================= */
.suggestions{
  position:absolute;
  top:calc(var(--input-h) + 4px);
  left:0;
  right:0;

  background:#eeeeee;    
  border:1px solid var(--sb-blue);
  border-radius:calc(0.5rem * var(--top-scale));
  margin-top:calc(0.15rem * var(--top-scale));

  overflow-y:auto;
  box-shadow:0 6px 12px rgba(0,0,0,0.08);
  z-index:30;
  padding:calc(0.25rem * var(--top-scale)) 0;

  display:none;
}

html[data-theme="dark"] .suggestions{
  background:#484c54;     
  border-color:#4a4a4a;
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
}

.suggestion-item{
  padding:calc(0.25rem * var(--top-scale)) calc(0.75rem * var(--top-scale)) calc(0.25rem * var(--top-scale)) var(--search-text-inset);
  text-align:left;
  font-size:var(--input-font);
  font-family:inherit;
  font-weight:500;
  line-height:1.2;
  letter-spacing:normal;
  font-style:normal;
  cursor:pointer;

  white-space:nowrap; 
  overflow:hidden;   
  text-overflow:ellipsis;  
}
.suggestion-match,
.suggestion-rest{
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;

  white-space:nowrap;   
}
.suggestion-match{ color:inherit; }
.suggestion-rest{ color:#2345b0ff; }
.suggestion-item:hover{ background:#e8f0ff; }
.suggestion-item.active{ background:#e8f0ff; }

/* =========================================================
   BUTTONS
========================================================= */
button{
  border:none;
  border-radius:calc(0.5rem * var(--top-scale));
  background:var(--sb-blue);
  color:#fff;
  cursor:pointer;
  transition:background 0.2s ease;
}

.btn-icon{
  width:55%;
  height:55%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

.icon-action{
  height:var(--btn-h);
  width:var(--btn-h);
  min-width:var(--btn-h);
  max-width:var(--btn-h);
  object-fit:contain;
  display:inline-block;
  cursor:pointer;
}

.icon-action[aria-disabled="true"]{
  opacity:1;
  pointer-events:none;
}

/* .button-wrapper removed — fetch icon now inside .input-wrapper */

.nav-links{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  height:var(--btn-h);
  gap:calc(var(--gap) * 2);
  order:2;
}


.topbar-link span{
  display:block;
  text-align:center;
}

.topbar-link{
  display:none;
  border:none;
  background:transparent;
  height:var(--btn-h);
  min-height:var(--btn-h);
  padding:0;
  margin:0;
  line-height:1;
  font-weight:800;
  font-size:calc(1rem * var(--top-scale));
  letter-spacing:0.03em;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:calc(var(--gap) * 0.2);
  text-decoration:none;
}

/* Price Alert: never dim, never glow-switch with page state */
.topbar-link--alert{
  color:var(--sb-blue);
  opacity:1;
  font-family:inherit;
}

.topbar-link--alert:hover{
  color:#4f8dff;
}

/* Daily / All / Favs page nav */
.topbar-link--nav{
  display:inline-flex;
  color:var(--topbar-nav-idle);
  opacity:1;
}

.topbar-link--nav:hover{
  color:var(--topbar-nav-active);

}

.topbar-link--nav.active,
.topbar-link--nav[aria-current="page"]{
  color:var(--topbar-nav-active);
}

.topbar-link[aria-current="page"]{
  opacity:1;
}

.mode-toggle-btn{
  display:none;
  border:none;
  background:transparent;
  height:var(--btn-h);
  min-height:var(--btn-h);
  padding:0;
  margin:0;
  cursor:pointer;
  align-items:self-start;
  justify-content:center;
}

.mode-toggle-btn img{  
  height:calc(var(--btn-h) * 0.8);
  width:auto;
  display:block;
}

/* =========================================================
   MENU ICON — FIX: size it directly instead of scaling with
   transform, which leaves phantom layout space on the left.
   Target rendered size was ~30px (42px * 0.7225). We set the
   img dimensions directly and remove the transform entirely.
========================================================= */
#menuBtn{
  display:block;
  margin:0;
  padding:0;
  height:calc(var(--btn-h) * 0.7225 * 0.8);
  width:calc(var(--btn-h) * 0.7225 * 0.8);
  min-width:calc(var(--btn-h) * 0.7225 * 0.8);
  max-width:calc(var(--btn-h) * 0.7225 * 0.8);
  transform:none;
  transform-origin:unset;
  cursor:pointer;
  fill:var(--sb-blue);
}

/* old #fetchBtn external styles removed — now uses .input-fetch */

.btn-eq{
  height:var(--btn-h);
  width:var(--btn-h);
  min-width:var(--btn-h);
  max-width:var(--btn-h);
  padding:0;
  border:1px solid var(--sb-blue);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  font-size:var(--btn-font);
  font-weight:700;
}

.btn-eq:hover{ background:#1a3661; }

.btn-eq:disabled{
  opacity:1;
  cursor:pointer;
  pointer-events:none;
}

/* =========================================================
   SLIDE-OUT MENU PANEL
========================================================= */
.slide-panel-backdrop{
  position:fixed;
  inset:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 280ms ease, visibility 0s linear 280ms;
  z-index:3000;
}

.slide-panel-backdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 280ms ease;
}

.slide-panel{
  height:100%;
  width:min(220px, 84vw);
  background:#f8f8f8;
  box-shadow:10px 0 24px rgba(0,0,0,0.5);
  padding:16px 24px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  transform:translateX(-100%);
  transition:transform 280ms ease;
}

html[data-theme="dark"] .slide-panel{
  background:#484c54;
  box-shadow:10px 0 24px rgba(0,0,0,0.5);
}

.slide-panel-backdrop.open .slide-panel{ transform:translateX(0); }

.slide-panel-x-close{
  position:absolute;
  top:10px;
  right:12px;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  font-size:32px;
  line-height:1;
  font-weight:900;
  color:#888;
  opacity:.9;
}
.slide-panel-x-close:hover{ color:#555; opacity:1; }

.slide-panel-title,
.slide-panel-heading{
  text-align:center;
  color:var(--sb-blue);
  font-weight:900;
}

.slide-panel-title{ font-size:1.2rem; margin-bottom:12px; }
.slide-panel-heading{ font-size:1rem; margin-bottom:8px; }
.slide-panel-section > .slide-panel-heading{
  width:100%;
  margin-left:0;
}

.slide-panel-section{ display:flex; flex-direction:column; gap:8px;}
.slide-panel-link{ color:var(--sb-blue); text-decoration:none; font-weight:700; margin-left:4px; }
.slide-panel-link:hover{ text-decoration:underline; }
.slide-divider{ width:100%; border:0; border-top:1px solid rgba(var(--sb-blue-rgb) / 0.28); margin:14px 0; }
.slide-subheading{ color:var(--sb-blue); font-weight:700; }

.slide-store-select{
  width:100%;
  height:28px;
  border:none;
  border-radius:8px;
  background-color:#eee7e3;
  color:var(--sb-blue);
  padding:0 32px 0 18px;
  font-size:0.90rem;
  margin-top:0px;

  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2312375b' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 6px;
}

.slide-store-select:focus {
  outline: none;
}

html[data-theme="dark"] .slide-store-select{
  background-color:var(--card-bg);
  color:var(--sb-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239fc1f3' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

.price-range-filter{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:2px;
}

.price-range-values{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.9rem;
  font-weight:600;
  color:var(--sb-blue);
}

.price-range-slider-wrap{
  position:relative;
  width:100%;
  height:24px;
}

.price-range-track,
.price-range-fill{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:6px;
  border-radius:999px;
  background:#eee7e3;
  left:0;
  width:100%;}

.price-range-track{
  left:0;
  right:0;
  background:rgba(var(--sb-blue-rgb) / 0.18);
}

.price-range-input{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:24px;
  margin:0;
  background:transparent;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none;
}

.price-range-input::-webkit-slider-runnable-track{
  height:6px;
  background:transparent;
  border:none;
  box-shadow:none;
}

.price-range-input::-moz-range-track{
  height:6px;
  background:transparent;
  border:none;
  box-shadow:none;
}

.price-range-input::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--sb-blue);
  border:none;
  cursor:pointer;
  pointer-events:auto;
  margin-top:-5px;
  box-shadow:none;
}

.price-range-input::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--sb-blue);
  border:none;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:none;
}

.range-title{
  font-size:0.85rem;
  font-weight:600;
  color:var(--sb-blue);
  text-align:center;
}

html[data-theme="dark"] .price-range-values{
  color:var(--sb-blue);
}

html[data-theme="dark"] .price-range-track,
html[data-theme="dark"] .price-range-fill {
  background: var(--card-bg);
}

html[data-theme="dark"] .price-range-input::-webkit-slider-thumb {
  background-color: var(--sb-blue);
}

html[data-theme="dark"] .price-range-input::-moz-range-thumb {
  background-color: var(--sb-blue);
}

.slide-check-option{
  border:0;
  background:transparent;
  color:var(--sb-blue);
  padding-left:0px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.9rem;
  font-weight:400;
  cursor:pointer;
}

html[data-theme="dark"] .slide-check-option{
  color:var(--sb-blue);
}

.gender-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  column-gap:12px;
  width:100%;
}

.gender-row .slide-check-option{
  width:100%;
  justify-content:flex-start;
  text-align:left;
}

.gender-half{
  width:100%;
}
.slide-check-box{
  width:0.9rem;
  height:0.9rem;
  border:1px solid var(--sb-blue);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:var(--input-bg);
  flex-shrink:0;
}

html[data-theme="dark"] .slide-check-box{
  background-color:var(--input-bg);
}

.slide-check-mark{
  display:none;
  font-size:14px;
  line-height:1;
  color:#00ad19;
  font-weight:900;
}
.slide-check-option.active .slide-check-mark{ display:block; }

.surface-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:12px;
  row-gap:8px;
  width:100%;
}

.surface-half{
  width:100%;
  justify-content:flex-start;
  text-align:left;
  padding-left:0;
}




.sort-arrow{ width:14px; height:14px; }
.sort-arrow-left{ transform:rotate(180deg); }

.slide-panel-close{
  margin-top:auto;
  align-self:center;
  width:100%;
  max-width:220px;
  height:42px;
  font-size:1rem;
  font-weight:800;
}


/* =========================================================
   STATUS / FILTERS
========================================================= */
.status-bar{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:
    "summary sort"
    "applied sort";
  align-items:end;
  column-gap:12px;
  row-gap:4px;
  min-width:0;
}

.status-summary{
  grid-area:summary;
  margin:0;
  padding:0;
  text-align:left;
  align-items:center; 
   width:100%;
  min-width:0;
  font-size:1.5rem;
  font-weight:600;
  color:var(--sb-blue);
  line-height:1.15;
}

.status-applied{
  grid-area:applied;
  min-width:0;
  font-size:0.88rem;
  line-height:1.2;
  color:var(--sb-blue);
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}

.status-applied:empty{
  display:none;
}

.status-sort-wrap{
  grid-area:sort;
  display:flex;
  align-items:center;
  justify-self:end;
  gap:8px;
  min-width:0;
}

.status-sort-label{
  color:var(--sb-blue);
  font-size:0.92rem;
  font-weight:700;
  white-space:nowrap;
}

.status-sort-select{
  height:28px;
  min-width:140px;
  border:none;
  border-radius:8px;
  background-color:#eee7e3;
  color:var(--sb-blue);
  padding:0 28px 0 6px;
  font-size:0.90rem;

  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2312375b' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 6px;
}

.status-sort-select:focus {
  outline: none;
}

.status-specs-btn{
  height:28px;
  border: none;
  border-radius:8px;
  background-color:#eee7e3;
  color:var(--sb-blue);
  padding:0 6px;
  font-size:0.90rem;
  font-family:inherit;
  cursor:pointer;
}

.status-control-active{
  background:var(--sb-blue);
  color:var(--bg);
}



html[data-theme="dark"] .status-summary,
html[data-theme="dark"] .status-applied,
html[data-theme="dark"] .status-sort-label{
  color:#e8e8e8;
}

html[data-theme="dark"] .status-sort-select{
  background-color:var(--card-bg);
  color:var(--sb-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239fc1f3' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .status-specs-btn{
  background:var(--card-bg);
  color:var(--sb-blue);
}
html[data-theme="dark"] .status-control-active{
  background:var(--sb-blue);
  color:var(--bg);
}

html[data-theme="dark"] .status-control-active option{
  color:#000; /* ensures dropdown list is readable */
}

.filters{
  width:100%;
  max-width:100%;
  margin:0.75rem auto 0.25rem;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:calc(1rem * var(--top-scale));
  flex-wrap:wrap;
  text-align:center;
  padding:0 var(--pad);
}

.filter-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  flex-wrap:wrap;
}

.filter-label{
  font-size:0.9rem;
  font-weight:700;
  color:var(--sb-blue);
  white-space:nowrap;
}

.chip-group{
  display:flex;
  align-items:center;
  gap:0.4rem;
  flex-wrap:wrap;
}

.chip{
  border:1px solid var(--sb-blue);
  background:#fafdf4;
  color:var(--sb-blue);
  width:calc(22px * var(--top-scale));
  height:calc(22px * var(--top-scale));
  border-radius:999px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:calc(0.75rem * var(--top-scale));
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
  position:relative;
}
.chip:hover{ background:#e8f0ff; }
.chip.active{ background:var(--sb-blue); color:#fff; }

html[data-theme="dark"] .chip{
  background:#223049;
}

/* =========================================================
   GRIDS
   
   KEY FIX: All card metric custom properties are now defined
   inside .shoe-grid, which has container-type:inline-size.
   This means every --card-* calc() uses the LIVE 100cqw value
   for --card-box-w, so fonts and spacing scale continuously
   as the grid narrows or widens. Previously they were on :root
   with a fixed 182px fallback and never updated.
========================================================= */
.daily-deals{
  width:100%;
margin-top:0;
}

.shoe-grid{
  width:100%;
  max-width:100%;
 /*  margin:1rem auto 0; */
 /*  padding:0 var(--pad); */
  display:grid;
  gap:var(--grid-gap);
  grid-template-columns:repeat(var(--visible-cols), minmax(0, 1fr));
  grid-auto-flow:row;
  justify-content:stretch;
  align-items:stretch;
  container-type:inline-size;

  /* ── live card width (resolves inside the container) ── */
  --card-box-w:calc(
    (100cqw - (var(--pad) * 2) - ((var(--visible-cols) - 1) * var(--grid-gap)))
    / var(--visible-cols)
  );

  /* ── all card metrics derived from live --card-box-w ── */
  --card-pad:           calc(var(--card-box-w) * 0.05);
  --card-gap:           calc(var(--card-box-w) * 0.0329670330);

  --card-title-size:    calc(var(--card-box-w) * 0.075);
  --card-store-size:    calc(var(--card-box-w) * 0.070);
  --card-price-size:    calc(var(--card-box-w) * 0.080);
  --card-tag-size:      calc(var(--card-box-w) * 0.060);

  --badge-font:         calc(var(--card-box-w) * 0.050);
  --badge-pad-y:        calc(var(--card-box-w) * 0.0109890110);
  --badge-pad-x:        calc(var(--card-box-w) * 0.0439560440);
  --badge-offset:       calc(var(--card-box-w) * 0.0329670330);

  --img-radius:         calc(var(--card-box-w) * 0.0549450549);

  --card-border:        calc(var(--card-box-w) * 0.0109890110);
  --img-border:         calc(var(--card-box-w) * 0.0054945055);
  --card-radius:        calc(var(--card-box-w) * 0.0659340659);

  --card-tags-gap:      calc(var(--card-box-w) * 0.0329670330);
  --price-row-gap:      calc(var(--card-box-w) * 0.0329670330);
  --orig-price-ml:      calc(var(--card-box-w) * 0.0329670330);
}

@media (min-width:561px){
  .shoe-grid{
    grid-auto-rows:1fr;
  }
}

/* =========================================================
   CARDS
========================================================= */
.card{
  width:100%;
  max-width:100%;
  background:var(--card-bg);
  padding:var(--card-pad);
  display:flex;
  flex-direction:column;
  text-align:left;
  position:relative;
  aspect-ratio:3 / 4;
  border-radius: var(--card-radius);
  overflow: hidden;    
   min-width:0;
}

.card.with-specs{
  aspect-ratio:auto;
}

.card-link{
  display:flex;
  flex-direction:column;
  gap:var(--card-gap);
  text-decoration:none;
  color:var(--sb-blue);
  height:100%;
  min-width:0;
}

.card-specs-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:4px 10px;
  font-size:11px;
  color:rgba(0, 0, 0, 0.7);
}

.card-spec-cell{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.25;
}

.card-spec-label{
  font-weight:700;
}

.card-spec-value{
  font-weight:500;
}

.card-spec-more-link{
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  color:var(--sb-blue);
  font-size:11px;
  line-height:1.25;
  text-decoration:underline;
  cursor:pointer;
  font-family:inherit;
}

.specs-overlay-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0, 0, 0, 0.35);
  z-index:1200;
}

.specs-overlay-backdrop.open{
  display:flex;
}

.specs-overlay-modal{
  width:min(420px, calc(100vw - 28px));
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0, 0, 0, 0.12);
  box-shadow:0 22px 50px rgba(0, 0, 0, 0.24);
  padding:16px 18px;
  position:relative;
}

.specs-overlay-close{
  position:absolute;
  top:8px;
  right:10px;
  border:none;
  background:transparent;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  color:#576579;
}

.specs-overlay-title{
  margin:0 24px 8px 0;
  font-size:1rem;
  color:var(--sb-blue);
}

.specs-overlay-body{
  margin:0;
  color:#49543a;
  font-size:0.9rem;
}

html[data-theme="dark"] .specs-overlay-modal{
  background:#29313e;
  border-color:#46556d;
}

.card-image-wrapper{
  position:relative;
  width:100%;
  overflow:hidden;
  aspect-ratio:5 / 4;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card img:not(.card-save-icon){
  width:100%;
  height:auto;
  display:block;
}

 html[data-theme="dark"] .card img:not(.card-save-icon){
  border-color:#445470;
} 

.card-image-wrapper {
  background: var(--card-image-bg);
  border-radius: var(--img-radius);
}

.card-image-wrapper img:not(.card-save-icon) {
  mix-blend-mode: multiply;
}

.card-save-btn {
  position:absolute;
  top:0px;
  right:0px;
  color:#aaa;
  background:none;
  border:none;
  appearance:none;
  -webkit-appearance:none;
  padding:6px;
  margin:0;
  cursor:pointer;
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18%;
  min-width:0;
  aspect-ratio:1 / 1;
}

.card-save-icon {
  width:100%;
  height:auto;
  display:block;
  opacity:0.4;
  border:none;
  border-radius:0;
  background:transparent;
  transition:transform 0.15s ease, opacity 0.15s ease;
}

.card-save-btn.active .card-save-icon {
  opacity:0.75;
}

.card-save-btn:hover .card-save-icon {
  transform:scale(1.08);
}

.card-save-btn:active .card-save-icon {
  transform:scale(0.95);
}

.card-save-btn:focus,
.card-save-btn:focus-visible {
  outline:none;
  box-shadow:none;
}


.discount-badge{
  position:absolute;
  top:var(--badge-offset);
  left:var(--badge-offset);
  padding:var(--badge-pad-y) var(--badge-pad-x);
  border-radius:999px;
  font-weight:700;
  font-size:var(--badge-font);
  background:var(--sb-orange);
  color:#fff;
  z-index:3;
}

.card-tags{
  position:absolute;
  left:var(--badge-offset);
  right:var(--badge-offset);
  bottom:var(--badge-offset);
  display:flex;
  gap:var(--card-tags-gap);
  justify-content:space-between;
  align-items:center;
  z-index:2;
  pointer-events:none;
}

.card-tag{
  color:var(--sb-blue);
  font-weight:600;
  font-size:var(--card-tag-size);
  line-height:1.1;
  white-space:nowrap;
}
html[data-theme="dark"] .card-tag{
  color:#12375bff;
}
.card-content{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}

.card-title{
  font-size:var(--card-title-size);
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:calc(1.25em * 3);
}
.card-title strong{ font-size:1.15em; }

.card-store{
  margin-top:auto;
  color:var(--sb-blue);
  font-size:var(--card-store-size);
}

html[data-theme="dark"] .card-store{
  color:#aab7cf;
}

html[data-theme="dark"] .card-specs-grid{
  color:var(--sb-blue);
}

.card-price-row{
  display:flex;
  align-items:baseline;
  gap:var(--price-row-gap);
  font-size:var(--card-price-size);
}
.price{ font-weight:700; color:var(--sb-blue); }

.card-original-price{
  margin-left:var(--orig-price-ml);
  color:#777;
  text-decoration:line-through;
  font-size:0.85em;
}

html[data-theme="dark"] .card-original-price{
  color:#aab7cf;
}

.favorite-card-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.favorite-status-mount{
  min-height:1.1em;
}

.favorite-status-mount:empty {
  display: none;
}

.favorite-card-note{
  font-size:12px;
  line-height:1.3;
  color:#4f5561;
}

.favorite-card-note a{
  color:var(--sb-blue);
  text-decoration:underline;
}

.favorite-card-note-stale{
  color:#7a4f0f;
}

.favorite-warning-icon{
  margin-right:4px;
}

.favorite-search-more{
  border:none;
  background:transparent;
  color:var(--sb-blue);
  font-size:calc(var(--card-title-size) * 0.9);
  line-height:1.25;
  text-align:left;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
}

.favorite-image-wrapper .favorite-placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--img-radius);
  pointer-events:none;
  transition:opacity 220ms ease;
}

.favorite-image-wrapper .favorite-placeholder-loading{
  opacity:1;
  z-index:3;
}

.favorite-image-wrapper.loaded .favorite-placeholder-loading{
  opacity:0;
}

.favorite-image-wrapper .favorite-placeholder-failed{
  opacity:0;
  z-index:4;
}

.favorite-image-wrapper.failed .favorite-placeholder-failed{
  opacity:1;
}

html[data-theme="dark"] .favorite-card-note{
  color:#c2cbde;
}

/* =========================================================
   DISCLAIMER
========================================================= */
.disclaimer{
  width:100%;
  margin:0.15rem auto 0;
  padding:0 var(--pad);
  text-align:center;
  font-size:0.8rem;
  color:#555;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}

html[data-theme="dark"] .disclaimer{
  color:#b8c5dc;
}

/* =========================================================
   FOOTER
========================================================= */
.footer{
  margin-top:auto;
  padding:0.75rem 1rem;
  background:var(--bg);
  border-top:1px solid rgba(0,0,0,0.08);
  font-size:1.2rem;
  color:#3a3a3a;
  text-align:center;
  width:100%;
}

html[data-theme="dark"] .footer{
  color:#dbe7fb;
  border-top:1px solid rgba(255,255,255,0.08);
}

.footer a{
  color:var(--sb-blue);
  text-decoration:none;
  font-weight:500;
  cursor:pointer;
  margin:0 0.35rem;
  font-size:0.8rem;
}
.footer a:hover{ text-decoration:underline; }

.footer-copy{ font-size:0.70em; opacity:0.75; }
.footer-links{ font-size:0.7rem; }

/* =========================================================
   PAGER
========================================================= */
.pager{
  width:100%;
  display:none;
  justify-content:center;
  align-items:center;
  gap:0.75rem;
  margin:1rem 0 0.5rem;
}

.pager-btn{
  height:42px;
  min-width:42px;
  padding:0 0.75rem;
  border-radius:0.75rem;
  border:1px solid var(--sb-blue);
  background:var(--sb-blue);
  color:#fff;
  font-weight:800;
  font-size:1.1rem;
  cursor:pointer;
}
.pager-btn:hover{ background:#1a3661; }
.pager-btn:disabled{
  opacity:0.4;
  cursor:default;
  pointer-events:none;
}

.page-label{
  font-weight:800;
  color:var(--sb-blue);
  min-width:72px;
  text-align:center;
}

/* =========================================================
   TOPBAR BREAKPOINT (tablet portrait and smaller)
========================================================= */

@media (max-width:900px){

  :root{
    --top-scale:0.55;
    --gap:calc(12px * var(--top-scale));
    --input-h:calc(76px * var(--top-scale));
    --btn-h:calc(64px * var(--top-scale));
    --btn-eq-w:calc(var(--btn-h) * 1.2);
  }

  .app{
    gap:0.4rem;
  }

  .topbar{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px;               /* match desktop spacing */
    padding:0;              /* body already provides side padding */
    width:100%;
    margin-top:0;
  }

  .top-right{
    flex:0 0 auto;
    order:0;
    display:flex;
    align-items:center;
    gap:12px;               /* match desktop spacing */
  }

  .top-left{
    flex:1 1 0;
    order:1;
    min-width:0;
    max-width:none;
    transition:none;
  }

  .brand-logo{
    display:block;
    width:auto;
    height:auto;
    max-height:calc(var(--input-h) * 1.8);
  }

  /* Nav links wrap to centered second row */
  .nav-links{
    width:100%;
    justify-content:center;
    order:10;
    height:auto;
  }

  /* Show all links at tablet size (alert + toggle included) */
  .nav-links .topbar-link,
  .nav-links .mode-toggle-btn{
    display:inline-flex;
  }

  .row{
    flex-wrap:nowrap;
    align-items:center;
    width:100%;
    display:flex;
    gap:var(--gap);
  }

  #mobileSearchRow{
    gap:calc(var(--gap) * 0.5);
  }

  .input-wrapper{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:stretch;
  }

  .input-wrapper input[type="text"],
  .input-wrapper input[type="search"]{
    flex:1 1 auto;
  }

  input[type="text"],
  input[type="search"]{
    font-size:16px;
  }

  .input-icon{
    width:calc(33.6px * var(--top-scale));
    height:calc(33.6px * var(--top-scale));
  }
/*
.input-clear{
  position:absolute;
  right:calc(var(--input-h) * 0.55 + 1.5rem * var(--top-scale));
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:calc(3rem * var(--top-scale));
  line-height:1;
  font-weight:400;
  color:#888;
  z-index:20;
}
*/
  #menuBtn{
    flex:0 0 calc(var(--btn-h) * 0.75 * 0.95);
    width:calc(var(--btn-h) * 0.75 * 0.95);
    min-width:calc(var(--btn-h) * 0.75 * 0.95);
    height:calc(var(--btn-h) * 0.75 * 0.95);
    max-width:calc(var(--btn-h) * 0.75 * 0.95);
    transform:none;
  }

  /* #fetchBtn now inside input, sized by .input-fetch base styles */

  .input-controls{
    position:absolute;
    right:calc(8px + (42px * var(--top-scale)));
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  .input-controls img{
    width:18px;
    height:18px;
  }

  .suggestion-item{
    font-size:19px;
    padding-top:calc(0.275rem * var(--top-scale));
    padding-bottom:calc(0.275rem * var(--top-scale));
  }
}

/* =========================================================
   MOBILE (phone only)
========================================================= */

@media (max-width:600px){

  :root{
    --cols:1;
    --visible-cols:1;
    --pad:8px;
    --grid-gap:12px;
  }

  .left-sidebar{
    display:none !important;
  }

  .filters{
    display:none !important;
  }

  #filtersHeading{
    display:none;
  }

  .display-panel{
    display:none;
  }

  .mobile-top-banner{
    display:none !important;
  }

  .nav-links{
    display:none;
  }

  .topbar{
    flex-direction:column;
  }

  .top-right{
    width:100%;
    justify-content:space-between;
    margin:0 0 6px 0;
    align-self:stretch;
  }

  .top-right .brand-logo{
    margin-left:auto;
  }

  .top-left{
    width:100%;
  }

  .content-shell,
  .content-header-grid{
    grid-template-columns:1fr !important;
  }

  /* =========================
     STATUS BAR
  ========================= */
  .status-bar{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:
      "summary"
      "applied"
      "sort";
  }

  .status-summary{
    font-size:1.05rem;
  }

  .status-applied{
    font-size:0.82rem;
  }

  .status-sort-wrap{
    width:auto;
    justify-self:end;
  }

  .status-sort-select{
    width:auto;
    min-width:0;
  }

  /* =========================
     GRID / CARDS
  ========================= */
  .shoe-grid{
    width:100%;
    max-width:none;
    margin:0 auto;
    grid-template-columns:1fr;
    justify-content:stretch;
    gap:var(--grid-gap);
    --card-box-w:calc((100cqw - (var(--pad) * 2)) * 0.58);
  }

  .card{
    width:100%;
    margin:0;
    aspect-ratio:auto;
    min-width:0;
  }

  .card-link{
    display:grid;
    grid-template-columns:42% minmax(0, 1fr);
    align-items:stretch;
    gap:var(--card-gap);
    height:100%;
    min-width:0;
  }

  .card-image-wrapper{
    width:100%;
    aspect-ratio:5 / 4;
    overflow:hidden;
    border-radius:var(--img-radius);
    position:relative;
  }

  .card-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  /* =========================
     DISCLAIMER / PANEL / TO TOP
  ========================= */
  .disclaimer{
    max-width:none;
    width:100%;
    padding:0 var(--pad);
  }

  .slide-panel{
    width:100vw;
  }

  .to-top.is-visible{
    display:flex;
    opacity:1;
    transform:none;
  }

  .to-top{
    bottom:calc(max(16px, env(safe-area-inset-bottom)) + 92px);
    z-index:2000;
  }

  #mainContent{
    padding:0 var(--pad);
  }

  /* =========================
     RESULTS TRANSITION OFF
  ========================= */
  #results{
    transition:none !important;
  }

  #results.is-switching{
    opacity:1 !important;
    transform:none !important;
  }

  /* =========================
     MODAL
  ========================= */
  .sb-alert-modal{
    width:100vw;
    max-width:100vw;
    height:100vh;
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }

  .sb-price-col{
    flex:1;
    min-width:0;
  }
}

@media (min-width:701px){
  .top-left{
    max-width:none;
  }

  .topbar,
  .status-bar,
  .filters,
  .disclaimer{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .row .input-wrapper{
    flex:1 1 auto;
    max-width:none;
  }

  .shoe-grid{
    grid-auto-rows:1fr;
  }

  .topbar-link,
  .mode-toggle-btn{
    display:inline-flex;
  }
}

/* =========================================================
   RESULTS TRANSITION (disabled on mobile portrait)
========================================================= */
#results{
  transition:opacity 160ms ease, transform 160ms ease;
}
#results.is-switching{
  opacity:0;
  transform:translateY(6px);
}

/* ==============================
   LOAD MORE (mobile portrait)
============================== */
.load-more-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 0 16px;
}

.load-more-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  height:auto;
  min-width:auto;
  border-radius:8px;
  border:1.5px solid var(--sb-blue);
  background:var(--sb-blue);
  color:#fff;
  font-size:0.95rem;
  font-weight:800;
}

.load-more-btn:active{
  transform:translateY(1px);
}


/* =========================================================
   SET ALERT MODAL
========================================================= */
.sb-next .sb-input,
.sb-gender.sb-next,
.sb-price-wrap.sb-next{
  outline:3px solid rgba(33,68,120,0.35);
  box-shadow:0 0 0 6px rgba(33,68,120,0.10);
  border-radius:var(--sb-input-radius);
}

.sb-gender.sb-disabled{
  opacity:0.55;
  pointer-events:none;
}

.sb-alert-backdrop{
  position:fixed;
  inset:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  align-items:stretch;
  justify-content:flex-start;
  padding:0;
  z-index:9999;
  transition:opacity 280ms ease, visibility 0s linear 280ms;
}

.sb-alert-backdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 280ms ease;
}

.sb-alert-modal{
  height:100%;
  width:min(420px, 92vw);
  max-width:100vw;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  background:#f8f8f8;
  border-radius:0;
  padding:12px 16px 16px;
  box-shadow:10px 0 24px rgba(0,0,0,0.18);
  position:relative;
  transform:translateX(-100%);
  transition:transform 280ms ease;
}
.sb-alert-backdrop.open .sb-alert-modal{ transform:translateX(0); }

html[data-theme="dark"] .sb-alert-modal{
  background:#182233;
  box-shadow:10px 0 24px rgba(0,0,0,0.5);
}

.sb-alert-close{
  position:absolute;
  top:10px;
  right:12px;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  font-size:32px;
  line-height:1;
  font-weight:400;
  color:#888;
  opacity:.9;
}
.sb-alert-close:hover{ color:#555; opacity:1; }

.sb-alert-title{
  text-align:center;
  color:var(--sb-blue);
  font-weight:900;
  font-size:1.35rem;
  margin:0 40px 10px;
  padding-top:2px;
}

.sb-alert-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#sbAlertFormView{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sb-submit{ margin-top:0; }
.sb-note{ margin-top:0; }
.sb-confirm{ margin-top:0; }

.sb-alert-bottom-close{
  margin-top:16px;
}

.sb-input{
  width:100%;
  height:var(--input-h);
  border-radius:var(--sb-input-radius);
  border:2px solid var(--sb-blue);
  background:var(--input-bg);
  /*box-shadow:var(--sb-input-shadow); */
  padding:0 17px;
  font-size:16px;
  font-weight:500;
  color:#222222;
  transition:border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing:border-box;
}

html[data-theme="dark"] .sb-input{
  color:#e7eefc;
}

.sb-input::placeholder{ color:#999; opacity:1; }

.sb-input:focus{
  outline:none;
  border-color:var(--sb-focus-border);
  box-shadow:var(--sb-focus-ring), var(--sb-input-shadow);
}

.sb-input:not(:placeholder-shown):not(:focus){
  background:var(--sb-done-bg);
}

.sb-input-wrap{ position:relative; }

.sb-clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  display:none;
  font-size:26px;
  line-height:1;
  font-weight:800;
  color:#888;
  opacity:0.9;
}
.sb-clear:hover{ color:#555; opacity:1; }

.sb-sug{
  position:absolute;
  top:calc(var(--input-h) + 4px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--sb-blue);
  border-radius:var(--sb-input-radius);
  box-shadow:0 6px 12px rgba(0,0,0,0.08);
  overflow:auto;
  padding:4px 0;
  z-index:5;
}

html[data-theme="dark"] .sb-sug{
  background:#182233;
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
}

.sb-sug .item{
  padding:10px 12px;
  cursor:pointer;
  font-family:inherit;
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:normal;
  font-style:normal;
}
.sb-sug-match,
.sb-sug-rest{
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
}
.sb-sug-match{ color:inherit; }
.sb-sug-rest{ color:rgba(68, 68, 68, 0.62); }

.sb-sug .item:hover .sb-sug-rest,
.sb-sug .item.active .sb-sug-rest,
.suggestion-item:hover .suggestion-rest,
.suggestion-item.active .suggestion-rest{
  color:#2345b0ff;
}

.sb-sug .item:hover,
.sb-sug .item.active{
  background:#e8f0ff;
}

.sb-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.sb-col{ flex:1; min-width:180px; }
.sb-price-col{ flex:0 0 180px; min-width:180px; }

.sb-gender{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.sb-gender-option{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  font-weight:600;
  color:#2d2d2d;
}

html[data-theme="dark"] .sb-gender-option{
  color:#e7eefc;
}

.sb-gender-box{
  width:18px;
  height:18px;
  border:1px solid var(--sb-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  flex-shrink:0;
}

html[data-theme="dark"] .sb-gender-box{
  background:#223049;
}

.sb-gender-check{
  display:none;
  font-size:14px;
  line-height:1;
  color:#1f6a2a;
  font-weight:900;
}
.sb-gender-option.active .sb-gender-check{ display:block; }
.sb-gender-label{ font-size:0.95rem; }

.sb-price-wrap{
  position:relative;
  height:var(--input-h);
}

.sb-price{
  height:var(--input-h);
  padding-left:22px;
  padding-right:40px;
  text-align:left;
}

.sb-dollar{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:#444;
  font-weight:600;
  pointer-events:none;
}

html[data-theme="dark"] .sb-dollar{
  color:#dbe7fb;
}

.sb-clear-price{ right:10px; }

.sb-submit{
  width:100%;
  height:46px;
  border-radius:10px;
  border:none;
  background:var(--sb-blue);
  color:#fff;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
}
.sb-submit:hover{ background:#1a3661; }
.sb-submit:disabled{ background:#ccc; cursor:not-allowed; }

.sb-secondary{
  background:#fff;
  border:2px solid var(--sb-blue);
  color:var(--sb-blue);
}

html[data-theme="dark"] .sb-secondary{
  background:#223049;
}

.sb-secondary:hover{ background:rgba(33,68,120,0.10); }

.sb-note{
  padding:10px 12px;
  background:#f8f8f8;
  border:1px solid var(--sb-blue);
  border-radius:10px;
  color:#334;
  font-size:0.9rem;
  line-height:1.45;
}

html[data-theme="dark"] .sb-note{
  background:#182233;
  color:#dbe7fb;
}

.sb-note-title{
  font-weight:900;
  color:var(--sb-blue);
  margin-bottom:4px;
}
.sb-note ul{ margin:6px 0 0 18px; padding:0; }

.sb-status{
  padding:10px 12px;
  border-radius:10px;
  text-align:center;
  font-weight:700;
}

.sb-status.err{
  background:rgba(220,53,69,0.15);
  border:1px solid rgba(220,53,69,0.5);
  color:#8a1f2c;
}

.sb-status.ok{
  background:rgba(46,160,67,0.15);
  border:1px solid rgba(46,160,67,0.5);
  color:#1f6a2a;
}

.sb-confirm{
  padding:12px;
  border-radius:12px;
  border:2px solid rgba(46,160,67,0.55);
  background:rgba(46,160,67,0.08);
}

.sb-confirm-title{
  text-align:center;
  font-size:1.1rem;
  font-weight:900;
  color:#1f6a2a;
  margin-bottom:8px;
}

.sb-confirm-details{
  background:#fff;
  border-radius:10px;
  padding:10px;
  border:1px solid rgba(46,160,67,0.3);
  font-size:0.95rem;
}

html[data-theme="dark"] .sb-confirm-details{
  background:#223049;
  color:#e7eefc;
}

.sb-confirm-details strong{ color:var(--sb-blue); }

.sb-confirm-msg{
  margin:10px 0;
  text-align:center;
  color:#1f6a2a;
  font-size:0.9rem;
  line-height:1.45;
}

@media (max-width:420px){
  .sb-price-col{ flex:1; min-width:0; }
}

/* =========================================================
   THEME SWITCH SMOOTHING
========================================================= */
body,
.app,
.status-message,
.status-bar,
.status-summary,
.status-applied,
.status-sort-wrap,
.status-sort-label,
.status-sort-select,
.filters,
.disclaimer,
.footer,
.card,
.card-image-wrapper,
.card img,
.suggestions,
.sb-sug,
input[type="text"],
input[type="search"],
.sb-input,
.btn-eq,
.chip,
.slide-store-select,
.slide-check-box,
.sb-gender-box,
.sb-note,
.sb-confirm,
.sb-confirm-details,
.pager-btn,
.load-more-btn,
.to-top,
.discount-badge,
.card-store,
.card-tag,
.filter-label,
.slide-panel-title,
.slide-panel-heading,
.slide-subheading,
.slide-panel-link,
.topbar-link{
  transition:
    color var(--theme-fade-ms) ease,
    opacity var(--theme-fade-ms) ease;
}

html.theme-switching .slide-panel,
html.theme-switching .slide-panel-backdrop,
html.theme-switching .sb-alert-modal,
html.theme-switching .sb-alert-backdrop,
html.theme-switching .brand-logo,
html.theme-switching .topbar,
html.theme-switching .top-right,
html.theme-switching .top-left,
html.theme-switching #menuBtn,
html.theme-switching #fetchBtn,
html.theme-switching #modeToggleBtn img,
html.theme-switching #searchShoeIcon{
  transition:none !important;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0);
  pointer-events:none;
  opacity:0;
  transition:
    opacity var(--theme-wash-ms) ease,
    background-color var(--theme-wash-ms) ease;
  z-index:9998;
}

html.theme-switching body::after{
  opacity:1;
}

html.theme-switching.to-dark body::after{
  background:rgba(10,14,24,0.06);
}

html.theme-switching.to-light body::after{
  background:rgba(255,255,255,0.10);
}

@media (prefers-reduced-motion: reduce){
  body,
  .app,
  .status-message,
  .filters,
  .disclaimer,
  .footer,
  .card,
  .card-image-wrapper,
  .card img,
  .suggestions,
  .sb-sug,
  input[type="text"],
  input[type="search"],
  .sb-input,
  .btn-eq,
  .chip,
  .slide-check-box,
  .sb-gender-box,
  .sb-note,
  .sb-confirm,
  .sb-confirm-details,
  .pager-btn,
  .load-more-btn,
  .to-top,
  .discount-badge,
  .card-store,
  .card-tag,
  .filter-label,
  .slide-panel-title,
  .slide-panel-heading,
  .slide-subheading,
  .slide-panel-link,
  .topbar-link,
  body::after{
    transition:none !important;
  }
}