/* Cordnestia review-fixes.css — additive; targets app.js-generated header/footer + existing homepage classes */

/* ---------- Header: real generated selectors ---------- */
#site-header .site-header{background:var(--paper)}
#site-header .site-header__bar{max-width:var(--max);margin:0 auto;padding:14px var(--pad-x);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
#site-header .site-header__logo{font-family:var(--font-display);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);margin-right:auto;line-height:1.1}
#site-header .site-header__logo:hover{color:var(--accent)}
#site-header .site-header__nav{flex:1 1 auto;min-width:0}
#site-header .site-header__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem;font-weight:500}
#site-header .site-header__nav a{display:inline-block;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
#site-header .site-header__nav a:hover,#site-header .site-header__nav a:focus-visible{border-bottom-color:var(--accent);color:var(--accent)}
#site-header .site-header__tools{display:flex;align-items:center;gap:12px;flex:0 0 auto}
#site-header .site-search{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:5px 10px}
#site-header .site-search input{border:0;outline:0;background:transparent;font:inherit;font-size:.86rem;width:132px;color:var(--ink);min-width:0}
#site-header .site-search input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
#site-header .site-search button{border:0;background:transparent;cursor:pointer;color:var(--accent);font:inherit;font-size:.82rem;font-weight:500;padding:0}
#site-header .site-header__cart{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--ink);border-radius:var(--radius);color:var(--ink)}
#site-header .site-header__cart:hover{background:var(--ink);color:var(--paper)}
#site-header .site-header__cart svg{width:20px;height:20px;display:block;flex:0 0 auto}
#site-header .site-header__menu{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;padding:0 9px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer}
#site-header .site-header__menu span{display:block;height:2px;background:var(--ink);border-radius:1px}
#site-header .site-header__mobile-search{display:none;padding:0 var(--pad-x) 12px}
#site-header .site-header__mobile-search .site-search{width:100%}
#site-header .site-header__mobile-search .site-search input{flex:1 1 auto;width:auto}

/* Drawer */
#site-header .drawer-backdrop{position:fixed;inset:0;background:rgba(30,42,50,.42);z-index:60}
#site-header .mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--paper);z-index:70;box-shadow:-8px 0 24px rgba(30,42,50,.18);display:flex;flex-direction:column;overflow-y:auto;padding:18px var(--pad-x) 28px}
#site-header .mobile-drawer__head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:600;font-size:1.15rem;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:10px}
#site-header .mobile-drawer__close{border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink);padding:2px 6px}
#site-header .mobile-drawer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#site-header .mobile-drawer__list a{display:block;padding:11px 2px;border-bottom:1px solid var(--line);font-weight:500;font-size:.95rem}
#site-header .mobile-drawer__list a:hover{color:var(--accent)}
body.drawer-open{overflow:hidden}

/* ---------- Footer: real generated selectors ---------- */
#site-footer .site-footer{background:var(--paper)}
#site-footer .site-footer__cols{max-width:var(--max);margin:0 auto;padding:36px var(--pad-x) 26px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
#site-footer .site-footer__logo{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin:0 0 8px;color:var(--ink)}
#site-footer .site-footer__brand p{font-size:.86rem;color:#3d474e;max-width:34ch;margin:0}
#site-footer .site-footer__cols h2{font-family:var(--font-body);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:500;margin:0 0 10px}
#site-footer .site-footer__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.86rem}
#site-footer .site-footer__cols a{display:inline-block;padding:1px 0}
#site-footer .site-footer__cols a:hover{color:var(--accent);text-decoration:underline}
#site-footer .site-footer__bottom{max-width:var(--max);margin:0 auto;padding:14px var(--pad-x) 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.78rem;color:#5c666d}
#site-footer .site-footer__bottom p{margin:0}

/* ---------- Homepage: motion strip matches JS (.motion__card/.motion__stage/.motion__frame) ---------- */
.motion__strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.motion__card{flex:0 0 220px;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.motion__stage{position:relative;aspect-ratio:1/1;background:var(--accent-soft);overflow:hidden}
.motion__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px;opacity:0;transition:opacity .6s ease}
.motion__frame.is-active{opacity:1}
.motion__card h3{font-size:.9rem;line-height:1.3;margin:10px 12px 0}
.motion__card .card__price{margin:6px 12px 12px;font-size:.86rem;font-variant-numeric:tabular-nums}

