/*
Theme Name: Lux Base (Modular)
...
*/

/* ===========================
   Variáveis Globais (tema)
   =========================== */
:root{
  --color-base:#111111; --color-base-variant:#171717;
  --color-title:#FFFBF9; --color-subtitle:#EEEEEE;
  --color-accent:#D79B6E; --color-white:#FFFFFF;

  --accent-50:#FAF1EA; --accent-100:#F2E0D0; --accent-200:#E8C7AA; --accent-300:#DFAE85;
  --accent-400:#D79B6E; --accent-500:#C7875A; --accent-600:#A66E49; --accent-700:#84563B; --accent-800:#63402B; --accent-900:#3C2619;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --fs-xxl: clamp(2rem, 4vw, 3.4rem);
  --fs-xl: clamp(1.4rem, 2.5vw, 2.2rem);
  --fs-lg: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-md: 1rem; --fs-sm:.95rem;

  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;
  --radius-s: 8px; --radius-m:12px;

  --border:1px solid rgba(255,255,255,.06);/* ===== Layout base + sticky footer ===== */
  --shadow-soft:0 8px 24px rgba(0,0,0,.35);
  --glass-bg:rgba(255,255,255,.04); --glass-blur:10px;

  --container: min(1200px, 92vw);

  /* Novo: altura menor do hero */
  --hero-min: 48vh;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-sans); color:var(--color-subtitle);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(255,255,255,.04), transparent 60%), var(--color-base);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; /* evita “estourar” no mobile */
}
a{color:var(--color-accent); text-decoration:none}
a:focus-visible, button:focus-visible, select:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}
img{display:block; max-width:100%; height:auto}
.no-scroll{overflow:hidden}

.container{width:var(--container); margin-inline:auto; padding-inline:var(--space-4)}
.glass{background:var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border:var(--border); border-radius:var(--radius-s);}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:var(--radius-s); border:1px solid rgba(255,255,255,.12); color:var(--color-title); background:linear-gradient(180deg, rgba(215,155,110,.18), rgba(215,155,110,.10)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); cursor:pointer;}
.btn:hover{filter:brightness(1.05)}
.btn--ghost{background:transparent}
.btn--icon{padding:.6rem .7rem}

/* Header enxuto */
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(17,17,17,.92), rgba(17,17,17,.75) 60%, rgba(17,17,17,0));
  border-bottom: var(--border); backdrop-filter: blur(8px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:.4rem 0;}
.brand{display:flex; align-items:center; gap:.75rem; color:var(--color-title); text-decoration:none; font-weight:600;}
.brand__logo{width:32px; height:32px; border-radius:10px; background: radial-gradient(120% 120% at 30% 20%, var(--accent-400), var(--accent-700)); box-shadow: var(--shadow-soft);}

/* Nav e menu */
.nav{display:flex; align-items:center; gap:var(--space-4); position:relative;}
.nav__menu{display:flex; gap:var(--space-6); margin:0; padding:0; list-style:none;}
.nav__menu a{color:var(--color-subtitle); font-size:var(--fs-sm);}
.nav__right{display:flex; align-items:center; gap:.5rem}

/* Seletor de região estilizado */
.region-select{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem; border-radius:var(--radius-s); border:var(--border);
  background: rgba(255,255,255,.02); position:relative;
}
.region-select select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:transparent; border:none; padding:.2rem .6rem .2rem .2rem; font:inherit; color:var(--color-subtitle); cursor:pointer;
}
.region-select .region-caret{opacity:.6; margin-left:.2rem}

/* Hamburguer */
.nav-toggle{display:none; border:var(--border); background:transparent; color:var(--color-title); padding:.5rem .6rem; border-radius:var(--radius-s);}

