/* /pages/index.css */

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

/* 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:#214478ff;

  --bg: url("/images/paperBG.webp");             /* #f4ede3ff;  */  
  --card-bg:#f4ede3ff;                         /* #e2e5ec; */
  --sb-blue-rgb: 33 68 120;

  --maxw:1600px;
  --pad:12px;

  --top-scale:0.70;
  --grid-scale:0.70;

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

  --input-h:calc(56px * 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));
  --btn-font:  calc(1.15rem * var(--top-scale));
  --menu-icon-size:calc(1.75rem * var(--top-scale));

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

  /* ✅ NEW: number of input rows in the top cluster
     (combined search = 1 row; old double search was 2) */
  --top-rows:1;

  --cols:6;
  --card-brand-color:#214478ff;
  --card-w:calc(260px * var(--grid-scale));
  --grid-gap:calc(1.25rem * var(--grid-scale));

  --grid-w:calc(
    (var(--cols) * var(--card-w)) +
    ((var(--cols) - 1) * var(--grid-gap))
  );

  --card-pad:calc(0.75rem * var(--grid-scale));
  --card-gap:calc(0.4rem * var(--grid-scale));
  --card-content-gap:calc(0.3rem * var(--grid-scale));

  --card-title-size:calc(1.25rem * var(--grid-scale));
  --card-store-size:calc(1.05rem * var(--grid-scale));
  --card-price-size:calc(1.25rem * var(--grid-scale));
  --card-tag-size:calc(0.9rem * var(--grid-scale));

  --badge-font:calc(0.9rem * var(--grid-scale));
  --badge-pad-y:calc(0.15rem * var(--grid-scale));
  --badge-pad-x:calc(0.5rem * var(--grid-scale));
  --badge-offset:calc(0.35rem * var(--grid-scale));

  --img-radius:calc(0.6rem * var(--grid-scale));

  --card-border:calc(2px * var(--grid-scale));
  --img-border:calc(1px * var(--grid-scale));
  --card-radius:calc(0.75rem * var(--grid-scale));

  /* =========================================================
     ✅ SET ALERT MODAL TOKENS (matches main search box)
     - modal panel color: #ff660045 (RGBA)
     - same input shape + background + highlight as main page
     - completed inputs turn same light blue as "completed" email
  ========================================================= */
  --sb-modal-bg: #ff660045;               /* requested RGBA hex */
  --sb-input-bg: #f8f8f8;                 /* same as main input */
  --sb-input-radius: calc(0.5rem * var(--top-scale));
  --sb-input-shadow: 0px 0px 7px rgb(33 68 121 / 28%);
  --sb-focus-border: #1a3661;             /* same as .sb-input:focus currently uses */
  --sb-focus-ring: 0 0 0 3px rgba(33,68,120,0.10); /* same focus ring */
  --sb-done-bg: rgba(232,240,255,1);      /* light blue “done” fill */
}

/* =========================================================
   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));
}

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

#mainContent{
  width:100%;
  flex:1 0 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;
  padding:0 var(--pad);
}

.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:center;
  order:0;
  margin-right:calc(36px * var(--top-scale));
  min-width:0;
}

/* =========================================================
   LOGO
========================================================= */
.brand-logo{
  height:calc((max(var(--input-h), var(--btn-h)) * var(--top-rows) + (var(--gap) * (var(--top-rows) - 1))) * var(--logo-scale));
  max-height:calc((max(var(--input-h), var(--btn-h)) * var(--top-rows) + (var(--gap) * (var(--top-rows) - 1))) * var(--logo-scale));
  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;
}

.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));
  pointer-events:none;
  z-index:10;
  opacity:0.5;
}