/* ---------- Homepage: product/compare cards match JS (.card/.compare__item) ---------- */
.product-grid .card,.compare__grid .compare__item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.product-grid .card:hover,.compare__grid .compare__item:hover{border-color:var(--accent)}
.card__img{display:block;aspect-ratio:1/1;background:var(--accent-soft);padding:14px}
.card__img img{width:100%;height:100%;object-fit:contain}
.card__name{font-size:.92rem;line-height:1.3;margin:12px 14px 0}
.card__price{margin:8px 14px 14px;font-variant-numeric:tabular-nums;font-weight:500;font-size:.9rem}
.card__price-note{font-weight:400;font-size:.72rem;color:#5c666d;text-transform:uppercase;letter-spacing:.06em}
.card__note{font-size:.8rem;color:#5c666d;margin:0 14px 14px}
.compare__item>a:first-child{display:block;aspect-ratio:1/1;background:var(--accent-soft);padding:12px}
.compare__item>a:first-child img{width:100%;height:100%;object-fit:contain}
.compare__item h3{font-size:.92rem;margin:12px 14px 0}
.compare__item p{font-size:.84rem;color:#3d474e;margin:8px 14px 0}
.compare__item .card__price{margin:8px 14px 14px}
.guide__products .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  #site-header .site-header__nav{display:none}
  #site-header .site-header__menu{display:flex}
  #site-header .site-search{display:none}
  #site-header .site-header__mobile-search{display:block}
  #site-footer .site-footer__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  #site-header .site-header__bar{gap:12px;padding:12px var(--pad-x)}
  #site-header .site-header__logo{font-size:1.2rem}
  #site-header .site-header__tools{gap:8px}
  #site-footer .site-footer__cols{grid-template-columns:1fr 1fr;gap:20px 18px;padding:26px var(--pad-x) 18px}
  #site-footer .site-footer__brand{grid-column:1 / -1}
  #site-footer .site-footer__cols ul{gap:5px;font-size:.82rem}
  #site-footer .site-footer__bottom{flex-direction:column;gap:4px;padding:12px var(--pad-x) 16px}
  .motion__card{flex-basis:170px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .motion__frame{transition:none}
}


/* Cordnestia review-fixes patch — mobile search visibility + hidden drawer/backdrop */

/* 1) Mobile search: re-show the form inside .site-header__mobile-search
      even though the broad .site-search rule hides all searches at <=1024px. */
@media (max-width:1024px){
  #site-header .site-header__mobile-search .site-search{display:flex}
}

/* 2) Honor the hidden attribute on drawer + backdrop despite display:flex/position rules.
      !important is required because the base rules set display:flex on .mobile-drawer. */
#site-header .mobile-drawer[hidden],
#site-header .drawer-backdrop[hidden]{display:none !important}


.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#site-header .site-search .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important;border:0!important}
#site-header .site-search{position:relative}
#site-header .site-search input{width:150px}
@media (max-width:1024px){
  #site-header .site-header__mobile-search .site-search input{width:auto;flex:1 1 auto}
}
/* Focused desktop header layout, 2026-11-12. */
@media (min-width:1025px){
  #site-header .site-header__bar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo tools tools" "nav nav nav";
    align-items:center;
    gap:10px 22px;
    flex-wrap:nowrap;
  }
  #site-header .site-header__logo{grid-area:logo;margin-right:0}
  #site-header .site-header__tools{grid-area:tools;justify-self:end;flex-wrap:nowrap;min-width:0}
  #site-header .site-header__nav{grid-area:nav;flex:1 1 auto;min-width:0;width:100%}
  #site-header .site-header__nav ul{flex-wrap:wrap;gap:6px 18px}
  #site-header .site-search input{width:clamp(120px,14vw,200px)}
}


/* codex-card-layout-20261112 */
/* Align prices within each existing product-grid row, retaining the square image. */
.product-grid .card > .card__price { margin-top: auto; padding-top: 8px; }