:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#f6f8fb;
  --stroke: rgba(35,31,32,.10);

  --text:#231f20;
  --muted: rgba(35,31,32,.68);

  --primary:#4355a4;
  --secondary:#00adee;

  --primary-strong:#364487;
  --secondary-strong:#0096cc;

  --primary-glow: rgba(67,85,164,.22);
  --secondary-glow: rgba(0,173,238,.18);

  --shadow: 0 18px 50px rgba(35,31,32,.10);
  --shadow2: 0 10px 25px rgba(35,31,32,.08);

  --radius: 16px;
}

*{ box-sizing:border-box; }

html,body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{
  color:inherit;
  text-decoration:none;
}

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

h1,h2,h3,h4,.brandName,.logoText{
  font-family:"Montserrat","Inter",system-ui,sans-serif;
  letter-spacing:-.3px;
}

/* =========================
   ICONS
   ========================= */
.icon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 auto;
  color:currentColor;
}

/* =========================
   HEADER
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stroke);
}

.headerContainer{
  width:100%;
  padding:16px 32px;
  display:flex;
  align-items:center;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}

.brandLogo{
  height:56px;
  width:auto;
  object-fit:contain;
}

.brandText{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.08;
}

.brandName{
  font-size:1.15rem;
  font-weight:900;
}

.brandTag{
  font-size:.85rem;
  color:var(--muted);
  margin-top:3px;
}

/* busca */
.searchBox{
  flex:1;
  display:flex;
  border:2px solid var(--secondary);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  min-width:180px;
}

.searchBox input{
  flex:1;
  border:none;
  outline:none;
  padding:13px 14px;
  font-size:.96rem;
  color:var(--text);
  background:#fff;
}

.searchBtn{
  border:none;
  background:var(--secondary);
  color:#fff;
  width:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.headerActions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
}

/* whatsapp */
.whatsBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 16px;
  border-radius:12px;
  background:#25D366;
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 24px rgba(37,211,102,.18);
  transition:.18s ease;
}

.whatsBtn:hover{
  transform:translateY(-2px);
}

/* carrinho */
.cartBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 16px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
  font-weight:900;
  box-shadow:0 10px 26px var(--primary-glow);
  transition:.18s ease;
}

.cartBtn:hover{
  transform:translateY(-2px);
}

.badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  border-radius:999px;
  background:#ff3b3b;
  color:#fff;
  font-size:.76rem;
  font-weight:900;
}

/* =========================
   USER MENU PREMIUM
   ========================= */
.userMenuWrapper{
  position:relative;
}

.userTrigger{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  min-height:46px;
  padding:0 10px;
  border-radius:12px;
  transition:.18s ease;
}

.userTrigger:hover{
  background:#f3f6fb;
}

.userAvatar{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  background:#f3f6fb;
  padding:6px;
  border:1px solid rgba(35,31,32,.08);
}

.userName{
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}

.userDropdown{
  position:absolute;
  top:58px;
  right:0;
  width:250px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  border:1px solid rgba(35,31,32,.08);
  padding:14px;
  display:none;
  flex-direction:column;
  gap:12px;
  z-index:999;
}

.userDropdown.active{
  display:flex;
}

.userInfoTop{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(35,31,32,.08);
}

.userInfoTop strong{
  font-size:.95rem;
}

.userInfoTop small{
  color:var(--muted);
  font-size:.8rem;
  word-break:break-word;
}

.userMenuLinks{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.userMenuLinks a,
.userMenuLinks button{
  display:flex;
  align-items:center;
  width:100%;
  min-height:42px;
  padding:0 12px;
  border-radius:10px;
  border:none;
  background:none;
  text-align:left;
  font:inherit;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}

.userMenuLinks a:hover,
.userMenuLinks button:hover{
  background:#f2f5fb;
}

#logoutBtn{
  background:#ffecec;
  color:#d9534f;
}

/* =========================
   CATEGORY BAR
   ========================= */
.categoryBar{
  background:#4355a4;
}

.categoryContainer{
  width:100%;
  padding:12px 32px;
  display:flex;
  align-items:center;
  gap:26px;
  overflow:auto;
}

.categoryContainer a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight:700;
  white-space:nowrap;
  opacity:.95;
}

.categoryContainer a:hover{
  opacity:1;
  text-decoration:underline;
}

.categoryContainer .promo{
  color:#b9ecff;
  font-weight:900;
}