/* Hero (compacto) */
.hero{position:relative; min-height:var(--hero-min); display:grid; place-items:center; text-align:center; color:var(--color-title);
  background: radial-gradient(1000px 500px at 75% -10%, rgba(215,155,110,.12), transparent 60%), linear-gradient(180deg, rgba(17,17,17,.9), rgba(23,23,23,.7));
}
.hero__content{width:var(--container); padding-inline:var(--space-4);}
.hero h1{font-size:var(--fs-xxl); margin:.2rem 0 .4rem}
.hero p{font-size:var(--fs-lg); color:var(--color-subtitle); max-width:60ch; margin-inline:auto}
.hero--compact{min-height:38vh}

/* Barra de ícones (sem transform que estourava no mobile) */
.iconbar{margin-top:0;}
.iconbar__wrap{display:grid; grid-template-columns: repeat(4,1fr); gap:var(--space-4); padding: var(--space-4);}
.iconbar__item{display:flex; gap:.9rem; align-items:center; padding:.9rem; border-radius:var(--radius-s); border:var(--border); background:rgba(255,255,255,.03);}
.iconbar__svg{width:28px; height:28px; flex:0 0 28px}
.iconbar__text h3{margin:0; font-size:1rem; color:var(--color-title)}
.iconbar__text p{margin:.2rem 0 0; font-size:.9rem; color:var(--color-subtitle)}

/* Sessões */
.section{padding: clamp(1.5rem, 5vw, 3rem) 0; border-top:1px solid rgba(255,255,255,.05)}
.section__head{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.2rem}
.section__title{color:var(--color-title); font-size:var(--fs-xl); margin:0}
.section__desc{color:var(--color-subtitle); margin:0; max-width:65ch}
.section__content{margin-top:1rem}

/* Footer custom */
.site-footer{padding:2rem 0; border-top:var(--border); background: linear-gradient(180deg, rgba(23,23,23,.92), rgba(23,23,23,1));}
.footer-grid{display:grid; gap:var(--space-6); grid-template-columns: repeat(3, minmax(0,1fr));}
.footer-grid--custom .footer-logo{width:56px; height:56px; border-radius:14px; background: radial-gradient(120% 120% at 30% 20%, var(--accent-400), var(--accent-700)); margin-bottom:.6rem;}
.footer-text{max-width:42ch}
.footer-list{list-style:none; margin:0; padding:0}
.footer-list li{margin:.4rem 0}
.pay-box{display:flex; align-items:center; justify-content:center; padding:.8rem; border-radius:var(--radius-s); margin:.4rem 0 0}
.muted{opacity:.8; font-size:.9rem}
.footer-bottom{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; align-items:center; margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); font-size:.95rem; color:#cfcfcf;}
.footer-links a{color:#cfcfcf}
.footer-links .sep{opacity:.5; margin:0 .4rem}

/* Drawer do carrinho */
.cart-drawer{position:fixed; inset:0; z-index:80; pointer-events:none; transition:.25s;}
.cart-drawer__overlay{position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:.25s;}
.cart-drawer__panel{position:absolute; top:0; right:0; height:100%; width:min(420px, 92vw); transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;}
.cart-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:var(--border); color:var(--color-title)}
.cart-drawer__content{padding:1rem; overflow:auto; flex:1}
.cart-drawer__foot{padding:1rem; border-top:var(--border)}
.cart-drawer.is-open{pointer-events:auto;}
.cart-drawer.is-open .cart-drawer__overlay{opacity:1;}
.cart-drawer.is-open .cart-drawer__panel{transform:none;}

/* Responsivo */
@media (max-width: 960px){
  .nav__menu{display:none}
  .nav-toggle{display:inline-flex}
  .nav--open .nav__menu{
    display:flex; position:absolute; top:52px; left:0; right:0;
    padding:1rem; background: rgba(17,17,17,.96); border-bottom:var(--border);
    flex-direction:column; gap:1rem;
  }
  .iconbar__wrap{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero--compact{min-height:32vh}
}
@media (max-width: 560px){
  .header-inner{padding:.3rem 0}
}
/* ... topo do arquivo permanece igual ... */

/* ===== Layout base + sticky footer ===== */
html,body{height:100%}
body{
  margin:0; font-family:var(--font-sans); color:var(--color-subtitle);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(255,255,255,.04), transparent 60%), var(--color-base);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh; /* << fixa o footer no fim */
}
main{flex:1 0 auto} /* ocupa o alto e empurra o footer */
.site-footer{margin-top:auto} /* gruda no fim */