input[type="text"], input[type="search"]{
  width:100%;
  height:var(--input-h);

  padding-right:calc(3rem * var(--top-scale));
  padding-left:calc((0.90rem * var(--top-scale)) + (20px * var(--top-scale)) + (1rem * var(--top-scale)));

  border-radius:calc(0.5rem * var(--top-scale));
  border:1px solid var(--sb-blue);
  background:#f8f8f8;
  box-shadow: 0px 0px 7px rgb(33 68 121 / 28%);
  font-size:var(--input-font);
  font-weight:500;
  color:#444;
  transition:border-color 0.2s ease, background-color 0.2s ease;
  min-width:0;
}
input::placeholder{ color:#999; opacity:1; }

.input-clear{
  position:absolute;
  right:calc(0.55rem * var(--top-scale));
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:none;
  font-size:calc(2rem * var(--top-scale));
  line-height:1;
  font-weight:800;
  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:#fff;
  border:1px solid var(--sb-blue);
  border-radius:calc(0.5rem * var(--top-scale));
  margin-top:calc(0.15rem * var(--top-scale));
  max-height:calc(180px * 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;
}

.suggestion-item{
  padding:calc(0.25rem * var(--top-scale)) calc(0.75rem * var(--top-scale));
  text-align:left;
  font-size:calc(1.25rem * var(--top-scale));
  cursor:pointer;
}
.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;
}

.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;
}

/* =========================================================
   LINKS RIBBON (TWO LINES + CONTROLS BETWEEN)
========================================================= */
.links-ribbon{
  width:100%;
  max-width:min(calc(var(--grid-w) + (2 * var(--pad))), 100%);
  margin:0.35rem auto 0;
  padding:0 var(--pad);
  background:transparent;
  border:none;
  border-radius:0;
}

.links-ribbon-inner{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:0.75rem;
  padding:0.35rem 0;
  background:transparent;
  border:none;
  border-radius:0;

  border-top:1px solid rgba(var(--sb-blue-rgb) / 0.25);
  border-bottom:1px solid rgba(var(--sb-blue-rgb) / 0.25);
}

.links-ribbon-left,
.links-ribbon-center,
.links-ribbon-right{
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.links-ribbon-center{
  justify-content:center;
}

.links-ribbon-right{
  justify-content:flex-end;
}

.links-ribbon-link{
  color:var(--sb-blue);
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  white-space:nowrap;
}
.links-ribbon-link:hover{ text-decoration:underline; }

.links-ribbon-link.is-disabled{
  opacity:0.55;
  cursor:default;
  pointer-events:none;
  text-decoration:none !important;
}

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

.ribbon-label{
  color:var(--sb-blue);
  font-weight:800;
  font-size:0.95rem;
  white-space:nowrap;
}

.ribbon-select{
  border:1px solid rgba(var(--sb-blue-rgb) / 0.65);
  background:var(--chip-bg);
  color:var(--sb-blue); 
  height:fit-content;
  width:64px;
  border-radius:calc(0.5rem * var(--top-scale));

  font-weight:800;
  padding:0 10px;
  font-size:0.95rem;
  cursor:pointer;
}

.links-ribbon .chip-close{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  color:#888;
  font-size:30px;
  line-height:1;
  font-weight:800;
  opacity:.85;
}
.links-ribbon .chip-close:hover{ opacity:1; }

/* =========================================================
   STATUS / FILTERS
========================================================= */
.status-message{
  font-size:1.4rem;
  font-weight:600;
  color:var(--sb-blue);
  margin:0.35rem auto 0;
  text-align:center;
  width:100%;
  max-width:var(--maxw);
  min-height:1.4em;
  padding:0 var(--pad);
}

.filters{
  width:fit-content;
  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; }

/* =========================================================
   GRIDS
========================================================= */
.daily-deals{ width:100%; margin-top:1.0rem; }

.shoe-grid{
  display:grid;
  gap:var(--grid-gap);
  grid-template-columns:repeat(var(--cols), var(--card-w));
  width:fit-content;
  max-width:100%;
  margin:1.0rem auto 0;
  justify-content:center;
  padding:0 var(--pad);
}

/* =========================================================
   CARDS
========================================================= */
.card{
  background:var(--card-bg);

  border:var(--card-border) solid #ffffff;
  border-radius:var(--card-radius);
  box-shadow: 0px 0px 2px 1px rgb(190 190 190);
  padding:var(--card-pad);
  display:flex;
  flex-direction:column;
  text-align:left;
  position:relative;
  aspect-ratio:3 / 4;
  min-width:0;
}

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

.card-image-wrapper{
  position:relative;
  width:100%;
  overflow:hidden;
  aspect-ratio:4 / 3;
}

.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#fff;
  border:var(--img-border) solid #e0dad2; 
  border-radius:var(--img-radius);
  display:block;
}

.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:rgba(220,53,69,0.9);
  color:#fff;
  z-index:3;
}

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