/* =========================
   HERO FULL WIDTH
   ========================= */
.hero{
  width:100%;
  position:relative;
  margin-top:15px;
}

.heroSlider{
  width:100vw;
  height:380px;
  position:relative;
  overflow:hidden;
  left:50%;
  transform:translateX(-50%);
}

.slidesContainer{
  width:100%;
  height:100%;
  position:relative;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
}

.slide.active{
  opacity:1;
  z-index:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform 6s linear;
}

.slide.active img{
  transform:scale(1);
}

.bannerContent{
  position:absolute;
  top:50%;
  left:8%;
  transform:translateY(-50%);
  color:#fff;
  max-width:520px;
  z-index:2;
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}

.bannerContent h2{
  margin:0 0 10px;
  font-size:2.2rem;
  line-height:1.08;
}

.bannerContent p{
  margin:0 0 18px;
  font-size:1.02rem;
  line-height:1.6;
}

.bannerBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:12px;
  background:var(--secondary);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 30px rgba(0,173,238,.25);
}

.sliderBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border:none;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:1.35rem;
  cursor:pointer;
  z-index:3;
}

.prev{ left:20px; }
.next{ right:20px; }

.sliderDots{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:3;
}

.sliderDots span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
}

.sliderDots span.active{
  background:var(--secondary);
}

/* =========================
   SECTIONS
   ========================= */
.categories,
.offers,
.products{
  max-width:1200px;
  margin:0 auto;
  padding:18px 18px 0;
}

.categories h2,
.offers h2,
.products h2{
  margin:8px 0 14px;
  font-size:1.28rem;
}

/* =========================
   CATEGORY GRID
   ========================= */
.categoryGrid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:12px;
}

.categoryCard{
  border-radius:16px;
  border:1px solid var(--stroke);
  background:#fff;
  padding:16px 12px;
  text-align:center;
  font-weight:900;
  box-shadow:var(--shadow2);
  transition:.16s ease;
}

.categoryCard:hover{
  transform:translateY(-2px);
  border-color:rgba(0,173,238,.45);
  box-shadow:0 18px 36px rgba(0,173,238,.10);
}

/* =========================
   OFFERS
   ========================= */
.offerGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.offerCard{
  position:relative;
  border-radius:20px;
  border:1px solid var(--stroke);
  background:#fff;
  box-shadow:var(--shadow2);
  padding:16px;
  transition:.16s ease;
}

.offerCard:hover{
  transform:translateY(-3px);
  border-color:rgba(0,173,238,.45);
  box-shadow:0 18px 42px rgba(0,173,238,.10);
}

.offerBadge{
  position:absolute;
  top:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
  font-size:.78rem;
  font-weight:900;
}

.offerPct{
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  color:#231f20;
  background:rgba(0,173,238,.14);
  border:1px solid rgba(0,173,238,.25);
  font-size:.78rem;
  font-weight:900;
}

.offerImgWrap{
  width:100%;
  height:160px;
  border-radius:16px;
  overflow:hidden;
  background:var(--panel2);
  border:1px solid var(--stroke);
  margin:28px 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.offerImg{
  width:100%;
  height:100%;
  object-fit:contain;
}

.offerCard h3{
  margin:0 0 8px;
  font-size:1.04rem;
}

.oldPrice{
  color:rgba(35,31,32,.55);
  text-decoration:line-through;
  font-weight:800;
  margin-bottom:6px;
}

.priceLine{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
}

.priceLabel{
  color:rgba(35,31,32,.70);
  font-weight:800;
}

.priceNow{
  font-family:"Montserrat","Inter",sans-serif;
  font-size:1.32rem;
  font-weight:900;
}

.saveLine{
  margin-bottom:12px;
  color:rgba(35,31,32,.75);
  font-size:.92rem;
  font-weight:700;
}

/* =========================
   PRODUCTS HEAD
   ========================= */
.productsHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.sortBox{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
}

.sortBox label{
  font-size:.9rem;
  color:var(--muted);
  font-weight:800;
}

.sortBox select{
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--panel2);
  outline:none;
  font-weight:800;
}

/* =========================
   PRODUCT GRID
   ========================= */
.productGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  padding-bottom:20px;
}

.card{
  border-radius:20px;
  border:1px solid var(--stroke);
  background:#fff;
  padding:14px;
  box-shadow:var(--shadow2);
  transition:.16s ease;
}

.card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,173,238,.45);
  box-shadow:0 18px 42px rgba(0,173,238,.10);
}

