:root {
  --ink: #17120f;
  --brown: #6b4423;
  --brown-dark: #352116;
  --sand: #d9c3a5;
  --cream: #f5f0e8;
  --paper: #fbfaf7;
  --green: #187243;
  --gold: #d3a42e;
  --red: #a84435;
  --line: rgba(52, 33, 22, .14);
  --shadow: 0 18px 50px rgba(47, 29, 18, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
body.locked { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.primary-button, .secondary-button, .light-button {
  min-height: 48px;
  border: 0;
  padding: 0 22px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: .2s ease;
}
.primary-button { color: #fff; background: var(--brown); box-shadow: 0 10px 24px rgba(107, 68, 35, .22); }
.primary-button:hover { background: var(--brown-dark); transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: .65; transform: none; }
.secondary-button { border: 1px solid var(--line); color: var(--brown); background: #fff; }
.light-button { color: var(--ink); background: #fff; }
.full { width: 100%; }

/* Mandatory account entry */
.auth-gate { position: fixed; z-index: 1000; inset: 0; display: grid; grid-template-columns: 46% 54%; min-height: 100vh; background: #f8f5ef; overflow: hidden; }
.auth-gate.unlocked { display: none; }
.auth-gate-close { position: fixed; z-index: 1002; top: 17px; right: 18px; width: 42px; height: 42px; display: none; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(40,24,14,.15); cursor: pointer; font-size: 24px; line-height: 1; }
.auth-gate.optional-access .auth-gate-close { display: grid; place-items: center; }
.auth-visual { position: relative; min-height: 100vh; overflow: hidden; color: #fff; background: var(--brown-dark); }
.auth-visual > img { width: 100%; height: 100%; object-fit: cover; }
.auth-visual-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31, 18, 10, .56), rgba(31, 18, 10, .86)), linear-gradient(0deg, rgba(25, 14, 8, .72), transparent 60%); }
.auth-visual-content { position: absolute; inset: auto 9% 8%; max-width: 520px; }
.auth-seal { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 30px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; }
.auth-seal b, .auth-seal span { display: block; text-align: center; }
.auth-seal b { font-family: Georgia, serif; font-size: 25px; }
.auth-seal span { margin-top: -18px; font-size: 7px; letter-spacing: .13em; text-transform: uppercase; }
.auth-visual-content > p { margin: 0 0 13px; color: #e7cba5; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.auth-visual-content h2 { margin: 0 0 18px; font-family: Georgia, serif; font-size: clamp(36px, 4vw, 61px); font-weight: 400; line-height: .98; }
.auth-visual-content > small { display: block; max-width: 440px; color: rgba(255,255,255,.75); font-family: Georgia, serif; font-size: 15px; line-height: 1.65; }
.auth-visual-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.18); }
.auth-visual-benefits > div { display: flex; gap: 10px; }
.auth-visual-benefits i { color: #e6c48e; font-family: Georgia, serif; font-size: 12px; }
.auth-visual-benefits b, .auth-visual-benefits small { display: block; }
.auth-visual-benefits b { margin-bottom: 5px; font-size: 9px; }
.auth-visual-benefits small { color: rgba(255,255,255,.58); font-size: 8px; line-height: 1.4; }
.auth-panel { align-self: center; width: min(650px, 86%); margin: 0 auto; padding: 18px 0; max-height: 100vh; overflow-y: auto; }
.auth-brand-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.auth-logo { width: 205px; }
.secure-badge { padding: 8px 11px; border: 1px solid rgba(24,114,67,.18); border-radius: 20px; color: var(--green); background: #eff8f3; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.secure-badge i { font-style: normal; }
.auth-welcome { display: flex; align-items: center; gap: 10px; justify-content: center; }
.auth-line { width: 40px; height: 1px; background: var(--sand); }
.auth-welcome p { color: var(--brown); font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.auth-main-title { margin: 3px 0 8px; font-family: Georgia, serif; font-size: 32px; font-weight: 400; text-align: center; }
.auth-main-copy { margin: 0 0 25px; color: #7e746e; font-size: 11px; text-align: center; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.auth-tabs button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 72px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; text-align: left; transition: .2s; }
.auth-tabs button.active { border-color: var(--brown); background: #f8f1e7; box-shadow: inset 0 0 0 1px var(--brown); }
.auth-tab-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brown); }
.auth-tabs strong, .auth-tabs small { display: block; }
.auth-tabs strong { margin-bottom: 4px; font-family: Georgia, serif; font-size: 13px; }
.auth-tabs small { color: #8d827a; font-size: 8px; }
.auth-tabs i { color: var(--brown); font-size: 20px; font-style: normal; }
.auth-form-section { padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 14px 35px rgba(47,29,18,.06); }
.auth-form-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.auth-kicker { margin: 0 0 5px; color: var(--brown); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.auth-form-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 400; }
.auth-form-heading > span { color: #8b8179; font-size: 8px; }
.auth-form-section form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.auth-control.wide, .terms, .auth-submit, .forgot-password { grid-column: 1 / -1; }
.auth-control > label { display: block; margin-bottom: 6px; font-size: 9px; font-weight: 800; }
.auth-field { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; min-height: 45px; border: 1px solid var(--line); border-radius: 3px; background: #fcfbf8; }
.auth-field:focus-within { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(107,68,35,.08); }
.auth-field > span { color: #9b8b80; text-align: center; }
.auth-field input { min-width: 0; height: 43px; border: 0; outline: 0; background: transparent; font-size: 11px; }
.auth-field button { border: 0; padding: 8px; color: var(--brown); background: transparent; cursor: pointer; font-size: 8px; font-weight: 800; }
.terms { display: flex; align-items: center; gap: 8px; color: #716761; font-size: 8px; }
.terms input { accent-color: var(--brown); }
.terms a{color:var(--brown);font-weight:800}
.forgot-password { justify-self: end; border: 0; color: var(--brown); background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.auth-submit { min-height: 50px; display: flex; align-items: center; justify-content: space-between; border: 0; padding: 0 20px; color: #fff; background: var(--brown); cursor: pointer; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.auth-submit b { font-size: 18px; }
.auth-message { min-height: 17px; margin: 12px 0 0; color: var(--red); font-size: 9px; font-weight: 700; text-align: center; }
.auth-safe { display: flex; justify-content: center; gap: 20px; margin-top: 13px; color: #7c716a; font-size: 8px; }

/* Store shell */
.topbar { min-height: 29px; display: flex; align-items: center; justify-content: center; gap: 8vw; padding: 6px 20px; color: rgba(255,255,255,.78); background: #1d1510; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.store-header { min-height: 82px; display: grid; grid-template-columns: 220px minmax(230px,1fr) auto auto auto; align-items: center; gap: 20px; padding: 12px max(3.5vw, 24px); border-bottom: 1px solid var(--line); background: #fff; }
.store-logo img { width: 205px; }
.header-search { height: 44px; display: flex; border: 1px solid var(--line); background: #f9f7f3; }
.header-search input { flex: 1; min-width: 0; border: 0; padding: 0 15px; outline: 0; background: transparent; font-size: 11px; }
.header-search button { width: 47px; border: 0; color: #fff; background: var(--brown); cursor: pointer; font-size: 20px; }
.delivery-header, .account-menu > button, .cart-header { display: flex; align-items: center; gap: 9px; border: 0; padding: 7px; background: transparent; cursor: pointer; text-align: left; }
.delivery-header > span, .account-menu > button > span, .cart-header > span { color: var(--brown); font-size: 22px; }
.header-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff !important; background: var(--brown); font-family: Georgia, serif; font-size: 15px !important; }
.delivery-header small, .delivery-header strong, .account-menu small, .account-menu strong, .cart-header small, .cart-header strong { display: block; white-space: nowrap; }
.delivery-header small, .account-menu small, .cart-header small { margin-bottom: 3px; color: #8b817a; font-size: 8px; }
.delivery-header strong, .account-menu strong, .cart-header strong { font-size: 10px; }
.account-menu { position: relative; }
.account-popover { position: absolute; z-index: 30; top: calc(100% + 13px); right: 0; width: 235px; display: none; padding: 8px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.account-menu.open .account-popover { display: grid; }
.account-popover a, .account-popover button { border: 0; padding: 11px; color: var(--ink); background: transparent; cursor: pointer; font-size: 9px; text-align: left; text-decoration: none; }
.account-popover a:hover, .account-popover button:hover { color: var(--brown); background: var(--cream); }
.account-popover-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; padding: 10px; border-bottom: 1px solid var(--line); }
.account-popover-head > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brown); font-family: Georgia, serif; font-size: 16px; }
.account-popover-head small, .account-popover-head strong { display: block; }
.account-popover-head small { margin-bottom: 4px; color: #8b817a; font-size: 7px; text-transform: uppercase; }
.account-popover-head strong { font-family: Georgia, serif; font-size: 14px; font-weight: 400; }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 20px; }
.department-nav { min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 2.7vw; padding: 0 3.5vw; color: #fff; background: var(--brown-dark); }
.department-nav button { height: 45px; border: 0; color: inherit; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.department-nav button:hover { color: #e9c99d; }
.department-nav .all-categories { padding: 0 22px; background: var(--brown); }
.department-nav .sale-link { color: #ffb7a7; }
.gallery-nav-link { height:45px; display:inline-flex; align-items:center; gap:5px; border:0; color:rgba(255,255,255,.75); background:transparent; cursor:pointer; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; padding:0 8px; transition:.15s; }
.gallery-nav-link:hover { color:#e9c99d; }

main { overflow-x: hidden; }
.member-bar { position: relative; width: min(1440px,94%); min-height: 82px; display: grid; grid-template-columns: 50px minmax(240px,1fr) auto auto; align-items: center; gap: 16px; margin: 18px auto 0; padding: 13px 18px 13px 24px; overflow: hidden; border: 1px solid rgba(107,68,35,.19); border-radius: 4px; background: linear-gradient(90deg,#f7ead8,#fff 62%); box-shadow: 0 12px 30px rgba(47,29,18,.07); }
.member-bar::before { position: absolute; inset: 0 auto 0 0; width: 6px; background: repeating-linear-gradient(0deg,#6b4423 0 7px,#cba577 7px 10px); content: ""; }
.member-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brown); font-family: Georgia, serif; font-size: 21px; }
.member-bar small, .member-bar strong, .member-bar p { display: block; }
.member-bar small { margin-bottom: 4px; color: var(--brown); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.member-bar strong { font-family: Georgia, serif; font-size: 15px; font-weight: 400; }
.member-bar p { margin: 4px 0 0; color: #837870; font-size: 8px; }
.member-bar button { min-height: 37px; border: 1px solid var(--brown); padding: 0 14px; color: var(--brown); background: #fff; cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.member-bar button:last-child { color: #fff; background: var(--brown); }
.welcome-row { width: min(1440px, 94%); display: grid; grid-template-columns: 245px minmax(0,1fr) 225px; gap: 14px; margin: 22px auto 17px; }
.category-menu { overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: 0 14px 35px rgba(47,29,18,.07); }
.category-menu h2 { margin: 0; padding: 15px 17px; border-bottom: 1px solid var(--line); color: var(--brown); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.category-menu button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid rgba(52,33,22,.08); padding: 8px 13px; background: #fff; cursor: pointer; text-align: left; }
.category-menu button:hover { background: var(--cream); }
.category-menu button > span { color: var(--brown); font-size: 19px; text-align: center; }
.category-menu strong, .category-menu small { display: block; }
.category-menu strong { margin-bottom: 4px; font-family: Georgia, serif; font-size: 12px; }
.category-menu small { color: #8d837c; font-size: 7px; line-height: 1.4; }
.category-menu b { color: #9c8f86; }
.compact-hero { position: relative; min-height: 374px; overflow: hidden; border-radius: 4px; color: #fff; background: var(--brown-dark); box-shadow: 0 14px 35px rgba(47,29,18,.13); }
.hero-media { position: absolute; inset: 0; }
.hero-media > img, .hero-media > video { width: 100%; height: 100%; object-fit: cover; }
.hero-slides { position: relative; width: 100%; height: 100%; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-indicators { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 10; }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); border: 1.5px solid rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: all .3s; }
.hero-dot.active { background: #fff; border-color: #fff; transform: scale(1.35); }
/* ── 1. HERO PREMIUM ─────────────────────────────────────────── */
.hero-shade {
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(15,8,4,.88) 0%,rgba(15,8,4,.4) 60%,transparent 100%);
}
.compact-hero::before {
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 15% 50%,rgba(196,134,74,.18) 0%,transparent 70%);
  animation:heroGlow 4s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  from { opacity:.6; transform:scale(1); }
  to   { opacity:1; transform:scale(1.06); }
}
.hero-copy { position:absolute; top:50%; left:7%; max-width:480px; transform:translateY(-50%); z-index:2; }
.hero-copy > small {
  display:inline-flex; align-items:center; gap:7px;
  color:#e5c18c; font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(196,134,74,.12); border:1px solid rgba(196,134,74,.3);
  border-radius:20px; padding:5px 14px; margin-bottom:14px;
  animation:fadeSlideUp .7s ease both;
}
.hero-copy h1 {
  margin:0 0 14px; font-family:Georgia,serif; font-size:clamp(38px,4vw,66px); font-weight:400; line-height:.95;
  background:linear-gradient(135deg,#fff 30%,#e5c18c 70%,#c4864a 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:fadeSlideUp .7s .1s ease both;
}
.hero-copy p {
  max-width:360px; margin:0 0 26px; color:rgba(255,255,255,.75);
  font-family:Georgia,serif; font-size:14px; line-height:1.6;
  animation:fadeSlideUp .7s .2s ease both;
}
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.side-promos { display: grid; gap: 14px; }
.promo-card { position: relative; min-height: 180px; display: flex; flex-direction: column; align-items: flex-start; justify-content: end; overflow: hidden; border: 1px solid rgba(80,49,29,.18); border-radius: 4px; padding: 20px; cursor: pointer; box-shadow: 0 12px 28px rgba(47,29,18,.09); text-align: left; }
.promo-card::after { position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.28); pointer-events: none; content: ""; }
.promo-card > * { position: relative; z-index: 1; }
.promo-card small { margin-bottom: 9px; font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.promo-card strong { margin-bottom: 12px; font-family: Georgia, serif; font-size: 21px; line-height: 1.05; }
.promo-card span { font-size: 8px; font-weight: 800; text-transform: uppercase; }
.brand-promo { color: #fff; background: linear-gradient(145deg, rgba(54,32,19,.55), rgba(38,22,13,.94)), url("assets/categoria-chapeus.png") center/cover; }
.coupon-promo { color: var(--ink); background: radial-gradient(circle at 18px 18px,rgba(107,68,35,.1) 0 2px,transparent 2.5px) 0 0/36px 36px,#ead7b8; }
.coupon-promo::after { border-color: rgba(107,68,35,.28); }
.coupon-promo strong { font-size: 31px; }
.coupon-promo b { margin-bottom: 11px; padding: 7px 9px; border: 1px dashed var(--brown); font-size: 10px; }
.quick-benefits { width: min(1440px,94%); display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto 45px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: 0 12px 30px rgba(47,29,18,.055); }
.quick-benefits > div { min-height: 77px; display: flex; align-items: center; justify-content: center; gap: 13px; border-right: 1px solid var(--line); }
.quick-benefits > div:last-child { border: 0; }
.quick-benefits > div > span { color: var(--brown); font-size: 20px; }
.quick-benefits p, .quick-benefits strong, .quick-benefits small { display: block; margin: 0; }
.quick-benefits strong { margin-bottom: 5px; font-size: 9px; }
.quick-benefits small { color: #8b817a; font-size: 8px; }
.section-title small, .coupon-heading > small { color: var(--brown); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-title h2, .coupon-heading h2 { margin: 7px 0 21px; font-family: Georgia, serif; font-size: 29px; font-weight: 400; }

/* Catalog */
.catalog { padding: 48px max(3vw,22px) 65px; background: #f2ede5; }
.catalog-category-header, .store-category-grid, .catalog-heading, .hat-organizer, .catalog-layout, .subcategory-chips { width: min(1380px,100%); margin-right: auto; margin-left: auto; }
.catalog-category-header { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 21px; }
.catalog-category-header small { color: var(--brown); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.catalog-category-header h2 { margin: 7px 0 8px; font-family: Georgia, serif; font-size: 34px; font-weight: 400; }
.catalog-category-header p { margin: 0; color: #80756d; font-size: 10px; }
.catalog-category-header > span { padding: 9px 13px; border: 1px solid rgba(107,68,35,.22); border-radius: 20px; color: var(--brown); background: #f8f3ec; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.store-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 46px; }
.store-category-card { position: relative; height: 195px; overflow: hidden; border: 2px solid transparent; border-radius: 6px; padding: 0; color: #fff; background: #332116; box-shadow: 0 10px 25px rgba(43,25,14,.09); cursor: pointer; text-align: left; transition: .25s; }
.store-category-card:hover, .store-category-card.active { border-color: #c99a59; box-shadow: 0 17px 34px rgba(43,25,14,.18); transform: translateY(-3px); }
.store-category-card img, .store-category-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.store-category-card img { object-fit: cover; transition: .35s; }
.store-category-card:hover img { transform: scale(1.045); }
.store-category-shade { background: linear-gradient(90deg,rgba(20,11,7,.9),rgba(20,11,7,.46) 66%,rgba(20,11,7,.13)); }
.store-category-card.active::after { position: absolute; top: 13px; right: 13px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #392417; background: #e1bd7d; content: "✓"; font-size: 12px; font-weight: 900; }
.store-category-copy { position: absolute; z-index: 1; top: 22px; right: 24px; bottom: 20px; left: 24px; display: flex; align-items: flex-start; flex-direction: column; }
.store-category-copy small { margin-bottom: auto; padding: 6px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; background: rgba(17,17,17,.2); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.store-category-copy strong { font-family: Georgia, serif; font-size: 27px; font-weight: 400; }
.store-category-copy em { margin-top: 5px; color: rgba(255,255,255,.73); font-size: 8px; font-style: normal; }
.store-category-copy b { margin-top: 14px; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.store-category-brand { position: absolute; z-index: 2; right: 14px; top: 16px; writing-mode: vertical-rl; text-orientation: mixed; font-size: 8px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); white-space: nowrap; pointer-events: none; }
.store-category-copy b i { margin-left: 5px; color: #e1bd7d; font-style: normal; font-size: 13px; }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.breadcrumb { margin: 0 0 10px; color: #938880; font-size: 8px; }
.catalog-heading h2 { margin: 0 0 7px; font-family: Georgia, serif; font-size: 33px; font-weight: 400; }
.catalog-heading > div > p:last-child { margin: 0; color: #81776f; font-size: 9px; }
.catalog-sort > span { display: block; margin-bottom: 8px; color: #81776f; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.sort-options { display: flex; overflow: hidden; border: 1px solid #d8cec3; border-radius: 4px; background: #fff; box-shadow: 0 6px 18px rgba(47,29,18,.04); }
.sort-options button { min-height: 38px; border: 0; border-right: 1px solid #e5ddd4; padding: 0 15px; color: #72675f; background: #fff; cursor: pointer; font-size: 8px; font-weight: 800; transition: .2s; }
.sort-options button:last-child { border-right: 0; }
.sort-options button:hover { color: var(--brown); background: #f8f2ea; }
.sort-options button.active { color: #fff; background: var(--brown); }
.hat-organizer { margin-top: 25px; overflow: visible; border: 1px solid #d9c7b3; border-radius: 7px; background: #fff; box-shadow: 0 12px 32px rgba(54,33,20,.06); }
.hat-organizer[hidden] { display: none; }
.hat-organizer-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; color: #fff; background: linear-gradient(120deg,#2d1b12,#6b4423); }
.hat-organizer-intro span { color: #e4c08b; font-size: 7px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hat-organizer-intro h3 { margin: 6px 0 5px; font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
.hat-organizer-intro p { margin: 0; color: rgba(255,255,255,.66); font-size: 8px; }
.hat-organizer-intro > strong { flex: 0 0 auto; padding: 9px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 20px; color: #f0d4a7; background: rgba(255,255,255,.06); font-size: 8px; text-transform: uppercase; }
.hat-search-box { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; margin: 18px 20px 12px; border: 1px solid #d8cbbc; border-radius: 6px; padding: 10px 13px; background: #fcfaf7; }
.hat-search-box > span { color: var(--brown); font-family: Georgia,serif; font-size: 26px; text-align: center; }
.hat-search-box label small { display: block; margin-bottom: 4px; color: #978a81; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.hat-search-box input { width: 100%; border: 0; outline: 0; color: #3d3028; background: transparent; font-family: Georgia,serif; font-size: 13px; }
.hat-search-box input::placeholder { color: #aa9f97; }
.hat-filter-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0 20px 18px; }
.hat-filter-control { position: relative; min-width: 0; }
.hat-filter-control > small { display: block; margin: 0 0 6px 2px; color: #8f8177; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hat-filter-control details { position: relative; }
.hat-filter-control summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #d7cabc; border-radius: 5px; padding: 0 13px; color: #4e4037; background: #fff; box-shadow: 0 4px 12px rgba(55,34,21,.035); cursor: pointer; font-size: 9px; font-weight: 800; list-style: none; }
.hat-filter-control summary::-webkit-details-marker { display: none; }
.hat-filter-control summary::after { color: #9c704c; content: "⌄"; font-size: 14px; transition: .2s; }
.hat-filter-control details[open] summary { border-color: #9f7655; box-shadow: 0 0 0 2px rgba(107,68,35,.08); }
.hat-filter-control details[open] summary::after { transform: rotate(180deg); }
.hat-menu-options { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; left: 0; max-height: 240px; overflow-y: auto; border: 1px solid #d4c5b5; border-radius: 5px; padding: 5px; background: #fff; box-shadow: 0 16px 32px rgba(45,27,17,.16); }
.hat-filter-control { position: relative; min-width: 0; z-index: 10; }
.hat-filter-control details[open] { z-index: 50; }
.hat-menu-options button { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 3px; padding: 7px 9px; color: #5e5148; background: #fff; cursor: pointer; font-size: 8px; text-align: left; }
.hat-menu-options button:hover { color: var(--brown); background: #f8f1e8; }
.hat-menu-options button.active { color: #fff; background: var(--brown); }
.hat-menu-options button small { min-width: 22px; padding: 3px 5px; border-radius: 10px; color: #857970; background: #eee7df; font-size: 7px; text-align: center; }
.hat-menu-options button.active small { color: var(--brown); background: #ecd5b5; }
.hat-filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; color: #74685f; background: #f6efe6; font-size: 8px; }
.hat-filter-summary button { border: 0; color: var(--brown); background: transparent; cursor: pointer; font-size: 8px; font-weight: 800; text-decoration: underline; }
.subcategory-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0 17px; }
.subcategory-chips button { min-height: 34px; border: 1px solid var(--line); border-radius: 18px; padding: 0 15px; background: #fff; cursor: pointer; font-size: 8px; font-weight: 800; }
.subcategory-chips button.active { border-color: var(--brown); color: #fff; background: var(--brown); }
.catalog-layout { display: grid; grid-template-columns: 220px 1fr; gap: 22px; }
.filters { align-self: start; padding: 18px; border: 1px solid var(--line); background: #fff; }
.filter-title { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 10px; }
.filter-title button { border: 0; color: var(--brown); background: transparent; cursor: pointer; font-size: 8px; font-weight: 800; }
.filter-context { margin: 14px 0 3px; padding: 10px; border-left: 3px solid var(--brown); color: #55483f; background: #f7f1e9; font-family: Georgia, serif; font-size: 12px; }
.filters details { border-top: 1px solid var(--line); padding: 14px 0; }
.filters summary { cursor: pointer; font-size: 9px; font-weight: 800; }
.filters details label { display: block; margin-top: 11px; color: #71675f; font-size: 8px; }
.filters input { accent-color: var(--brown); }
.shipping-simulator { min-height: 73px; display: grid; grid-template-columns: 38px minmax(180px,1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px 17px; border: 1px solid rgba(107,68,35,.23); border-radius: 4px; background: linear-gradient(105deg,#f6e8d3,#fffaf2 55%,#fff); box-shadow: 0 9px 22px rgba(47,29,18,.045); }
.shipping-simulator > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(107,68,35,.25); border-radius: 50%; color: var(--brown); background: #fff; }
.shipping-simulator > span { color: var(--brown); font-size: 22px; }
.shipping-simulator strong, .shipping-simulator small { display: block; }
.shipping-simulator strong { margin-bottom: 5px; font-size: 10px; }
.shipping-simulator small { color: #887d75; font-size: 8px; }
.cep-form { display: flex; min-height: 38px; }
.cep-form input { width: 125px; border: 1px solid var(--line); padding: 0 10px; outline: 0; background: #fff; font-size: 9px; }
.cep-form button { border: 0; padding: 0 14px; color: #fff; background: var(--brown); cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.shipping-result { grid-column: 2 / -1; margin: 0; color: var(--green); font-size: 8px; font-weight: 700; }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.load-more-products { min-height: 43px; display: block; margin: 23px auto 0; border: 1px solid var(--brown); border-radius: 3px; padding: 0 24px; color: var(--brown); background: #fff; cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.load-more-products:hover { color: #fff; background: var(--brown); }
.load-more-products[hidden] { display: none; }
/* ── 4. PRODUCT CARDS ────────────────────────────────────────── */
.product-card { overflow:hidden; border:1px solid var(--line); background:#fff; transition:.28s cubic-bezier(.2,.8,.2,1); border-radius:4px; }
.product-card:hover { box-shadow:0 20px 40px rgba(47,29,18,.13),0 0 0 1.5px rgba(196,134,74,.35); transform:translateY(-4px); }
.product-image { position:relative; height:275px; overflow:hidden; cursor:pointer; background:#eee7dd; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:.4s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-image img { transform:scale(1.06); }
.badge { position:absolute; top:12px; left:12px; padding:7px 10px; color:#fff; background:var(--red); font-size:7px; font-weight:800; text-transform:uppercase; border-radius:4px; letter-spacing:.04em; animation:badgePulse 2.5s ease-in-out infinite; }
.badge.green { background:var(--green); }
.badge.gold { color:var(--ink); background:var(--gold); animation:none; }
@keyframes badgePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.4); } 50%{ box-shadow:0 0 0 5px rgba(220,38,38,0); } }
.favorite { position: absolute; top: 10px; right: 10px; width: 33px; height: 33px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); cursor: pointer; font-size: 18px; }
.favorite.active { color: var(--red); }
.product-info { padding: 16px; }
.product-info > small { color: var(--brown); font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-info h3 { min-height: 35px; margin: 8px 0 5px; font-family: Georgia, serif; font-size: 16px; font-weight: 400; line-height: 1.15; }
.product-rating, .rating { color: #c69224; font-size: 8px; }
.product-rating.neutral,.rating.neutral{color:#7d7168}
.product-info h3 a{color:inherit;text-decoration:none}
.product-info h3 a:hover{color:var(--brown)}
.hat-product-details { display: flex; gap: 6px; margin-top: 10px; }
.hat-product-details span { padding: 6px 8px; border: 1px solid #e1d7cc; border-radius: 3px; color: #857970; background: #faf7f2; font-size: 7px; }
.hat-product-details b { color: var(--brown); }
.product-prices { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.product-prices strong { font-family: Georgia, serif; font-size: 19px; font-weight: 400; }
.product-prices s { color: #9c928a; font-size: 9px; }
.installment { display: block; margin: 5px 0 14px; color: #7f756e; font-size: 8px; }
.product-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.product-actions button { min-height: 38px; border: 1px solid var(--brown); padding: 0 12px; color: var(--brown); background: #fff; cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.product-actions button:first-child { color: #fff; background: var(--brown); }
.empty-products { grid-column: 1/-1; padding: 60px; border: 1px solid var(--line); background: #fff; text-align: center; }
.empty-products strong { font-family: Georgia, serif; font-size: 23px; font-weight: 400; }
.empty-products p { color: #82776f; font-size: 10px; }

/* Coupons and footer */
.coupon-zone { padding: 55px max(3vw,22px); color: #fff; background: var(--brown-dark); }
.coupon-heading, .coupon-grid { width: min(1380px,100%); margin-right: auto; margin-left: auto; }
.coupon-heading h2 { margin-bottom: 8px; }
.coupon-heading p { margin: 0 0 24px; color: rgba(255,255,255,.65); font-size: 9px; }
.coupon-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.coupon-grid button { position: relative; min-height: 145px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; padding: 20px 24px; color: #fff; background: linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.025)); cursor: pointer; text-align: left; }
.coupon-grid button::before, .coupon-grid button::after { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--brown-dark); content: ""; transform: translateY(-50%); }
.coupon-grid button::before { left: -9px; }
.coupon-grid button::after { right: -9px; }
.coupon-grid button:hover, .coupon-grid .coupon-main { border-color: #e0be78; background: rgba(224,190,120,.13); }
.coupon-grid span small, .coupon-grid span strong { display: block; }
.coupon-grid span small { margin-bottom: 8px; color: #d8c4ae; font-size: 8px; text-transform: uppercase; }
.coupon-grid span strong { font-family: Georgia, serif; font-size: 29px; font-weight: 400; }
.coupon-grid b { padding: 8px; border: 1px dashed #d9b878; font-size: 10px; }
.coupon-grid i { grid-column: 1/-1; color: #e2c58c; font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }
/* ── 5. FOOTER PREMIUM ───────────────────────────────────────── */
.site-footer {
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#0e0705,#2a1810,#3b261a);
  color:#f4e9da;
}
.site-footer::before {
  content:'';
  position:absolute; top:-120px; left:-80px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(196,134,74,.08),transparent 70%);
  pointer-events:none;
}
.site-footer::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,134,74,.5),rgba(196,134,74,.8),rgba(196,134,74,.5),transparent);
}
.footer-inner { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:0; padding:0 max(5vw,28px); }
.footer-brand { padding:56px 44px 56px 0; border-right:1px solid rgba(255,255,255,.06); }
.footer-brand img { width:180px; margin-bottom:14px; filter:brightness(0) invert(1); opacity:.9; }
.footer-brand p { margin:0 0 24px; max-width:260px; color:rgba(255,255,255,.55); font-family:Georgia,serif; font-size:13px; line-height:1.7; }
.footer-identity { display:block; color:rgba(255,255,255,.28); font-size:10px; line-height:1.6; }
.footer-social-compact { display:flex; gap:10px; margin-bottom:22px; }
.footer-social-compact a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; transition: transform .2s, opacity .2s; opacity: .65; }
.footer-social-compact a:hover { opacity: 1; transform: translateY(-2px); }
.footer-social-compact a[data-social="instagram"] { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); opacity: 1; }
.footer-social-compact a[data-social="facebook"] { background: #1877f2; opacity: 1; }
.footer-social-compact a[data-social="tiktok"] { background: #111; opacity: 1; }
.footer-col { padding: 52px 0 52px 36px; border-right: 1px solid rgba(255,255,255,.07); }
.footer-col:last-child { border-right: none; }
.footer-col strong { display: block; margin-bottom: 18px; color: #e0bd8d; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.footer-col a, .footer-col button { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; border: 0; padding: 0; color: rgba(255,255,255,.65); background: transparent; cursor: pointer; font-size: 12px; text-align: left; text-decoration: none; transition: color .18s; }
.footer-col a:hover, .footer-col button:hover { color: #fff; }
.footer-col a svg, .footer-col button svg { flex-shrink: 0; opacity: .55; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px max(5vw,28px); border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.28); font-size: 11px; }
.pay-badge { display:inline-flex; align-items:center; opacity:.85; transition:opacity .2s; border-radius:3px; overflow:hidden; }
.pay-badge:hover { opacity:1; }
.payment-brands-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.footer-pay-badges { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }

/* Drawers and product modal */
.screen-overlay { position: fixed; z-index: 80; inset: 0; visibility: hidden; background: rgba(18,11,7,.62); opacity: 0; transition: .2s; }
.screen-overlay.active { visibility: visible; opacity: 1; }
.side-drawer { position: fixed; z-index: 90; top: 0; bottom: 0; width: min(430px,92vw); padding: 22px; background: #fff; box-shadow: var(--shadow); transition: .25s; }
.category-drawer { left: 0; transform: translateX(-103%); }
.cart-drawer { right: 0; display: flex; flex-direction: column; transform: translateX(103%); }
.side-drawer.active { transform: none; }
.drawer-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.drawer-title img { width: 180px; }
.drawer-title small, .drawer-title h2 { display: block; margin: 0; }
.drawer-title small { color: var(--brown); font-size: 8px; text-transform: uppercase; }
.drawer-title h2, .category-drawer > h2 { font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.drawer-title button, .modal-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--cream); cursor: pointer; font-size: 20px; }
#mobileCategories { display: grid; gap: 7px; }
#mobileCategories button { border: 1px solid var(--line); padding: 13px; background: #fff; cursor: pointer; text-align: left; }
#mobileCategories strong { font-family: Georgia, serif; }
#mobileCategories small { color: #857a73; font-size: 8px; }
.cart-items { flex: 1; overflow-y: auto; padding: 12px 0; }
.cart-item { display: grid; grid-template-columns: 72px 1fr 25px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 72px; height: 85px; object-fit: cover; }
.cart-item h3 { margin: 4px 0 8px; font-family: Georgia, serif; font-size: 13px; font-weight: 400; }
.cart-item strong { font-size: 10px; }
.cart-item div > small { display: block; margin: -3px 0 7px; color: #7c7067; font-size: 8px; }
.cart-item div > small b { color: var(--brown); }
.cart-item > button { align-self: start; border: 0; background: transparent; cursor: pointer; }
.qty { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.qty button { width: 25px; height: 25px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.qty span { font-size: 9px; }
.empty-cart { height: 100%; display: grid; place-items: center; color: #7f746d; text-align: center; }
.empty-cart strong { font-family: Georgia, serif; font-size: 21px; font-weight: 400; }
.empty-cart p { font-size: 9px; }
.cart-bottom { padding-top: 15px; border-top: 1px solid var(--line); }
.cart-freight strong { display: block; margin-bottom: 7px; font-size: 9px; }
.cart-freight .cep-form input { flex: 1; }
.cart-coupon { display: flex; margin-top: 12px; }
.cart-coupon input { flex: 1; min-width: 0; min-height: 38px; border: 1px solid var(--line); padding: 0 10px; }
.cart-coupon button { border: 0; padding: 0 15px; color: #fff; background: var(--brown); font-size: 8px; font-weight: 800; }
#couponMessage { min-height: 13px; margin: 6px 0; color: var(--green); font-size: 8px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0 16px; font-size: 9px; }
.totals b { text-align: right; }
.totals strong { padding-top: 9px; border-top: 1px solid var(--line); font-family: Georgia, serif; font-size: 16px; font-weight: 400; }
.modal { position: fixed; z-index: 90; inset: 0; visibility: hidden; display: grid; place-items: center; padding: 25px; opacity: 0; pointer-events: none; transition: .2s; }
.modal.active { visibility: visible; opacity: 1; pointer-events: auto; }
.product-modal, .checkout-modal { position: relative; width: min(960px,96vw); max-height: 92vh; overflow-y: auto; background: #fff; box-shadow: var(--shadow); }
.modal-close { position: absolute; z-index: 2; top: 14px; right: 14px; }
.product-modal { display: grid; grid-template-columns: 1fr 1fr; }
.product-modal > img { width: 100%; height: 100%; min-height: 490px; object-fit: cover; }
.product-modal > div { padding: 52px 40px 35px; }
.product-modal > div > p:first-child { color: var(--brown); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.product-modal h2 { margin: 10px 0; font-family: Georgia, serif; font-size: 31px; font-weight: 400; }
.rating span { color: #81766f; }
.product-modal > div > p { color: #70665f; font-family: Georgia, serif; font-size: 14px; line-height: 1.55; }
#modalPrice { display: block; margin: 20px 0; font-family: Georgia, serif; font-size: 28px; font-weight: 400; }
.modal-product-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 17px 0; }
.modal-product-specs:empty { display: none; }
.modal-product-specs span { padding: 10px; border: 1px solid #e2d8cd; background: #faf7f2; }
.modal-product-specs small, .modal-product-specs strong { display: block; }
.modal-product-specs small { margin-bottom: 4px; color: #95887f; font-size: 7px; text-transform: uppercase; }
.modal-product-specs strong { color: var(--brown); font-family: Georgia, serif; font-size: 12px; font-weight: 400; }
.modal-size-picker > strong { display: block; margin-bottom: 9px; font-size: 9px; text-transform: uppercase; }
#modalSizeOptions { display: flex; flex-wrap: wrap; gap: 6px; }
#modalSizeOptions button { min-width: 58px; height: 48px; border: 1px solid #d8cdc2; color: #5e5249; background: #fff; cursor: pointer; font-size: 9px; font-weight: 800; }
#modalSizeOptions button span,#modalSizeOptions button small{display:block}
#modalSizeOptions button small{margin-top:2px;color:#8a7c72;font-size:7px;font-weight:500}
#modalSizeOptions button:disabled{opacity:.48;cursor:not-allowed;background:#eee9e3}
#modalSizeOptions button:hover, #modalSizeOptions button.active { border-color: var(--brown); color: #fff; background: var(--brown); }
#modalSizeMessage { min-height: 15px; margin: 7px 0 0; color: var(--brown); font-family: inherit; font-size: 8px; }
#modalAdd:disabled { cursor: not-allowed; opacity: .45; }
.modal-shipping { margin: 18px 0; padding: 14px; background: var(--cream); }
.modal-shipping > strong { display: block; margin-bottom: 8px; font-size: 9px; }
.modal-shipping input { flex: 1; }

/* Customer account */
.account-modal { position: relative; width: min(920px,96vw); max-height: 90vh; display: grid; grid-template-columns: 280px 1fr; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.account-modal-side { min-height: 560px; display: flex; flex-direction: column; align-items: flex-start; padding: 42px 28px; color: #fff; background: linear-gradient(160deg,#2d1c13,#704729); }
.account-large-avatar { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(255,255,255,.08); font-family: Georgia, serif; font-size: 30px; }
.account-modal-side > small { color: #dec19c; font-size: 7px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.account-modal-side h2 { margin: 7px 0 10px; font-family: Georgia, serif; font-size: 29px; font-weight: 400; }
.account-modal-side p { margin: 0 0 30px; color: rgba(255,255,255,.68); font-family: Georgia, serif; font-size: 12px; line-height: 1.5; }
.account-modal-side button, .account-modal-side a { width: 100%; min-height: 42px; border: 0; border-left: 2px solid transparent; padding: 0 12px; color: rgba(255,255,255,.68); background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; text-align: left; text-decoration: none; text-transform: uppercase; }
.account-modal-side button.active, .account-modal-side button:hover, .account-modal-side a:hover { border-color: #e4be88; color: #fff; background: rgba(255,255,255,.08); }
.account-modal-side a { display: flex; align-items: center; margin-top: auto; color: #efcf9e; }
.account-modal-content { max-height: 90vh; overflow-y: auto; padding: 50px 42px; }
.account-kicker { color: var(--brown); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.account-modal-content h2 { margin: 8px 0; font-family: Georgia, serif; font-size: 30px; font-weight: 400; }
.account-modal-content section > p { margin: 0 0 25px; color: #7c716a; font-size: 10px; }
#profileForm { display: grid; gap: 16px; max-width: 430px; padding: 22px; border: 1px solid var(--line); background: #faf7f2; }
#profileForm label { color: #685d56; font-size: 8px; font-weight: 800; text-transform: uppercase; }
#profileForm input { width: 100%; height: 44px; display: block; margin-top: 7px; border: 1px solid var(--line); padding: 0 12px; outline: 0; background: #fff; font-size: 11px; text-transform: none; }
#profileForm input:focus { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(107,68,35,.08); }
.account-protection { display: flex; align-items: center; gap: 12px; max-width: 430px; margin-top: 17px; padding: 14px; color: var(--green); background: #edf7f1; }
.account-protection > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.account-protection strong, .account-protection small { display: block; }
.account-protection strong { margin-bottom: 4px; font-size: 9px; }
.account-protection small { color: #62766a; font-size: 8px; line-height: 1.4; }
/* Profile stats & improved order cards */
.profile-stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 0 0 20px; }
.profile-stat { padding: 16px 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #faf7f2; text-align: center; position: relative; overflow: hidden; }
.profile-stat::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(107,68,35,.04),transparent); pointer-events:none; }
.profile-stat strong { display: block; margin-bottom: 5px; font-family: Georgia, serif; font-size: 22px; font-weight: 400; color: var(--brown); }
.profile-stat span { font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #b0a097; }
.profile-email-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: #faf7f2; }
.profile-email-row > span { font-size: 24px; flex-shrink: 0; }
.profile-email-row > div { min-width: 0; }
.profile-email-label { font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9c8d83; }
.profile-email-row strong { display:block; font-size: 14px; font-weight: 600; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-email-row small { font-size: 10px; color: #9c8d83; }
.profile-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.profile-action-btn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: border-color .18s, background .18s, box-shadow .18s; }
.profile-action-btn:hover { border-color: var(--brown); background: #fdf9f5; box-shadow: 0 4px 14px rgba(107,68,35,.08); }
.profile-action-btn span { font-size: 20px; flex-shrink: 0; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:#f5ede4; }
.profile-action-btn strong, .profile-action-btn small { display: block; }
.profile-action-btn strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.profile-action-btn small { font-size: 11px; color: #9c8d83; margin-top: 2px; }
.customer-orders { display: grid; gap: 10px; }
.customer-order-card { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; align-items: center; gap: 16px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: box-shadow .18s; }
.customer-order-card:hover { box-shadow: 0 4px 16px rgba(43,28,18,.07); }
.order-items-list { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.order-item-line { display: flex; justify-content: space-between; font-size: 13px; color: #4a3728; }
.order-item-line em { color: #8a8078; font-style: normal; }
.customer-order-card small, .customer-order-card strong, .customer-order-card span { display: block; }
.customer-order-card small { margin-bottom: 5px; color: #8a8078; font-size: 7px; text-transform: uppercase; }
.customer-order-card strong { margin-bottom: 4px; font-family: Georgia, serif; font-size: 13px; font-weight: 400; }
.customer-order-card div > span { color: #81766f; font-size: 8px; }
.order-status { padding: 7px 9px; border-radius: 15px; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.order-status.paid { color: var(--green); background: #dff2e7; }
.order-status.packing { color: #96631b; background: #fff0d3; }
.order-status.sent { color: #315e85; background: #e1eaf5; }
.order-status.pending { color: #756a62; background: #eee8e3; }
.empty-orders { padding: 45px 20px; border: 1px dashed var(--line); color: #7e746d; text-align: center; }
.empty-orders > span { display: block; margin-bottom: 12px; color: var(--brown); font-size: 30px; }
.empty-orders strong { font-family: Georgia, serif; font-size: 18px; font-weight: 400; }
.empty-orders p { font-size: 9px; }
.loading-line { color: #81766f; font-size: 9px; }

/* Checkout and payment */
.checkout-modal { width: min(1030px,96vw); padding: 30px 36px 36px; }
.checkout-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 24px; padding: 0 45px 20px 0; border-bottom: 1px solid var(--line); }
.checkout-head small { color: var(--brown); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.checkout-head h2 { margin: 6px 0; font-family: Georgia, serif; font-size: 30px; font-weight: 400; }
.checkout-head p { margin: 0; color: #7d726b; font-size: 9px; }
.checkout-steps { display: flex; align-items: center; gap: 9px; }
.checkout-steps span { min-width: 92px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 20px; color: #8a7f77; font-size: 8px; font-weight: 800; text-align: center; text-transform: uppercase; }
.checkout-steps span.active { border-color: var(--brown); color: #fff; background: var(--brown); }
.checkout-steps i { width: 24px; height: 1px; background: var(--line); }
#checkoutForm > h3 { margin: 24px 0 12px; font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
.form-grid label, .card-fields label { color: #665c55; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.form-grid label.wide { grid-column: span 2; }
.form-grid input, .form-grid select, .card-fields input, .card-fields select { width: 100%; min-height: 42px; display: block; margin-top: 6px; border: 1px solid var(--line); border-radius: 2px; padding: 0 11px; outline: 0; background: #fcfbf8; font-size: 10px; text-transform: none; }
.form-grid input:focus, .form-grid select:focus, .card-fields input:focus, .card-fields select:focus { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(107,68,35,.08); }
.option-cards, .payment-cards { display: grid; gap: 10px; }
.option-cards { grid-template-columns: 1fr 1fr; }
.payment-cards { grid-template-columns: repeat(4,1fr); }
.option-cards label, .payment-cards label { position: relative; cursor: pointer; }
.option-cards input, .payment-cards input { position: absolute; opacity: 0; pointer-events: none; }
.option-cards span, .payment-cards span { height: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; padding: 14px; background: #fff; transition: .18s; }
.option-cards input:checked + span, .payment-cards input:checked + span { border-color: var(--brown); background: #faf3e9; box-shadow: inset 0 0 0 1px var(--brown); }
.option-cards b, .option-cards small, .option-cards strong, .payment-cards b, .payment-cards small { display: block; }
.option-cards b, .payment-cards b { margin-bottom: 5px; font-size: 10px; }
.option-cards small, .payment-cards small { color: #82776f; font-size: 8px; line-height: 1.35; }
.option-cards strong { margin-top: 8px; color: var(--brown); font-size: 10px; }
.payment-cards span > i { width: 31px; height: 25px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 4px; color: #fff; background: var(--brown); font-size: 9px; font-style: normal; font-weight: 900; }
.payment-detail { min-height: 67px; display: flex; align-items: center; gap: 13px; margin-top: 11px; padding: 13px 16px; border: 1px solid rgba(24,114,67,.17); background: #f2f8f4; }
.detail-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.detail-icon.paypal { background: #1665a7; }
.payment-detail strong, .payment-detail small { display: block; }
.payment-detail strong { margin-bottom: 5px; font-size: 9px; }
.payment-detail small { color: #718078; font-size: 8px; }
.card-detail { display: grid; grid-template-columns: 290px 1fr; align-items: stretch; gap: 20px; border-color: var(--line); background: #f6f1ea; }
.card-preview { min-height: 164px; display: flex; flex-direction: column; justify-content: space-between; padding: 21px; border-radius: 10px; color: #fff; background: linear-gradient(145deg,#2e1d14,#795035); box-shadow: 0 14px 30px rgba(45,27,17,.24); }
.card-preview span { font-size: 8px; letter-spacing: .15em; }
.card-preview strong { margin: auto 0 0; font-family: monospace; font-size: 17px; letter-spacing: .08em; }
.card-preview small { margin-top: 18px; color: rgba(255,255,255,.7); font-size: 8px; }
.card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.card-fields .wide { grid-column: span 2; }
.test-card-hint { grid-column: 1/-1; margin: 0; color: #7d6f65; font-size: 8px; line-height: 1.4; }
.checkout-submit { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.checkout-submit > div { text-align: right; }
.checkout-submit small, .checkout-submit strong { display: block; }
.checkout-submit small { margin-bottom: 4px; color: #81776f; font-size: 8px; }
.checkout-submit strong { font-family: Georgia, serif; font-size: 21px; font-weight: 400; }
.payment-stage-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 15px 17px; border: 1px solid var(--line); background: #faf7f2; }
.payment-stage-top small, .payment-stage-top strong { display: block; }
.payment-stage-top small { margin-bottom: 5px; color: #82776f; font-size: 8px; text-transform: uppercase; }
.payment-stage-top strong { font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.payment-stage-top > span { padding: 8px 11px; border-radius: 18px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.payment-stage-top > span.pending { color: #956018; background: #fff0d4; }
.payment-stage-top > span.paid { color: var(--green); background: #ddf1e5; }
.pix-payment { display: grid; grid-template-columns: 310px 1fr; gap: 30px; align-items: center; padding: 25px; border: 1px solid var(--line); }
.qr-card { padding: 18px; border: 1px solid var(--line); background: #fff; box-shadow: 0 12px 30px rgba(47,29,18,.07); text-align: center; }
.qr-card img { width: 235px; height: 235px; margin: auto; }
.qr-card span { display: block; margin-top: 10px; color: #7c716a; font-size: 8px; }
.payment-instructions > small, .provider-payment > small, .paid-receipt > small { color: var(--brown); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.payment-instructions h3, .provider-payment h3, .paid-receipt h3 { margin: 8px 0 13px; font-family: Georgia, serif; font-size: 29px; font-weight: 400; }
.payment-instructions ol { margin: 0 0 17px; padding-left: 18px; color: #6f655e; font-size: 9px; line-height: 1.8; }
.payment-instructions label, .boleto-payment label { display: block; color: #6e645d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.payment-instructions > p { color: #927e6e; font-size: 8px; }
.copy-field { display: flex; margin-top: 7px; }
.copy-field input { flex: 1; min-width: 0; height: 43px; border: 1px solid var(--line); padding: 0 10px; background: #f8f6f2; font-family: monospace; font-size: 8px; }
.copy-field button { border: 0; padding: 0 18px; color: #fff; background: var(--brown); cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.provider-payment { max-width: 650px; margin: 0 auto; padding: 38px; border: 1px solid var(--line); background: #faf8f4; text-align: center; }
.provider-icon { width: 62px; height: 49px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 8px; color: #fff; background: var(--brown); font-size: 19px; font-weight: 900; }
.provider-payment p { color: #71665f; font-size: 10px; line-height: 1.6; }
.secure-line { margin-top: 17px; padding: 12px; color: var(--green); background: #edf7f1; font-size: 8px; font-weight: 700; }
.boleto-payment .copy-field { margin: 12px auto 0; }
.paypal-payment .provider-icon { background: #1665a7; }
.payment-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.simulation-notice { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 15px; border: 1px solid #ead3a2; color: #76551e; background: #fff8e9; font-size: 8px; }
.simulation-notice b { white-space: nowrap; text-transform: uppercase; }
.paid-receipt { max-width: 620px; margin: 10px auto; padding: 35px; border: 1px solid var(--line); background: #fff; box-shadow: 0 15px 35px rgba(47,29,18,.08); text-align: center; }
.paid-receipt > span { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: var(--green); font-size: 30px; }
.paid-receipt p { color: #6e645d; font-size: 10px; line-height: 1.6; }
.paid-receipt > div { display: flex; justify-content: space-between; margin: 22px 0; padding: 14px; color: var(--green); background: #eef8f2; font-size: 9px; }

/* ── 2. ANIMAÇÕES DE ENTRADA ─────────────────────────────────── */
.product-card {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
.product-card.visible {
  opacity:1;
  transform:translateY(0);
}
.product-card:nth-child(2){transition-delay:.05s}
.product-card:nth-child(3){transition-delay:.1s}
.product-card:nth-child(4){transition-delay:.15s}
.product-card:nth-child(5){transition-delay:.2s}
.product-card:nth-child(6){transition-delay:.25s}

/* ── 4. WHATSAPP BUTTON ──────────────────────────────────────── */
.whatsapp {
  position:fixed; z-index:40; right:24px; bottom:28px;
  display:flex; align-items:center; gap:10px;
  padding:0 22px 0 10px; height:62px; border-radius:31px;
  color:#fff;
  background:linear-gradient(135deg,#25d366,#128c3e);
  box-shadow:0 8px 28px rgba(20,120,62,.5),0 0 0 0 rgba(37,211,102,.4);
  text-decoration:none;
  transition:transform .22s,box-shadow .22s,padding .3s;
  overflow:hidden;
}
.whatsapp::before {
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 60%);
  pointer-events:none;
}
.whatsapp:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 16px 40px rgba(20,120,62,.6),0 0 0 6px rgba(37,211,102,.2); }
.whatsapp svg { flex-shrink:0; width:38px; height:38px; padding:3px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.2)); }
.whatsapp-label { font-size:13px; font-weight:800; white-space:nowrap; letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.2); }
@keyframes wapulse {
  0%,100% { box-shadow:0 8px 28px rgba(20,120,62,.5),0 0 0 0 rgba(37,211,102,.5); }
  60%     { box-shadow:0 8px 28px rgba(20,120,62,.5),0 0 0 14px rgba(37,211,102,0); }
}
.whatsapp { animation:wapulse 2.2s infinite; }
.whatsapp:hover { animation:none; }
/* ── 3. TOAST ELEGANTE ───────────────────────────────────────── */
.toast {
  position:fixed; z-index:1100; right:24px; bottom:90px;
  display:flex; align-items:center; gap:12px;
  max-width:340px; padding:14px 18px 14px 16px;
  color:#fff;
  background:linear-gradient(135deg,#2c1a10,#4a2a12);
  border:1px solid rgba(196,134,74,.3);
  border-left:3px solid #c4864a;
  border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 0 1px rgba(196,134,74,.1);
  opacity:0; pointer-events:none;
  transform:translateX(20px) scale(.96);
  transition:opacity .28s,transform .28s cubic-bezier(.2,.8,.2,1);
  font-size:12px; font-weight:600;
}
.toast.active { opacity:1; transform:translateX(0) scale(1); pointer-events:auto; }
.toast::before {
  content:'';
  width:32px; height:32px; flex-shrink:0;
  border-radius:50%; background:rgba(196,134,74,.2);
  display:grid; place-items:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4864a' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
#toastText { display:block; }
.toast-mark { display:none!important; }

/* Laptops comuns 1280-1366px */
@media (max-width: 1366px) {
  .gallery-preview-grid { grid-template-columns: repeat(3,1fr); }
  .footer-inner { grid-template-columns: 1.4fr repeat(3,1fr); }
}
@media (max-width: 1280px) {
  .catalog-layout { grid-template-columns: 190px 1fr; }
  .hat-filter-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1120px) {
  .store-header { grid-template-columns: 190px 1fr auto auto; }
  .store-logo img { width: 180px; }
  .delivery-header { display: none; }
  .welcome-row { grid-template-columns: 220px 1fr; }
  .side-promos { grid-column: 1/-1; grid-template-columns: 1fr 1fr; }
  .promo-card { min-height: 145px; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .form-grid { grid-template-columns: repeat(3,1fr); }
  .payment-cards { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 820px) {
  .auth-gate { grid-template-columns: 1fr; overflow-y: auto; }
  .auth-visual { min-height: 260px; }
  .auth-visual-content { inset: auto 6% 10%; }
  .auth-seal, .auth-visual-benefits, .auth-visual-content > small { display: none; }
  .auth-visual-content h2 { margin: 0; font-size: 39px; }
  .auth-panel { width: min(620px,92%); margin: 15px auto 35px; }
  .auth-brand-row { margin-bottom: 15px; }
  .topbar span:nth-child(2) { display: none; }
  .store-header { grid-template-columns: auto 150px 1fr auto auto; gap: 10px; padding: 10px 15px; }
  .mobile-menu { display: block; }
  .store-logo img { width: 145px; }
  .account-menu > button div, .cart-header div { display: none; }
  .department-nav { display: none; }
  .member-bar { grid-template-columns: 48px 1fr; }
  .member-bar button { display: none; }
  .welcome-row { width: 100%; grid-template-columns: 1fr; margin-top: 0; }
  .category-menu, .side-promos { display: none; }
  .compact-hero { min-height: 420px; }
  .quick-benefits { width: 100%; grid-template-columns: repeat(2,1fr); }
  .quick-benefits > div:nth-child(2) { border-right: 0; }
  .quick-benefits > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
  .product-modal { grid-template-columns: 1fr; }
  .product-modal > img { min-height: 320px; max-height: 370px; }
  .form-grid { grid-template-columns: repeat(2,1fr); }
  .pix-payment { grid-template-columns: 250px 1fr; gap: 20px; padding: 18px; }
  .qr-card img { width: 190px; height: 190px; }
  .card-detail { grid-template-columns: 1fr; }
  .account-modal { grid-template-columns: 220px 1fr; }
  .account-modal-side { padding: 35px 20px; }
  .account-modal-content { padding: 45px 28px; }
}

@media (max-width: 560px) {
  .auth-visual { min-height: 190px; }
  .auth-visual-content > p { font-size: 7px; }
  .auth-visual-content h2 { font-size: 31px; }
  .auth-logo { width: 170px; }
  .secure-badge { display: none; }
  .auth-main-title { font-size: 26px; }
  .auth-tabs { grid-template-columns: 1fr; }
  .auth-tabs button { min-height: 61px; }
  .auth-form-section { padding: 17px; }
  .auth-form-section form { grid-template-columns: 1fr; }
  .auth-control, .auth-control.wide { grid-column: 1; }
  .auth-safe { gap: 7px; font-size: 7px; }
  .topbar { gap: 18px; font-size: 7px; }
  .store-header { grid-template-columns: auto 1fr auto auto; min-height: 68px; }
  .store-logo img { width: 155px; }
  .header-search { grid-column: 1/-1; grid-row: 2; height: 40px; }
  .member-bar { width: 100%; margin-top: 0; padding: 12px 15px; border-right: 0; border-left: 0; }
  .member-bar p { display: none; }
  .compact-hero { min-height: 365px; }
  .hero-copy { left: 7%; right: 7%; }
  .hero-copy h1 { font-size: 43px; }
  .quick-benefits > div { padding: 10px; }
  .catalog { padding-right: 14px; padding-left: 14px; }
  .catalog-category-header { align-items: flex-start; flex-direction: column; }
  .catalog-category-header h2 { font-size: 29px; }
  .catalog-category-header > span { display: none; }
  .store-category-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 37px; }
  .store-category-card { height: 180px; }
  .store-category-copy { top: 15px; right: 15px; bottom: 15px; left: 15px; }
  .store-category-copy strong { font-size: 22px; }
  .store-category-copy em { min-height: 28px; font-size: 7px; line-height: 1.35; }
  .store-category-copy b { margin-top: 8px; font-size: 7px; }
  .catalog-heading { align-items: flex-start; flex-direction: column; }
  .catalog-heading h2 { font-size: 28px; }
  .catalog-sort { width: 100%; }
  .catalog-sort > span { text-align: left; }
  .sort-options { width: 100%; }
  .sort-options button { flex: 1; padding: 0 7px; }
  .hat-organizer { margin-top: 20px; }
  .hat-organizer-intro { align-items: flex-start; flex-direction: column; padding: 19px; }
  .hat-search-box { margin: 14px; }
  .hat-filter-grid { grid-template-columns: 1fr 1fr; padding: 0 14px 15px; }
  .hat-filter-summary { align-items: flex-start; flex-direction: column; }
  .shipping-simulator { grid-template-columns: 28px 1fr; }
  .shipping-simulator .cep-form { grid-column: 1/-1; }
  .shipping-simulator .cep-form input { width: auto; flex: 1; }
  .shipping-result { grid-column: 1/-1; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .product-image { height: 205px; }
  .product-info { padding: 12px; }
  .product-info h3 { min-height: 42px; font-size: 14px; }
  .product-actions { grid-template-columns: 1fr; }
  .coupon-grid { grid-template-columns: 1fr; }
  .coupon-grid button { min-height: 125px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { border-bottom: 1px solid rgba(255,255,255,.07); }
  .footer-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); padding: 24px 0; }
  .product-modal > div { padding: 42px 22px 25px; }
  .account-modal { width: 100%; max-height: 96vh; grid-template-columns: 1fr; overflow-y: auto; }
  .account-modal-side { min-height: auto; display: grid; grid-template-columns: 50px 1fr; gap: 8px 13px; padding: 24px 20px 17px; }
  .account-large-avatar { grid-row: 1/4; width: 50px; height: 50px; margin: 0; font-size: 21px; }
  .account-modal-side h2 { margin: 0; font-size: 22px; }
  .account-modal-side p { display: none; }
  .account-modal-side button { width: auto; min-height: 34px; margin-top: 8px; }
  .account-modal-side button[data-account-tab="profile"] { grid-column: 1/2; }
  .account-modal-side button[data-account-tab="orders"] { grid-column: 2/3; }
  .account-modal-side a { grid-column: 1/-1; min-height: 35px; margin-top: 4px; }
  .account-modal-content { max-height: none; padding: 32px 18px; }
  .customer-order-card { grid-template-columns: 1fr auto; }
  .customer-order-card > div:nth-child(2),
  .customer-order-card > div:nth-child(3) { grid-row: 2; }
  .profile-stats-row { grid-template-columns: repeat(2,1fr); }
  .profile-actions-row { grid-template-columns: 1fr; }
  .customer-order-card .order-status { grid-row: 1; grid-column: 2; }
  .checkout-modal { width: 100%; max-height: 96vh; padding: 24px 16px 25px; }
  .checkout-head { align-items: flex-start; flex-direction: column; padding-right: 38px; }
  .checkout-steps { width: 100%; }
  .checkout-steps span { flex: 1; min-width: 0; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid label.wide { grid-column: span 2; }
  .option-cards { grid-template-columns: 1fr; }
  .payment-cards { grid-template-columns: 1fr 1fr; }
  .checkout-submit { align-items: stretch; flex-direction: column; }
  .checkout-submit > div { text-align: left; }
  .checkout-submit button { width: 100%; }
  .pix-payment { grid-template-columns: 1fr; padding: 12px; }
  .qr-card img { width: 220px; height: 220px; }
  .payment-actions { flex-direction: column-reverse; }
  .payment-actions button { width: 100%; }
  .simulation-notice { align-items: flex-start; flex-direction: column; }
  .provider-payment, .paid-receipt { padding: 25px 16px; }
  .copy-field { flex-direction: column; }
  .copy-field button { min-height: 40px; }
  .whatsapp { right: 14px; bottom: 14px; padding: 0 12px 0 6px; height: 52px; border-radius: 50%; width: 52px; padding: 0; justify-content: center; }
  .whatsapp-label { display: none; }
  .whatsapp svg { width: 30px; height: 30px; }
  .toast { right: 14px; bottom: 14px; left: 14px; }
}

@media (max-width: 390px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-image { height: 285px; }
  .payment-cards, .form-grid { grid-template-columns: 1fr; }
  .form-grid label.wide { grid-column: 1; }
  .card-fields { grid-template-columns: 1fr; }
  .card-fields .wide { grid-column: 1; }
}

/* Visual refinement and readability */
body { font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.topbar { min-height: 36px; gap: clamp(22px,7vw,100px); font-size: 10px; letter-spacing: .06em; }
.topbar a { color: rgba(255,255,255,.82); text-decoration: none; }
.topbar a:hover { color: #fff; }
.contact-promo { color: #fff; background: linear-gradient(145deg,#302017,#815738); text-decoration: none; }
.contact-promo::after { border-color: rgba(255,255,255,.24); }
.contact-promo b { margin-bottom: 12px; color: #f1d5ad; font-family: Georgia,serif; font-size: 19px; }
.contact-promo {
  isolation:isolate;
  background:
    linear-gradient(115deg,rgba(24,14,9,.94),rgba(75,43,24,.73)),
    url("assets/hero-country.png") center 58%/cover;
}
.contact-promo::before {
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(circle at 85% 15%,rgba(228,190,136,.22),transparent 31%);
  content:"";
}
.contact-promo-mark {
  position:absolute;
  z-index:1;
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  color:#f2d4aa;
  background:rgba(20,12,8,.34);
  backdrop-filter:blur(5px);
  font-size:17px;
  font-style:normal;
}
.category-menu small,.quick-benefits small,.store-category-copy em,.catalog-category-header p,.catalog-heading>div>p:last-child,.filters details label,.shipping-simulator small { font-size: 10px; }
.category-menu strong,.quick-benefits strong { font-size: 12px; }
.catalog-heading h2 { font-size: 37px; }
.store-category-card { height: 215px; border-radius: 16px; }
.store-category-card.active::after { width: 31px; height: 31px; }
.hat-organizer { border-radius: 18px; box-shadow: 0 22px 55px rgba(54,33,20,.09); }
.hat-search-box,.hat-filter-control summary { border-radius: 10px; }
.hat-search-box input { font-size: 15px; }
.hat-filter-control summary,.hat-menu-options button { font-size: 11px; }
.product-grid { gap: 22px; }
.product-card { overflow: hidden; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 13px 34px rgba(49,30,19,.09); }
.product-card:hover { box-shadow: 0 24px 48px rgba(47,29,18,.16); transform: translateY(-5px); }
.product-image { height: 315px; background: linear-gradient(145deg,#efe7dc,#d9c5ab); }
.product-image::after { position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(transparent,rgba(25,16,11,.34)); content: ""; pointer-events: none; }
.image-shine { position: absolute; z-index: 1; inset: 0; background: linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 61%); opacity: 0; transform: translateX(-40%); transition: .45s; }
.product-card:hover .image-shine { opacity: 1; transform: translateX(40%); }
.badge { z-index: 2; top: 16px; left: 16px; border-radius: 20px; padding: 8px 11px; font-size: 9px; }
.favorite { z-index: 2; top: 14px; right: 14px; width: 39px; height: 39px; box-shadow: 0 8px 18px rgba(30,18,11,.12); }
.quick-look { position: absolute; z-index: 3; right: 16px; bottom: 15px; min-height: 37px; border: 1px solid rgba(255,255,255,.5); border-radius: 20px; padding: 0 14px; color: #fff; background: rgba(29,18,12,.58); backdrop-filter: blur(8px); cursor: pointer; font-size: 10px; font-weight: 800; opacity: 0; transform: translateY(8px); }
.product-card:hover .quick-look { opacity: 1; transform: none; }
.product-info { padding: 21px 20px 20px; }
.product-info>small { font-size: 9px; }
.product-info h3 { min-height: 43px; margin: 9px 0 8px; font-size: 19px; line-height: 1.2; }
.product-rating,.rating { font-size: 10px; }
.hat-product-details span { border-radius: 12px; padding: 7px 10px; font-size: 9px; }
.product-prices strong { font-size: 24px; }
.product-prices s { font-size: 11px; }
.installment { min-height: 28px; margin: 7px 0 15px; font-size: 10px; line-height: 1.4; }
.product-actions { grid-template-columns: 1fr auto; gap: 9px; }
.product-actions button { min-height: 46px; border-radius: 12px; padding: 0 15px; font-size: 10px; }
.product-actions button:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: linear-gradient(120deg,#51301d,#835735); box-shadow: 0 10px 22px rgba(83,48,27,.22); }
.product-actions button:first-child b { font-size: 17px; }
.product-actions button:last-child { border-color: #d7c6b6; color: #655349; background: #faf7f2; }
/* footer dark-mode overrides removed — footer is always dark */
.social-links { display:flex; flex-direction:column; gap:8px; }
.social-links a { display:inline-flex; align-items:center; gap:10px; border:none; border-radius:10px; padding:10px 14px; font-size:12px; font-weight:700; color:#fff; text-decoration:none; transition:transform .2s, filter .2s; width:100%; max-width:200px; }
.social-links a:hover { transform:translateY(-2px); filter:brightness(1.1); }
.social-links a i { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.18); font-style:normal; flex-shrink:0; }
.social-links a i svg { display:block; }
.social-links a[data-social="instagram"] { background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.social-links a[data-social="facebook"] { background:#1877f2; }
.social-links a[data-social="tiktok"] { background:#111; }
.social-links a span { white-space:nowrap; }
/* Gallery preview on homepage */
.gallery-preview-section{padding:60px max(5vw,24px) 56px;background:linear-gradient(160deg,#130d08,#2a1a0f);position:relative;overflow:hidden}
.gallery-preview-section::before{content:'';position:absolute;top:-60px;right:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(196,134,74,.12) 0%,transparent 70%);pointer-events:none}
.gallery-preview-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.gallery-preview-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#c4864a;margin-bottom:10px}
.gallery-preview-header h2{font-family:Georgia,serif;font-size:clamp(22px,4vw,36px);font-weight:400;color:#fff;margin-bottom:8px}
.gallery-preview-header p{color:rgba(255,255,255,.5);font-size:14px}
.gallery-preview-cta{font-size:12px;font-weight:800;color:#c4864a;text-decoration:none;letter-spacing:.05em;white-space:nowrap;border:1px solid rgba(196,134,74,.3);padding:10px 20px;border-radius:8px;transition:.2s}
.gallery-preview-cta:hover{background:rgba(196,134,74,.12);color:#e4b07a}
.gallery-preview-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:flex-start}
.gallery-preview-card{border-radius:16px;overflow:hidden;background:#1a100a;border:1px solid rgba(255,255,255,.07);transition:transform .3s,box-shadow .3s;text-decoration:none;display:block;cursor:pointer;flex:0 0 220px;width:220px}
.gallery-preview-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 0 1px rgba(196,134,74,.2)}
.gallery-preview-media{position:relative;overflow:hidden;background:#0a0604;height:280px}
.gallery-preview-media video{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.gallery-preview-media img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.gallery-preview-card:hover .gallery-preview-media img{transform:scale(1.05)}
.gallery-preview-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);transition:background .2s}
.gallery-preview-card:hover .gallery-preview-play{background:rgba(0,0,0,.15)}
.gallery-preview-play-btn{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .2s}
.gallery-preview-card:hover .gallery-preview-play-btn{transform:scale(1.1)}
.gallery-preview-badge{position:absolute;bottom:8px;left:8px;padding:3px 9px;border-radius:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);font-size:9px;font-weight:800;letter-spacing:.06em;color:#c4864a;border:1px solid rgba(196,134,74,.25)}
.gallery-preview-info{padding:16px 18px 18px;display:flex;align-items:center;gap:12px}
.gallery-preview-avatar{width:38px;height:38px;border-radius:50%;background:#1a100a;border:2px solid rgba(196,134,74,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.gallery-preview-avatar img{width:100%;height:100%;object-fit:contain}
.gallery-preview-name{font-size:14px;font-weight:700;color:#f4ede0;display:block;line-height:1.3}
.gallery-preview-role{font-size:11px;color:#c4864a;display:block;margin-top:2px}
@media(max-width:700px){
  .gallery-preview-section{padding:36px 0 36px}
  .gallery-preview-header{flex-direction:column;align-items:flex-start;padding:0 16px;gap:10px}
  .gallery-preview-grid{
    display:flex;flex-direction:row;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:0 16px 10px;scrollbar-width:none;
  }
  .gallery-preview-grid::-webkit-scrollbar{display:none}
  .gallery-preview-card{flex:0 0 44vw;max-width:180px;scroll-snap-align:start}
  .gallery-preview-section > div:last-child{padding:0 16px}
}
@media(min-width:701px) and (max-width:980px){
  .gallery-preview-grid{grid-template-columns:repeat(3,1fr)}
}

/* Gallery section */
.gallery-section { padding: 70px max(5vw,24px) 60px; background: linear-gradient(160deg,#1a110c,#2e1a0e); }
.gallery-header { text-align:center; margin-bottom: 44px; color:#fff; }
.gallery-header small { display:block; font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#c4864a; margin-bottom:10px; }
.gallery-header h2 { font-family:Georgia,serif; font-size:clamp(26px,4vw,40px); font-weight:400; margin-bottom:12px; }
.gallery-header p { color:rgba(255,255,255,.55); font-size:14px; max-width:500px; margin:0 auto; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.gallery-card { border-radius:16px; overflow:hidden; background:#2a1a10; box-shadow:0 8px 32px rgba(0,0,0,.4); transition:transform .25s, box-shadow .25s; cursor:default; }
.gallery-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.55); }
.gallery-card-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:#1a0f08; }
.gallery-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gallery-card:hover .gallery-card-media img { transform:scale(1.04); }
.gallery-card-media iframe { width:100%; height:100%; border:none; }
.gallery-card-media .gallery-play { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); }
.gallery-card-media .gallery-play span { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; font-size:20px; }
.gallery-card-body { padding:18px 20px 20px; }
.gallery-card-person { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.gallery-card-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#c4864a,#6b4423); display:grid; place-items:center; font-weight:800; font-size:16px; color:#fff; flex-shrink:0; }
.gallery-card-person div strong { display:block; font-size:14px; font-weight:700; color:#f4e9da; }
.gallery-card-person div span { font-size:11px; color:#9a7a60; }
.gallery-card-desc { font-size:13px; line-height:1.6; color:rgba(255,255,255,.6); font-style:italic; }
.gallery-card-badge { display:inline-block; margin-top:10px; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:700; background:rgba(196,134,74,.2); color:#c4864a; }

.side-drawer,.product-modal,.account-modal,.checkout-modal { border-radius: 22px; }
.product-modal>img { min-height: 570px; }
.product-modal>div { padding: 60px 45px 40px; }
.product-modal h2 { font-size: 36px; }
.modal-product-specs span,.modal-shipping { border-radius: 12px; }
#modalSizeOptions button { min-width: 62px; height: 52px; border-radius: 12px; font-size: 11px; }
.checkout-cep-status{margin:8px 0 18px;padding:11px 13px;border-radius:10px;background:#f5eee5;color:#5d493b}
@media(max-width:1050px){.footer-inner{grid-template-columns:1fr 1fr 1fr}.footer-brand{grid-column:1/-1;border-right:none;border-bottom:1px solid rgba(255,255,255,.07);padding:40px 0 30px}}
/* ── 2. SPEC CARDS PREMIUM ───────────────────────────────────── */
/* (aplicado via override abaixo na seção premium) */

/* ── 3. BOTÃO COLOCAR NO CARRINHO ────────────────────────────── */
.purchase-button {
  display:flex; align-items:center; justify-content:space-between;
  border-radius:14px; min-height:58px; padding:0 22px;
  background:linear-gradient(135deg,#5c3220 0%,#a0592a 50%,#7a3e18 100%);
  background-size:200% 100%; background-position:100%;
  box-shadow:0 8px 24px rgba(101,56,22,.38);
  transition:background-position .4s,transform .2s,box-shadow .2s;
}
.purchase-button:hover:not(:disabled) { background-position:0%; transform:translateY(-2px); box-shadow:0 14px 32px rgba(101,56,22,.48); }
.purchase-button:disabled { background:linear-gradient(135deg,#b8a898,#a09080); box-shadow:none; cursor:not-allowed; }
.purchase-button svg { flex-shrink:0; transition:transform .2s; }
.purchase-button:hover:not(:disabled) svg { transform:translateX(3px); }

/* Premium product details and cart */
.cart-drawer {
  width:min(510px,96vw);
  padding:0;
  overflow:hidden;
  background:#f7f2eb;
}
.cart-drawer-title {
  padding:20px 22px 18px;
  color:#fff;
  background:
    radial-gradient(circle at 90% 20%,rgba(218,177,119,.25),transparent 45%),
    radial-gradient(circle at 10% 80%,rgba(196,134,74,.1),transparent 40%),
    linear-gradient(135deg,#1a0e07,#4a2a12);
}
.cart-title-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cart-title-brand { display:flex; align-items:center; gap:8px; }
.cart-title-logo { width:28px; height:28px; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; }
.cart-title-brand span { font-family:Georgia,serif; font-size:13px; font-weight:400; color:rgba(255,255,255,.7); letter-spacing:.04em; }
.cart-title-info h2 { font-family:Georgia,serif; font-size:26px; font-weight:400; margin:0 0 5px; }
.cart-title-info span { display:block; font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.04em; }
.cart-title-divider { margin-top:16px; height:1px; background:linear-gradient(90deg,rgba(196,134,74,.5),rgba(196,134,74,.1),transparent); }
.cart-items { padding:12px 14px 6px; }
.cart-item {
  position:relative;
  grid-template-columns:130px minmax(0,1fr);
  gap:14px;
  margin-bottom:14px;
  padding:0;
  border:1px solid rgba(94,61,37,.12);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px rgba(52,31,18,.07);
  overflow:hidden;
}
.cart-item-image { position:relative; height:160px; overflow:hidden; border-radius:0; background:#ede4d5; }
.cart-item-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.cart-item:hover .cart-item-image img { transform:scale(1.04); }
.cart-item-image>span { position:absolute; right:6px; bottom:6px; left:6px; overflow:hidden; border-radius:8px; padding:5px 7px; color:#fff; background:rgba(31,19,12,.72); backdrop-filter:blur(6px); font-size:7px; font-weight:800; text-align:center; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.cart-item-content { min-width:0; display:flex; flex-direction:column; padding:12px 12px 12px 0; }
.cart-item-category { margin:0 28px 4px 0; overflow:hidden; color:var(--brown)!important; font-size:8px!important; font-weight:800; letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.cart-item h3 { margin:0 0 8px; font-size:14px; line-height:1.3; font-weight:600; }
.cart-item-size { align-self:flex-start; border:1px solid #dbcbb8; border-radius:10px; padding:4px 10px; color:#6b4423; background:linear-gradient(135deg,#fdf8f3,#f5ede2); font-size:9px; font-weight:700; margin-bottom:6px; }
.cart-item-size b { color:var(--brown); }
.cart-item-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; }
.cart-item-price { text-align:right; }
.cart-item-price small,.cart-item-price strong { display:block; }
.cart-item-price small { margin-bottom:2px; color:#96897f; font-size:9px; }
.cart-item-price strong { color:var(--brown); font-family:Georgia,serif; font-size:19px; font-weight:400; }
.cart-item-remove { position:absolute; top:8px; right:8px; width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:50%; color:#875b49; background:rgba(247,235,230,.92); cursor:pointer; font-size:15px; backdrop-filter:blur(4px); }
.qty { gap:0; margin:0; overflow:hidden; border:1px solid #dacbbb; border-radius:14px; background:#faf6f0; }
.qty button { width:32px; height:32px; border:0; background:transparent; font-size:16px; color:var(--brown); cursor:pointer; }
.qty span { min-width:28px; font-size:12px; font-weight:800; text-align:center; color:#352116; }
.empty-cart { align-content:center; gap:13px; padding:45px 25px; }
.empty-cart img { width:85px; margin:0 auto; opacity:.55; }
.empty-cart strong { font-size:25px; }
.empty-cart p { margin:7px 0 0; font-size:10px; }
.empty-cart button { min-height:40px; border:1px solid var(--brown); border-radius:20px; padding:0 18px; color:var(--brown); background:transparent; cursor:pointer; font-size:9px; font-weight:800; text-transform:uppercase; }
.cart-close-btn { width:36px; height:36px; flex-shrink:0; display:grid!important; place-items:center!important; border:1px solid rgba(255,255,255,.25)!important; border-radius:50%!important; background:rgba(255,255,255,.12)!important; color:#fff!important; cursor:pointer; transition:.18s; font-size:0; }
.cart-close-btn:hover { background:rgba(255,255,255,.28)!important; }
.cart-bottom {
  padding:18px 20px 22px;
  border-top:1px solid rgba(92,59,36,.12);
  background:#fff;
  box-shadow:0 -12px 30px rgba(46,28,17,.07);
}
.cart-freight { padding:13px; border:1px solid #e0d2c1; border-radius:14px; background:#faf7f2; margin-bottom:14px; }
.cart-section-heading { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.cart-section-heading>span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--brown); background:#eee0cf; }
.cart-section-heading strong,.cart-section-heading small { display:block; }
.cart-section-heading strong { margin:0 0 2px; font-size:10px; }
.cart-section-heading small { color:#8b7e74; font-size:8px; }
.cart-freight .cep-form { min-height:42px; }
.cart-freight .cep-form input { border-radius:9px 0 0 9px; background:#fff; }
.cart-freight .cep-form button { border-radius:0 9px 9px 0; padding:0 16px; }
.cart-freight .shipping-result { margin:8px 0 0; line-height:1.4; font-size:11px; }
.totals { display:grid; grid-template-columns:1fr auto; gap:7px 12px; margin:0 0 6px; font-size:11px; align-items:center; }
.totals span { color:#7e7167; }
.totals b { color:#4f4138; font-weight:700; text-align:right; }
.totals strong { font-family:Georgia,serif; font-size:20px; font-weight:400; color:var(--brown); }
.totals strong:first-of-type { font-size:11px; font-family:inherit; color:#2c1a10; font-weight:700; }
.cart-installments { display:block; text-align:right; font-size:9px; color:#9e8f85; margin-bottom:14px; }
.cart-checkout-button {
  width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between;
  border:none; border-radius:14px; padding:0 20px;
  background:linear-gradient(135deg,var(--brown),#7a3e18);
  color:#fff; font-size:13px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 18px rgba(101,56,22,.35); transition:.18s;
}
.cart-checkout-button:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(101,56,22,.45); }
.cart-checkout-button b { font-size:20px; }
.cart-trust { display:flex; justify-content:center; gap:16px; margin-top:14px; }
.cart-trust>span { display:flex; align-items:center; gap:4px; font-size:9px; color:#8e8177; }
.cart-trust svg { color:var(--brown); flex-shrink:0; }

.product-modal {
  width:min(1080px,96vw);
  grid-template-columns:minmax(380px,.92fr) minmax(430px,1.08fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
}
.product-modal-media { position:relative; min-height:650px; overflow:hidden; background:#f5f0ea; }
.product-modal-media::before { display:none; }
.product-modal-media::after { position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(transparent,rgba(20,10,5,.5)); content:""; pointer-events:none; z-index:1; }
.modal-carousel { width:100%; height:100%; min-height:650px; position:relative; overflow:hidden; }
.modal-carousel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; opacity:0; transition:opacity .35s; pointer-events:none; }
.modal-carousel img.active { opacity:1; pointer-events:auto; }
.carousel-dots { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.carousel-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:.2s; }
.carousel-dot.active { background:#fff; transform:scale(1.25); }
.carousel-prev,.carousel-next { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.45); border:none; color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.carousel-prev { left:12px; }
.carousel-next { right:12px; }
.carousel-prev:hover,.carousel-next:hover { background:rgba(0,0,0,.7); }
.product-modal-badge { position:absolute; z-index:1; top:22px; left:22px; border:1px solid rgba(255,255,255,.48); border-radius:20px; padding:8px 12px; color:#fff; background:rgba(31,19,12,.58); backdrop-filter:blur(8px); font-size:8px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.product-media-seal { position:absolute; z-index:1; right:22px; bottom:21px; left:22px; display:flex; align-items:center; gap:10px; color:#fff; }
.product-media-seal img { width:52px; height:52px; object-fit:contain; filter:brightness(0) invert(1); }
.product-media-seal span { font-family:Georgia,serif; font-size:12px; line-height:1.2; }
/* ── MODAL CONTENT LAYOUT ─────────────────────────────────────── */
.product-modal-content {
  max-height:92vh; overflow-y:auto;
  padding:36px 38px 40px!important;
  display:flex; flex-direction:column; gap:0;
}
.product-modal-content>p:first-child {
  margin:0 0 6px;
  display:inline-flex; align-items:center; gap:6px;
  color:var(--brown); font-size:9px; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase;
}
.product-modal-content h2 {
  margin:0 0 10px; font-size:34px; line-height:1.05;
  color:#1e0f07; font-family:Georgia,serif; font-weight:400;
}
.product-modal-status {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:12px; padding-bottom:14px;
  border-bottom:1px solid #ede5d8;
}
.stock-status {
  border-radius:20px; padding:6px 14px;
  color:#2f7048; background:#e4f5ec;
  font-size:9px; font-weight:800; letter-spacing:.04em;
  border:1px solid rgba(47,112,72,.15);
}
.stock-status.out { color:#954d3f; background:#f7e8e4; border-color:rgba(149,77,63,.15); }
.product-modal-description {
  margin:0 0 16px!important; color:#6b5a4f!important;
  font-size:13px!important; line-height:1.7!important;
  border-left:3px solid rgba(196,134,74,.3);
  padding-left:12px!important;
}

/* Price panel */
.product-price-panel {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0 0 16px; padding:16px 20px;
  border:1.5px solid #e0ccb4; border-radius:16px;
  background:linear-gradient(135deg,#fdf8f0,#f5e8d4);
  box-shadow:0 2px 12px rgba(101,56,22,.07);
}
.product-price-panel small,.product-price-panel strong,.product-price-panel s { display:block; }
.product-price-panel small { margin-bottom:4px; color:#8d7c70; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.product-price-panel #modalPrice { margin:0; color:#3d1f0d; font-size:32px; font-weight:700; font-family:Georgia,serif; }
.product-price-panel s { margin-top:3px; color:#a89080; font-size:11px; text-decoration-color:rgba(154,130,115,.5); }
.product-price-panel>span { max-width:150px; color:#7a6558; font-size:9px; line-height:1.5; text-align:right; }

/* Spec cards 2x2 */
.modal-product-specs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
.modal-product-specs span {
  border-radius:12px; padding:12px 14px;
  background:#fff!important;
  border:1.5px solid #ebe0d2!important;
  transition:.2s; position:relative; overflow:hidden;
}
.modal-product-specs span::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--brown),#c4864a);
  opacity:0; transition:.2s;
}
.modal-product-specs span:hover { border-color:var(--brown)!important; box-shadow:0 4px 12px rgba(101,56,22,.12); }
.modal-product-specs span:hover::before { opacity:1; }
.modal-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:10px; }
.modal-section-heading small,.modal-section-heading strong { display:block; }
.modal-section-heading small { margin-bottom:3px; color:var(--brown); font-size:7px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.modal-section-heading strong { font-family:Georgia,serif; font-size:17px; font-weight:400; }
.modal-section-heading>span { color:#95877d; font-size:8px; }

/* ── SELETOR DE ABA ─────────────────────────────────────────────── */
.modal-brim-picker { margin-bottom:22px; padding:16px 18px; border-radius:14px; background:#faf6f0; border:1px solid #ede0cf; }
.modal-brim-heading { margin-bottom:12px; }
.modal-brim-heading small { display:block; font-size:7px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--brown); margin-bottom:4px; }
.modal-brim-heading strong { display:block; font-family:Georgia,serif; font-size:17px; font-weight:400; color:#2c1a10; }
.modal-brim-options { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.brim-opt { min-width:64px; height:52px; display:flex; align-items:center; justify-content:center; border:1px solid #d8cdc2; border-radius:12px; background:#fff; color:#5e5249; font-size:14px; font-weight:800; cursor:pointer; transition:.18s; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.brim-opt span { display:none; }
.brim-opt:hover { border-color:var(--brown); color:var(--brown); background:#fef9f4; }
.brim-opt.active { border-color:var(--brown); color:#fff; background:var(--brown); box-shadow:0 3px 10px rgba(101,56,22,.3); }
.modal-brim-msg { min-height:15px; margin:4px 0 0; font-size:9px; color:#9e8f85; }
.modal-brim-msg.selected { color:#5a8a5a; font-weight:700; }

/* ── 1. SELOS DE GARANTIA ─────────────────────────────────────── */
.product-assurances { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; }
.product-assurances>span { min-height:72px; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:7px; border:1px solid #e8ddd0; border-radius:14px; color:#5d4a3d; background:linear-gradient(145deg,#fdf9f4,#f5ece0); text-align:center; transition:.2s; }
.product-assurances>span:hover { border-color:var(--brown); box-shadow:0 4px 14px rgba(101,56,22,.12); transform:translateY(-2px); }
.product-assurances b { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--brown),#7a3e18); box-shadow:0 3px 8px rgba(101,56,22,.3); }
.product-assurances b svg { stroke:#fff; }
.product-assurances small { font-size:8px; font-weight:700; color:#6b5347; }

@media(max-width:820px){
  #productModal { padding:0; align-items:flex-end; justify-content:center; }
  .product-modal { grid-template-columns:1fr; overflow-y:auto; width:100vw; max-height:96vh; border-radius:24px 24px 0 0; margin:0; }
  .product-modal-media { min-height:320px; max-height:380px; }
  .product-modal-media>img { min-height:320px; max-height:380px; object-fit:contain; padding:16px; }
  .modal-carousel { min-height:320px; max-height:380px; height:320px; width:100%; }
  .modal-carousel img { object-fit:cover; object-position:center 20%; }
  .product-modal-content { max-height:none; padding:28px 22px 30px!important; }
  .modal-product-specs { grid-template-columns:repeat(2,1fr); }
  .carousel-prev,.carousel-next { width:32px; height:32px; font-size:18px; }
}
@media(max-width:560px){
  .cart-drawer { width:100%; }
  .cart-item { grid-template-columns:88px minmax(0,1fr); padding:10px; }
  .cart-item-image { height:112px; }
  .cart-item-bottom { align-items:flex-start; flex-direction:column-reverse; }
  .cart-item-price { text-align:left; }
  .product-modal-content h2 { font-size:30px; }
  .product-price-panel { align-items:flex-start; flex-direction:column; gap:7px; }
  .product-price-panel>span { max-width:none; text-align:left; }
}
.password-reset-account { min-height: 42px; margin-top: 13px; border: 1px solid var(--brown); border-radius: 8px; padding: 0 14px; color: var(--brown); background: #fff; cursor: pointer; font-size: 10px; font-weight: 800; }
.payment-unavailable { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 16px; border: 1px solid #e0bd83; border-radius: 16px; padding: 18px 20px; color: #5d421e; background: linear-gradient(120deg,#fff8e9,#f5e6cb); }
.payment-unavailable>span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #9a671f; font-family: Georgia,serif; font-size: 21px; }
.payment-unavailable small,.payment-unavailable strong { display: block; }
.payment-unavailable small { margin-bottom: 5px; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.payment-unavailable strong { font-family: Georgia,serif; font-size: 18px; font-weight: 400; }
.payment-unavailable p { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }
.payment-studio { position: relative; overflow: hidden; border: 1px solid #7e573a; border-radius: 22px; padding: 24px; color: #f8eee2; background: radial-gradient(circle at 90% 0,rgba(198,143,77,.2),transparent 34%),linear-gradient(135deg,#1b120e,#422a1c 58%,#251710); box-shadow: 0 24px 55px rgba(36,21,13,.2); }
.payment-studio::before { position: absolute; inset: 8px; border: 1px solid rgba(236,199,148,.16); border-radius: 16px; pointer-events: none; content: ""; }
.payment-studio > * { position: relative; z-index: 1; }
.payment-studio-head { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.payment-studio-mark { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(244,209,160,.3); border-radius: 15px; background: rgba(255,255,255,.08); }
.payment-studio-mark img { width: 38px; height: 38px; filter: brightness(0) invert(1); }
.payment-studio-head small,.payment-studio-head strong { display: block; }
.payment-studio-head small { margin-bottom: 5px; color: #d9b27d; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.payment-studio-head strong { font-family: Georgia,serif; font-size: 23px; font-weight: 400; }
.payment-studio-head p { margin: 5px 0 0; color: rgba(255,255,255,.62); font-size: 11px; }
.integration-badge { border: 1px solid rgba(225,184,123,.42); border-radius: 20px; padding: 8px 12px; color: #efd5aa; background: rgba(225,184,123,.1); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.payment-method-showcase { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin: 20px 0 13px; }
.payment-method-card { min-height: 118px; display: grid; grid-template-columns: 43px 1fr; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; padding: 16px; color: #fff; background: rgba(255,255,255,.055); cursor: pointer; text-align: left; transition: .2s; }
.payment-method-card:hover,.payment-method-card.active { border-color: #d8a966; background: linear-gradient(145deg,rgba(218,168,96,.18),rgba(255,255,255,.075)); box-shadow: inset 0 0 0 1px rgba(216,169,102,.25),0 13px 25px rgba(0,0,0,.16); transform: translateY(-2px); }
.payment-method-card .method-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: #2c1b12; background: linear-gradient(145deg,#f3d7aa,#b87a39); font-size: 13px; font-weight: 900; }
.payment-method-card small,.payment-method-card strong,.payment-method-card em { display: block; }
.payment-method-card small { color: #caa87e; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.payment-method-card strong { margin: 4px 0; font-family: Georgia,serif; font-size: 18px; font-weight: 400; }
.payment-method-card em { color: rgba(255,255,255,.58); font-size: 9px; font-style: normal; }
.payment-method-card > b { grid-column: 1/-1; justify-self: end; border-radius: 12px; padding: 5px 8px; color: #f0d3a7; background: rgba(255,255,255,.08); font-size: 8px; text-transform: uppercase; }
.payment-choice-details { display: grid; grid-template-columns: minmax(180px,260px) 1fr; gap: 12px; align-items: center; margin: 0 0 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; padding: 13px 15px; background: rgba(255,255,255,.07); }
.payment-choice-details label { color: #f7dec0; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.payment-choice-details select { width: 100%; margin-top: 7px; border: 1px solid rgba(244,209,160,.36); border-radius: 12px; padding: 12px 13px; color: #fff7eb; background: rgba(13,8,5,.68); font-weight: 800; }
.payment-choice-details p { margin: 0; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.55; }
.payment-preview-panel { min-height: 176px; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; padding: 21px; background: rgba(7,4,3,.28); }
.pix-preview-art,.card-preview-art,.boleto-preview-art { min-height: 132px; display: grid; grid-template-columns: 145px 1fr; align-items: center; gap: 24px; }
.pix-preview-art small,.card-preview-art>div:last-child small,.boleto-preview-art small { color: #d4a969; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.pix-preview-art strong,.card-preview-art>div:last-child strong,.boleto-preview-art strong { display: block; margin: 7px 0; font-family: Georgia,serif; font-size: 23px; font-weight: 400; }
.pix-preview-art p,.card-preview-art>div:last-child p,.boleto-preview-art p { margin: 0; color: rgba(255,255,255,.63); font-size: 11px; line-height: 1.55; }
.fake-qr { width: 132px; height: 132px; border: 10px solid #f5e8d6; border-radius: 12px; background-color: #f5e8d6; background-image: linear-gradient(90deg,#291910 12px,transparent 12px),linear-gradient(#291910 12px,transparent 12px); background-size: 24px 24px; box-shadow: 0 10px 28px rgba(0,0,0,.25); opacity: .92; }
.card-preview-art { grid-template-columns: minmax(260px,340px) 1fr; }
.premium-card { min-height: 180px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 22px; background: radial-gradient(circle at 90% 10%,rgba(235,187,116,.38),transparent 29%),linear-gradient(145deg,#6e4328,#24150e); box-shadow: 0 18px 35px rgba(0,0,0,.3); }
.card-brand { color: #f2d5a9; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.card-chip { width: 40px; height: 29px; margin: 26px 0 20px; border-radius: 7px; background: linear-gradient(135deg,#f2d497,#9f7137); box-shadow: inset 0 0 0 1px rgba(67,39,20,.4); }
.premium-card strong { font-family: monospace; font-size: 18px; letter-spacing: .08em; }
.premium-card small { margin-top: auto; color: rgba(255,255,255,.58); font-size: 8px; letter-spacing: .09em; }
.boleto-preview-art { grid-template-columns: minmax(260px,360px) 1fr; }
/* ── PAGAMENTO CHAPÉU CENTER ────────────────────────────────── */
.cc-payment-section{padding:0;border:none;background:none}
.cc-pay-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#2d1810,#4a2810);border-radius:14px 14px 0 0;color:#fff}
.cc-pay-logo{display:flex;align-items:center;gap:10px}
.cc-pay-logo strong{display:block;font-size:14px;font-weight:800;color:#fff}
.cc-pay-logo small{display:block;font-size:10px;color:rgba(255,255,255,.55);margin-top:1px}
.cc-pay-secure{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.04em}
.cc-pay-options{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-top:none;border-bottom:none}
.cc-pay-option{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;text-align:center;border-right:1px solid var(--line);background:#fff;cursor:pointer;transition:background .18s,box-shadow .18s;user-select:none}
.cc-pay-option:last-child{border-right:none}
.cc-pay-option:hover{background:#f8f9ff}
.cc-pay-option.active{background:#f0f4ff;box-shadow:inset 0 -3px 0 #3b5bdb}
.cc-pay-pix.active{background:#e8faf8;box-shadow:inset 0 -3px 0 #009688}
.cc-pay-boleto.active{background:#f9f9f9;box-shadow:inset 0 -3px 0 #666}
.cc-pay-option-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.cc-pay-pix .cc-pay-option-icon{background:#e0f7f5;color:#009688}
.cc-pay-card .cc-pay-option-icon{background:#e8eaf6;color:#283593}
.cc-pay-boleto .cc-pay-option-icon{background:#f5f5f5;color:#555}
.cc-pay-option-info strong{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px}
.cc-pay-option-info span{display:block;font-size:10px;color:#888;line-height:1.4}
.cc-pay-option-badge{padding:3px 10px;border-radius:20px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.cc-pix-badge{background:#e0f7f5;color:#00796B}
.cc-card-badge{background:#e8eaf6;color:#283593}
.cc-boleto-badge{background:#f5f5f5;color:#616161}
.cc-pay-note{font-size:11px;color:#888;text-align:center;padding:12px 16px;border:1px solid var(--line);border-top:none;line-height:1.6;background:#fafafa}
.cc-pay-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--line);border-top:none;border-radius:0 0 14px 14px;background:#f9f7f4}
.cc-pay-brands{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
@media(max-width:580px){
  .cc-pay-options{grid-template-columns:1fr}
  .cc-pay-option{flex-direction:row;text-align:left;border-right:none;border-bottom:1px solid var(--line);padding:14px 16px}
  .cc-pay-option:last-child{border-bottom:none}
  .cc-pay-option-icon{flex-shrink:0}
}

.barcode-art { width: 100%; height: 96px; border: 12px solid #f5e8d6; border-radius: 12px; background: repeating-linear-gradient(90deg,#25160f 0 3px,transparent 3px 6px,#25160f 6px 8px,transparent 8px 13px),#f5e8d6; box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.payment-guard { display: flex; align-items: center; gap: 11px; margin-top: 13px; border-radius: 13px; padding: 12px 14px; color: #e7c99d; background: rgba(225,169,92,.09); font-size: 10px; }
.payment-guard > span { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(231,201,157,.35); border-radius: 50%; font-weight: 900; }
.payment-guard p { margin: 0; line-height: 1.45; }
.payment-guard strong { color: #fff1dc; }
.order-received { max-width: 720px; margin: 0 auto; padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,#fff,#f8efe4); box-shadow: 0 18px 42px rgba(47,29,18,.09); text-align: center; }
.order-received-mark { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; color: #fff; background: var(--brown); font-size: 28px; }
.order-received>small { color: var(--brown); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.order-received h3 { margin: 9px 0; font-family: Georgia,serif; font-size: 31px; font-weight: 400; }
.order-received>p { color: #6d6159; font-size: 12px; line-height: 1.6; }
.notification-status { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0; text-align: left; }
.notification-status span { border-radius: 11px; padding: 13px; font-size: 10px; }
.notification-status span b { display: block; margin-bottom: 4px; }
.notification-status .sent { color: #176a3d; background: #e5f5eb; }
.notification-status .waiting { color: #7b5b28; background: #fff1d8; }
.order-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.order-contact-actions a { display: flex; align-items: center; justify-content: center; border-radius: 11px; text-decoration: none; }
.order-finish-link { margin-top: 16px; border: 0; color: var(--brown); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; text-decoration: underline; }
.reset-modal { z-index: 1200; }
.reset-card { position: relative; width: min(490px,94vw); border-radius: 22px; padding: 38px; background: #fff; box-shadow: 0 28px 80px rgba(28,17,11,.3); text-align: center; }
.reset-brand-mark { width: 82px; height: 70px; margin: 0 auto 16px; overflow: hidden; }
.reset-brand-mark img { width: 270px; max-width: none; height: 70px; object-fit: contain; object-position: left center; }
.reset-card>small { color: var(--brown); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.reset-card h2 { margin: 8px 0; font-family: Georgia,serif; font-size: 29px; font-weight: 400; }
.reset-card>p { color: #766a62; font-size: 11px; line-height: 1.55; }
.reset-card form { display: grid; gap: 12px; margin-top: 20px; text-align: left; }
.reset-card label { color: #665950; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.reset-card input { width: 100%; height: 46px; display: block; margin-top: 6px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; outline: 0; font-size: 12px; text-transform: none; }
.reset-message { min-height: 18px; color: var(--brown)!important; font-weight: 800; }
.reset-contact { display: block; margin-top: 15px; color: #8a7e75; font-size: 9px; }
.toast { right: 25px; bottom: 25px; max-width: 430px; min-height: 78px; display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 14px; border: 1px solid #d7c0a3; border-radius: 18px; padding: 11px 18px 11px 11px; color: var(--ink); background: linear-gradient(125deg,#fff,#f5e9da); box-shadow: 0 22px 60px rgba(37,22,14,.22); font-size: 11px; }
.toast-mark { width: 58px; height: 56px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e2cfb7; border-radius: 14px; background: #fffaf3; }
.toast-mark img { width: 43px; height: 43px; object-fit: contain; }
.toast small,.toast strong { display: block; }
.toast small { margin-bottom: 5px; color: var(--brown); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.toast strong { font-family: Georgia,serif; font-size: 14px; font-weight: 400; line-height: 1.35; }

/* Topbar — evita overlap em qualquer tamanho */
.topbar-email { display: none; }
@media (min-width: 1400px) {
  .topbar-email { display: inline; }
}
@media (max-width: 1350px) {
  /* Esconde label "Tema escuro/claro" — só mantém o toggle */
  .theme-toggle > span:last-child { display: none; }
  /* Esconde label "Horário de Limeira" — só mantém o número */
  .limeira-clock small { display: none; }
}
@media (max-width: 1049px) {
  .limeira-clock { display: none; }
}
@media (max-width: 1000px) {
  .limeira-weather { display: none; }
}
@media (max-width: 900px) and (min-width: 521px) {
  .topbar-left { gap: 12px; }
  .topbar-right { gap: 7px; }
}
@media (max-width: 760px) and (min-width: 521px) {
  /* .topbar-contact { display: none; } */
}

@media (max-width: 820px) {
  .quick-look { opacity: 1; transform: none; }
  .product-image { height: 245px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
  .order-contact-actions,.notification-status { grid-template-columns: 1fr; }
  .payment-method-showcase { grid-template-columns: 1fr; }
  .payment-choice-details { grid-template-columns: 1fr; }
  .pix-preview-art,.card-preview-art,.boleto-preview-art { grid-template-columns: 1fr; }
  .fake-qr { margin: auto; }
}
@media (max-width: 520px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 4px; padding: 8px 14px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-image { height: 340px; }
  .footer-inner { grid-template-columns: 1fr; }
  .reset-card { padding: 31px 20px; }
  .toast { right: 12px; bottom: 12px; left: 12px; }
  .payment-studio { padding: 17px; }
  .payment-studio-head { grid-template-columns: 48px 1fr; }
  .integration-badge { grid-column: 1/-1; justify-self: start; }
  .premium-card { min-height: 160px; padding: 18px; }
}

/* Accessible text sizing for account and checkout flows */
.auth-control label,
.auth-message,
.account-modal-side button,
.account-modal-side a,
#profileForm label,
.account-modal-content section > p,
.customer-order-card small,
.customer-order-card div > span,
.empty-orders p,
.checkout-head small,
.checkout-head p,
.checkout-steps span,
.form-grid label,
.option-cards small,
.checkout-submit small,
.payment-stage-top small {
  font-size: 11px;
}
.auth-control input,
#profileForm input,
.form-grid input,
.form-grid select {
  font-size: 14px;
}
.option-cards b,
.option-cards strong,
.checkout-submit button,
.password-reset-account {
  font-size: 12px;
}
.customer-order-card strong {
  font-size: 16px;
}
.order-status {
  font-size: 9px;
}

/* Limeira information bar and persistent light/dark appearance */
.topbar{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:7px max(3.5vw,24px);
  text-transform:none;
}
.topbar::before{display:none}
.topbar-left,.topbar-right{display:flex;align-items:center}
.topbar-left{gap:clamp(12px,2vw,32px)}
.topbar-left>span{letter-spacing:.08em;text-transform:uppercase}
.topbar-right{gap:10px}
.limeira-weather,.limeira-clock{
  min-height:32px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(255,255,255,.055);
}
.weather-icon{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;color:#f1c987;background:rgba(255,255,255,.09);font-size:16px}
.limeira-weather small,.limeira-weather strong,.limeira-clock small,.limeira-clock strong{display:block;white-space:nowrap}
.limeira-weather small,.limeira-clock small{margin-bottom:2px;color:rgba(255,255,255,.52);font-size:7px;letter-spacing:.1em;text-transform:uppercase}
.limeira-weather strong{color:#fff;font-size:9px;font-weight:800}
.limeira-clock{display:block;min-width:112px;text-align:center}
.limeira-clock strong{color:#fff;font-family:"Courier New",monospace;font-size:13px;letter-spacing:.08em}
.lang-toggle{display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:3px}
.lang-btn{display:flex;align-items:center;gap:5px;background:none;border:none;color:rgba(255,255,255,.55);font-size:9px;font-weight:800;cursor:pointer;padding:5px 10px;border-radius:18px;letter-spacing:.05em;text-transform:uppercase;transition:.2s;line-height:1}
.lang-flag{font-size:13px;line-height:1}
.lang-code{font-size:9px;font-weight:800;letter-spacing:.06em}
.lang-btn.active{color:#fff;background:linear-gradient(135deg,rgba(196,134,74,.85),rgba(101,56,22,.9));box-shadow:0 2px 8px rgba(0,0,0,.25)}
.lang-btn:hover:not(.active){color:#fff;background:rgba(255,255,255,.1)}
.lang-sep{display:none}
.theme-toggle{min-height:32px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:4px 10px 4px 5px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.055);cursor:pointer;font-size:8px;font-weight:800}
.theme-toggle-track{position:relative;width:34px;height:22px;border-radius:13px;background:#f3d29d;transition:.25s}
.theme-toggle-track i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:.25s}
[data-theme="dark"] .theme-toggle-track{background:#795b41}
[data-theme="dark"] .theme-toggle-track i{transform:translateX(12px);background:#1b1410}

html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f5ede5;
  --brown:#c69566;
  --brown-dark:#100c0a;
  --sand:#8b6e52;
  --cream:#251c17;
  --paper:#120e0c;
  --green:#49aa77;
  --gold:#e4b64a;
  --red:#dc7865;
  --line:rgba(255,255,255,.13);
  --shadow:0 18px 55px rgba(0,0,0,.48);
}
[data-theme="dark"] body{background:#120e0c;color:var(--ink)}
[data-theme="dark"] main,
[data-theme="dark"] .catalog{background:#120e0c}
[data-theme="dark"] .auth-gate{background:#120e0c}
[data-theme="dark"] .auth-gate-close{color:var(--ink);background:#241b16}
[data-theme="dark"] .auth-panel,[data-theme="dark"] .auth-control label,[data-theme="dark"] .auth-main-copy{color:#d9cec5}
[data-theme="dark"] .auth-form-section,
[data-theme="dark"] .auth-tabs button,
[data-theme="dark"] .store-header,
[data-theme="dark"] .account-popover,
[data-theme="dark"] .category-menu,
[data-theme="dark"] .category-menu button,
[data-theme="dark"] .quick-benefits,
[data-theme="dark"] .sort-options,
[data-theme="dark"] .sort-options button,
[data-theme="dark"] .hat-organizer,
[data-theme="dark"] .hat-filter-control summary,
[data-theme="dark"] .hat-menu-options,
[data-theme="dark"] .hat-menu-options button,
[data-theme="dark"] .subcategory-chips button,
[data-theme="dark"] .filters,
[data-theme="dark"] .cep-form input,
[data-theme="dark"] .load-more-products,
[data-theme="dark"] .product-card,
[data-theme="dark"] .empty-products,
[data-theme="dark"] .side-drawer,
[data-theme="dark"] #mobileCategories button,
[data-theme="dark"] .qty button,
[data-theme="dark"] .product-modal,
[data-theme="dark"] .checkout-modal,
[data-theme="dark"] .account-modal,
[data-theme="dark"] #profileForm input,
[data-theme="dark"] .profile-stat,
[data-theme="dark"] .profile-email-row,
[data-theme="dark"] .profile-action-btn,
[data-theme="dark"] .customer-order-card,
[data-theme="dark"] .option-cards span,
[data-theme="dark"] .payment-cards span,
[data-theme="dark"] .qr-card,
[data-theme="dark"] .paid-receipt,
[data-theme="dark"] .password-reset-account,
[data-theme="dark"] .reset-card{
  color:var(--ink);
  background:#1d1713;
}
[data-theme="dark"] .catalog{
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#17110e,#100c0a);
}
[data-theme="dark"] .hat-search-box,
[data-theme="dark"] .hat-filter-summary,
[data-theme="dark"] .filter-context,
[data-theme="dark"] .hat-product-details span,
[data-theme="dark"] .modal-product-specs span,
[data-theme="dark"] #profileForm,
[data-theme="dark"] .payment-stage-top,
[data-theme="dark"] .provider-payment,
[data-theme="dark"] .checkout-cep-status,
[data-theme="dark"] .card-detail{
  color:var(--ink);
  background:#241b16;
}
[data-theme="dark"] .product-image{background:linear-gradient(145deg,#2d241e,#18120f)}
[data-theme="dark"] .hat-search-box input{color:var(--ink)}
[data-theme="dark"] .filter-context{color:#d8c9bd}
[data-theme="dark"] .hat-filter-summary,
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .catalog-sort>span,
[data-theme="dark"] .shipping-simulator small{color:#aa9b90}
[data-theme="dark"] .sort-options button.active,
[data-theme="dark"] .subcategory-chips button.active,
[data-theme="dark"] .hat-menu-options button.active{
  color:#fff;
  background:var(--brown);
}
[data-theme="dark"] .option-cards input:checked+span,
[data-theme="dark"] .payment-cards input:checked+span{background:#30231b}
[data-theme="dark"] .payment-detail{background:#19251e}
[data-theme="dark"] .favorite{color:#f5ede5;background:rgba(20,15,12,.88)}
[data-theme="dark"] .auth-tabs button.active{background:#2d2119}
[data-theme="dark"] .store-logo img,
[data-theme="dark"] .auth-logo{filter:brightness(0) invert(1)}
[data-theme="dark"] .header-search{background:#251d18}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{color:#f5ede5;background:#17120f}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#8f8177}
[data-theme="dark"] .member-bar{background:linear-gradient(90deg,#2b2019,#1c1612 62%)}
[data-theme="dark"] .member-bar button,
[data-theme="dark"] .secondary-button,
[data-theme="dark"] .light-button,
[data-theme="dark"] .product-actions button{color:var(--brown);background:#1d1713}
[data-theme="dark"] .catalog-category-header>span{background:#261d17}
[data-theme="dark"] .sort-options button:hover,
[data-theme="dark"] .hat-menu-options button:hover{background:#30231b}
[data-theme="dark"] .shipping-simulator{background:linear-gradient(105deg,#302219,#211813 55%,#18120f)}
[data-theme="dark"] .shipping-simulator>span{background:#211813}
[data-theme="dark"] #modalSizeOptions button{color:#d8ccc2;background:#1a1411}
[data-theme="dark"] #modalSizeOptions button:disabled{background:#110d0b}
[data-theme="dark"] #modalSizeOptions button:hover,
[data-theme="dark"] #modalSizeOptions button.active{color:#17120f;background:var(--brown)}
[data-theme="dark"] .payment-studio,
[data-theme="dark"] .payment-preview-panel{background:linear-gradient(145deg,#221812,#130e0b)}
[data-theme="dark"] .payment-unavailable,
[data-theme="dark"] .simulation-notice{color:#f1d5a7;background:linear-gradient(120deg,#332514,#251b11)}
[data-theme="dark"] .order-received{background:linear-gradient(145deg,#201814,#17110e)}
[data-theme="dark"] .notification-status .waiting{color:#e4c58d;background:#342716}
[data-theme="dark"] .copy-field input{background:#15100d}
[data-theme="dark"] .toast{background:linear-gradient(125deg,#241a15,#17110e)}
[data-theme="dark"] .toast-mark{background:#2c2019}
[data-theme="dark"] .product-info small,
[data-theme="dark"] .product-info .installment,
[data-theme="dark"] .catalog-category-header p,
[data-theme="dark"] .catalog-heading p,
[data-theme="dark"] .filters label,
[data-theme="dark"] .account-modal-content p{color:#ab9d92}
[data-theme="dark"] .cart-item,
[data-theme="dark"] .cart-bottom,
[data-theme="dark"] .cart-freight,
[data-theme="dark"] .product-price-panel,
[data-theme="dark"] .product-assurances>span{
  color:var(--ink);
  border-color:rgba(255,255,255,.1);
  background:#241b16;
}
[data-theme="dark"] .cart-item-size,
[data-theme="dark"] .qty{color:#d8ccc2;border-color:#594537;background:#18120f}
[data-theme="dark"] .cart-confidence{color:#cde6d6;background:#19251e}
[data-theme="dark"] .cart-confidence small,
[data-theme="dark"] .cart-safe-note,
[data-theme="dark"] .product-modal-description,
[data-theme="dark"] .product-price-panel>span{color:#b4a69b}
[data-theme="dark"] .product-price-panel #modalPrice,
[data-theme="dark"] .cart-item-price strong{color:#e1b184}
[data-theme="dark"] .product-modal-media{background:linear-gradient(145deg,#30251e,#17110e)}

@media(max-width:820px){
  .topbar span:nth-child(2){display:block}
}
@media(max-width:760px){
  .topbar{display:flex;align-items:stretch;flex-direction:column;gap:7px;padding:7px 12px}
  .topbar::before{display:none}
  .topbar-left,.topbar-right{width:100%;justify-content:center}
  .topbar-left{flex-wrap:wrap;gap:6px 15px;text-align:center}
  .topbar-left>span,.topbar-left>a{font-size:7px}
  .topbar-email{flex-basis:100%}
  .topbar-right{gap:6px}
  .limeira-weather{flex:1;min-width:0}
  .limeira-weather strong{overflow:hidden;text-overflow:ellipsis}
  .limeira-clock{min-width:98px}
  .theme-toggle{padding-right:5px}
  .theme-toggle>span:last-child{display:none}
}
@media(max-width:420px){
  .limeira-weather{padding-right:7px;padding-left:7px}
  .limeira-clock{min-width:91px;padding-right:6px;padding-left:6px}
  .limeira-clock strong{font-size:12px}
}

/* Readability system */
body{font-size:15px;line-height:1.55}
body small{font-size:11px!important;line-height:1.45}
body p,body li{font-size:14px!important;line-height:1.6}
body label{font-size:12px!important}
body button,
body input,
body select,
body textarea{font-size:13px!important;line-height:1.35}
.topbar{min-height:38px;font-size:11px;letter-spacing:.045em}
.limeira-weather small,.limeira-clock small{font-size:10px!important}
.limeira-weather strong{font-size:12px}
.theme-toggle{font-size:11px!important}
.delivery-header small,.account-menu small,.cart-header small{font-size:11px!important}
.delivery-header strong,.account-menu strong,.cart-header strong{font-size:13px}
.account-popover a,.account-popover button{font-size:12px!important}
.account-popover-head small{font-size:10px!important}
.department-nav button{font-size:12px!important}
.member-bar small,.auth-kicker,.section-title small,.coupon-heading>small,
.catalog-category-header small,.catalog-sort>span,.filter-title button,
.hat-filter-control>small,.hat-search-box label small{font-size:11px!important}
.member-bar p,.category-menu small,.quick-benefits small,
.catalog-heading>div>p:last-child,.hat-organizer-intro p,
.hat-filter-summary,.filters details label,.shipping-simulator small,
.shipping-result,.breadcrumb{font-size:12px!important;line-height:1.5}
.member-bar button,.category-menu h2,.sort-options button,
.hat-menu-options button,.subcategory-chips button,.load-more-products,
.cep-form button,.product-actions button{font-size:12px!important}
.category-menu button strong,.quick-benefits strong{font-size:13px}
.promo-card span,.coupon-grid i,.empty-cart p,#couponMessage{font-size:11px!important}
.store-category-copy small,.store-category-copy em,.store-category-copy b,
.catalog-category-header>span,.hat-organizer-intro span,
.hat-organizer-intro>strong,.hat-menu-options button small{font-size:11px!important}
.hat-filter-control summary,.filters summary{font-size:13px!important}
.hat-search-box input,.cep-form input{font-size:14px!important}
.product-info>small,.badge,.hat-product-details span{font-size:11px!important}
.product-rating,.rating{font-size:12px}
.product-info h3{font-size:18px;line-height:1.3}
.product-prices s{font-size:12px}
.product-prices strong{font-size:21px}
.installment{font-size:12px;line-height:1.45}
.footer-col strong{font-size:10px}
.footer-col a,.footer-col button{font-size:13px!important;line-height:1.5}
.drawer-title small,#mobileCategories small{font-size:11px!important}
.drawer-title h2{line-height:1.2}
.cart-drawer-title>div>span{font-size:12px}
.cart-item-category{font-size:11px!important}
.cart-item h3{font-size:17px;line-height:1.32}
.cart-item-size{font-size:11px}
.cart-item-price small{font-size:11px}
.cart-item-price strong{font-size:18px}
.qty span{font-size:13px}
.qty button{font-size:16px!important}
.cart-confidence strong,.cart-section-heading strong{font-size:12px}
.cart-confidence small,.cart-section-heading small{font-size:11px!important}
.cart-freight .shipping-result{font-size:12px!important}
.totals{font-size:13px;line-height:1.5}
.totals strong{font-size:16px}
.cart-checkout-button{font-size:13px!important}
.cart-safe-note{font-size:11px!important;line-height:1.45}
.product-modal-badge,.product-modal-content>p:first-child,
.stock-status,.modal-product-specs small,.modal-section-heading small{font-size:11px!important}
.product-modal-description{font-size:14px;line-height:1.65}
.product-price-panel small,.product-price-panel>span{font-size:11px!important}
.modal-product-specs strong{font-size:13px}
.modal-section-heading>span,.product-assurances small{font-size:11px!important}
.modal-section-heading strong{font-size:19px}
#modalSizeOptions button{font-size:13px!important}
#modalSizeOptions button small,#modalSizeMessage{font-size:11px!important}
.auth-visual-content>small,.auth-main-copy,.auth-form-heading>span,
.terms,.auth-message,.auth-safe,.auth-tabs small,
.auth-visual-benefits small{font-size:12px!important;line-height:1.5}
.auth-visual-benefits b,.auth-tabs strong,.auth-control>label,
.forgot-password,.auth-submit{font-size:13px!important}
.auth-field input{font-size:14px!important}
.secure-badge{font-size:11px!important}
.checkout-head small,.checkout-steps span,.form-grid label,.card-fields label,
.option-cards small,.payment-cards small,.payment-studio-head small,
.integration-badge,.payment-method-card small,.payment-method-card>b,
.pix-preview-art small,.card-preview-art>div:last-child small,
.boleto-preview-art small,.payment-stage-top small{font-size:11px!important}
.checkout-head p,.option-cards p,.payment-cards p,
.payment-method-card em,.payment-studio-head p,
.pix-preview-art p,.card-preview-art>div:last-child p,
.boleto-preview-art p,.payment-guard{font-size:13px!important;line-height:1.55}
.payment-stage-top>span,.payment-instructions>small,
.provider-payment>small,.paid-receipt>small{font-size:11px!important}
.qr-card span,.payment-instructions label,.boleto-payment label,
.payment-instructions>p,.secure-line,.simulation-notice{font-size:12px!important;line-height:1.5}
.payment-instructions ol,.provider-payment p,.paid-receipt p{font-size:14px!important;line-height:1.7}
.copy-field input{font-size:13px!important}
.copy-field button{font-size:12px!important}
.form-grid input,.form-grid select,.form-grid textarea,
.card-fields input,.card-fields select{font-size:14px!important}
.customer-order-card small,.order-status{font-size:11px!important}
.customer-order-card div>span,.account-protection small,
.account-modal-content p{font-size:12px!important;line-height:1.55}
.toast small,.toast p{font-size:12px!important;line-height:1.5}

@media(max-width:760px){
  body{font-size:16px}
  body p,body li{font-size:15px!important}
  body input,body select,body textarea{font-size:16px!important}
  .topbar-left>span,.topbar-left>a{font-size:11px}
  .product-info h3{font-size:19px}
  .product-actions button{min-height:44px}
  .cart-item h3{font-size:18px}
  .cart-item-category,.cart-item-size,.cart-item-price small,
  .cart-confidence small,.cart-section-heading small,.cart-safe-note{font-size:12px!important}
  .cart-confidence strong,.cart-section-heading strong{font-size:13px}
  .totals{font-size:14px}
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL POLISH PASS — all remaining areas
   ══════════════════════════════════════════════════════════════ */

/* ── 1. CUSTOM SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f0ebe3; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#c4864a,#6b4423); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#d49a5a,#7a4f28); }
.product-modal-content::-webkit-scrollbar,
.account-modal-content::-webkit-scrollbar { width: 5px; }
.product-modal-content::-webkit-scrollbar-track,
.account-modal-content::-webkit-scrollbar-track { background: #f5f0e8; border-radius: 4px; }
.product-modal-content::-webkit-scrollbar-thumb,
.account-modal-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#c4864a,#8a5530); border-radius: 4px; }

/* ── 2. DEPARTMENT NAV ───────────────────────────────────────── */
.department-nav {
  gap: 0;
  padding: 0 max(3.5vw,24px);
  border-bottom: 2px solid rgba(255,255,255,.07);
}
.department-nav button {
  position: relative;
  height: 48px;
  padding: 0 16px;
  border-radius: 0;
  letter-spacing: .06em;
  transition: color .2s, background .2s;
}
.department-nav button::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: #c4864a;
  border-radius: 2px 2px 0 0;
  transition: left .22s ease, right .22s ease;
}
.department-nav button:hover { color: #f0d5ae; background: rgba(255,255,255,.06); }
.department-nav button:hover::after,
.department-nav button.active::after { left: 8px; right: 8px; }
.department-nav button.active {
  color: #f0d5ae;
  background: rgba(196,134,74,.14);
}
/* "Todas as categorias" pill stays distinct */
.department-nav .all-categories {
  border-radius: 0;
  padding: 0 22px;
  background: rgba(255,255,255,.09);
  letter-spacing: .05em;
}
.department-nav .all-categories::after { display: none; }
.department-nav .all-categories:hover { background: rgba(255,255,255,.18); }
/* "Ofertas" — red/gold accent */
.department-nav .sale-link { color: #ffc2a0; font-weight: 900; }
.department-nav .sale-link::after { background: #e05a3a; }
.department-nav .sale-link:hover { color: #ffd4be; background: rgba(224,90,58,.12); }

/* ── 3. MEMBER BAR ───────────────────────────────────────────── */
.member-bar {
  background: linear-gradient(100deg, #f5e4cc 0%, #fffaf4 45%, #fff 100%);
  border-color: rgba(196,134,74,.25);
  box-shadow: 0 10px 32px rgba(47,29,18,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
.member-bar::before {
  background: linear-gradient(180deg, #c4864a 0%, #6b4423 60%, #c4864a 100%);
  width: 5px;
}
.member-avatar {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #c4864a, #6b4423);
  box-shadow: 0 6px 18px rgba(107,68,35,.3), inset 0 1px 0 rgba(255,255,255,.2);
  font-size: 22px;
  border: 2px solid rgba(255,255,255,.5);
}
.member-bar small {
  font-size: 9px !important;
  color: #c4864a;
  letter-spacing: .16em;
}
.member-bar strong {
  font-family: Georgia, serif;
  font-size: 16px !important;
  color: #2c1a10;
}
.member-bar p { color: #9a8a7e; font-size: 11px !important; }
.member-bar button {
  border-radius: 8px;
  font-size: 11px !important;
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.member-bar button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(107,68,35,.18); }
.member-bar button:last-child { background: linear-gradient(135deg,#6b4423,#a0592a); box-shadow: 0 4px 14px rgba(107,68,35,.28); }
.member-bar button:last-child:hover { background: linear-gradient(135deg,#7a4f28,#b56430); }

/* ── 4. QUICK BENEFITS BAR ───────────────────────────────────── */
.quick-benefits {
  border-radius: 12px;
  background: linear-gradient(100deg,#fffdf8,#fff);
  border: 1px solid rgba(196,134,74,.18);
  box-shadow: 0 8px 28px rgba(47,29,18,.06), inset 0 1px 0 rgba(255,255,255,.9);
  margin-bottom: 50px;
}
.quick-benefits > div {
  min-height: 90px;
  padding: 0 20px;
  gap: 15px;
  transition: background .22s;
  border-right: 1px solid rgba(196,134,74,.15);
}
.quick-benefits > div:last-child { border-right: none; }
.quick-benefits > div:hover { background: linear-gradient(135deg,#fdf5e9,#fffdf8); }
.quick-benefits > div > span {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg,#c4864a,#6b4423);
  color: #fff !important;
  font-size: 16px !important;
  box-shadow: 0 4px 12px rgba(107,68,35,.28);
}
.quick-benefits strong { font-size: 13px !important; color: #2c1a10; margin-bottom: 3px; }
.quick-benefits small { font-size: 11px !important; color: #9a8a7e; line-height: 1.4; }

/* SVG icons for quick-benefits */
.quick-benefits .benefit-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg,#c4864a,#6b4423);
  color: #fff;
  box-shadow: 0 4px 12px rgba(107,68,35,.28);
}
.quick-benefits .benefit-icon svg { width: 18px; height: 18px; stroke: #fff; }

/* ── 5. PROMO CARDS ──────────────────────────────────────────── */
.promo-card {
  border-radius: 14px;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.promo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  z-index: 0;
  transition: opacity .28s;
}
.promo-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(47,29,18,.22); }
.promo-card:hover::before { opacity: .7; }
.promo-card > * { position: relative; z-index: 1; }
.promo-card small {
  display: inline-block;
  background: rgba(196,134,74,.25);
  border: 1px solid rgba(196,134,74,.45);
  border-radius: 20px;
  padding: 4px 11px;
  backdrop-filter: blur(4px);
  font-size: 10px !important;
}
.promo-card strong { font-size: 22px !important; text-shadow: 0 2px 8px rgba(0,0,0,.4); line-height: 1.1; }
.promo-card span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  font-size: 11px !important;
  transition: background .18s;
}
.promo-card:hover span { background: rgba(255,255,255,.28); }

/* ── 6. FILTER BAR ───────────────────────────────────────────── */
.filters {
  border-radius: 16px;
  border: 1px solid rgba(196,134,74,.18);
  background: linear-gradient(160deg,#fffdf8,#fff);
  box-shadow: 0 8px 28px rgba(47,29,18,.06);
  padding: 20px;
}
.filter-title {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(196,134,74,.18);
  font-size: 14px;
  font-weight: 700;
  color: #2c1a10;
}
.filter-title button {
  border-radius: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(107,68,35,.2) !important;
  background: #faf3e8 !important;
  color: var(--brown) !important;
  font-size: 11px !important;
  transition: background .18s, box-shadow .18s;
}
.filter-title button:hover { background: #f0e3cf !important; box-shadow: 0 2px 8px rgba(107,68,35,.12); }
.filter-context {
  border-radius: 8px;
  border-left: 3px solid #c4864a;
  background: linear-gradient(90deg,#fdf5e9,#fffdf8);
  font-size: 13px !important;
  color: #4a3322;
}
.filters details { border-top: 1px solid rgba(196,134,74,.14); padding: 15px 0; }
.filters summary {
  font-size: 13px !important;
  font-weight: 700;
  color: #2c1a10;
  letter-spacing: .02em;
}
.filters details label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px !important;
  color: #5a4a40;
  cursor: pointer;
  transition: color .15s;
}
.filters details label:hover { color: var(--brown); }
.breadcrumb {
  font-size: 12px !important;
  color: #9a8a80;
  letter-spacing: .02em;
}
.breadcrumb span { color: var(--brown); font-weight: 700; }

/* ── 7. HAT ORGANIZER ────────────────────────────────────────── */
.hat-organizer {
  border: 1px solid rgba(196,134,74,.22);
  background: linear-gradient(160deg,#fffdf9,#fff);
}
.hat-organizer-intro {
  border-radius: 16px 16px 0 0;
  background: linear-gradient(120deg,#1e1008,#5a3318,#6b4423);
}
.hat-organizer-intro h3 { font-size: 26px !important; }
.hat-search-box {
  border: 1.5px solid #d4c3b0;
  border-radius: 12px !important;
  background: linear-gradient(90deg,#fffdf8,#fff);
  box-shadow: 0 4px 14px rgba(47,29,18,.06);
  transition: border-color .2s, box-shadow .2s;
  margin: 20px 22px 14px;
}
.hat-search-box:focus-within {
  border-color: #c4864a;
  box-shadow: 0 0 0 3px rgba(196,134,74,.13), 0 4px 14px rgba(47,29,18,.08);
}
.hat-search-box > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg,#c4864a,#6b4423);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 18px;
  box-shadow: 0 3px 10px rgba(107,68,35,.28);
}

/* ── 8. PRODUCT INFO — typography ────────────────────────────── */
.product-info > small {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(196,134,74,.1);
  color: #a06830;
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: .12em;
}
.product-info h3 {
  color: #1e1409;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 400;
}
.product-info h3 a { color: inherit; }
.product-info h3 a:hover { color: var(--brown); }
.product-prices strong { color: #2c1a10; font-size: 23px !important; }
.product-prices s { color: #a09080; font-size: 12px !important; }
.installment {
  color: #7a8a6a;
  font-size: 11px !important;
  font-weight: 700;
  background: linear-gradient(90deg,#edf7f1,#f5fcf7);
  border-radius: 8px;
  padding: 5px 10px;
  border-left: 2px solid #5a9a5a;
  margin: 6px 0 14px;
}

/* ── 9. QUICK LOOK BUTTON ────────────────────────────────────── */
.quick-look {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  background: rgba(20,10,5,.65) !important;
  backdrop-filter: blur(10px);
  padding: 0 18px !important;
  font-size: 11px !important;
  letter-spacing: .04em;
  transition: background .22s, transform .22s, opacity .22s, box-shadow .22s !important;
}
.product-card:hover .quick-look {
  background: rgba(196,134,74,.85) !important;
  border-color: rgba(255,255,255,.7) !important;
  box-shadow: 0 6px 18px rgba(107,68,35,.4);
}

/* ── 10. FAVORITE BUTTON ─────────────────────────────────────── */
.favorite {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 4px 14px rgba(30,18,11,.18) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  backdrop-filter: blur(4px);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s !important;
  font-size: 17px !important;
  display: grid !important;
  place-items: center !important;
}
.favorite:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 20px rgba(30,18,11,.22) !important;
  background: #fff !important;
  color: var(--red);
}
.favorite.active {
  color: var(--red);
  background: #fff0ee !important;
  border-color: rgba(168,68,53,.3) !important;
}

/* ── 11. SHIPPING SIMULATOR ──────────────────────────────────── */
.shipping-simulator {
  border-radius: 14px;
  border: 1px solid rgba(196,134,74,.22);
  background: linear-gradient(105deg,#fdf0dc,#fffaf2 55%,#fff);
  box-shadow: 0 8px 26px rgba(47,29,18,.07);
  margin-bottom: 20px;
}
.shipping-simulator > span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,#c4864a,#6b4423);
  color: #fff !important;
  border: none !important;
  font-size: 18px !important;
  box-shadow: 0 4px 12px rgba(107,68,35,.28);
}
.shipping-simulator strong { font-size: 13px !important; color: #2c1a10; }
.shipping-simulator small { font-size: 11px !important; color: #9a8a7e; }
.cep-form { min-height: 42px; overflow: hidden; border-radius: 10px; box-shadow: 0 2px 10px rgba(47,29,18,.08); }
.cep-form input {
  border: 1.5px solid #d4c3b0;
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 0 14px;
  font-size: 14px !important;
  background: #fff;
  transition: border-color .18s;
}
.cep-form input:focus { border-color: #c4864a; outline: none; }
.cep-form button {
  border-radius: 0 10px 10px 0;
  padding: 0 18px;
  background: linear-gradient(135deg,#c4864a,#6b4423);
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .05em;
  transition: background .18s;
}
.cep-form button:hover { background: linear-gradient(135deg,#d49a5a,#7a4f28); }

/* ── 12. SIZE/VARIANT ACTIVE STATE ──────────────────────────── */
#modalSizeOptions button.active {
  border-color: var(--brown) !important;
  color: #fff !important;
  background: linear-gradient(135deg,#7a3e18,#a0592a) !important;
  box-shadow: 0 4px 14px rgba(107,68,35,.38) !important;
  transform: translateY(-1px);
  font-weight: 900;
}
#modalSizeOptions button:hover:not(:disabled):not(.active) {
  border-color: #c4864a !important;
  color: var(--brown) !important;
  background: #fdf5e8 !important;
}
.subcategory-chips button.active {
  background: linear-gradient(135deg,#6b4423,#a0592a) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(107,68,35,.3);
}
.hat-menu-options button.active {
  background: linear-gradient(135deg,#6b4423,#a0592a) !important;
  color: #fff !important;
}
.sort-options button.active {
  background: linear-gradient(135deg,#6b4423,#a0592a) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15);
}
.brim-opt.active {
  background: linear-gradient(135deg,#7a3e18,#a0592a) !important;
  border-color: var(--brown) !important;
  box-shadow: 0 4px 14px rgba(107,68,35,.38) !important;
  transform: translateY(-1px);
}

/* ── dark mode overrides for new polish ─────────────────────── */
[data-theme="dark"] .department-nav button.active { background: rgba(196,134,74,.18); color: #f0d5ae; }
[data-theme="dark"] .filters { background: #1d1713; border-color: rgba(196,134,74,.15); }
[data-theme="dark"] .filter-context { background: linear-gradient(90deg,#2a1e14,#241b16); color: #d8c9bd; }
[data-theme="dark"] .quick-benefits { background: #1a1410; border-color: rgba(196,134,74,.15); }
[data-theme="dark"] .quick-benefits > div:hover { background: rgba(196,134,74,.07); }
[data-theme="dark"] .hat-search-box { background: linear-gradient(90deg,#1d1612,#241b16); border-color: #4a3828; }
[data-theme="dark"] .hat-search-box:focus-within { border-color: #c4864a; }
[data-theme="dark"] .shipping-simulator { background: linear-gradient(105deg,#2a1c11,#1d1612 55%,#18120f); }
[data-theme="dark"] .cep-form input { background: #18120f; border-color: #4a3828; color: var(--ink); }
[data-theme="dark"] .installment { background: linear-gradient(90deg,#1a2a1a,#1e271e); border-left-color: #4a8a4a; color: #8ab88a; }
[data-theme="dark"] .product-info h3 { color: #f0e5d8; }
[data-theme="dark"] .product-prices strong { color: #e8d4be; }
[data-theme="dark"] .product-info > small { background: rgba(196,134,74,.15); color: #c49060; }
[data-theme="dark"] .member-bar { background: linear-gradient(100deg,#2e1f12,#241c16 45%,#1a1410); }
[data-theme="dark"] .promo-card { border-color: rgba(196,134,74,.2); }

/* ═══════════════════════════════════════════════════════════════
   IMPROVEMENTS PASS — 7 visual enhancements
   ══════════════════════════════════════════════════════════════ */

/* ── IMPROVEMENT 1: CHECKOUT FORM — Premium inputs ───────────── */

/* Better form-grid spacing */
.form-grid {
  gap: 14px;
}

/* Premium input and select styling */
.form-grid input,
.form-grid select,
.card-fields input,
.card-fields select {
  border-radius: 12px !important;
  border: 1.5px solid #ddd0c2 !important;
  background: #fdfaf6 !important;
  padding: 0 14px !important;
  transition: border-color .2s, box-shadow .2s !important;
  min-height: 46px !important;
}
.form-grid input:focus,
.form-grid select:focus,
.card-fields input:focus,
.card-fields select:focus {
  border-color: #c4864a !important;
  box-shadow: 0 0 0 3px rgba(196,134,74,.13), 0 2px 10px rgba(107,68,35,.08) !important;
  background: #fffdf9 !important;
  outline: none !important;
}

/* Checkout steps — active step gets gradient underline glow */
.checkout-steps span.active {
  background: linear-gradient(135deg,#6b4423,#c4864a) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(107,68,35,.3) !important;
  color: #fff !important;
  font-weight: 900;
}

/* CEP input group in checkout — more polished */
.form-grid input[name="cep"] {
  background: linear-gradient(90deg,#fdfaf6,#fdf5e8) !important;
  border-color: #c4864a !important;
}

/* Card form fields single column appearance on desktop stays, better spacing */
#cardForm .form-grid {
  gap: 12px;
}

/* ── IMPROVEMENT 2: CATEGORY CARDS — More elegant overlays ──── */

/* Stronger bottom gradient so text is always readable */
.store-category-shade {
  background: linear-gradient(
    0deg,
    rgba(10,5,2,.92) 0%,
    rgba(15,8,4,.75) 35%,
    rgba(20,11,7,.35) 60%,
    rgba(20,11,7,.08) 100%
  ) !important;
}

/* Title font bigger, Georgia serif */
.store-category-copy strong {
  font-family: Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Count badge styled as pill */
.store-category-copy small {
  background: rgba(196,134,74,.22) !important;
  border: 1px solid rgba(196,134,74,.5) !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  backdrop-filter: blur(6px);
  color: #f0d4a7 !important;
}

/* Active state: gold border glow */
.store-category-card.active {
  border-color: #c4864a !important;
  box-shadow: 0 0 0 3px rgba(196,134,74,.28), 0 20px 40px rgba(43,25,14,.22) !important;
}

/* Hover: image scales more (1.08), card lifts higher */
.store-category-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 0 0 2px rgba(196,134,74,.35), 0 22px 44px rgba(43,25,14,.22) !important;
  border-color: #c4864a !important;
}
.store-category-card:hover img {
  transform: scale(1.08) !important;
}

/* ── IMPROVEMENT 3: SUBCATEGORY CHIPS — Pill style ───────────── */

.subcategory-chips button {
  border-radius: 30px !important;
  border: 1.5px solid rgba(107,68,35,.28) !important;
  background: transparent !important;
  color: #5a4538 !important;
  padding: 0 18px !important;
  min-height: 36px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s !important;
}
.subcategory-chips button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(107,68,35,.14);
  border-color: #c4864a !important;
  color: #6b4423 !important;
  background: rgba(196,134,74,.07) !important;
}
.subcategory-chips button.active {
  background: linear-gradient(135deg,#6b4423,#c4864a) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(107,68,35,.32) !important;
  transform: translateY(-1px);
}

/* ── IMPROVEMENT 4: LOGIN/ACCOUNT MODAL — More visual personality */

/* Auth field inputs — rounded, gold focus */
.auth-field {
  border-radius: 10px !important;
  border: 1.5px solid #ddd0c2 !important;
  background: #fdfaf6 !important;
  min-height: 50px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.auth-field:focus-within {
  border-color: #c4864a !important;
  box-shadow: 0 0 0 3px rgba(196,134,74,.14), 0 2px 10px rgba(107,68,35,.08) !important;
  background: #fffdf9 !important;
}
.auth-field input {
  height: 48px !important;
  font-size: 14px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}

/* Submit button more premium gradient */
.auth-submit {
  border-radius: 12px !important;
  min-height: 54px !important;
  background: linear-gradient(135deg,#6b4423 0%,#c4864a 60%,#7a3e18 100%) !important;
  background-size: 200% 100% !important;
  background-position: 100% !important;
  box-shadow: 0 6px 20px rgba(107,68,35,.35) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  transition: background-position .4s, transform .2s, box-shadow .2s !important;
}
.auth-submit:hover {
  background-position: 0% !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(107,68,35,.45) !important;
}
.auth-submit b { font-size: 22px !important; }

/* Auth tabs more premium */
.auth-tabs button {
  border-radius: 12px !important;
  border: 1.5px solid #e0d4c4 !important;
  min-height: 76px !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
.auth-tabs button:hover {
  border-color: #c4864a !important;
  background: #fdf8f1 !important;
  box-shadow: 0 4px 16px rgba(107,68,35,.1) !important;
}
.auth-tabs button.active {
  border-color: #c4864a !important;
  background: linear-gradient(135deg,#fdf5e8,#fff8f1) !important;
  box-shadow: inset 0 0 0 1px rgba(196,134,74,.4), 0 4px 16px rgba(107,68,35,.12) !important;
}
.auth-tab-icon {
  background: linear-gradient(135deg,#6b4423,#c4864a) !important;
  box-shadow: 0 4px 12px rgba(107,68,35,.28) !important;
}

/* Visual side — brand tagline overlay */
.auth-visual-content > small {
  background: rgba(196,134,74,.12) !important;
  border: 1px solid rgba(196,134,74,.3) !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
  display: inline-block !important;
  font-size: 12px !important;
}
.auth-visual-content h2 {
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Quote / tagline overlay element for auth visual */
.auth-visual::after {
  content: '"Cada detalhe conta na tradição country."';
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 82%;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(196,134,74,.3);
  background: rgba(15,8,4,.5);
  backdrop-filter: blur(8px);
  color: #e9c99d;
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  text-align: center;
  letter-spacing: .03em;
  pointer-events: none;
}

/* ── IMPROVEMENT 5: EMPTY STATES — More friendly ─────────────── */

/* Empty cart: horseshoe image glow, better typography */
.empty-cart {
  background: linear-gradient(160deg,#fdfaf5,#fff) !important;
}
.empty-cart img {
  opacity: .7 !important;
  filter: drop-shadow(0 8px 20px rgba(196,134,74,.35)) !important;
  transition: filter .3s, opacity .3s !important;
}
.empty-cart img:hover {
  opacity: .9 !important;
  filter: drop-shadow(0 10px 28px rgba(196,134,74,.5)) !important;
}
.empty-cart strong {
  font-family: Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #2c1a10 !important;
}
.empty-cart p {
  color: #9a8a7e !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  max-width: 240px;
  margin: 0 auto 4px !important;
}

/* "Conhecer produtos" button in empty cart — more premium */
.empty-cart button {
  background: linear-gradient(135deg,#6b4423,#c4864a) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 0 26px !important;
  min-height: 44px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  box-shadow: 0 6px 18px rgba(107,68,35,.3) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.empty-cart button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(107,68,35,.4) !important;
}

/* No products found — better centered layout */
.empty-products {
  padding: 70px 40px !important;
  border-radius: 20px !important;
  border: 1px dashed rgba(196,134,74,.35) !important;
  background: linear-gradient(160deg,#fdfaf5,#fff) !important;
  text-align: center !important;
}
.empty-products strong {
  display: block !important;
  font-family: Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: #2c1a10 !important;
  margin-bottom: 12px !important;
}
.empty-products p {
  color: #9a8a7e !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  max-width: 380px;
  margin: 0 auto 18px !important;
}
.empty-products::before {
  content: '🤠';
  display: block;
  font-size: 52px;
  margin-bottom: 20px;
  filter: grayscale(.3);
  opacity: .7;
}

/* Empty orders — better styled */
.empty-orders {
  padding: 55px 30px !important;
  border: 1px dashed rgba(196,134,74,.3) !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg,#fdfaf5,#fff) !important;
}
.empty-orders > span {
  font-size: 38px !important;
  filter: drop-shadow(0 4px 10px rgba(107,68,35,.2));
}
.empty-orders strong {
  font-family: Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #2c1a10 !important;
}
.empty-orders p {
  max-width: 280px;
  margin: 6px auto 0 !important;
  line-height: 1.6 !important;
}

/* ── IMPROVEMENT 7: CHECKOUT MOBILE — Fix layout ─────────────── */

@media (max-width: 600px) {
  /* Single column form-grid on mobile */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-grid label.wide {
    grid-column: 1 !important;
  }

  /* Checkout steps indicator smaller on mobile */
  .checkout-steps span {
    font-size: 10px !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    border-radius: 16px !important;
    flex: 1;
  }
  .checkout-steps i {
    width: 14px !important;
  }

  /* Payment options stack vertically on mobile */
  .cc-pay-options {
    grid-template-columns: 1fr !important;
  }
  .cc-pay-option {
    flex-direction: row !important;
    text-align: left !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 14px 16px !important;
  }
  .cc-pay-option:last-child {
    border-bottom: none !important;
  }
  .cc-pay-option-icon {
    flex-shrink: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Card form fields single column */
  #cardForm .form-grid {
    grid-template-columns: 1fr !important;
  }
  #cardForm .form-grid label.wide {
    grid-column: 1 !important;
  }

  /* Checkout steps even more compact */
  .checkout-steps {
    gap: 5px !important;
  }
  .checkout-steps span {
    font-size: 9px !important;
    padding: 6px 6px !important;
    letter-spacing: 0 !important;
  }
}

/* ── Dark mode overrides for improvements ────────────────────── */
[data-theme="dark"] .auth-field {
  background: #1d1713 !important;
  border-color: #4a3828 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .auth-field:focus-within {
  border-color: #c4864a !important;
  background: #241b16 !important;
}
[data-theme="dark"] .auth-visual::after {
  background: rgba(8,4,2,.65) !important;
}
[data-theme="dark"] .empty-cart {
  background: linear-gradient(160deg,#1d1713,#18120f) !important;
}
[data-theme="dark"] .empty-cart strong { color: #f0e5d8 !important; }
[data-theme="dark"] .empty-products {
  background: linear-gradient(160deg,#1d1713,#18120f) !important;
  border-color: rgba(196,134,74,.22) !important;
}
[data-theme="dark"] .empty-products strong { color: #f0e5d8 !important; }
[data-theme="dark"] .empty-orders {
  background: linear-gradient(160deg,#1d1713,#18120f) !important;
  border-color: rgba(196,134,74,.22) !important;
}
[data-theme="dark"] .empty-orders strong { color: #f0e5d8 !important; }
[data-theme="dark"] .subcategory-chips button {
  border-color: rgba(196,134,74,.25) !important;
  color: #c4a882 !important;
}
[data-theme="dark"] .store-category-copy small {
  background: rgba(196,134,74,.18) !important;
  border-color: rgba(196,134,74,.4) !important;
}
[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid select,
[data-theme="dark"] .card-fields input,
[data-theme="dark"] .card-fields select {
  background: #1d1713 !important;
  border-color: #4a3828 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .form-grid input:focus,
[data-theme="dark"] .form-grid select:focus,
[data-theme="dark"] .card-fields input:focus,
[data-theme="dark"] .card-fields select:focus {
  border-color: #c4864a !important;
  background: #241b16 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CHAPÉU CENTER — 7 FEATURE IMPROVEMENTS
   Brown #6b4423 · Gold #c4864a · Cream #f7f2eb · Dark #1a0e07
   ══════════════════════════════════════════════════════════════ */

/* ── 1. DISCOUNT BADGE ───────────────────────────────────────── */
/* Pill shown next to the old price on product cards             */
.discount-pct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 20px;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(192,57,43,.35);
  vertical-align: middle;
  margin-left: 4px;
  animation: discountPop .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes discountPop {
  from { opacity:0; transform:scale(.7); }
  to   { opacity:1; transform:scale(1); }
}
/* Gold variant — optional, used when card has .badge.gold */
.product-card:has(.badge.gold) .discount-pct {
  background: linear-gradient(135deg, #9a671f, #c4864a);
}
[data-theme="dark"] .discount-pct {
  background: linear-gradient(135deg, #a02c20, #d44c3a);
  box-shadow: 0 3px 10px rgba(160,44,32,.45);
}

/* ── 2. "VER MAIS PRODUTOS" BUTTON ──────────────────────────── */
.load-more-products {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px !important;
  margin: 30px auto 0 !important;
  padding: 0 38px !important;
  border: 2px solid #c4864a !important;
  border-radius: 30px !important;
  color: #6b4423 !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 6px 22px rgba(107,68,35,.12) !important;
  transition: background .28s, color .28s, transform .22s, box-shadow .22s, border-color .28s !important;
}
.load-more-products::after {
  content: '⌄';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(196,134,74,.14);
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
  transition: transform .28s, background .28s;
}
.load-more-products:hover {
  background: linear-gradient(135deg, #c4864a, #6b4423) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) scale(1.025) !important;
  box-shadow: 0 14px 34px rgba(107,68,35,.28) !important;
}
.load-more-products:hover::after {
  background: rgba(255,255,255,.25);
  transform: translateY(3px);
}
.load-more-products:active {
  transform: scale(.985) !important;
}
.load-more-products[hidden] { display: none !important; }
[data-theme="dark"] .load-more-products {
  background: #1d1713 !important;
  color: #c4a882 !important;
  border-color: rgba(196,134,74,.45) !important;
}
[data-theme="dark"] .load-more-products:hover {
  background: linear-gradient(135deg, #c4864a, #6b4423) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── 3. SORT BUTTONS ─────────────────────────────────────────── */
.sort-options {
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  gap: 7px;
}
.sort-options button {
  min-height: 36px !important;
  border: 1.5px solid #d8cec3 !important;
  border-radius: 30px !important;
  padding: 0 18px !important;
  color: #72675f !important;
  background: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(47,29,18,.06) !important;
  transition: color .2s, background .2s, border-color .2s, transform .2s, box-shadow .2s !important;
  cursor: pointer;
}
.sort-options button:hover {
  color: #6b4423 !important;
  background: #fdf5e8 !important;
  border-color: #c4864a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(107,68,35,.14) !important;
}
.sort-options button.active {
  background: linear-gradient(135deg, #6b4423, #c4864a) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(107,68,35,.3) !important;
  transform: translateY(-1px) !important;
}
[data-theme="dark"] .sort-options button {
  background: #1d1713 !important;
  border-color: rgba(196,134,74,.22) !important;
  color: #c4a882 !important;
}
[data-theme="dark"] .sort-options button:hover {
  background: #2a1e14 !important;
  border-color: #c4864a !important;
  color: #e4c898 !important;
}
[data-theme="dark"] .sort-options button.active {
  background: linear-gradient(135deg, #6b4423, #c4864a) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ── 4. ORDER CONFIRMATION / PAYMENT SCREENS ─────────────────── */

/* .order-received — gold accent line, celebration feel */
.order-received {
  position: relative;
  border-top: 4px solid #c4864a !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #fff 0%, #f8f0e4 100%) !important;
  box-shadow: 0 20px 55px rgba(47,29,18,.11) !important;
  overflow: hidden;
}
.order-received::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0, rgba(196,134,74,.09) 0%, transparent 50%),
    radial-gradient(circle at 85% 100%, rgba(107,68,35,.07) 0%, transparent 50%);
  pointer-events: none;
}
.order-received > * { position: relative; z-index: 1; }

/* Order number — prominent serif */
.order-received h3 {
  font-family: Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  color: #1a0e07 !important;
  letter-spacing: .02em;
  line-height: 1.1 !important;
}

/* Success checkmark — green gradient circle */
.order-received-mark {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 12px 30px rgba(34,197,94,.35), 0 0 0 8px rgba(34,197,94,.1) !important;
  font-size: 32px !important;
  margin-bottom: 20px !important;
  animation: checkPop .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes checkPop {
  from { transform: scale(.5); opacity:0; }
  50%  { transform: scale(1.15); }
  to   { transform: scale(1); opacity:1; }
}
/* Error mark stays red */
.order-received .order-received-mark[style*="color:#ef4444"] {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 12px 30px rgba(239,68,68,.35) !important;
}

.order-received > small {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: rgba(196,134,74,.15);
  color: #9a5818;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.order-received > p {
  color: #6d5f55 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  max-width: 480px;
  margin: 0 auto 18px !important;
}

/* .order-finish-link — more visible */
.order-finish-link {
  display: inline-block;
  margin-top: 20px !important;
  padding: 10px 24px;
  border-radius: 20px;
  border: 1.5px solid #c4864a !important;
  color: #6b4423 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background .2s, color .2s !important;
  cursor: pointer;
}
.order-finish-link:hover {
  background: #c4864a !important;
  color: #fff !important;
}

/* .pix-payment — clean bordered card section */
.pix-payment {
  border: 1.5px solid #e0d0bc !important;
  border-radius: 18px !important;
  background: linear-gradient(160deg, #fffdf9, #fff) !important;
  box-shadow: 0 12px 32px rgba(47,29,18,.07) !important;
  padding: 28px !important;
}
.qr-card {
  border: 1.5px solid #d9cbb8 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(47,29,18,.1) !important;
  padding: 20px !important;
}
.qr-card img {
  width: 220px !important;
  height: 220px !important;
  border-radius: 8px;
  border: 1px solid #e0d0bc;
}
.qr-card span {
  display: block;
  margin-top: 12px !important;
  color: #8a7a6e !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Payment stage header */
.payment-stage-top {
  border-radius: 14px !important;
  border: 1px solid rgba(196,134,74,.2) !important;
  background: linear-gradient(105deg, #fdf5e8, #fffdf9) !important;
  box-shadow: 0 4px 16px rgba(47,29,18,.06) !important;
}

[data-theme="dark"] .order-received {
  background: linear-gradient(145deg, #201814, #17110e) !important;
  border-top-color: #c4864a !important;
}
[data-theme="dark"] .order-received h3 { color: #f0e5d8 !important; }
[data-theme="dark"] .pix-payment {
  background: linear-gradient(160deg, #1d1713, #18120f) !important;
  border-color: #3a2a1e !important;
}
[data-theme="dark"] .qr-card {
  background: #241b16 !important;
  border-color: #3a2a1e !important;
}
[data-theme="dark"] .payment-stage-top {
  background: linear-gradient(105deg, #2a1e14, #241b16) !important;
}

/* ── 5. HAT ORGANIZER HEADER ─────────────────────────────────── */

/* Richer gradient + subtle grid texture */
.hat-organizer {
  border: 1.5px solid rgba(196,134,74,.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 55px rgba(54,33,20,.1), 0 0 0 1px rgba(196,134,74,.08) !important;
}
.hat-organizer-intro {
  position: relative;
  overflow: hidden;
  border-radius: 18px 18px 0 0 !important;
  padding: 26px 28px !important;
  background:
    radial-gradient(circle at 90% 20%, rgba(196,134,74,.2) 0%, transparent 40%),
    linear-gradient(120deg, #0e0603, #3b1f0f, #6b4423) !important;
}
.hat-organizer-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 40px
    );
  pointer-events: none;
}
.hat-organizer-intro > * { position: relative; z-index: 1; }

/* "Catálogo Inteligente de Chapéus" title — Georgia, bigger, gold accent */
.hat-organizer-intro span {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: rgba(196,134,74,.2) !important;
  border: 1px solid rgba(196,134,74,.4) !important;
  color: #e4c28a !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px;
}
.hat-organizer-intro h3 {
  font-family: Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin: 4px 0 6px !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.hat-organizer-intro p {
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Model count badge — gold pill with border */
.hat-organizer-intro > strong {
  padding: 10px 18px !important;
  border: 1.5px solid rgba(196,134,74,.45) !important;
  border-radius: 28px !important;
  color: #f0d4a7 !important;
  background: rgba(196,134,74,.12) !important;
  font-family: Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1) !important;
  white-space: nowrap;
}
.hat-filter-summary {
  border-radius: 0 0 18px 18px;
}

/* ── 6. ADMIN PANEL — Professional polish ─────────────────── */
/* (added at end of admin.css separately) */

/* ── 7. CUSTOMER ACCOUNT TABS ────────────────────────────────── */

/* Sidebar navigation — gold left border active indicator */
.account-modal-side button,
.account-modal-side a {
  border-radius: 8px !important;
  margin-bottom: 3px;
  font-size: 11px !important;
  letter-spacing: .04em;
  transition: background .2s, color .2s, border-color .2s, transform .15s !important;
}
.account-modal-side button.active {
  border-color: #c4864a !important;
  color: #fff !important;
  background: rgba(196,134,74,.18) !important;
  box-shadow: inset 4px 0 0 #c4864a !important;
  font-weight: 900 !important;
}
.account-modal-side button:hover:not(.active) {
  border-color: rgba(196,134,74,.4) !important;
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.07) !important;
  transform: translateX(3px) !important;
}

/* Avatar — gold gradient ring */
.account-large-avatar {
  background: linear-gradient(135deg, rgba(196,134,74,.18), rgba(107,68,35,.1)) !important;
  border: 2px solid rgba(196,134,74,.5) !important;
  box-shadow: 0 0 0 4px rgba(196,134,74,.12), 0 8px 22px rgba(0,0,0,.2) !important;
  font-size: 32px !important;
}

/* Sidebar branding label */
.account-modal-side > small {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(196,134,74,.18);
  border: 1px solid rgba(196,134,74,.3);
  color: #deb07a !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  margin-bottom: 5px;
}

/* Display name — larger, serif */
.account-modal-side h2 {
  font-size: 26px !important;
  font-weight: 400 !important;
  color: #fff !important;
  margin: 5px 0 8px !important;
  line-height: 1.1 !important;
}

/* Description paragraph */
.account-modal-side p {
  color: rgba(255,255,255,.6) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  margin-bottom: 22px !important;
}

/* Divider between nav items */
.account-modal-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(196,134,74,.12) 0%, transparent 50%),
    radial-gradient(circle at 0 100%, rgba(107,68,35,.08) 0%, transparent 40%);
  pointer-events: none;
}
.account-modal-side { position: relative; }

/* Profile stats row — card micro-design */
.profile-stat {
  border-radius: 14px !important;
  border: 1.5px solid rgba(196,134,74,.15) !important;
  background: linear-gradient(145deg, #fdfaf5, #fff) !important;
  padding: 18px 12px 16px !important;
  box-shadow: 0 4px 14px rgba(47,29,18,.06) !important;
  transition: transform .18s, box-shadow .18s !important;
}
.profile-stat:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(47,29,18,.1) !important;
  border-color: rgba(196,134,74,.3) !important;
}
.profile-stat strong {
  font-size: 26px !important;
  color: #6b4423 !important;
}
.profile-stat span {
  font-size: 9px !important;
  color: #a09080 !important;
}

/* Order cards — more premium shadows */
.customer-order-card {
  border-radius: 14px !important;
  border: 1.5px solid rgba(196,134,74,.14) !important;
  background: #fff !important;
  padding: 18px 22px !important;
  box-shadow: 0 4px 18px rgba(47,29,18,.06) !important;
  transition: box-shadow .2s, border-color .2s, transform .18s !important;
}
.customer-order-card:hover {
  border-color: rgba(196,134,74,.3) !important;
  box-shadow: 0 10px 28px rgba(47,29,18,.1) !important;
  transform: translateY(-2px) !important;
}
.customer-order-card strong {
  font-family: Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #1a0e07 !important;
}

/* Profile form — clean premium card */
#profileForm {
  border-radius: 16px !important;
  border: 1.5px solid rgba(196,134,74,.18) !important;
  background: linear-gradient(160deg, #fdfaf5, #fff) !important;
  box-shadow: 0 6px 20px rgba(47,29,18,.07) !important;
  padding: 24px !important;
}
#profileForm input {
  border-radius: 10px !important;
  border: 1.5px solid #d9ccc0 !important;
  background: #fffdf9 !important;
  height: 48px !important;
  font-size: 14px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
#profileForm input:focus {
  border-color: #c4864a !important;
  box-shadow: 0 0 0 3px rgba(196,134,74,.13) !important;
  background: #fff !important;
  outline: none !important;
}

/* Profile action buttons — card style */
.profile-action-btn {
  border-radius: 14px !important;
  border: 1.5px solid rgba(196,134,74,.18) !important;
  background: linear-gradient(145deg, #fdfaf5, #fff) !important;
  box-shadow: 0 3px 12px rgba(47,29,18,.06) !important;
  transition: border-color .2s, background .2s, transform .18s, box-shadow .2s !important;
}
.profile-action-btn:hover {
  border-color: #c4864a !important;
  background: linear-gradient(145deg, #fdf5e8, #fffdf5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(107,68,35,.12) !important;
}
.profile-action-btn > span {
  background: linear-gradient(135deg, rgba(196,134,74,.15), rgba(107,68,35,.08)) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(196,134,74,.2) !important;
}

/* Email row */
.profile-email-row {
  border-radius: 14px !important;
  border: 1.5px solid rgba(196,134,74,.14) !important;
  background: linear-gradient(145deg, #fdfaf5, #fff) !important;
  box-shadow: 0 3px 12px rgba(47,29,18,.05) !important;
}

/* Account content headings */
.account-kicker {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(196,134,74,.1);
  border: 1px solid rgba(196,134,74,.25);
  color: #9a5818 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  margin-bottom: 6px;
}
.account-modal-content h2 {
  font-family: Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #1a0e07 !important;
  margin: 4px 0 16px !important;
}

/* Account protection notice */
.account-protection {
  border-radius: 14px !important;
  border: 1.5px solid rgba(24,114,67,.18) !important;
  background: linear-gradient(135deg, #edf7f1, #f5fbf7) !important;
  box-shadow: 0 3px 10px rgba(24,114,67,.08) !important;
}

/* Dark mode overrides for account section */
[data-theme="dark"] .account-large-avatar {
  background: linear-gradient(135deg, rgba(196,134,74,.15), rgba(107,68,35,.08)) !important;
  border-color: rgba(196,134,74,.4) !important;
}
[data-theme="dark"] .profile-stat {
  background: linear-gradient(145deg, #1d1713, #18120f) !important;
  border-color: rgba(196,134,74,.15) !important;
}
[data-theme="dark"] .profile-stat strong { color: #c4a882 !important; }
[data-theme="dark"] .customer-order-card {
  background: #1d1713 !important;
  border-color: rgba(196,134,74,.12) !important;
}
[data-theme="dark"] .customer-order-card strong { color: #f0e5d8 !important; }
[data-theme="dark"] #profileForm {
  background: linear-gradient(160deg, #1d1713, #18120f) !important;
  border-color: rgba(196,134,74,.15) !important;
}
[data-theme="dark"] #profileForm input {
  background: #14100d !important;
  border-color: #4a3828 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .profile-action-btn {
  background: linear-gradient(145deg, #1d1713, #18120f) !important;
  border-color: rgba(196,134,74,.15) !important;
}
[data-theme="dark"] .profile-action-btn:hover {
  background: linear-gradient(145deg, #2a1e14, #1d1713) !important;
  border-color: #c4864a !important;
}
[data-theme="dark"] .profile-email-row {
  background: linear-gradient(145deg, #1d1713, #18120f) !important;
  border-color: rgba(196,134,74,.12) !important;
}
[data-theme="dark"] .account-modal-content h2 { color: #f0e5d8 !important; }
[data-theme="dark"] .account-kicker {
  background: rgba(196,134,74,.12) !important;
  border-color: rgba(196,134,74,.25) !important;
  color: #c4a882 !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* SKELETON LOADER — carregamento de produtos                      */
/* ─────────────────────────────────────────────────────────────── */
.product-loading {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
  padding:0 0 24px;
}
.product-skeleton {
  border-radius:8px;
  overflow:hidden;
  background:#f0ebe4;
  min-height:360px;
  position:relative;
}
.product-skeleton::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s infinite;
}
@keyframes skeletonShimmer {
  from { background-position:200% 0; }
  to   { background-position:-200% 0; }
}
.product-skeleton::before {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:100px;
  background:linear-gradient(transparent,rgba(240,235,228,.9));
}

/* ─────────────────────────────────────────────────────────────── */
/* MENU MOBILE — category drawer melhorado                         */
/* ─────────────────────────────────────────────────────────────── */
.category-drawer {
  background:linear-gradient(160deg,#fdfaf5,#f5ece0) !important;
  border-right:3px solid rgba(196,134,74,.2) !important;
}
.category-drawer .drawer-title {
  background:linear-gradient(135deg,#2c1a10,#5a3520);
  border-radius:0;
  padding:22px 22px 18px;
  border-bottom:none;
  margin:-22px -22px 20px;
}
.category-drawer .drawer-title h2 { color:#fff; font-size:22px; margin:0; }
.category-drawer .drawer-title small { color:rgba(196,134,74,.9); font-size:9px; letter-spacing:.12em; margin-bottom:4px; }
.category-drawer .drawer-title button { background:rgba(255,255,255,.15) !important; color:#fff !important; border:1px solid rgba(255,255,255,.2) !important; }
#mobileCategories { gap:6px !important; padding:0 2px; }
#mobileCategories button {
  border-radius:12px !important;
  border:1px solid rgba(196,134,74,.15) !important;
  padding:14px 16px !important;
  background:#fff !important;
  transition:.2s !important;
  display:flex; align-items:center; gap:12px;
}
#mobileCategories button:hover {
  border-color:var(--brown) !important;
  background:#fdf8f2 !important;
  transform:translateX(4px);
}
#mobileCategories strong { color:#2c1a10; font-family:Georgia,serif; font-size:14px; font-weight:400; }
#mobileCategories small { color:#8a7060; font-size:10px; margin-top:2px; display:block; }

/* ─────────────────────────────────────────────────────────────── */
/* 404 PAGE                                                        */
/* ─────────────────────────────────────────────────────────────── */
.page-404 {
  min-height:70vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 20px;
}
.page-404-icon { font-size:80px; margin-bottom:24px; opacity:.35; }
.page-404 h1 {
  font-family:Georgia,serif; font-size:clamp(48px,8vw,96px);
  font-weight:400; color:var(--brown); line-height:1;
  margin-bottom:8px;
}
.page-404 h2 { font-family:Georgia,serif; font-size:22px; font-weight:400; color:#3d2510; margin-bottom:12px; }
.page-404 p { color:#7a6558; font-size:14px; line-height:1.7; max-width:420px; margin:0 auto 32px; }
.page-404 a {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:30px;
  background:linear-gradient(135deg,var(--brown),#c4864a);
  color:#fff; text-decoration:none; font-size:12px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 6px 20px rgba(101,56,22,.35);
  transition:.2s;
}
.page-404 a:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(101,56,22,.45); }

/* ════════════════════════════════════════════════════════════════
   PERFIL & MEUS PEDIDOS — redesign premium
   ════════════════════════════════════════════════════════════════ */

/* Header do perfil */
.profile-header { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid #ede5d8; }
.profile-header h2 { font-family:Georgia,serif; font-size:28px; font-weight:400; color:#1e0f07; margin:6px 0 0; }

/* Stats — cards com ícone */
.profile-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 20px; }
.profile-stat {
  padding:16px 14px 14px;
  border:1.5px solid #ede0cf;
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#fdf8f2);
  text-align:center;
  position:relative; overflow:hidden;
  transition:.2s;
}
.profile-stat::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#c4864a,#7a3e18);
  opacity:0; transition:.2s;
}
.profile-stat:hover { border-color:#c4864a; transform:translateY(-2px); box-shadow:0 6px 18px rgba(101,56,22,.1); }
.profile-stat:hover::after { opacity:1; }
.profile-stat-icon {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#f5e8d4,#ede0c8);
  display:grid; place-items:center; margin:0 auto 10px;
  color:var(--brown);
}
.profile-stat strong { display:block; font-family:Georgia,serif; font-size:22px; font-weight:400; color:var(--brown); margin-bottom:4px; }
.profile-stat span { font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#b0a097; }

/* Email */
.profile-email-row {
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px; padding:16px 18px;
  border:1.5px solid #ede0cf; border-radius:14px;
  background:#fff;
  transition:.2s;
}
.profile-email-row:hover { border-color:#c4864a; }
.profile-email-icon {
  width:42px; height:42px; flex-shrink:0; border-radius:12px;
  background:linear-gradient(135deg,#f5e8d4,#ede0c8);
  display:grid; place-items:center; color:var(--brown);
}
.profile-email-label { display:block; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9c8d83; margin-bottom:3px; }
.profile-email-row strong { display:block; font-size:14px; font-weight:600; color:#1e0f07; }
.profile-email-row small { display:block; font-size:10px; color:#9c8d83; margin-top:2px; }

/* Form */
#profileForm {
  display:grid; gap:14px; max-width:440px;
  padding:22px; border-radius:16px;
  border:1.5px solid #ede0cf; background:linear-gradient(145deg,#fff,#fdf8f2);
  margin-bottom:18px;
}
#profileForm label { color:#685d56; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
#profileForm input {
  display:block; width:100%; margin-top:6px;
  padding:12px 14px; border:1.5px solid #ddd0c2; border-radius:10px;
  font-size:14px; font-family:inherit; background:#fff; color:#1e0f07;
  transition:.2s; outline:none;
}
#profileForm input:focus { border-color:#c4864a; box-shadow:0 0 0 3px rgba(196,134,74,.12); }
#profileForm .primary-button {
  background:linear-gradient(135deg,var(--brown),#c4864a);
  border:none; border-radius:12px; padding:12px 24px;
  color:#fff; font-size:11px; font-weight:800; letter-spacing:.06em;
  cursor:pointer; transition:.2s;
  box-shadow:0 4px 14px rgba(101,56,22,.25);
}
#profileForm .primary-button:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(101,56,22,.35); }

/* Ação botões */
.profile-actions-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.profile-action-btn {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border:1.5px solid #ede0cf; border-radius:14px;
  background:#fff; cursor:pointer; text-align:left;
  transition:.2s;
}
.profile-action-btn:hover { border-color:#c4864a; background:#fdf8f2; transform:translateX(3px); box-shadow:0 4px 14px rgba(101,56,22,.08); }
.profile-action-icon {
  width:42px; height:42px; flex-shrink:0; border-radius:12px;
  background:linear-gradient(135deg,var(--brown),#c4864a);
  display:grid; place-items:center; color:#fff;
}
.profile-action-btn strong { display:block; font-size:13px; font-weight:700; color:#1e0f07; margin-bottom:2px; }
.profile-action-btn small { display:block; font-size:10px; color:#9c8d83; }

/* Proteção */
.account-protection {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px;
  background:#f0f7f3; border:1px solid rgba(47,112,72,.15);
  color:#2f7048;
}
.account-protection svg { flex-shrink:0; }
.account-protection strong { display:block; font-size:11px; font-weight:800; margin-bottom:2px; }
.account-protection small { display:block; font-size:10px; color:#4a8a62; }

/* ── MEUS PEDIDOS ─────────────────────────────────────────────── */
.orders-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:24px; padding-bottom:20px;
  border-bottom:1px solid #ede5d8;
}
.orders-header h2 { font-family:Georgia,serif; font-size:28px; font-weight:400; color:#1e0f07; margin:6px 0 6px; }
.orders-header p { color:#7c716a; font-size:11px; margin:0; }
.orders-header-icon {
  width:56px; height:56px; flex-shrink:0; border-radius:14px;
  background:linear-gradient(135deg,var(--brown),#c4864a);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 4px 14px rgba(101,56,22,.25);
}
.customer-orders { display:grid; gap:12px; }
.customer-order-card {
  display:grid; grid-template-columns:1fr auto;
  gap:16px; padding:18px 20px;
  border:1.5px solid #ede0cf; border-radius:16px;
  background:#fff; cursor:pointer;
  transition:.2s; position:relative; overflow:hidden;
}
.customer-order-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--brown),#c4864a);
  opacity:0; transition:.2s;
}
.customer-order-card:hover { border-color:#c4864a; box-shadow:0 6px 20px rgba(101,56,22,.1); transform:translateX(3px); }
.customer-order-card:hover::before { opacity:1; }
.customer-order-card small { display:block; margin-bottom:4px; color:#8a8078; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.customer-order-card strong { display:block; font-family:Georgia,serif; font-size:15px; font-weight:400; color:#1e0f07; margin-bottom:3px; }
.customer-order-card div > span { color:#7a6e67; font-size:11px; }
.order-status { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:20px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.order-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.order-status.paid { color:#2f7048; background:#e4f5ec; border:1px solid rgba(47,112,72,.2); }
.order-status.pending { color:#7a5c1e; background:#fdf3dc; border:1px solid rgba(122,92,30,.2); }
.order-status.shipped { color:#1e5f8a; background:#dff0fa; border:1px solid rgba(30,95,138,.2); }
.order-status.delivered { color:#4a5568; background:#edf2f7; border:1px solid rgba(74,85,104,.2); }
.order-status.cancelled { color:#7a2e2e; background:#fde8e8; border:1px solid rgba(122,46,46,.2); }
.order-card-right { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; }
.order-card-total { font-family:Georgia,serif; font-size:18px; font-weight:400; color:var(--brown); }


/* ════════════════════════════════════════════════════════════════
   COOKIE BANNER
   ════════════════════════════════════════════════════════════════ */
.cookie-banner {
  position:fixed; z-index:1200; bottom:24px; left:50%; transform:translateX(-50%);
  width:min(780px,calc(100vw - 32px));
  background:linear-gradient(135deg,#1e0f07,#3a2010);
  border:1px solid rgba(196,134,74,.3); border-radius:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  animation:cookieSlideUp .4s cubic-bezier(.2,.8,.2,1);
}
.cookie-banner.cookie-hiding { animation:cookieSlideDown .4s forwards; }
@keyframes cookieSlideUp { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes cookieSlideDown { to{opacity:0;transform:translateX(-50%) translateY(20px)} }
.cookie-banner-inner {
  display:flex; align-items:center; gap:16px;
  padding:18px 22px; flex-wrap:wrap;
}
.cookie-banner-icon { flex-shrink:0; width:52px; height:52px; background:rgba(196,134,74,.15); border:1px solid rgba(196,134,74,.3); border-radius:50%; display:grid; place-items:center; }
.cookie-banner-icon img { width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; }
.cookie-banner-text { flex:1; min-width:200px; }
.cookie-banner-text strong { display:block; font-size:13px; font-weight:800; color:#fff; margin-bottom:4px; }
.cookie-banner-text p { font-size:11px; color:rgba(255,255,255,.65); line-height:1.5; margin:0; }
.cookie-banner-text a { color:#c4864a; text-decoration:none; }
.cookie-banner-text a:hover { text-decoration:underline; }
.cookie-banner-actions { display:flex; gap:8px; flex-shrink:0; }
.cookie-btn-accept {
  padding:10px 20px; border:none; border-radius:10px;
  background:linear-gradient(135deg,#c4864a,#7a3e18);
  color:#fff; font-size:11px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 12px rgba(196,134,74,.3);
  transition:.2s;
}
.cookie-btn-accept:hover { transform:translateY(-1px); }
.cookie-btn-decline {
  padding:10px 16px; border:1px solid rgba(255,255,255,.2); border-radius:10px;
  background:transparent; color:rgba(255,255,255,.65); font-size:11px; cursor:pointer; transition:.2s;
}
.cookie-btn-decline:hover { border-color:rgba(255,255,255,.4); color:#fff; }

/* ════════════════════════════════════════════════════════════════
   NEWSLETTER
   ════════════════════════════════════════════════════════════════ */
.footer-newsletter {
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:32px max(5vw,28px);
  background:rgba(196,134,74,.05);
}
.footer-newsletter-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; max-width:1300px; margin:0 auto;
}
.footer-newsletter strong { display:block; font-family:Georgia,serif; font-size:18px; color:#f4e9da; margin-bottom:4px; }
.footer-newsletter p { color:rgba(255,255,255,.5); font-size:12px; margin:0; }
.newsletter-form { display:flex; gap:0; border-radius:12px; overflow:hidden; border:1px solid rgba(196,134,74,.3); }
.newsletter-form input {
  flex:1; min-width:220px; padding:12px 16px; border:none;
  background:rgba(255,255,255,.06); color:#fff; font-size:13px; outline:none;
}
.newsletter-form input::placeholder { color:rgba(255,255,255,.35); }
.newsletter-form button {
  padding:12px 22px; border:none; background:linear-gradient(135deg,#c4864a,#7a3e18);
  color:#fff; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; transition:.2s;
}
.newsletter-form button:hover { background:linear-gradient(135deg,#d4976a,#8a4e28); }
.newsletter-success { color:#c4864a; font-size:13px; font-weight:700; padding:12px 0; }

/* ════════════════════════════════════════════════════════════════
   GUIA DE TAMANHOS MODAL
   ════════════════════════════════════════════════════════════════ */
.size-guide-modal {
  position:relative; width:min(720px,96vw); max-height:88vh;
  overflow-y:auto; background:#fff; border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
}
.size-guide-header {
  padding:32px 36px 20px; background:linear-gradient(135deg,#2c1a10,#5a3520);
  color:#fff;
}
.size-guide-header h2 { font-family:Georgia,serif; font-size:26px; font-weight:400; margin:0 0 6px; }
.size-guide-header p { color:rgba(255,255,255,.65); font-size:13px; margin:0; }
.size-guide-tabs { display:flex; gap:8px; padding:20px 36px 0; border-bottom:1px solid #ede5d8; }
.sg-tab {
  padding:10px 18px; border:none; border-radius:10px 10px 0 0;
  background:transparent; color:#7a6558; font-size:12px; font-weight:700;
  cursor:pointer; transition:.2s; border-bottom:3px solid transparent;
}
.sg-tab.active { color:var(--brown); border-bottom-color:var(--brown); background:#fdf8f2; }
.sg-panel { display:none; padding:24px 36px 32px; }
.sg-panel.active { display:block; }
.sg-tip {
  padding:12px 16px; border-radius:10px; background:#fdf8f2;
  border-left:3px solid #c4864a; font-size:12px; color:#5d4a3d;
  margin-bottom:16px; line-height:1.6;
}
.sg-tip strong { color:var(--brown); }
.sg-table { width:100%; border-collapse:collapse; font-size:13px; }
.sg-table th {
  padding:10px 14px; text-align:left; font-size:9px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#8a7060;
  background:#faf6f0; border-bottom:2px solid #ede5d8;
}
.sg-table td { padding:10px 14px; border-bottom:1px solid #f0ebe4; color:#3d2510; }
.sg-table tr:hover td { background:#fdf8f2; }
.sg-table tr td:first-child { font-family:Georgia,serif; font-weight:600; color:var(--brown); font-size:15px; }
.sg-note { margin-top:14px; font-size:11px; color:#8a7060; font-style:italic; padding:10px 14px; background:#fdf8f2; border-radius:8px; }

/* ════════════════════════════════════════════════════════════════
   FORÇA DA SENHA
   ════════════════════════════════════════════════════════════════ */
.pw-strength-bar {
  height:4px; border-radius:2px; background:#e8e0d8; margin-top:6px; overflow:hidden;
}
.pw-strength-fill { height:100%; width:0; border-radius:2px; transition:width .3s,background .3s; }
.pw-strength-msg { font-size:10px; margin-top:4px; font-weight:700; min-height:14px; }


/* ════════════════════════════════════════════════════════════════
   PERFIL — SIDEBAR MELHORADO
   ════════════════════════════════════════════════════════════════ */
.account-side-brand {
  display:flex; align-items:center; gap:8px; margin-bottom:28px;
  padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1);
  width:100%;
}
.account-side-logo { width:28px; height:28px; object-fit:contain; filter:brightness(0) invert(1); opacity:.8; }
.account-side-brand small { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.account-large-avatar {
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg,rgba(196,134,74,.3),rgba(196,134,74,.1));
  border:2px solid rgba(196,134,74,.5);
  display:grid; place-items:center; font-family:Georgia,serif;
  font-size:32px; color:#f4e9da; margin-bottom:14px;
  box-shadow:0 0 0 4px rgba(196,134,74,.12);
}
.account-side-greeting { color:#c4864a; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; display:block; }
.account-modal-side h2 { margin:4px 0 8px; font-family:Georgia,serif; font-size:22px; font-weight:400; }
.account-modal-side p { margin:0 0 24px; color:rgba(255,255,255,.55); font-size:11px; line-height:1.5; }
.account-side-nav { display:flex; flex-direction:column; gap:4px; width:100%; margin-bottom:auto; }
.account-side-nav button {
  width:100%; display:flex; align-items:center; gap:10px;
  min-height:44px; border:none; border-radius:10px; padding:0 14px;
  color:rgba(255,255,255,.6); background:transparent;
  cursor:pointer; font-size:12px; font-weight:700; text-align:left;
  transition:.18s; border-left:3px solid transparent;
}
.account-side-nav button:hover { color:#fff; background:rgba(255,255,255,.08); }
.account-side-nav button.active { color:#fff; background:rgba(196,134,74,.15); border-left-color:#c4864a; }
.account-side-nav button svg { flex-shrink:0; opacity:.7; }
.account-side-nav button.active svg { opacity:1; }
.account-side-help {
  display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.4); font-size:10px; text-decoration:none;
  margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08);
  transition:.18s;
}
.account-side-help:hover { color:rgba(196,134,74,.9); }


/* ════════════════════════════════════════════════════════════════
   PERFIL — REDESIGN INOVADOR
   ════════════════════════════════════════════════════════════════ */

/* Hero do perfil */
.profile-hero {
  position:relative; margin:-50px -42px 24px; padding:32px 36px 0;
  background:linear-gradient(135deg,#1e0f07 0%,#3d2210 50%,#5a3520 100%);
  overflow:hidden;
}
.profile-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 90% 20%,rgba(196,134,74,.18),transparent),
    radial-gradient(ellipse 40% 60% at 10% 80%,rgba(196,134,74,.08),transparent);
}
.profile-hero-bg::after {
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 0,transparent 50%);
  background-size:20px 20px;
}
.profile-hero-content { position:relative; display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.profile-hero-avatar {
  width:72px; height:72px; flex-shrink:0; border-radius:50%;
  background:linear-gradient(135deg,#c4864a,#7a3e18);
  display:grid; place-items:center;
  font-family:Georgia,serif; font-size:28px; font-weight:400; color:#fff;
  box-shadow:0 0 0 3px rgba(196,134,74,.3),0 8px 24px rgba(0,0,0,.4);
}
.profile-member-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:20px;
  background:rgba(196,134,74,.2); border:1px solid rgba(196,134,74,.4);
  color:#e4b47a; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:8px;
}
.profile-hero-info h2 { font-family:Georgia,serif; font-size:22px; font-weight:400; color:#fff; margin:0 0 4px; }
.profile-hero-email { font-size:11px; color:rgba(255,255,255,.5); margin:0; }
.profile-hero-stats {
  position:relative; display:flex; align-items:center;
  background:rgba(0,0,0,.25); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.08);
  margin:0 -36px; padding:0 36px;
}
.profile-hero-stat { flex:1; padding:16px 0; text-align:center; }
.profile-hero-stat strong { display:block; font-family:Georgia,serif; font-size:20px; font-weight:400; color:#c4864a; margin-bottom:3px; }
.profile-hero-stat span { font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.profile-hero-stat-divider { width:1px; height:32px; background:rgba(255,255,255,.1); flex-shrink:0; }

/* Ações rápidas */
.profile-quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; }
.pqa-card {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:16px;
  border:1.5px solid #ede0cf; background:#fff;
  cursor:pointer; text-align:left; text-decoration:none;
  transition:.22s; position:relative; overflow:hidden;
}
.pqa-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#c4864a,#7a3e18); opacity:0; transition:.22s;
}
.pqa-card:hover { border-color:#c4864a; box-shadow:0 6px 20px rgba(101,56,22,.12); transform:translateY(-2px); }
.pqa-card:hover::before { opacity:1; }
.pqa-icon {
  width:44px; height:44px; flex-shrink:0; border-radius:12px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--brown,#6b4423),#c4864a);
  box-shadow:0 4px 10px rgba(101,56,22,.25);
}
.pqa-orders .pqa-icon { background:linear-gradient(135deg,#2c1a10,#6b4423); }
.pqa-sizes .pqa-icon { background:linear-gradient(135deg,#1a3d2c,#2e7048); }
.pqa-password .pqa-icon { background:linear-gradient(135deg,#1a1f3d,#2e3070); }
.pqa-help .pqa-icon { background:linear-gradient(135deg,#3d1a30,#7a2e60); }
.pqa-card strong { display:block; font-size:13px; font-weight:700; color:#1e0f07; margin-bottom:2px; }
.pqa-card small { display:block; font-size:10px; color:#9c8d83; }
.pqa-arrow { margin-left:auto; flex-shrink:0; color:#c4c0bc; transition:.2s; }
.pqa-card:hover .pqa-arrow { color:#c4864a; transform:translateX(3px); }

/* Editar perfil */
.profile-edit-section {
  border:1.5px solid #ede0cf; border-radius:16px;
  background:#fdfaf6; padding:20px 22px; margin-bottom:16px;
}
.profile-edit-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; color:var(--brown,#6b4423); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
#profileForm { display:flex; flex-direction:column; gap:10px; }
#profileForm label { font-size:10px; font-weight:700; color:#7a6558; letter-spacing:.06em; text-transform:uppercase; }
#profileForm input { display:block; width:100%; margin-top:6px; padding:12px 16px; border:1.5px solid #ddd0c2; border-radius:10px; font-size:14px; font-family:inherit; background:#fff; color:#1e0f07; transition:.2s; outline:none; }
#profileForm input:focus { border-color:#c4864a; box-shadow:0 0 0 3px rgba(196,134,74,.12); }
#profileForm .primary-button { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:11px 24px; border:none; border-radius:10px; background:linear-gradient(135deg,#6b4423,#c4864a); color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em; cursor:pointer; box-shadow:0 4px 12px rgba(101,56,22,.25); transition:.2s; }
#profileForm .primary-button:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(101,56,22,.35); }

/* Segurança */
.profile-security { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:12px; background:linear-gradient(135deg,#f0f7f3,#e8f4ee); border:1px solid rgba(47,112,72,.2); }
.profile-security-icon { width:36px; height:36px; flex-shrink:0; border-radius:50%; background:#2f7048; display:grid; place-items:center; color:#fff; }
.profile-security strong { display:block; font-size:12px; font-weight:800; color:#2f7048; margin-bottom:2px; }
.profile-security small { display:block; font-size:10px; color:#4a8a62; line-height:1.4; }
.profile-security-badge { margin-left:auto; flex-shrink:0; padding:5px 10px; border-radius:6px; background:#2f7048; color:#fff; font-size:9px; font-weight:900; letter-spacing:.1em; }


/* ════════════════════════════════════════════════════════════════
   MOBILE FIXES — contraste e layout
   ════════════════════════════════════════════════════════════════ */

/* Garante fundo branco no modo claro em mobile */
@media(max-width:768px){
  body { background:#fff; color:#1e0f07; }

  /* Hero — texto não corta */
  .hero-copy h1 {
    font-size:clamp(32px,8vw,52px) !important;
    word-break:break-word;
    hyphens:auto;
  }
  .hero-copy { max-width:85% !important; left:5% !important; }

  /* Quick benefits — fundo branco, texto escuro visível */
  .quick-benefits {
    background:#fff !important;
    border:1px solid #ede5d8 !important;
    box-shadow:0 4px 16px rgba(47,29,18,.08) !important;
  }
  .quick-benefits strong { color:#1e0f07 !important; font-size:12px !important; }
  .quick-benefits small { color:#6b5347 !important; font-size:11px !important; }
  .quick-benefits > div { min-height:90px !important; flex-direction:column !important; text-align:center !important; gap:8px !important; padding:14px 10px !important; }

  /* Member bar — contraste */
  .member-bar { background:#fdf8f2 !important; border-bottom:1px solid #ede5d8; }
  .member-bar strong { color:#1e0f07 !important; }
  .member-bar small { color:#6b5347 !important; }
  #personalUserName { color:var(--brown) !important; }

  /* Topbar — fundo sólido */
  .topbar { background:#fff !important; border-bottom:2px solid #ede5d8 !important; }
  .topbar .store-logo path, .topbar .store-logo rect { fill:#1e0f07; }

  /* Department nav */
  .department-nav { background:linear-gradient(135deg,#2c1a10,#5a3520) !important; }
  .department-nav button { color:#fff !important; }

  /* Categorias — texto sempre visível */
  .store-category-copy strong { text-shadow:0 2px 8px rgba(0,0,0,.8) !important; font-size:clamp(14px,4vw,18px) !important; }
  .store-category-copy small { text-shadow:0 1px 4px rgba(0,0,0,.6) !important; }

  /* Product cards — fundo branco */
  .product-card { background:#fff !important; }
  .product-info { background:#fff !important; }
  .product-info h3 { color:#1e0f07 !important; font-size:13px !important; }
  .product-info small { color:#6b5347 !important; }

  /* Product grid */
  .product-grid { grid-template-columns:1fr !important; gap:14px !important; }

  /* Seções de fundo escuro no topbar */
  .topbar-bar { background:#fdf8f2 !important; }
  .topbar-bar span, .topbar-bar a { color:#3d2510 !important; }

  /* Botões */
  .light-button { background:rgba(255,255,255,.2) !important; border:2px solid rgba(255,255,255,.6) !important; color:#fff !important; font-size:13px !important; padding:14px 28px !important; }
}

/* Contraste geral — força texto visível independente do tema */
.quick-benefits strong { color:#1e0f07; }
.quick-benefits small { color:#6b5347; }
.product-info h3 { color:#1e0f07; }


/* ════════════════════════════════════════════════════════════════
   MOBILE — FIXES PERFIL E TOPBAR
   ════════════════════════════════════════════════════════════════ */

/* Topbar claro — ícones visíveis */
@media(max-width:768px){
  .topbar-bar { background:#fdf8f2 !important; border-bottom:1px solid #ede5d8; }
  .topbar-bar span, .topbar-bar a, .topbar-bar strong, .topbar-bar small { color:#3d2510 !important; }
  .limeira-weather svg, .limeira-weather .weather-icon { color:#c4864a !important; }
  .lang-toggle { background:rgba(101,56,22,.08) !important; border-color:rgba(101,56,22,.2) !important; }
  .lang-btn { color:rgba(101,56,22,.6) !important; }
  .lang-btn.active { color:#fff !important; }
  .theme-toggle { background:rgba(101,56,22,.08) !important; border-color:rgba(101,56,22,.2) !important; color:#3d2510 !important; }
}

/* Perfil hero — tamanho no mobile */
@media(max-width:600px){
  .profile-hero { margin:-28px -22px 20px !important; padding:22px 20px 0 !important; }
  .profile-hero-content h2, #accountDisplayNameContent {
    font-size:18px !important;
    word-break:break-word;
    overflow-wrap:break-word;
  }
  .profile-hero-avatar { width:56px !important; height:56px !important; font-size:22px !important; }
  .profile-member-badge { font-size:8px !important; padding:3px 10px !important; }
  .profile-hero-stat strong { font-size:15px !important; }
  .profile-hero-stat span { font-size:7px !important; }
  .profile-hero-stats { margin:0 -20px !important; padding:0 20px !important; }
  .profile-hero-stat { padding:12px 0 !important; }

  /* Quick actions — melhor em mobile */
  .profile-quick-actions { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .pqa-card { padding:12px 14px !important; flex-wrap:nowrap !important; gap:10px !important; }
  .pqa-icon { width:36px !important; height:36px !important; flex-shrink:0; }
  .pqa-card strong { font-size:12px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pqa-card small { display:none !important; }
  .pqa-arrow { display:none !important; }

  /* Editar perfil */
  .profile-edit-section { padding:16px !important; }

  /* Account modal — ocupa tela toda */
  .account-modal { grid-template-columns:1fr !important; width:100vw !important; max-height:100vh !important; border-radius:0 !important; }
  .account-modal-side { min-height:auto !important; padding:20px !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:12px !important; }
  .account-side-brand { display:none !important; }
  .account-large-avatar { width:52px !important; height:52px !important; font-size:22px !important; margin-bottom:0 !important; }
  .account-modal-side h2 { font-size:18px !important; margin:0 !important; }
  .account-modal-side p { display:none !important; }
  .account-side-nav { flex-direction:row !important; gap:6px !important; width:100% !important; }
  .account-side-nav button { min-height:36px !important; font-size:10px !important; padding:0 10px !important; border-radius:8px !important; flex:1; justify-content:center; }
  .account-side-nav button svg { display:none; }
  .account-side-help { display:none !important; }
  .account-side-greeting { display:none !important; }
  .account-modal-content { padding:20px !important; max-height:calc(100vh - 160px) !important; overflow-y:auto; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE — CENTRALIZAR MODAL DE CONTA
   ════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  #accountModal {
    padding:0 !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  .account-modal {
    width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    left:0 !important;
    right:0 !important;
    border-radius:0 !important;
    position:relative !important;
    transform:none !important;
  }
  #productModal {
    padding:0 !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }
  .product-modal {
    width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    border-radius:24px 24px 0 0 !important;
  }
  #checkoutModal {
    padding:0 !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }
  .checkout-modal {
    width:100vw !important;
    margin:0 !important;
    border-radius:24px 24px 0 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   CORREÇÃO FINAL MOBILE — TOPBAR MARROM + MODAL CENTRALIZADO
   ════════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* Topbar — fundo marrom escuro sempre */
  .topbar {
    background:#1d1510 !important;
    color:rgba(255,255,255,.85) !important;
    border-bottom:none !important;
  }
  .topbar span, .topbar a, .topbar strong, .topbar small,
  .topbar-left span, .topbar-right span,
  .topbar-contact, .topbar-email,
  .limeira-weather strong, .limeira-clock strong { color:rgba(255,255,255,.85) !important; }
  .limeira-weather small, .limeira-clock small { color:rgba(255,255,255,.5) !important; }
  .weather-icon { color:#c4864a !important; }
  .lang-toggle { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.2) !important; }
  .lang-btn { color:rgba(255,255,255,.55) !important; }
  .lang-btn.active { color:#fff !important; background:linear-gradient(135deg,rgba(196,134,74,.9),rgba(101,56,22,.95)) !important; }
  .theme-toggle { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.2) !important; color:rgba(255,255,255,.85) !important; }

  /* Modal conta — centralizado */
  #accountModal {
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  .account-modal {
    position:relative !important;
    left:auto !important; right:auto !important;
    width:100% !important;
    max-width:100vw !important;
    margin:0 auto !important;
    border-radius:0 !important;
    transform:none !important;
  }

  /* Modal produto — centralizado */
  #productModal {
    padding:0 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }
  .product-modal {
    width:100% !important;
    max-width:100vw !important;
    margin:0 auto !important;
    border-radius:24px 24px 0 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE — PRODUCT CARDS FIX
   ════════════════════════════════════════════════════════════════ */
@media(max-width:600px){

  /* Grid de produtos — 1 por linha */
  .product-grid { grid-template-columns:1fr !important; gap:14px !important; }
  .product-card { overflow:hidden !important; width:100% !important; min-width:0 !important; }

  /* Imagem menor no mobile */
  .product-image { height:180px !important; }

  /* Info do produto */
  .product-info { padding:10px !important; }
  .product-info h3 { font-size:12px !important; min-height:auto !important; margin:5px 0 4px !important; line-height:1.2 !important; }
  .product-info > small { font-size:7px !important; }

  /* Specs (aba/tamanhos) */
  .hat-product-details { flex-wrap:wrap !important; gap:4px !important; font-size:9px !important; }
  .hat-product-details span { font-size:9px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(50% - 4px); }

  /* Preço */
  .product-prices strong { font-size:15px !important; }
  .product-prices s { font-size:9px !important; }
  .installment { font-size:9px !important; margin:4px 0 10px !important; }

  /* Botões — empilhados verticalmente */
  .product-actions { grid-template-columns:1fr !important; gap:5px !important; }
  .product-actions button { min-height:36px !important; font-size:9px !important; padding:0 8px !important; border-radius:8px !important; width:100% !important; }
  .product-actions button:first-child { justify-content:center !important; }
  .product-actions button:first-child b { display:none !important; }

  /* Badge de desconto — cabe no card */
  .discount-pct {
    font-size:9px !important;
    padding:2px 6px !important;
    position:relative !important;
    display:inline-flex !important;
    vertical-align:middle !important;
    margin-left:4px !important;
  }

  /* Badge de categoria (MAIS VENDIDO etc) */
  .badge { font-size:6px !important; padding:5px 7px !important; }

  /* Favorito */
  .favorite { width:28px !important; height:28px !important; font-size:14px !important; top:7px !important; right:7px !important; }

  /* Quick look */
  .quick-look { display:none !important; }

  /* Rating */
  .product-rating { display:none !important; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE FINAL FIX — 3 PROBLEMAS
   ════════════════════════════════════════════════════════════════ */

/* ── 1. TOPBAR MARROM (email, telefone, internacional) ─────────── */
@media(max-width:900px){
  div.topbar,
  .topbar {
    background:#1d1510 !important;
  }
  .topbar *,
  .topbar span,
  .topbar a,
  .topbar small,
  .topbar strong,
  .topbar p,
  .topbar-left *,
  .topbar-right * {
    color:rgba(255,255,255,.82) !important;
  }
  .limeira-weather small,
  .limeira-clock small { color:rgba(255,255,255,.5) !important; }
  .topbar a:hover { color:#c4864a !important; }
  .lang-btn { color:rgba(255,255,255,.55) !important; }
  .lang-btn.active { color:#fff !important; }
  .theme-toggle { color:rgba(255,255,255,.85) !important; }
  .theme-toggle-track { background:#f3d29d !important; }
}

/* ── 2. MODAL CONTA — CENTRALIZADO DEFINITIVO ──────────────────── */
@media(max-width:700px){
  #accountModal.active {
    display:block !important;
    padding:0 !important;
    overflow-y:auto !important;
  }
  #accountModal .account-modal {
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-height:100vh !important;
    margin:0 !important;
    left:0 !important;
    right:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:1fr !important;
  }
  #accountModal .account-modal-side {
    min-height:auto !important;
    padding:16px 20px !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:12px !important;
  }
  #accountModal .account-modal-content {
    flex:1 !important;
    padding:20px 16px 40px !important;
    max-height:none !important;
    overflow-y:visible !important;
  }
  .profile-hero {
    margin:-20px -16px 20px !important;
    padding:20px 16px 0 !important;
  }
  .profile-hero-content h2,
  #accountDisplayNameContent {
    font-size:16px !important;
  }
  .profile-hero-avatar { width:48px !important; height:48px !important; font-size:20px !important; }
  .profile-hero-stats { margin:0 -16px !important; padding:0 8px !important; overflow-x:auto !important; }
  .profile-hero-stat { padding:10px 8px !important; min-width:60px; }
  .profile-hero-stat strong { font-size:14px !important; }
  .profile-hero-stat span { font-size:7px !important; }
  .profile-quick-actions { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .pqa-card { padding:12px !important; }
  .pqa-card strong { font-size:11px !important; }
  .pqa-card small { display:none !important; }
  .pqa-arrow { display:none !important; }
  .modal-close { top:12px !important; right:12px !important; z-index:10; }
}

/* ── 3. PRODUTO — 1 POR LINHA NO MOBILE ────────────────────────── */
@media(max-width:600px){
  .product-grid {
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .product-card { width:100% !important; max-width:100% !important; }
  .product-image { height:240px !important; }
  .product-info { padding:14px !important; }
  .product-info h3 { font-size:16px !important; margin:6px 0 6px !important; }
  .product-info > small { font-size:9px !important; }
  .product-prices strong { font-size:20px !important; }
  .product-prices s { font-size:11px !important; }
  .installment { font-size:10px !important; }
  .product-actions { grid-template-columns:1fr auto !important; gap:8px !important; }
  .product-actions button { min-height:42px !important; font-size:10px !important; padding:0 14px !important; border-radius:10px !important; }
  .product-actions button:first-child b { display:inline !important; }
  .hat-product-details { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin:6px 0 !important; }
  .hat-product-details span { font-size:10px !important; }
  .discount-pct { font-size:10px !important; padding:3px 8px !important; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE DEFINITIVO — SEM CONFLITO
   ════════════════════════════════════════════════════════════════ */

/* Produto: 1 por linha — regra no fim ganha */
@media screen and (max-width:600px){
  .product-grid { grid-template-columns:1fr !important; }
  .product-image { height:260px !important; }
  .product-info h3 { font-size:16px !important; }
  .product-actions { grid-template-columns:1fr auto !important; }
}

/* Modal conta: centralizado — usa o overlay do modal */
@media screen and (max-width:700px){
  #accountModal { padding:0 !important; align-items:flex-start !important; justify-content:center !important; }
  #accountModal > .account-modal {
    width:100% !important;
    max-width:100vw !important;
    min-height:100vh !important;
    margin:0 auto !important;
    border-radius:0 !important;
    grid-template-columns:1fr !important;
    display:flex !important;
    flex-direction:column !important;
  }
  #accountModal > .account-modal > .account-modal-side {
    min-height:auto !important;
    padding:14px 16px !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
  }
  #accountModal > .account-modal > .account-modal-content {
    padding:16px !important;
    max-height:none !important;
    flex:1 !important;
  }
}