.card-tag{
  font-weight:600;
  font-size:var(--card-tag-size);
  color:var(--sb-blue);
  line-height:1.1;
  white-space:nowrap;
  text-shadow:0 0 3px rgba(255,255,255,0.8), 0 0 5px rgba(255,255,255,0.6);
}

.card-content{
  display:flex;
  flex-direction:column;
  gap:var(--card-content-gap);
  flex:1;
  min-width:0;
}

.card-title{
  font-weight:600;
  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:#49543a;
  font-size:var(--card-store-size);
}

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

.card-original-price{
  margin-left:calc(0.35rem * var(--grid-scale));
  color:#777;
  text-decoration:line-through;
  font-size:0.85em;
}

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

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

.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;
}

/* =========================================================
   RESPONSIVE VIEWS
========================================================= */

/* TABLET LANDSCAPE */
@media (min-width:820px) and (max-width:1366px) and (orientation:landscape){
  :root{ --cols:5; }

  .topbar{
    width:100%;
    max-width:min(var(--grid-w), 100%);
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
    flex-wrap:nowrap;
    align-items:center;
  }

  .top-left{ flex:1 1 0; min-width:0; }

  .row .input-wrapper{
    flex:0 1 35ch;
    max-width:35ch;
  }
  .row .input-wrapper input[type="text"],
  .row .input-wrapper input[type="search"]{
    max-width:100%;
  }
}

/* MOBILE LANDSCAPE */
@media (max-width:800px) and (orientation:landscape){
  :root{ --cols:3; }

  .topbar{ flex-direction:row; flex-wrap:nowrap; align-items:flex-end; }
  .top-right{ order:-1; flex:0 0 auto; margin-right:calc(36px * var(--top-scale)); }
  .top-left{ order:0; flex:1 1 0; width:auto; min-width:0; }

  .brand-logo{
    content:url("/images/logo.svg");
    height:calc(var(--input-h) * var(--top-rows) + (var(--gap) * (var(--top-rows) - 1)));
    max-height:calc(var(--input-h) * var(--top-rows) + (var(--gap) * (var(--top-rows) - 1)));
    width:auto;
  }
}  