.cardOffer{
  border-color:rgba(0,173,238,.30);
}

.cardBadges{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.badgeChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  font-size:.76rem;
  font-weight:900;
  background:rgba(67,85,164,.10);
  border:1px solid rgba(67,85,164,.20);
}

.badgeChip.pct{
  background:rgba(0,173,238,.10);
  border-color:rgba(0,173,238,.22);
}

.pImgWrap{
  width:100%;
  height:170px;
  border-radius:16px;
  overflow:hidden;
  background:var(--panel2);
  border:1px solid var(--stroke);
  margin-bottom:10px;
}

.pImg{
  width:100%;
  height:100%;
  object-fit:contain;
}

.small{
  font-size:.9rem;
  color:var(--muted);
}

.pTitle{
  margin:6px 0 10px;
  font-size:1rem;
  font-weight:950;
}

.pPriceArea{
  margin-bottom:8px;
}

.pOld{
  color:rgba(35,31,32,.55);
  text-decoration:line-through;
  font-weight:800;
  font-size:.9rem;
  margin-bottom:2px;
}

.pNow{
  font-family:"Montserrat","Inter",sans-serif;
  font-size:1.14rem;
  font-weight:900;
}

.pSave{
  margin-top:4px;
  color:rgba(35,31,32,.76);
  font-size:.9rem;
  font-weight:700;
}

.pMeta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.pActions{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#fff;
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  transition:.16s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow2);
}

.btn.primary{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
  border:none;
  box-shadow:0 10px 24px var(--primary-glow);
}

.btn.primary:hover{
  box-shadow:0 14px 32px var(--secondary-glow);
}

/* =========================
   TRUST BAR
   ========================= */
.trust{
  max-width:1200px;
  margin:12px auto 80px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.trust > div{
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--panel2);
  padding:14px 12px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}

/* =========================
   FOOTER PRO
   ========================= */
.siteFooter{
  margin-top:70px;
  color:#fff;
}

.footerTop{
  background:
    radial-gradient(900px 360px at 12% 10%, rgba(0,173,238,.22), transparent 55%),
    radial-gradient(900px 360px at 78% 10%, rgba(0,173,238,.14), transparent 55%),
    linear-gradient(180deg, #4355a4, #364487);
  border-top:1px solid rgba(255,255,255,.14);
}

.footerWrap{
  max-width:1200px;
  margin:0 auto;
  padding:36px 18px;
}

.footerTop .footerWrap{
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr;
  gap:34px;
}

.footerBrand{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footerLogoLine{
  display:flex;
  align-items:center;
  gap:14px;
}

.footerLogo{
  height:44px;
  width:auto;
  object-fit:contain;
}

.footerBrandName{
  font-family:"Montserrat","Inter",sans-serif;
  font-weight:950;
  font-size:1.08rem;
}

.footerBrandTag{
  margin-top:2px;
  opacity:.84;
  font-weight:700;
  font-size:.92rem;
}

.footerDesc{
  margin:0;
  max-width:62ch;
  opacity:.92;
  line-height:1.65;
}

.footerBadges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.footPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  font-weight:900;
  font-size:.92rem;
}

.footerCol h4{
  margin:4px 0 12px;
  font-family:"Montserrat","Inter",sans-serif;
  font-weight:900;
}

.footerCol a{
  display:block;
  color:#fff;
  opacity:.92;
  padding:8px 0;
  font-weight:750;
}

.footerCol a:hover{
  text-decoration:underline;
}

.footRow{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:10px 0 !important;
}

.footIcon{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
}

.footStrong{
  display:block;
  font-weight:950;
}

.footMuted{
  display:block;
  opacity:.86;
  font-weight:650;
  font-size:.92rem;
  margin-top:2px;
}

.footerBottom{
  background:#2e3a74;
  border-top:1px solid rgba(255,255,255,.14);
}

.footerBottomWrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
}

.copy{
  opacity:.92;
  font-weight:750;
}

.miniLinks{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.9;
  font-weight:750;
}

.miniLinks a{
  color:#fff;
}

.sep{
  opacity:.55;
}

/* =========================
   WHATS FLOAT + TOAST
   ========================= */
.whatsFloat{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 16px;
  border-radius:999px;
  border:none;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow:0 16px 45px rgba(0,173,238,.22);
}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  color:var(--text);
  box-shadow:var(--shadow2);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-6px);
}