/* ===== Header enxuto (desktop) ===== */
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:.4rem 0;}
.brand{display:flex; align-items:center; gap:.75rem; color:var(--color-title); text-decoration:none; font-weight:600;}
.brand__logo{width:32px; height:32px; border-radius:10px; background: radial-gradient(120% 120% at 30% 20%, var(--accent-400), var(--accent-700)); box-shadow: var(--shadow-soft);}
.brand__name{white-space:nowrap}

/* ===== Região estilizada (desktop) ===== */
.region-select{display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border-radius:var(--radius-s); border:var(--border); background: rgba(255,255,255,.02); position:relative;}
.region-select select{-webkit-appearance:none; appearance:none; background:transparent; border:none; padding:.2rem .6rem .2rem .2rem; font:inherit; color:var(--color-subtitle); cursor:pointer;}
.region-select .region-caret{opacity:.6; margin-left:.2rem}

/* ===== Footer (imagem 50%) ===== */
.footer-pay .pay-box img{width:50%; height:auto;}

/* ===== Barra de ícones (desktop) ===== */
.iconbar__wrap{display:grid; grid-template-columns: repeat(4,1fr); gap:var(--space-4); padding: var(--space-4);}

/* ===== Drawer do carrinho ===== */
.btn--cart{position:relative}
.cart-drawer{position:fixed; inset:0; z-index:80; pointer-events:none; transition:.25s;}
.cart-drawer__overlay{position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:.25s;}
.cart-drawer__panel{position:absolute; top:0; right:0; height:100%; width:min(420px, 92vw); transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;}
.cart-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:var(--border); color:var(--color-title)}
.cart-drawer__content{padding:1rem; overflow:auto; flex:1}
.cart-drawer__foot{padding:1rem; border-top:var(--border)}
.cart-drawer.is-open{pointer-events:auto;}
.cart-drawer.is-open .cart-drawer__overlay{opacity:1;}
.cart-drawer.is-open .cart-drawer__panel{transform:none;}

/* ===== Responsivo ===== */
@media (max-width: 960px){
  /* Ordem: hambúrguer à ESQUERDA, depois logo, depois ações */
  .header-inner{gap:.6rem}
  .nav-toggle{display:inline-flex; order:-2}
  .brand{order:-1}
  .brand__name{display:none}              /* só a logo no mobile */
  .nav{order:0}
  .nav__menu{display:none}
  .nav--open .nav__menu{
    display:flex; position:absolute; top:52px; left:0; right:0;
    padding:1rem; background: rgba(17,17,17,.96); border-bottom:var(--border);
    flex-direction:column; gap:1rem;
  }

  /* Some o seletor de região no mobile */
  .region-select{display:none}

  /* Conta e carrinho do MESMO tamanho no mobile (ícones) */
  .btn--account .btn__text{display:none}
  .btn--account, .btn--cart{
    width:44px; height:44px; padding:0; justify-content:center; align-items:center;
  }
  .btn--cart .badge{
    position:absolute; top:-6px; right:-6px;
  }

  /* Barra de ícones vira CARROSSEL horizontal */
  .iconbar__wrap{
    display:flex; overflow-x:auto; gap:var(--space-4); padding: var(--space-4) var(--space-4) 1rem;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .iconbar__item{
    min-width:80vw; scroll-snap-align:start;
  }

  /* Footer em 1 coluna no mobile */
  .footer-grid{grid-template-columns:1fr}
  .hero--compact{min-height:32vh}
}