/* MOBILE PORTRAIT (single block, fixed braces, menu collapses so input grows) ---------------------------------------------------- */
@media (max-width:560px){
  :root{
    --cols:1;
    --pad:6px;

    --top-scale:0.47;
    --grid-scale:0.47;

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

    --card-w:1px;
    --grid-gap:calc(1.0rem * var(--grid-scale));

    --badge-font:calc(0.9rem * var(--grid-scale));
    --badge-pad-y:calc(0.19rem * var(--grid-scale));
    --badge-pad-x:calc(0.5rem * var(--grid-scale));
    --badge-offset:calc(0.36rem * var(--grid-scale));
  }

  .mobile-top-banner{ display:none !important; }
  .app{ gap:0.25rem; }

  /* prevent iOS zoom */
  input[type="text"], input[type="search"]{ font-size:16px; }
  .suggestion-item{ font-size:19px; }
  /* ✅ Mobile portrait: show up to ~5 suggestions */
  .suggestions{
    max-height: 220px;      /* ~5 rows */
    overflow-y: auto;
  }  /* --- Top layout: logo row, then inputs row --- */
  .topbar{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:calc(var(--gap) * 0.5);
    padding:0 max(10px, var(--pad));
    width:100%;
    margin-top:0;
  }

  .top-right{
    order:0;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 0 6px 0;
    max-width:none;
    overflow:visible;
    transition:none;
    will-change:auto;
    flex:0 0 auto;
    align-self:stretch;
  }

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

  /* --- Logo sizing --- */
  .brand-logo{
    content:url("/images/logo.svg");
    display:block;
    height:calc(var(--input-h) * 2.2);
    width:auto;
    max-width:92vw;
    max-height:none;
  }

  /* row: keep single line + animate gap so motion feels unified */
  .row{
    flex-wrap:nowrap;
    align-items:center;
    width:100%;
    transition:gap 0.40s ease;
  }

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

  /* icons / clears */
  .input-icon{
    width:calc(32px * var(--top-scale));
    height:calc(32px * var(--top-scale));
  }

  /* X centers against the input height, even when expanded */
  .input-clear{
    position:absolute;
    right:calc(0.55rem * var(--top-scale));
    top:0;
    bottom:0;
    margin:auto 0;

    display:none;
    align-items:center;
    justify-content:center;

    height:1em;
    line-height:1;
  }

  /* typing expansion behavior */
  .app{ --typing-scale:1; }
  .app.inputs-expanded{ --typing-scale:1.4; }

  /* input: sync height change to same timing */
  input[type="text"], input[type="search"]{
    transition:height 0.40s ease, font-size 0.40s ease;
  }

  .app.inputs-expanded input[type="text"],
  .app.inputs-expanded input[type="search"]{
    height:calc(var(--input-h) * var(--typing-scale));
    font-size:calc(14px * var(--typing-scale));
  }

  .app.inputs-expanded .input-icon{
    width:calc(22px * var(--top-scale) * var(--typing-scale));
    height:calc(22px * var(--top-scale) * var(--typing-scale));
  }

  /* ============================
     Buttons (FLEX, single-source, moves as a unit)
  ============================ */

  .row{
    display:flex;
    align-items:center;
    gap:var(--gap);
  }

  .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;
  }   

  #menuBtn,
  #fetchBtn{
    flex:0 0 var(--btn-eq-w);
    width:var(--btn-eq-w);
    min-width:var(--btn-eq-w);
    height:var(--btn-h);

    transition:
      transform 0.40s ease,
      opacity   0.40s ease,
      height    0.40s ease,
      width     0.40s ease,
      flex-basis 0.40s ease,
      margin    0.40s ease,
      border-width 0.40s ease;

    will-change:transform, opacity, width, flex-basis, margin, height;
  }

  .app.inputs-expanded #menuBtn,
  .app.inputs-expanded #fetchBtn{
    height:calc(var(--btn-h) * var(--typing-scale));
  }

  #menuBtn{ overflow:hidden; }

  .app.inputs-expanded #menuBtn{
    transform:translateX(calc(var(--btn-eq-w) + var(--gap)));
    opacity:0;
    pointer-events:none;

    width:0;
    flex-basis:0;
    min-width:0;

    margin-right:calc(-1 * var(--gap));

    border-width:0;
  }

  #fetchBtn{ transform:translateX(0); }

  .app.inputs-expanded #fetchBtn{
    transform:translateX(calc(1 * (var(--gap) / 2)));
  }

  .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; }

  .links-ribbon-link{ font-size:0.75rem; }
  .ribbon-label{ font-size:0.75rem; }

  .ribbon-select{
    height:32px;
    font-size:0.8rem;
    padding:0 8px;
    border-radius:calc(0.5rem * var(--top-scale));
  }

  /* --- Mobile 1-col results layout --- */
  .shoe-grid{
    width:100%;
    max-width:none;
    margin:0.75rem auto 0;
    padding:0 max(10px, var(--pad));
    grid-template-columns:1fr;
    justify-content:stretch;
    gap:var(--grid-gap);
  }

  .card{
    width:100%;
    margin:0;
    aspect-ratio:auto;
    border-radius:0.75rem;
    padding:0.6rem;
    position:relative;
    overflow:visible;
  }

  .card-link{
    flex-direction:row;
    align-items:stretch;
    gap:0.6rem;
    height:auto;
  }

  .card-image-wrapper{
    flex:0 0 42%;
    width:auto;
    aspect-ratio:1 / 1;
    overflow:hidden;
    border-radius:0.6rem;
  }

  .card img{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
    border-radius:0.6rem;
    display:block;
  }

  .card-tags{
    position:absolute;
    left:0.35rem;
    right:0.35rem;
    bottom:0.35rem;
    z-index:40;
    display:flex;
    justify-content:space-between;
    gap:0.35rem;
    pointer-events:none;
  }

  .card-tag{
    font-weight:800;
    font-size:0.65rem;
    color:var(--sb-blue);
    white-space:nowrap;
    text-shadow:0 0 3px rgba(255,255,255,0.85), 0 0 5px rgba(255,255,255,0.65);
    display:inline-block;
  }

  .card-title{ font-size:0.92rem; -webkit-line-clamp:2; min-height:auto; }
  .card-store{ font-size:0.82rem; }
  .card-price-row{ font-size:0.9rem; }

  .status-message{ font-size:1.1rem; }

  .disclaimer{
    max-width:none;
    width:100%;
    padding:0 max(10px, var(--pad));
  }

  .links-ribbon{
    max-width:none;
    width:100%;
    padding:0 max(10px, var(--pad));
  }

  .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-bottom:0; }
}