/* =========================
   LOGIN PAGE PREMIUM
   ========================= */
.loginBody{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #4355a4, #00adee);
  font-family:"Inter",sans-serif;
}

.loginWrapper,
.loginContainer{
  width:100%;
  max-width:420px;
  padding:20px;
}

.loginCard{
  background:#fff;
  padding:45px 40px;
  border-radius:16px;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:fadeUp .6s ease;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

.loginLogo{
  width:90px;
  margin:auto;
}

.loginCard h2{
  margin:10px 0 0;
  text-align:center;
  font-family:"Montserrat";
  font-size:26px;
}

.loginSub{
  text-align:center;
  color:#666;
  font-size:14px;
  margin-bottom:10px;
}

.inputGroup{
  position:relative;
}

.passwordGroup{
  display:flex;
}

.loginCard input{
  width:100%;
  padding:12px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:14px;
  outline:none;
  transition:.2s;
}

.loginCard input:focus{
  border-color:#00adee;
  box-shadow:0 0 0 3px rgba(0,173,238,0.2);
}

.togglePass{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  font-size:16px;
}

.loginBtn{
  background:#4355a4;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

.googleBtn{
  background:#fff;
  border:1px solid #ddd;
  padding:12px;
  border-radius:8px;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}

.registerBtn{
  background:#00adee;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

.resetPass{
  text-align:center;
  font-size:13px;
  color:#4355a4;
  cursor:pointer;
}

.backHome{
  text-align:center;
  text-decoration:none;
  margin-top:10px;
  color:#4355a4;
  font-weight:600;
}

/* =========================
   ACCOUNT PAGE PREMIUM SAAS
   ========================= */
.accountBody{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 8% 8%, rgba(0,173,238,.10), transparent 55%),
    radial-gradient(900px 420px at 92% 12%, rgba(67,85,164,.10), transparent 55%),
    linear-gradient(180deg, #f5f8fc, #edf2f8);
}

.accountLayout{
  min-height:100vh;
  display:grid;
  grid-template-columns:290px 1fr;
}

.accountSidebar{
  background:linear-gradient(180deg, #4355a4, #364487);
  color:#fff;
  padding:26px 20px;
  display:flex;
  flex-direction:column;
  gap:22px;
  box-shadow:12px 0 40px rgba(67,85,164,.18);
}

.accountSidebarBrand{
  display:flex;
  align-items:center;
  gap:12px;
}

.accountSidebarBrand strong{
  display:block;
  font-family:"Montserrat";
  font-size:1rem;
}

.accountSidebarBrand span{
  display:block;
  font-size:.88rem;
  opacity:.85;
  margin-top:2px;
}

.accountSidebarLogo{
  width:48px;
}

.accountUserBox{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}

.accountSidebarAvatar{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.28);
  background:#fff;
}

.accountUserMeta{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.accountUserMeta strong,
.accountUserMeta span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.accountUserMeta span{
  font-size:.85rem;
  opacity:.82;
}

.accountNav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.accountNav a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  color:#fff;
  font-weight:700;
  opacity:.92;
}

.accountNav a:hover,
.accountNav a.active{
  background:rgba(255,255,255,.12);
}

.accountSidebarActions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.accountBackBtn,
.accountLogoutBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border-radius:14px;
  font-weight:800;
}

.accountBackBtn{
  background:#fff;
  color:#4355a4;
}

.accountLogoutBtn{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}

.accountMain{
  padding:28px;
}

.accountHeroPro{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:18px;
  margin-bottom:20px;
}

.accountHeroCopy,
.accountHeroGlowCard,
.statCard,
.accountPanel{
  border-radius:24px;
  border:1px solid rgba(35,31,32,.08);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(35,31,32,.08);
}

.accountHeroCopy{
  padding:26px;
}

.accountBadgeTop,
.cardEyebrow,
.panelEyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(67,85,164,.10);
  color:#4355a4;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
}

.accountHeroCopy h1{
  margin:14px 0 10px;
  font-size:2rem;
  line-height:1.08;
}

.accountHeroCopy p{
  margin:0;
  color:rgba(35,31,32,.70);
  line-height:1.7;
}

.accountHeroGlowCard{
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.accountStats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:20px;
}

.statCard{
  padding:20px;
}

.statLabel{
  display:block;
  color:rgba(35,31,32,.60);
  font-size:.88rem;
  font-weight:800;
  margin-bottom:10px;
}

.statValue{
  display:block;
  font-family:"Montserrat";
  font-size:1.8rem;
  margin-bottom:8px;
}

.statHint{
  color:rgba(35,31,32,.68);
  line-height:1.5;
}

.accountContentGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.accountPanel{
  padding:22px;
}

.panelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.panelHead h3{
  margin:8px 0 0;
  font-size:1.15rem;
}

.panelStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,173,238,.10);
  border:1px solid rgba(0,173,238,.18);
  font-size:.84rem;
  font-weight:900;
}

.infoGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.infoCard{
  border-radius:18px;
  padding:16px;
  background:#f7f9fc;
  border:1px solid rgba(35,31,32,.08);
}

.infoCard span{
  display:block;
  font-size:.86rem;
  color:rgba(35,31,32,.62);
  margin-bottom:6px;
  font-weight:700;
}

.okText{
  color:#1d8f5a;
}

.emptyStatePro{
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:12px;
}

.emptyStateIcon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(67,85,164,.12), rgba(0,173,238,.10));
  font-size:1.45rem;
}

.panelActionBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  background:#4355a4;
  color:#fff;
  font-weight:800;
}

.panelActionBtn.secondary{
  background:#fff;
  color:#4355a4;
  border:1px solid rgba(35,31,32,.10);
}

.recommendList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.recommendItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-radius:18px;
  background:#f7f9fc;
  border:1px solid rgba(35,31,32,.08);
}

.recommendItem span{
  display:block;
  color:rgba(35,31,32,.66);
  font-size:.92rem;
}

.recommendItem a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:38px;
  border-radius:10px;
  background:#fff;
  border:1px solid rgba(35,31,32,.10);
  color:#4355a4;
  font-weight:800;
}

/* =========================
   CART PAGE PREMIUM
   ========================= */
.cartBodyPro{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 8% 8%, rgba(0,173,238,.10), transparent 55%),
    radial-gradient(900px 420px at 92% 12%, rgba(67,85,164,.10), transparent 55%),
    linear-gradient(180deg, #f5f8fc, #edf2f8);
}

.cartShell{
  max-width:1240px;
  margin:0 auto;
  padding:30px 18px 50px;
}

.cartTopbarPro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

.cartTopBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(67,85,164,.10);
  color:#4355a4;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:10px;
}

.cartTopbarPro h1{
  margin:0;
  font-size:2rem;
  line-height:1.05;
}

.cartBackLinkPro{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(35,31,32,.10);
  color:#4355a4;
  font-weight:800;
  box-shadow:0 10px 24px rgba(35,31,32,.06);
}

.cartLayoutPro{
  display:grid;
  grid-template-columns:1.55fr .85fr;
  gap:20px;
}

.cartPanelPro{
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  border:1px solid rgba(35,31,32,.08);
  border-radius:26px;
  padding:22px;
  box-shadow:0 24px 50px rgba(35,31,32,.08);
}

.stickyPanel{
  position:sticky;
  top:20px;
}

.cartPanelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.cartEyebrow{
  display:inline-block;
  margin-bottom:6px;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  color:#4355a4;
}

.cartPanelHead h2{
  margin:0;
  font-size:1.18rem;
}

.cartClearBtn{
  border:none;
  min-height:42px;
  padding:0 14px;
  border-radius:12px;
  background:rgba(231,76,60,.10);
  color:#b33030;
  font-weight:800;
  cursor:pointer;
}

.cartItemsWrap{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cItem{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  padding:16px;
  border-radius:22px;
  background:#f7f9fc;
  border:1px solid rgba(35,31,32,.08);
}

.cItem__media{
  display:flex;
  align-items:center;
  justify-content:center;
}

.cItem__img{
  width:100%;
  max-width:96px;
  height:96px;
  object-fit:cover;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(35,31,32,.08);
}

.cItem__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.cItem__title{
  font-size:1rem;
  font-weight:900;
  margin-bottom:5px;
}

.cItem__code{
  font-size:.88rem;
  color:rgba(35,31,32,.58);
}

.cItem__price{
  font-family:"Montserrat";
  font-size:1.05rem;
  font-weight:900;
  white-space:nowrap;
}

.cItem__price span{
  font-family:"Inter";
  font-weight:700;
  font-size:.88rem;
  color:rgba(35,31,32,.56);
}

.cItem__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(35,31,32,.08);
  font-size:.9rem;
  color:rgba(35,31,32,.78);
}

