/* ====== Base / Reset ====== */
:root{
  --bg: #ffffff;
  --text: #212529;
  --muted: #6b7280;
  --brand: #ff5678;
  --brand-dark: #de3e63;
  --nav-bg: #ffffff;
  --nav-border: #e5e7eb;
  --nav-active: #e9506f;
  --footer-bg: #111a5a;
  --footer-text: #eef2ff;
  --footer-muted: #c7ceff;
  --container: min(90%, 95%);
  --radius: 12px;
  --shadow-1: 0 4px 14px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

img, svg { display: block; max-width: 100%; }

.container{ width: var(--container); margin-inline: auto; }

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; left: 8px; top: 8px;
  background:#111; color:#fff; padding:.5rem .75rem; border-radius:8px;
  transform: translateY(-150%);
}
.skip-link:focus{ transform: translateY(0); }

/* ====== Header ====== */
.site-header{ position: sticky; top: 0; z-index: 50; background: var(--nav-bg); box-shadow: var(--shadow-1); }
.header-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
}
.left-cluster{ display:flex; align-items:center; gap:.5rem; }
.brand{ display:flex; align-items:center; text-decoration:none; }
.logo{ 
    width: 14vw;
    height: auto;
    min-width: 150px;
}

.hamburger{
  width: 40px; height: 40px; display: none;
  border-radius: 10px; border:1px solid var(--nav-border);
  align-items:center; justify-content:center; cursor:pointer;
}
.hamburger span{
  display:block; width:18px; height:2px; background:#333; margin:3px auto;
}

.search{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--nav-border);
  border-radius: 999px;
  padding: .4rem .5rem .4rem .9rem;
  max-width: 840px; width: 100%;
}
.search input[type="search"]{
  border:0; outline:0; flex:1; font: inherit;
}
.icon-btn{
  border:0; background:#f3f4f6; padding:.45rem; border-radius: 999px; cursor:pointer;
}

.right-actions{ display:flex; align-items:center; gap:1rem; }
.aux-link{ color:#374151; text-decoration:none; font-weight:500; }
.aux-link.sign-in{ display:flex; align-items:center; gap:.4rem; }

.primary-nav{
  border-top: 1px solid var(--nav-border);
  background: var(--nav-bg);
}
.primary-nav .container{ overflow:auto; }
.primary-nav ul{
  list-style: none; margin: 0; padding: 0;
  display:flex; gap: 1.25rem;
}
.primary-nav a{
  display:inline-block; padding: .85rem 1rem; text-decoration:none;
  color:#111827; font-weight:600;
}
.primary-nav li.active a{ background: var(--brand); color: #fff; border-radius: 8px; }
.primary-nav a:hover{ color: var(--brand-dark); }

/* ====== Footer ====== */
.gradient-bar{
  background: #ff5678;
  height: 48px;
  display: block;
  text-align:center;
  color:#fff; font-weight:600;
}
.site-footer{ margin-top: 3rem; }
.footer-top{ background: var(--footer-bg); color: var(--footer-text); }
.footer-grid{
  display:grid;
  grid-template-columns: 2fr repeat(3, 1fr) 2fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.footer-brand h2{ margin:0 0 .25rem 0; font-size: 2rem; }
.footer-brand p{ color: var(--footer-muted); margin-top:.25rem; }

.store-badges{ display:flex; align-items:center; gap:.75rem; margin-top:1rem; }
.store{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 14px; border-radius:10px;
   color:#fff; text-decoration:none; font-weight:600;
}
.qr{
  width:64px; height:64px; display:grid; place-items:center;
}

.footer-col h3{ margin:0 0 .75rem 0; font-size:1rem; }
.footer-col ul{ margin:0; padding:0; list-style:none; display:grid; gap:.5rem; }
.footer-col a{ color: var(--footer-text); text-decoration:none; opacity:.9; }
.footer-col a:hover{ opacity:1; text-decoration: underline; }

.footer-news .subscribe{
  display:flex; gap:0; margin: .5rem 0 1rem 0;
}
.footer-news input{
  flex:1; min-width: 160px; border-radius: 0; border:0; padding:.7rem 1rem;
}
.footer-news button{
  border:0; border-radius:0; padding:.7rem 1rem; background:#ff5678; color:#fff; font-weight:600; cursor:pointer;
}
.footer-news .social{ display:flex; gap:.5rem; margin-bottom:.5rem; }
.footer-news .social a{
  display:grid; place-items:center; width:36px; height:36px; border-radius:999px;
  background:#0f153f; color:#fff; text-decoration:none;
}
.mail-link{ display:inline-block; color: var(--footer-text); text-decoration:none; }

.footer-bottom{ background:#0b113d; color: var(--footer-muted); }
.bottom-row{ display:flex; align-items:center; justify-content:space-between; padding: 0; flex-wrap: wrap; gap:.5rem; }


.stores_app {
    max-width: 200px;
}

.qr {
    width: auto;
    height: auto;
    background: #ffffff;
    padding: 5px;
}
.stores_app {
    max-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


section.page.error_404 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    font-size: 200%;
}
main#content {
    min-height: 60vh;
}
.hidden {
    opacity: 0;
    visibility: hidden;
    position: relative;
    z-index: -10;
}
.search_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55vh;
}


/* ====== Responsive ====== */
@media (max-width: 1024px){
  .footer-grid{
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 900px){
  .search{ order:3; grid-column: 1 / -1; }
  .hamburger{ display:flex; }
  .primary-nav{ display:none; }
  #nav-toggle:checked ~ .primary-nav{ display:block; }
  .header-row{ grid-template-columns: 1fr auto; }
  
}
@media (max-width: 767px){
  .primary-nav ul{ gap: .25rem; }
  .primary-nav a{ padding:.7rem .75rem; }
  .right-actions{ display:none; }
  .store-badges{ flex-wrap: wrap; }
    .footer-grid{
    grid-template-columns: auto;
  }
 .container.bottom-row p {
    display: block;
    margin: 0px;
    font-size: 14px;
}

.footer-bottom {
    padding: 10px;
}
 
 
 
 
 
 
 
 
 
 
 
 
}