/* =========================================================
   RESULTS TRANSITION (disabled on mobile portrait)
========================================================= */
#results{
  transition: opacity 160ms ease, transform 160ms ease;
}
#results.is-switching{
  opacity:0;
  transform:translateY(6px);
}
@media (max-width:768px) and (orientation:portrait){
  #results{ transition:none !important; }
  #results.is-switching{
    opacity:1 !important;
    transform:none !important;
  }
}

/* ==============================
   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);
}

/* =========================================================
   DESKTOP VIEW (align top cluster to grid outer width)
========================================================= */
@media (min-width:901px){
  .top-left{ max-width:520px; }

  .topbar{
    max-width:min(calc(var(--grid-w) + (2 * var(--pad))), 100%);
    margin-left:auto;
    margin-right:auto;
  }

  .status-message,
  .filters,
  .disclaimer{
    max-width:min(calc(var(--grid-w) + (2 * var(--pad))), 100%);
    margin-left:auto;
    margin-right:auto;
  }

  .row .input-wrapper{
    flex:0 1 35ch;
    max-width:35ch;
  }
  .row .input-wrapper input[type="text"],
  .row .input-wrapper input[type="search"]{
    max-width:100%;
  }

  .links-ribbon{
    max-width:min(calc(var(--grid-w) + (2 * var(--pad))), 100%);
    margin-left:auto;
    margin-right:auto;
  }
}

/* =========================================================
   SET ALERT MODAL (UPDATED to match main search inputs)
========================================================= */

/* Alert modal: highlight the next field to fill (KEEP – but match main input radius) */
.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);
}

/* Disable gender block until it's time */
.sb-gender.sb-disabled{
  opacity: 0.55;
  pointer-events: none;
}

/* Backdrop tint + blur */
.sb-alert-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:9999;
}
.sb-alert-backdrop.open{ display:flex; }

/* modal box (requested color) */
.sb-alert-modal{
  width:min(420px, calc(100vw - 28px));
  max-height:min(92vh, 720px);
  overflow:auto;

  background:#ffd5baff;       
  border:2px solid var(--sb-blue);
  border-radius:14px;

  padding:12px 16px 16px;

  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  position:relative;
}

/* close X: RIGHT + gray + aligned */
.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:900;

  color:#888;
  opacity:.9;
}
.sb-alert-close:hover{ color:#555; opacity:1; }

/* title */
.sb-alert-title{
  text-align:center;
  color:var(--sb-blue);
  font-weight:900;
  font-size:1.35rem;

  margin:0 40px 10px;
  padding-top:2px;
}

/* form wrapper */
.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; }

/* ✅ Inputs: EXACTLY like main search box (shape, bg, shadow, focus ring)
   Also: prevent “shape changing” by keeping border width constant everywhere */
.sb-input{
  width:100%;
  height:var(--input-h);                      /* match main input height */
  border-radius: var(--sb-input-radius);      /* match main input radius */
  border:1px solid var(--sb-blue);
  background: var(--sb-input-bg);
  box-shadow: var(--sb-input-shadow);
  padding:0 17px;
  font-size:16px;                             /* stable in modal */
  font-weight:500;
  color:#444;
  transition:border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing:border-box;
}

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

/* ✅ Same highlight as main page (no shape change) */
.sb-input:focus{
  outline:none;
  border-color: var(--sb-focus-border);
  box-shadow: var(--sb-focus-ring), var(--sb-input-shadow);
}

/* ✅ Completed inputs turn light blue (same behavior you described)
   (JS already controls when fields are “ok”; we hook into built-in validity) */
.sb-input:not(:placeholder-shown):not(:focus){
  background: var(--sb-done-bg);
}

/* Keep wrapper */
.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; }

/* suggestions */
.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);
  max-height:180px;
  overflow:auto;
  padding:4px 0;
  z-index:5;
}
.sb-sug .item{
  padding:10px 12px;
  cursor:pointer;
  font-size:0.92rem;
}
.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;
}
.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;
}
.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; }

/* price wrap: match height and keep shape stable */
.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;
}
.sb-clear-price{ right:10px; }

/* buttons */
.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);
}
.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;
}
.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;
}
.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; }
}