.cItem__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.qtyBox{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(35,31,32,.08);
}

.qtyBtn{
  width:36px;
  height:36px;
  border:none;
  border-radius:10px;
  background:#f2f5fb;
  color:#231f20;
  font-size:1.1rem;
  font-weight:900;
  cursor:pointer;
}

.qty{
  width:58px;
  height:36px;
  border:none;
  text-align:center;
  font-weight:800;
  background:transparent;
  outline:none;
}

.btn.danger{
  background:rgba(231,76,60,.10);
  border-color:rgba(231,76,60,.16);
  color:#b33030;
}

.cartSummaryBox{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:20px;
  background:
    radial-gradient(220px 120px at 90% 10%, rgba(0,173,238,.14), transparent 60%),
    linear-gradient(180deg, rgba(67,85,164,.08), rgba(255,255,255,.92));
  border:1px solid rgba(35,31,32,.08);
  margin-bottom:16px;
}

.sumRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.98rem;
}

.sumDivider{
  height:1px;
  background:rgba(35,31,32,.10);
}

.sumTotal b{
  font-family:"Montserrat";
  font-size:1.12rem;
}

.cartTrustList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}

.cartTrustItem{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(35,31,32,.72);
  font-size:.92rem;
}

.cartTrustDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#00adee;
}

.cartFormPro{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cartFormPro label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.92rem;
  color:rgba(35,31,32,.72);
  font-weight:700;
}

.cartFormPro input,
.cartFormPro textarea{
  width:100%;
  border:1px solid rgba(35,31,32,.10);
  background:#fff;
  border-radius:14px;
  padding:13px 14px;
  font:inherit;
  color:#231f20;
  outline:none;
}

.cartFormPro textarea{
  min-height:100px;
  resize:vertical;
}

.cartCheckoutBtn{
  width:100%;
  min-height:50px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg, #25D366, #1fb655);
  color:#fff;
  font-size:1rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 30px rgba(37,211,102,.22);
}

.cartHintPro{
  margin:14px 0 0;
  color:rgba(35,31,32,.64);
  line-height:1.6;
  font-size:.92rem;
}

.cartEmptyPro{
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  border-radius:22px;
  background:#f7f9fc;
  border:1px dashed rgba(35,31,32,.14);
}

.cartEmptyIcon{
  width:62px;
  height:62px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(67,85,164,.12), rgba(0,173,238,.10));
  font-size:1.6rem;
}

.cartEmptyAction{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  background:#4355a4;
  color:#fff;
  font-weight:800;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1180px){
  .categoryGrid{ grid-template-columns:repeat(4,1fr); }
  .productGrid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 980px){
  .headerContainer{
    flex-wrap:wrap;
    padding:16px 18px;
  }

  .searchBox{
    order:3;
    width:100%;
    margin-top:8px;
  }

  .categoryContainer{
    padding:12px 18px;
  }

  .bannerContent h2{
    font-size:1.75rem;
  }

  .offerGrid{ grid-template-columns:1fr; }
  .productGrid{ grid-template-columns:repeat(2,1fr); }
  .trust{ grid-template-columns:repeat(2,1fr); }

  .footerTop .footerWrap{
    grid-template-columns:1fr;
    gap:22px;
  }

  .footerBottomWrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .accountLayout{
    grid-template-columns:1fr;
  }

  .accountHeroPro,
  .accountContentGrid,
  .cartLayoutPro{
    grid-template-columns:1fr;
  }

  .accountStats{
    grid-template-columns:repeat(2,1fr);
  }

  .stickyPanel{
    position:static;
  }
}

@media (max-width: 640px){
  .brandLogo{ height:46px; }
  .brandTag{ display:none; }

  .headerActions{
    gap:10px;
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .whatsBtn span,
  .cartBtn span:not(.badge){
    display:none;
  }

  .heroSlider{
    height:300px;
  }

  .bannerContent{
    left:6%;
    right:6%;
    max-width:none;
  }

  .bannerContent h2{
    font-size:1.45rem;
  }

  .categoryGrid{ grid-template-columns:repeat(2,1fr); }
  .productGrid{ grid-template-columns:1fr; }
  .trust{ grid-template-columns:1fr; }
  .accountStats{ grid-template-columns:1fr; }
  .infoGrid{ grid-template-columns:1fr; }

  .cItem{
    grid-template-columns:1fr;
  }

  .cItem__top{
    flex-direction:column;
  }
}