:root{
  --yellow:#ffbf16;
  --yellow-2:#ffd33f;
  --red:#ed1c24;
  --red-dark:#bd1119;
  --black:#050505;
  --dark:#1d1d1d;
  --dark2:#2e2e2e;
  --text:#111;
  --muted:#777;
  --light:#f5f5f5;
  --white:#fff;
  --line:#e7e7e7;
  --shadow:0 18px 45px rgba(0,0,0,.11);
  --soft-shadow:0 14px 28px rgba(17,17,17,.08);
  --radius:16px;
  --page-bg:linear-gradient(180deg,#f8f7f4 0%,#f2f2f0 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--page-bg);line-height:1.45}
body.modal-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92%);margin-inline:auto}

.top-strip{position:sticky;top:0;z-index:60;background:#050505;color:#fff;border-bottom:1px solid #222;font-size:12px}
.top-inner{height:38px;display:flex;justify-content:space-between;align-items:center}
.top-inner strong{color:var(--yellow);letter-spacing:.3px}
.top-links{display:flex;gap:24px;color:#ddd}
.top-links a:hover{color:var(--yellow)}

.site-header{position:sticky;top:38px;z-index:50;background:rgba(8,8,8,.97);backdrop-filter:blur(10px);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.18);border-bottom:1px solid rgba(255,255,255,.06)}
.header-main{display:grid;grid-template-columns:240px 1fr auto;gap:18px;align-items:center;padding:10px 0;min-height:78px}
.mobile-toggle{display:none;background:none;color:#fff;border:0;font-size:24px;opacity:.9}
.brand{display:flex;align-items:center;justify-content:flex-start;min-width:0;line-height:0;transform:translateY(-1px)}
.brand-logo{width:250px;height:auto;max-height:80px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.14));display:block;vertical-align:middle}
.search{height:46px;background:#fff;border:2px solid rgba(255,191,22,.8);border-radius:12px;display:flex;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.08);margin-left:2px}
.search input{flex:1;border:0;outline:0;padding:0 18px;font-size:15px;color:#111;background:transparent}
.search button{width:58px;border:0;border-left:1px solid #e8e8e8;background:linear-gradient(180deg,#ffe38a,#ffbf16);color:#111;font-size:28px;line-height:1}
.header-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.head-action{min-height:46px;background:linear-gradient(180deg,#171717,#0d0d0d);color:#fff;border:1px solid rgba(255,255,255,.08);padding:8px 12px;display:flex;align-items:center;gap:8px;position:relative;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.12);margin-left:2px;transition:all .2s ease}
.head-action:hover{transform:translateY(-1px);border-color:rgba(255,191,22,.6)}
.head-action span{font-size:18px}
.head-action b{font-size:12px;letter-spacing:.04em}
.head-action.balance b{font-size:13px}
.head-action.circle{width:46px;height:46px;border-radius:50%;justify-content:center;padding:0;font-size:18px}
.head-action i{font-style:normal;position:absolute;right:-2px;top:-2px;background:linear-gradient(135deg,#ff7a18,#ffbf16);color:#111;font-size:9px;min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 8px rgba(255,191,22,.35);font-weight:900}
.main-nav{background:#222;border-top:1px solid rgba(255,255,255,.05);border-bottom:3px solid var(--red)}
.nav-inner{display:flex;align-items:stretch}
.nav-inner a{padding:13px 16px;border-right:1px solid rgba(255,255,255,.08);font-size:13px;font-weight:800;white-space:nowrap;transition:all .2s ease;letter-spacing:.02em}
.nav-inner a:hover,.nav-inner a.active{background:linear-gradient(180deg,#ffd75a,#ffbf16);color:#111}
.nav-inner a.hot{background:linear-gradient(180deg,#eb2a31,#c8101b);color:#fff}

.hero{position:relative;overflow:hidden;background:#2d2d2d;color:#fff}
.hero-bg{position:absolute;inset:0;background-image:radial-gradient(#fff2 1.7px,transparent 1.7px);background-size:37px 37px;opacity:.27}
.hero-content{min-height:555px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;position:relative;gap:25px}
.hero-copy{padding:64px 0}
.hero-tag{font-weight:900;letter-spacing:2px;color:var(--yellow);font-size:15px}
.hero h1{font-family:Anton,Impact,sans-serif;font-size:82px;line-height:.91;letter-spacing:1px;margin:15px 0 22px;text-shadow:5px 5px 0 #000}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero-copy p{font-size:18px;max-width:640px;color:#ececec}
.hero-buttons{display:flex;gap:14px;margin-top:31px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:8px;border:0;font-weight:900;letter-spacing:.3px;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn.yellow{background:var(--yellow);color:#111}
.btn.dark{background:#0b0b0b;color:#fff;border:1px solid #454545}
.btn.full{width:100%}
.hero-points{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px;color:#ddd;font-size:11px}

.hero-product{height:440px;position:relative}
.product-stage{position:absolute;inset:35px 0 10px}
.stage-card{position:absolute;background:linear-gradient(140deg,#ff2b33,#c80c15);clip-path:polygon(8% 3%,100% 12%,91% 99%,0 84%);border:2px solid #161616;box-shadow:22px 23px 0 rgba(0,0,0,.35)}
.stage-back{width:86%;height:67%;top:22%;right:-5%;transform:rotate(2deg);opacity:.74}
.stage-front{width:72%;height:64%;top:13%;right:7%;transform:rotate(6deg);display:grid;place-items:center}
.big-product{font-size:125px;filter:drop-shadow(12px 14px 0 #111);transform:rotate(3deg)}
.floating{position:absolute;z-index:4;font-size:48px;filter:drop-shadow(5px 8px 0 #111);animation:float 3.4s ease-in-out infinite}
.f1{left:6%;top:16%}.f2{right:6%;top:46%;animation-delay:.6s}.f3{left:17%;bottom:4%;animation-delay:1.2s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-13px) rotate(4deg)}}
.burst{position:absolute;z-index:8;right:2%;top:0;width:142px;height:142px;background:var(--yellow);color:#111;display:grid;place-items:center;text-align:center;font-weight:900;line-height:1.02;clip-path:polygon(50% 0,61% 12%,77% 7%,82% 23%,98% 31%,90% 47%,100% 61%,83% 69%,84% 87%,66% 86%,54% 100%,43% 88%,25% 95%,21% 78%,5% 72%,12% 56%,0 43%,15% 34%,10% 18%,29% 19%,37% 4%)}
.burst strong{font-size:31px}
.hero-mini-tag{position:absolute;z-index:10;left:8%;bottom:0;background:#111;border:3px solid var(--yellow);color:var(--yellow);padding:9px 20px;font-family:Anton,sans-serif;font-size:26px;line-height:.95;transform:rotate(-6deg)}
.hero-mini-tag small{font-family:Inter,sans-serif;font-size:11px;letter-spacing:3px;color:#fff}

.promo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:18px}
.promo-row.second-row{grid-template-columns:1fr 1fr;padding-top:18px;padding-bottom:18px}
.promo-card{min-height:145px;border-radius:15px;padding:22px 25px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;transition:.2s;box-shadow:0 8px 25px rgba(0,0,0,.08)}
.promo-card:hover{transform:translateY(-3px)}
.promo-card span{font-size:20px;line-height:1.05;font-weight:800;position:relative;z-index:2}
.promo-card b{font-size:28px}
.promo-card i{font-style:normal;font-size:68px;filter:drop-shadow(6px 7px 0 rgba(0,0,0,.18))}
.card-yellow{background:var(--yellow)}
.card-blue{background:#29a9d8;color:#fff}
.card-red{background:#df2a31;color:#fff}
.card-dark{background:#252525;color:#fff}

.categories-section,.products-section,.benefits,.newsletter,.map-section{padding:74px 0}
.products-section{background:#101010;color:#fff}
.products-section.light{background:#f6f6f6;color:#111}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.section-label{font-size:14px;color:#c98400;font-weight:900;letter-spacing:2px}
.products-section:not(.light) .section-label{color:var(--yellow)}
.section-head h2{font-size:clamp(28px,3vw,40px);line-height:1.03;margin-top:7px;letter-spacing:-.05em}
.section-head>a{font-weight:800;color:#c27d00}
.product-heading{align-items:end}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters select{height:42px;border:1px solid #ddd;border-radius:10px;background:#fff;padding:0 13px;font-weight:700;color:#444;box-shadow:0 8px 16px rgba(17,17,17,.04)}

.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.category-card{border:0;border-radius:18px;text-align:left;min-height:180px;padding:23px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--soft-shadow);transition:transform .22s ease,box-shadow .22s ease;border:2px solid transparent}
.category-card:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(0,0,0,.12)}
.category-card.is-active{border-color:#111;box-shadow:0 18px 35px rgba(0,0,0,.14),0 0 0 4px rgba(255,191,22,.35)}
.category-card span{font-size:43px}
.category-card strong{font-size:18px}
.category-card small{font-size:11px;opacity:.72}
.cat-yellow{background:linear-gradient(145deg,#ffe170,#ffb900)}
.cat-blue{background:linear-gradient(145deg,#d6f5ff,#64c8ed)}
.cat-pink{background:linear-gradient(145deg,#ffd7eb,#efa3c8)}
.cat-purple{background:linear-gradient(145deg,#dedcff,#a49ff7)}
.cat-green{background:linear-gradient(145deg,#e1ffd1,#9cdc72)}

.catalog-section{padding:0 0 74px}
.catalog-tabs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.catalog-tab{background:#fff;border:1px solid #ddd;border-radius:999px;padding:11px 18px;font-weight:800;color:#333;box-shadow:0 8px 18px rgba(0,0,0,.04)}
.catalog-tab.active{background:var(--yellow);border-color:var(--yellow);color:#111}
.catalog-panel{display:none}
.catalog-panel.active{display:block}
.catalog-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.catalog-header h3{font-size:24px;margin-top:8px}
.catalog-header .btn{min-height:42px;padding:0 18px}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.featured-carousel{position:relative;display:flex;align-items:center;gap:12px}
.featured-viewport{overflow:hidden;flex:1}
.featured-track{display:flex;transition:transform .35s ease}
.featured-slide{min-width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.featured-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#fff;font-size:24px;display:grid;place-items:center;transition:.2s}
.featured-arrow:hover{background:var(--yellow);color:#111;border-color:var(--yellow)}
.product-card{background:#fff;color:#111;border-radius:16px;overflow:hidden;border:1px solid #eaeaea;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;position:relative;box-shadow:0 12px 24px rgba(17,17,17,.04)}
.products-section:not(.light) .product-card{border-color:#eee}
.product-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px rgba(17,17,17,.12)}
.product-media{position:relative;aspect-ratio:1/1;background:#ececec;overflow:hidden}
.product-media img{width:100%;height:100%;object-fit:cover;transition:.3s}
.product-card:hover .product-media img{transform:scale(1.05)}
.sale-badge{position:absolute;top:11px;left:11px;background:linear-gradient(135deg,#f34d4d,#d91821);color:#fff;font-weight:900;font-size:10px;padding:6px 8px;border-radius:6px;box-shadow:0 10px 18px rgba(217,24,33,.2)}
.wish{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;box-shadow:0 3px 14px #0002;font-size:18px;transition:all .2s ease}
.wish:hover{background:#111;color:#fff}
.wish.active{background:var(--red);color:#fff}
.product-info{padding:14px}
.product-info .cat{color:#888;font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.08em}
.product-info h3{font-size:14px;margin:6px 0;min-height:41px;line-height:1.4}
.rating{font-size:12px;color:#e6a300}
.price-row{display:flex;gap:8px;align-items:baseline;margin-top:7px}
.old-price{font-size:11px;color:#999;text-decoration:line-through}
.price{font-size:20px;font-weight:900}
.installments{font-size:10px;color:#666}
.add-cart{width:100%;margin-top:12px;height:41px;border:0;border-radius:9px;background:linear-gradient(180deg,#1b1b1b,#0f0f0f);color:#fff;font-weight:900;transition:all .2s ease}
.add-cart:hover{background:linear-gradient(180deg,#ffd75a,#ffbf16);color:#111;transform:translateY(-1px)}
.detail-btn{width:100%;margin-top:8px;height:36px;border:1px solid #ddd;border-radius:9px;background:#fff;font-weight:800;font-size:11px;transition:all .2s ease}
.detail-btn:hover{border-color:#bfbfbf;background:#fafafa}
.empty{display:none;text-align:center;padding:45px;border-radius:15px;background:#fff;color:#777}

.benefits{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.benefit-grid>div{padding:23px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.benefit-grid>div:last-child{border-right:0}
.benefit-grid strong{font-size:13px}
.benefit-grid span{font-size:11px;color:#888}

.newsletter{background:var(--yellow)}
.newsletter-inner{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}
.newsletter h2{font-size:36px;line-height:1.05;margin:7px 0}
.newsletter p{font-size:13px}
.newsletter form{display:flex;background:#fff;padding:6px;border-radius:9px}
.newsletter input{flex:1;border:0;outline:0;padding:0 12px}
.newsletter .btn{min-width:175px}

.map{height:390px;border-radius:15px;overflow:hidden;box-shadow:var(--shadow);border:1px solid #e7e7e7}
.map iframe{width:100%;height:100%;border:0}

.page-support,.page-tracking,.affiliate-page{padding:44px 0 80px;background:linear-gradient(180deg,#f5f5f3 0%,#f0f0ee 100%)}
.page-shell{width:min(1180px,92%);margin:0 auto}
.support-layout,.tracking-layout,.affiliate-layout{display:grid;grid-template-columns:1.1fr 1.4fr;gap:28px;align-items:start}
.support-card,.tracking-card,.affiliate-card{background:#fff;border:1px solid #ebebeb;border-radius:22px;padding:24px;box-shadow:0 18px 30px rgba(17,17,17,.05)}
.support-card h1,.tracking-card h1,.affiliate-card h1{font-size:36px;line-height:1.05;margin-bottom:16px;letter-spacing:-.04em}
.support-grid,.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.support-stat,.stat-box{background:linear-gradient(180deg,#111 0%,#1d1d1d 100%);color:#fff;border-radius:16px;padding:18px 16px;box-shadow:0 10px 20px rgba(17,17,17,.08)}
.support-stat strong,.stat-box strong{display:block;font-size:20px;margin-bottom:6px}
.support-stat small,.stat-box small{color:#ddd;font-size:11px}
.chat-box{background:#fafafa;border:1px solid #eee;border-radius:18px;padding:18px;height:420px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.chat-thread{display:flex;flex-direction:column;gap:12px;flex:1;overflow:auto}
.chat-bubble{max-width:80%;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.5}
.chat-bubble.agent{background:#111;color:#fff;align-self:flex-start}
.chat-bubble.user{background:#ffd54d;color:#111;align-self:flex-end}
.chat-form{display:flex;gap:10px;margin-top:10px}
.chat-form input{flex:1;height:46px;border:1px solid #ddd;border-radius:10px;padding:0 14px;outline:none}
.chat-form input:focus{border-color:#ffbf16;box-shadow:0 0 0 3px rgba(255,191,22,.14)}
.chat-form button,.primary-btn,.secondary-btn{border:0;border-radius:10px;padding:0 18px;height:46px;font-weight:900;cursor:pointer;transition:all .2s ease}
.primary-btn{background:linear-gradient(180deg,#ffd75a,#ffbf16);color:#111}
.primary-btn:hover{transform:translateY(-1px)}
.secondary-btn{background:#111;color:#fff}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#edfff3;color:#0d7a44;font-weight:700;font-size:11px;margin-bottom:16px}
.status-pill::before{content:"●";font-size:10px}

.support-quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.support-chip{border:1px solid #f0d25e;background:#fffaf0;color:#4d4200;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;cursor:pointer;transition:.2s}
.support-chip:hover{background:#ffd75a;color:#111}
.support-triage{display:grid;grid-template-columns:180px 1fr;gap:16px;margin:18px 0 14px;padding:14px;border:1px solid #f2efe4;border-radius:18px;background:linear-gradient(180deg,#fffdf7,#fff)}
.triage-menu{display:grid;gap:10px}
.triage-item{border:1px solid #eee;background:#f9f9f9;border-radius:12px;padding:11px 12px;text-align:left;font-size:12px;font-weight:800;color:#333;cursor:pointer;transition:.2s}
.triage-item.active,.triage-item:hover{background:#111;color:#fff;border-color:#111;box-shadow:0 10px 18px rgba(17,17,17,.12)}
.triage-panel{background:#fff;border:1px solid #f0ead8;border-radius:16px;padding:16px}
.mini-badge{display:inline-flex;align-items:center;border-radius:999px;background:#fff4c7;color:#6b5600;padding:6px 10px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.triage-panel h3{margin:12px 0 8px;font-size:22px;line-height:1.1;letter-spacing:-.03em}
.triage-panel p{margin:0;color:#666;font-size:12px;line-height:1.6}
.triage-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.triage-steps span{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#f8f8f8;border:1px solid #f0f0f0;color:#333;font-size:10px;font-weight:800}
.chat-bubble{max-width:82%;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.45;word-break:break-word}
.chat-bubble.bot{align-self:flex-start;background:#fff;border:1px solid #eee;color:#111;border-bottom-left-radius:6px}
.chat-bubble.user{align-self:flex-end;background:linear-gradient(135deg,#ffd75a,#ffbf16);color:#111;border-bottom-right-radius:6px}
.chat-input-row{display:flex;gap:10px;align-items:center;border-top:1px solid #ececec;padding-top:12px}
.chat-input-row input{flex:1;height:46px;border:1px solid #e7e7e7;border-radius:12px;padding:0 14px;background:#fff;color:#111}
.chat-input-row input:focus{outline:none;border-color:#ffbf16;box-shadow:0 0 0 3px rgba(255,191,22,.12)}
.chat-input-row button{height:46px;padding:0 16px;border:0;border-radius:12px;background:linear-gradient(135deg,#ffd75a,#ffbf16);color:#111;font-weight:900}
.chat-thread::-webkit-scrollbar{width:7px}
.chat-thread::-webkit-scrollbar-thumb{background:#e7e7e7;border-radius:999px}

.support-widget{position:fixed;right:18px;bottom:18px;z-index:80}
.support-launcher{display:flex;align-items:center;gap:10px;border:0;background:linear-gradient(135deg,#111,#1d1d1d);color:#fff;border-radius:50px;padding:12px 18px;box-shadow:0 18px 35px rgba(0,0,0,.18);font-weight:900;cursor:pointer}
.support-launcher span{font-size:12px;letter-spacing:.05em}
.support-launcher .badge-dot{width:10px;height:10px;border-radius:50%;background:#50d07d;box-shadow:0 0 0 4px rgba(80,208,125,.18)}
.support-panel{display:none;position:absolute;right:0;bottom:72px;width:min(360px,86vw);background:#fff;border:1px solid #ebebeb;border-radius:18px;padding:16px;box-shadow:0 25px 50px rgba(0,0,0,.14)}
.support-widget.open .support-panel{display:block}
.support-widget.open .support-launcher{background:linear-gradient(135deg,#ffd75a,#ffbf16);color:#111}
.support-widget.open .badge-dot{background:#111;box-shadow:0 0 0 4px rgba(255,191,22,.2)}
.support-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.support-panel-header h3{font-size:16px}
.support-close{border:0;background:#f5f5f5;color:#111;border-radius:8px;padding:6px 8px;font-weight:800;cursor:pointer}
.support-panel .chat-box{height:300px;padding:12px}
.support-panel .chat-thread{gap:10px}
.support-panel .chat-input-row input{height:40px}
.support-panel .chat-input-row button{height:40px}
.support-human-btn{margin-top:12px;width:100%;border:0;border-radius:10px;background:#111;color:#fff;height:42px;font-weight:800;cursor:pointer}
.support-human-btn:hover{background:#ffd75a;color:#111}

.tracking-status{margin:24px 0 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.track-step{background:#fff;border:1px solid #e8e8e8;border-radius:14px;padding:16px}
.track-step.active{background:#111;color:#fff;border-color:#111}
.track-step strong{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.8px}
.track-step span{font-size:11px;opacity:.8}
.track-bar{height:8px;background:#eee;border-radius:999px;overflow:hidden;margin:16px 0 22px}
.track-bar > span{display:block;height:100%;width:72%;background:linear-gradient(90deg,#ffbf16,#eaa000)}
.order-box{background:#fff;border:1px solid #eaeaea;border-radius:14px;padding:18px}
.order-box h3{margin-bottom:10px}
.order-table{width:100%;border-collapse:collapse;margin-top:12px}
.order-table th,.order-table td{padding:12px 10px;border-bottom:1px solid #eee;text-align:left;font-size:12px}
.order-table th{color:#666;font-size:10px;text-transform:uppercase;letter-spacing:1px}

.affiliate-layout{grid-template-columns:1fr 1.4fr}
.auth-box{background:#111;color:#fff;border-radius:18px;padding:24px}
.auth-tabs{display:flex;gap:8px;margin:18px 0}
.auth-tabs button{flex:1;border:0;border-radius:10px;padding:10px 12px;background:#232323;color:#fff;font-weight:700}
.auth-tabs button.active{background:var(--yellow);color:#111}
.auth-form{display:grid;gap:12px;margin-top:18px}
.auth-form input,.auth-form select{height:46px;border-radius:10px;border:1px solid #e0e0e0;padding:0 12px;outline:0}
.auth-form .primary-btn{width:100%;margin-top:6px}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.stat-box{background:linear-gradient(145deg,#fff6d7,#ffe38c);color:#111;border-radius:16px;box-shadow:0 12px 22px rgba(17,17,17,.06);padding:18px 16px}
.stat-box small{color:#555}
.affiliate-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.metric-card{background:linear-gradient(180deg,#111,#1d1d1d);color:#fff;border-radius:14px;padding:14px 16px;border:1px solid #272727;box-shadow:0 16px 25px rgba(17,17,17,.06)}
.metric-card span{display:block;color:#cfcfcf;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.metric-card strong{font-size:18px}
.range-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:10px 0 20px}
.range-bar label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#666}
.range-bar select{height:40px;border:1px solid #ddd;border-radius:10px;padding:0 12px;background:#fff;color:#111}
.affiliate-dashboard{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin:20px 0 22px}
.sales-panel,.profile-panel,.orders-panel,.commission-panel{background:#f7f7f7;border:1px solid #eaeaea;border-radius:18px;padding:18px}
.sales-panel h3,.profile-panel h3,.orders-panel h3,.commission-panel h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#666;margin-bottom:14px}
.chart-bars{display:flex;align-items:end;gap:10px;height:170px;padding-top:14px;border-radius:12px;background:linear-gradient(180deg,#fff,#f6f6f6);border:1px solid #efefef}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%}
.chart-bar{width:100%;max-width:38px;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#ffd75a,#ffbf16);box-shadow:inset 0 -10px 20px rgba(0,0,0,.08)}
.chart-label{font-size:10px;color:#666;font-weight:700}
.profile-panel .shop-preview{display:grid;gap:12px}
.profile-preview-box{background:#fff;border:1px solid #ebebeb;border-radius:12px;padding:12px}
.profile-preview-box strong{display:block;font-size:18px;margin-bottom:6px}
.profile-preview-box small{color:#666}
.shop-form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.shop-form input,.shop-form select{height:42px;border:1px solid #ddd;border-radius:10px;padding:0 12px;background:#fff}
.shop-form .full{grid-column:1 / -1}
.orders-panel,.commission-panel{background:#fff;border:1px solid #eaeaea;border-radius:18px;padding:18px;margin-top:14px}
.orders-table,.commission-table{width:100%;border-collapse:collapse}
.orders-table th,.orders-table td,.commission-table th,.commission-table td{padding:12px 10px;border-bottom:1px solid #eee;text-align:left;font-size:12px;vertical-align:middle}
.orders-table th,.commission-table th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#666}
.status-chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800}
.status-chip.pago{background:#e9fff0;color:#1d7040}
.status-chip.pendente{background:#fff3d6;color:#ab6d00}
.status-chip.cancelado{background:#ffe3e3;color:#a01818}
.product-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.product-form .full{grid-column:1 / -1}
.product-form input,.product-form select{height:46px;border:1px solid #ddd;border-radius:10px;padding:0 12px}
.product-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.product-item{background:#fff;border:1px solid #ececec;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.product-item strong{font-size:16px}
.product-meta{display:flex;justify-content:space-between;color:#666;font-size:11px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#f3f3f3;font-size:10px;font-weight:900}

.dashboard-filters{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 22px;padding:16px;background:#f9f9f9;border-radius:14px;border:1px solid #efefef}
.filter-group{display:flex;flex-direction:column;gap:6px}
.filter-group label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#666}
.filter-group select{height:40px;border:1px solid #ddd;border-radius:10px;padding:0 12px;background:#fff;color:#111}

.shop-branding{background:#fff;border:1px solid #ebebeb;border-radius:14px;overflow:hidden;margin-bottom:14px}
.shop-banner{height:80px;background:linear-gradient(135deg,#ffd75a,#ffbf16)!important}
.shop-info{padding:14px}
.shop-info strong{display:block;font-size:18px;margin-bottom:6px}
.shop-info small{color:#666;display:block;margin-bottom:4px}
.shop-info p{margin:4px 0;color:#888;font-size:12px}

.account-page{padding:44px 0 80px;background:linear-gradient(180deg,#f5f5f3 0%,#f0f0ee 100%)}
.account-layout{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
.account-sidebar{background:#fff;border:1px solid #ebebeb;border-radius:22px;padding:24px;box-shadow:0 18px 30px rgba(17,17,17,.05);height:fit-content}
.user-card{text-align:center;padding-bottom:20px;border-bottom:1px solid #ebebeb;margin-bottom:20px}
.user-avatar{font-size:64px;margin-bottom:12px}
.user-card h2{font-size:18px;margin:8px 0;letter-spacing:-.02em}
.user-card p{color:#666;font-size:12px;margin:4px 0 16px}
.logout-btn{width:100%;background:#ff4444;color:#fff;border:0;border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer;transition:.2s}
.logout-btn:hover{background:#dd0000}

.account-nav{display:flex;flex-direction:column;gap:8px}
.nav-item{text-align:left;background:transparent;border:0;padding:12px 14px;border-radius:10px;color:#666;font-weight:800;cursor:pointer;transition:.2s;border-left:3px solid transparent}
.nav-item:hover{background:#f5f5f5;color:#111}
.nav-item.active{background:#fff6d7;color:#111;border-left-color:#ffd75a}
.nav-item span{margin-right:8px}

.account-content{background:#fff;border:1px solid #ebebeb;border-radius:22px;padding:32px;box-shadow:0 18px 30px rgba(17,17,17,.05)}
.content-section{display:none}
.content-section.active{display:block}
.section-header{margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.section-header h1{font-size:28px;line-height:1.05;margin:0;letter-spacing:-.02em}
.section-header p{color:#666;font-size:13px;margin:0}

.orders-filter{margin-bottom:20px}
.orders-filter select{height:42px;border:1px solid #ddd;border-radius:10px;padding:0 12px;background:#fff;color:#111}

.orders-list{display:grid;gap:14px}
.order-card{background:#f9f9f9;border:1px solid #ececec;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.order-header{display:flex;align-items:center;justify-content:space-between}
.order-id-product{display:flex;align-items:center;gap:10px}
.order-id-product strong{font-size:14px}
.order-id-product span{font-size:24px}
.order-status{display:inline-block;padding:6px 10px;border-radius:8px;font-size:10px;font-weight:800;text-transform:uppercase;background:#ffe38c;color:#111}
.order-status.pago{background:#e9fff0;color:#1d7040}
.order-status.enviado{background:#fff3d6;color:#ab6d00}
.order-status.entregue{background:#e9fff0;color:#1d7040}
.order-status.pendente{background:#fff3d6;color:#ab6d00}
.order-status.cancelado{background:#ffe3e3;color:#a01818}
.order-product{color:#666;font-size:13px;margin:0}
.order-footer{display:flex;justify-content:space-between;font-size:11px;color:#999}
.detail-link{background:transparent;border:0;color:#ffbf16;font-weight:800;cursor:pointer;text-align:left;padding:0;margin-top:6px}

.coupons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.coupon-card{background:linear-gradient(135deg,#fff6d7,#ffe38c);border:1px solid #ffeab0;border-radius:14px;padding:18px;position:relative;overflow:hidden}
.coupon-card.used{opacity:.6;background:#f5f5f5;border-color:#ddd}
.coupon-card::before{content:'';position:absolute;top:-50%;right:-50%;width:200px;height:200px;background:rgba(255,255,255,.2);border-radius:50%}
.coupon-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.coupon-code{display:block;font-size:14px;margin-bottom:4px}
.coupon-desc{color:#666;font-size:12px;margin:0}
.coupon-discount{text-align:right}
.coupon-discount strong{font-size:24px;color:#111}
.coupon-discount small{display:block;color:#666;font-size:10px}
.coupon-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(0,0,0,.1)}
.coupon-footer small{color:#666;font-size:11px}
.coupon-btn{background:#111;color:#fff;border:0;border-radius:8px;padding:8px 12px;font-weight:800;font-size:11px;cursor:pointer;transition:.2s}
.coupon-btn:hover:not(.disabled){background:#ffd75a;color:#111}
.coupon-btn.disabled{opacity:.5;cursor:not-allowed}

.addresses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.address-card{background:#f9f9f9;border:1px solid #ececec;border-radius:14px;padding:16px;position:relative}
.address-card.main{border-color:#ffbf16;background:#fff6d7}
.address-badge{display:inline-block;background:#111;color:#fff;font-size:9px;font-weight:900;padding:6px 10px;border-radius:6px;margin-bottom:8px}
.main-badge{position:absolute;top:12px;right:12px;background:#ffd75a;color:#111;font-size:9px;font-weight:900;padding:6px 10px;border-radius:6px}
.address-card h3{font-size:14px;margin:8px 0;line-height:1.4}
.address-card p{color:#666;font-size:12px;margin:4px 0}
.address-actions{display:flex;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #efefef}
.link-btn{background:none;border:0;color:#ffbf16;font-weight:800;font-size:11px;cursor:pointer;padding:0}

.favorites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.favorite-card{background:#f9f9f9;border:1px solid #ececec;border-radius:14px;padding:14px;text-align:center}
.fav-image{font-size:48px;margin-bottom:10px}
.favorite-card h3{font-size:13px;margin:8px 0;line-height:1.3}
.favorite-card p{color:#666;font-size:12px;margin:0 0 12px}
.favorite-card .primary-btn.small{height:36px;font-size:11px;padding:0 12px}

.profile-form{display:grid;gap:14px;max-width:600px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#666}
.form-group input{height:46px;border:1px solid #ddd;border-radius:10px;padding:0 12px;background:#fff;outline:0;font-size:13px}
.form-group input:focus{border-color:#ffbf16;box-shadow:0 0 0 3px rgba(255,191,22,.14)}
.form-message{font-size:12px;margin-top:10px;min-height:18px;font-weight:700}

.empty-state{text-align:center;padding:45px 20px;background:#f9f9f9;border-radius:14px;color:#999}
.empty-state p{margin:0;font-size:13px}

@media(max-width:820px){
  .account-layout{grid-template-columns:1fr;gap:20px}
  .account-sidebar{height:auto}
  .account-nav{flex-direction:row;flex-wrap:wrap}
  .nav-item{flex:1}
  .dashboard-filters{grid-template-columns:1fr}
}
@media(max-width:560px){
  .coupons-grid,.addresses-grid,.favorites-grid{grid-template-columns:1fr  }

  .dashboard-filters{grid-template-columns:1fr;gap:10px;padding:12px}
  .section-header{flex-direction:column;align-items:flex-start}
}

.footer{background:#0a0a0a;color:#fff;padding-top:55px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:45px}
.footer-logo{width:170px}
.footer-grid p,.footer-grid a{font-size:12px;color:#999}
.footer-grid h3{font-size:12px;letter-spacing:1px;margin-bottom:14px}
.footer-grid a{display:block;margin:9px 0}
.footer-grid a:hover{color:var(--yellow)}
.socials{display:flex;gap:8px;margin-top:17px}
.socials a{width:34px;height:34px;border:1px solid #333!important;border-radius:50%;display:grid!important;place-items:center;color:#fff!important;margin:0!important}
.payments{font-size:12px;color:#aaa;line-height:2.2}
.copyright{border-top:1px solid #222;padding:17px 0;text-align:center;color:#666;font-size:10px}

.toast{position:fixed;right:18px;bottom:18px;z-index:100;background:#111;color:#fff;padding:13px 17px;border-radius:9px;box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s;font-weight:700;font-size:12px}
.toast.show{transform:translateY(0);opacity:1}

.modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.66);display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal-box{position:relative;width:min(480px,100%);max-height:90vh;overflow:auto;background:#fff;color:#111;border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.modal-box.wide{width:min(860px,100%)}
.modal-box h2{font-size:28px;line-height:1.05;margin:7px 0 20px}
.close{position:absolute;right:14px;top:10px;background:none;border:0;font-size:30px;color:#666}
.auth-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:20px}
.auth-tabs button{border:0;background:transparent;padding:12px 17px;font-weight:900;color:#999}
.auth-tabs button.active{color:#111;border-bottom:3px solid var(--yellow)}
.auth-panel{display:none}
.auth-panel.active{display:block}
.auth-panel h3{font-size:25px}
.auth-panel p{color:#777;font-size:12px;margin:5px 0 14px}
.auth-panel form,.checkout-form{display:grid;gap:10px}
.auth-panel input,.checkout-form input,.checkout-form select,.cart-coupon input{height:46px;border:1px solid #ddd;border-radius:8px;padding:0 12px;outline:0}
.auth-note,.form-note{font-size:12px;margin-top:10px;color:#178044;font-weight:700}
.cart-row{display:grid;grid-template-columns:75px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-row img{width:75px;height:75px;object-fit:cover;border-radius:10px}
.cart-row h4{font-size:13px;margin-bottom:4px}
.cart-row p{font-size:12px;font-weight:800}
.qty{display:flex;align-items:center;gap:7px;margin-top:7px}
.qty button{width:26px;height:26px;border:1px solid #ddd;background:#fff;border-radius:5px}
.remove-cart{border:0;background:none;color:#d11;font-size:11px;margin-top:6px}
.cart-coupon{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cart-coupon label{display:block;font-size:11px;font-weight:900;margin-bottom:7px}
.cart-coupon>div{display:flex;gap:8px}
.cart-coupon input{flex:1}
.cart-coupon button{border:0;border-radius:7px;padding:0 14px;background:#111;color:#fff;font-weight:800}
.cart-coupon small{display:block;margin-top:6px;font-size:10px;color:#177b43}
.cart-total{display:flex;justify-content:space-between;margin-top:10px;font-size:13px}
.cart-total.grand{font-size:21px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.checkout-form .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media(max-width:1100px){
  .header-main{grid-template-columns:220px 1fr}
  .header-actions{grid-column:2;justify-content:flex-end}
  .head-action:not(.circle){display:none}
  .hero h1{font-size:69px}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .featured-slide{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .top-links{display:none}
  .header-main{grid-template-columns:auto 1fr auto;gap:12px}
  .mobile-toggle{display:block}
  .brand-logo{width:160px}
  .search{grid-column:1/-1;grid-row:2}
  .header-actions{grid-column:3;grid-row:1}
  .main-nav{display:none}
  .main-nav.open{display:block}
  .nav-inner{display:grid;grid-template-columns:repeat(2,1fr)}
  .nav-inner a{font-size:12px}
  .hero-content{grid-template-columns:1fr}
  .hero-product{height:345px;order:-1}
  .hero-copy{padding:0 0 50px}
  .hero h1{font-size:59px}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .featured-slide{grid-template-columns:repeat(2,1fr)}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-grid>div:nth-child(2){border-right:0}
  .benefit-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .newsletter-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section-head{align-items:flex-start;flex-direction:column}
  .support-triage{grid-template-columns:1fr}
  .affiliate-layout{grid-template-columns:1fr}
  .affiliate-dashboard{grid-template-columns:1fr}
  .affiliate-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .wrap{width:94%}
  .header-actions{gap:5px}
  .head-action.circle{width:46px;height:46px}
  .brand-logo{width:90px}
  .hero h1{font-size:47px}
  .hero-copy p{font-size:14px}
  .hero-product{height:285px}
  .burst{width:108px;height:108px;font-size:13px}
  .burst strong{font-size:26px}
  .big-product{font-size:82px}
  .floating{font-size:35px}
  .hero-points{font-size:10px}
  .hero-buttons{flex-direction:column}
  .promo-row,.promo-row.second-row{grid-template-columns:1fr}
  .promo-card.wide{min-height:135px}
  .category-grid,.product-grid,.footer-grid,.benefit-grid{grid-template-columns:1fr}
  .featured-slide{grid-template-columns:1fr}
  .featured-arrow{display:none}
  .benefit-grid>div{border-right:0!important}
  .benefit-grid>div:not(:last-child){border-bottom:1px solid var(--line)!important}
  .newsletter form{flex-direction:column;gap:8px}
  .newsletter input{min-height:46px}
  .checkout-form .two-col{grid-template-columns:1fr}
  .affiliate-metrics{grid-template-columns:1fr}
  .range-bar{justify-content:space-between}
  .product-form,.shop-form{grid-template-columns:1fr}
  .product-list{grid-template-columns:1fr}
}


/* FOOTER PRO — FlashMarket */
.footer-pro{background:#050505;color:#fff;padding:64px 0 0;border-top:1px solid #161616}
.footer-pro-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1.15fr;gap:38px;align-items:start;padding-bottom:58px}
.footer-pro .footer-column{min-width:0}.footer-brand-column{padding-right:15px}
.footer-pro .footer-logo{width:220px;max-width:100%;height:auto;object-fit:contain;margin-bottom:16px}
.footer-pro h3{margin:0 0 17px;color:#fff;font-size:12px;line-height:1.1;letter-spacing:1.5px;font-weight:900}
.footer-pro .footer-column>a{display:block;width:max-content;max-width:100%;color:#aaa;font-size:12px;line-height:1.35;margin:0 0 12px;transition:color .2s,transform .2s}
.footer-pro .footer-column>a:hover{color:var(--yellow);transform:translateX(3px)}
.footer-description{max-width:310px;margin:0 0 18px;color:#858585;font-size:12px;line-height:1.7}
.footer-whatsapp{display:inline-flex!important;align-items:center;gap:9px;background:#111;border:1px solid #2e2e2e;color:#fff!important;padding:10px 14px;border-radius:7px;font-weight:800;transform:none!important}
.footer-whatsapp:hover{background:var(--yellow);border-color:var(--yellow);color:#111!important}
.footer-social-column{padding-left:4px}.footer-socials{display:flex;align-items:center;gap:9px;margin:0 0 34px}
.footer-socials a{width:35px!important;height:35px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:50%;border:1px solid #464646;background:#fff;color:#111!important;font-size:12px!important;font-weight:900;transform:none!important;transition:.2s}
.footer-socials a:hover{background:var(--yellow);border-color:var(--yellow);transform:translateY(-3px)!important}
.footer-pro .payment-title{margin-top:2px}.payment-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.payment-badges span{display:flex;align-items:center;justify-content:center;min-width:50px;height:25px;padding:0 7px;border-radius:4px;background:#fff;color:#111;font-size:8px;font-weight:900;letter-spacing:.4px;border:1px solid #cfcfcf}
.footer-security{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid #1c1c1c}.footer-security>span{font-size:21px}.footer-security strong,.footer-security small{display:block}.footer-security strong{font-size:10px;letter-spacing:.8px}.footer-security small{margin-top:2px;color:#777;font-size:9px}
.footer-bottom{border-top:1px solid #1b1b1b;background:#020202}.footer-bottom-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#666;font-size:10px}
.currency-select{display:flex;align-items:center;gap:7px;border:1px solid #2d2d2d;background:#090909;color:#bbb;border-radius:6px;padding:6px 9px}.currency-select select{border:0;outline:0;background:transparent;color:#bbb;font-size:10px}.currency-select option{color:#111}
@media(max-width:1100px){.footer-pro-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-social-column{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;column-gap:30px;align-items:start}.footer-social-column .footer-socials{margin-bottom:20px}.footer-social-column .payment-title,.footer-social-column .payment-badges,.footer-social-column .footer-security{grid-column:2}}
@media(max-width:760px){.footer-pro{padding-top:44px}.footer-pro-grid{grid-template-columns:1fr 1fr;gap:30px 22px}.footer-brand-column{grid-column:1/-1;padding-right:0}.footer-social-column{grid-column:1/-1;display:block}.footer-socials{margin-bottom:26px}.footer-bottom-inner{min-height:auto;padding:15px 0;flex-direction:column;align-items:flex-start}}
@media(max-width:480px){.footer-pro-grid{grid-template-columns:1fr}.footer-brand-column{grid-column:auto}.footer-pro .footer-logo{width:185px}}
/* =========================
   CHECKOUT
   ========================= */

   .checkout-box {
    width: min(520px, 94vw);
    max-height: 88vh;
    padding: 30px 32px;
    border-radius: 16px;
    overflow-y: auto;
  }
  
  .checkout-header {
    padding-right: 35px;
    margin-bottom: 22px;
  }
  
  .checkout-header h2 {
    margin: 6px 0 5px;
    font-size: 28px;
    line-height: 1.1;
    color: #111;
  }
  
  .checkout-header p {
    margin: 0;
    font-size: 12px;
    color: #777;
  }
  
  .checkout-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }
  
  .checkout-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .checkout-form label {
    font-size: 11px;
    font-weight: 800;
    color: #222;
  }
  
  .checkout-form input,
  .checkout-form select {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 13px;
    outline: none;
    transition: .2s;
  }
  
  .checkout-form input:focus,
  .checkout-form select:focus {
    border-color: #ffbf16;
    box-shadow: 0 0 0 3px rgba(255, 191, 22, .14);
  }
  
  .checkout-form .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .checkout-security {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 13px;
    background: #f7f7f7;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
  }
  
  .checkout-security > span {
    font-size: 20px;
  }
  
  .checkout-security strong,
  .checkout-security small {
    display: block;
  }
  
  .checkout-security strong {
    font-size: 11px;
    color: #0b0b0b;
  }
  
  .checkout-security small {
    margin-top: 2px;
    font-size: 9px;
    color: #777;
  }
  
  .checkout-submit {
    min-height: 48px;
    margin-top: 4px;
    border-radius: 8px;
  }
  
  .checkout-box .form-note {
    text-align: center;
    font-size: 11px;
    margin-top: 12px;
  }
  
  /* Mobile */
  @media (max-width: 560px) {
    .checkout-box {
      width: 94vw;
      padding: 24px 20px;
      border-radius: 14px;
    }
  
    .checkout-header h2 {
      font-size: 23px;
    }
  
    .checkout-form .two-col {
      grid-template-columns: 1fr;
      gap: 13px;
    }
  
    .checkout-form input,
    .checkout-form select {
      height: 44px;
      font-size: 12px;
    }
  }

:root {
  --premium-gold: #ffd75a;
  --premium-dark: #0a0a0a;
  --premium-accent: #1a1a1a;
}

/* Premium dashboard enhancements */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.8px;
  font-weight: 900;
}

.hero h1 {
  font-size: 96px;
  text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
}
/* Premium dashboard enhancements */
.affiliate-card,
.account-page {
  background: linear-gradient(135deg, #f9f8f6 0%, #f2eff0 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}

.stat-box {
  background: linear-gradient(135deg, #fff 0%, #f8f7f4 100%);
  border: 1px solid #e8e7e4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
}

.stat-box strong {
  font-size: 32px;
  background: linear-gradient(135deg, #ffbf16, #ffd75a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Enhanced metrics with premium styling */
.metric-card {
  background: white;
  border: 2px solid #f0f0f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.metric-card:hover {
  border-color: var(--premium-gold);
  box-shadow: 0 12px 32px rgba(255, 191, 22, 0.1);
  transform: translateY(-2px);
}

.metric-card strong {
  color: var(--premium-gold);
  font-size: 24px;
}

/* Shop branding premium */
.shop-branding {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.shop-banner {
  background: linear-gradient(135deg, #ffd75a, #ffbf16) !important;
  height: 140px;
  position: relative;
}

.shop-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.4), transparent);
}

.shop-info {
  padding: 20px;
  background: linear-gradient(135deg, #fff 0%, #f8f7f4 100%);
}

.shop-info strong {
  font-size: 20px;
  color: #050505;
  display: block;
  margin-bottom: 4px;
}

.shop-info small {
  color: #666;
  font-size: 12px;
  display: block;
  margin-bottom: 8px;
}

.shop-info p {
  color: var(--premium-gold);
  font-weight: 700;
  font-size: 14px;
}

/* Premium account sidebar */
.user-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  border: 1px solid #333;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.user-avatar {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ffd75a, #ffbf16);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(255, 191, 22, 0.3);
}

.user-card h2 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 4px;
}

.user-card p {
  color: #999;
  font-size: 12px;
  margin-bottom: 20px;
}

/* Enhanced tables */
.orders-table,
.commission-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.orders-table thead,
.commission-table thead {
  background: linear-gradient(135deg, #ffd75a 0%, #ffbf16 100%);
  color: #050505;
  font-weight: 900;
}

.orders-table th,
.commission-table th {
  padding: 16px 18px;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.orders-table td,
.commission-table td {
  padding: 14px 18px;
  border-top: 1px solid #f5f5f5;
}

.orders-table tbody tr:hover,
.commission-table tbody tr:hover {
  background: #f9f8f6;
}

/* Filter buttons premium */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group label {
  font-size: 11px;
  font-weight: 900;
  color: #222;
  letter-spacing: 0.5px;
}

.filter-group select {
  padding: 11px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  transition: all 0.2s ease;
}

.filter-group select:focus {
  border-color: var(--premium-gold);
  box-shadow: 0 0 0 3px rgba(255, 191, 22, 0.1);
  outline: none;
}

/* Premium buttons */
.primary-btn,
.secondary-btn {
  font-weight: 900;
  letter-spacing: 0.5px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: none;
}

.primary-btn {
  background: linear-gradient(135deg, #ffd75a, #ffbf16);
  color: #050505;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 191, 22, 0.3);
}

.secondary-btn {
  background: #f5f5f5;
  color: #222;
  border: 1px solid #ddd;
}

.secondary-btn:hover {
  background: #f9f8f6;
  border-color: var(--premium-gold);
  color: var(--premium-gold);
}

/* Order cards premium */
.order-card {
  background: white;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.order-card:hover {
  border-color: var(--premium-gold);
  box-shadow: 0 12px 30px rgba(255, 191, 22, 0.1);
  transform: translateY(-2px);
}

/* Coupon cards premium */
.coupon-card {
  background: linear-gradient(135deg, #fff 0%, #f8f7f4 100%);
  border: 2px solid var(--premium-gold);
  border-radius: 12px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(255, 191, 22, 0.1);
}

.coupon-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 191, 22, 0.1), transparent);
  border-radius: 50%;
}

.coupon-code {
  font-size: 18px;
  color: var(--premium-gold);
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

/* Navigation premium */
.nav-inner a {
  transition: all 0.2s ease;
  position: relative;
}

.nav-inner a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--premium-gold), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav-inner a:hover::after,
.nav-inner a.active::after {
  opacity: 1;
}

/* Enhanced forms */
.shop-form input,
.shop-form select,
.product-form input,
.product-form select {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  transition: all 0.2s ease;
  background: white;
}

.shop-form input:focus,
.shop-form select:focus,
.product-form input:focus,
.product-form select:focus {
  border-color: var(--premium-gold);
  box-shadow: 0 0 0 3px rgba(255, 191, 22, 0.1);
  outline: none;
}

/* Status badges premium */
.status-chip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.status-chip.pago {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-chip.pendente {
  background: #fff3e0;
  color: #e65100;
}

.status-chip.cancelado {
  background: #ffebee;
  color: #c62828;
}

.status-chip.enviado {
  background: #e3f2fd;
  color: #1565c0;
}

/* Section headers premium */
.section-header {
  margin-bottom: 28px;
}

.section-header h1 {
  font-size: 32px;
  color: #050505;
  margin-bottom: 8px;
}

.section-header p {
  color: #777;
  font-size: 14px;
}

/* Enhanced sidebar navigation */
.account-nav .nav-item {
  padding: 14px 16px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  font-weight: 700;
  border-radius: 6px;
  margin-bottom: 6px;
}

.account-nav .nav-item:hover,
.account-nav .nav-item.active {
  background: rgba(255, 191, 22, 0.1);
  border-left-color: var(--premium-gold);
  color: var(--premium-gold);
}

/* Product items premium */
.product-item {
  background: white;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.product-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--premium-gold), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.product-item:hover {
  border-color: var(--premium-gold);
  box-shadow: 0 10px 24px rgba(255, 191, 22, 0.1);
  transform: translateY(-1px);
}

.product-item:hover::before {
  opacity: 1;
}

/* Auth box premium */
.auth-box {
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  border: 1px solid #333;
}

.auth-form input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #444;
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.auth-form input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--premium-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 191, 22, 0.1);
}

.auth-form input::placeholder {
  color: #888;
}

/* Enhanced dashboard summary */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Sales chart container premium */
.sales-panel {
  background: white;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.sales-panel h3 {
  margin-bottom: 18px;
  font-size: 18px;
  color: #050505;
}

/* Responsive premium polish */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 64px;
  }
  
  .stat-box strong {
    font-size: 24px;
  }
  
  .shop-banner {
    height: 100px;
  }
  
  .section-header h1 {
    font-size: 24px;
  }
  
  .metric-card {
    padding: 14px;
  }
  
  .metric-card strong {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 48px;
  }
  
  .hero-h1 {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  }
  
  .auth-box {
    padding: 22px;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
  
  .user-avatar {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }
}

.page-tracking {
  background: #f5f6f8;
  min-height: 700px;
  padding: 55px 20px 80px;
}

.page-shell {
  max-width: 1180px;
  margin: auto;
}

.tracking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.tracking-header h1 {
  font-size: 42px;
  margin: 15px 0 8px;
  font-weight: 900;
  letter-spacing: -1.5px;
}

.tracking-header p {
  margin: 0;
  color: #69707d;
  font-size: 16px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #e9f7ef;
  color: #18864b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}


/* =========================================================
   BUSCA
========================================================= */

.tracking-search-card {
  background: #fff;
  padding: 25px;
  border-radius: 18px;
  border: 1px solid #e7e9ed;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  margin-bottom: 25px;
}

.tracking-search-form {
  display: flex;
  gap: 15px;
  align-items: flex-end;
}

.tracking-input {
  flex: 1;
}

.tracking-input label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: #555b66;
}

.input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #dfe2e7;
  border-radius: 10px;
  padding: 0 14px;
  height: 50px;
  background: #fafafa;
}

.input-wrapper span {
  margin-right: 10px;
}

.input-wrapper input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
}

.primary-btn {
  height: 50px;
  border: 0;
  border-radius: 10px;
  padding: 0 25px;
  background: #111;
  color: white;
  font-weight: 800;
  cursor: pointer;
  transition: .2s;
}

.primary-btn:hover {
  transform: translateY(-2px);
  opacity: .9;
}

.tracking-examples {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 15px;
  font-size: 12px;
  color: #777;
}

.tracking-examples button {
  border: 1px solid #ddd;
  background: white;
  border-radius: 7px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 11px;
}


/* =========================================================
   ESTADOS
========================================================= */

.hidden {
  display: none !important;
}

.tracking-loading,
.tracking-error {
  background: #fff;
  border-radius: 16px;
  padding: 35px;
  text-align: center;
  border: 1px solid #e5e6e9;
  margin-bottom: 25px;
}

.loading-spinner {
  width: 35px;
  height: 35px;
  border: 4px solid #eee;
  border-top-color: #111;
  border-radius: 50%;
  margin: 0 auto 15px;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.tracking-loading strong,
.tracking-loading span {
  display: block;
}

.tracking-loading span {
  margin-top: 6px;
  color: #777;
  font-size: 13px;
}

.error-icon {
  width: 45px;
  height: 45px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff0f0;
  color: #d93030;
  font-size: 25px;
  font-weight: 900;
}


/* =========================================================
   RESUMO
========================================================= */

.tracking-summary-card {
  background: #111;
  color: white;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}

.summary-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.summary-icon {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
}

.summary-label,
.status-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #90959e;
}

.summary-main h2 {
  margin: 5px 0;
  font-size: 27px;
}

.order-status {
  color: #7ee2a8;
  font-weight: 700;
  font-size: 13px;
}

.summary-info {
  display: flex;
  gap: 40px;
}

.summary-info div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.summary-info span {
  color: #8f949c;
  font-size: 11px;
}

.summary-info strong {
  font-size: 14px;
}


/* =========================================================
   STATUS
========================================================= */

.current-status-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 20px;
}

.current-status-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.current-status-top h2 {
  margin: 8px 0;
  font-size: 22px;
}

.current-status-top p {
  margin: 0;
  color: #707782;
}

.progress-percentage {
  font-size: 27px;
  font-weight: 900;
}

.progress-container {
  height: 10px;
  background: #eceef1;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 25px;
}

.progress-bar {
  height: 100%;
  background: #111;
  border-radius: inherit;
  transition: width .7s ease;
}

.progress-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: #858b94;
}

.progress-footer strong {
  color: #111;
}


/* =========================================================
   GRID
========================================================= */

.tracking-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}


/* =========================================================
   CARDS
========================================================= */

.timeline-card,
.detail-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 25px;
}

.card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.card-heading h2 {
  margin: 7px 0 0;
  font-size: 20px;
}

.last-update {
  font-size: 11px;
  color: #8a9099;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline {
  position: relative;
}

.timeline-item {
  display: flex;
  gap: 15px;
  position: relative;
  padding-bottom: 28px;
}

.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  width: 2px;
  height: calc(100% - 25px);
  background: #e5e7eb;
}

.timeline-item.completed:not(:last-child)::after {
  background: #111;
}

.timeline-marker {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  font-size: 12px;
  font-weight: 900;
  z-index: 1;
}

.timeline-item.completed .timeline-marker {
  background: #111;
  color: white;
  border-color: #111;
}

.timeline-item.current .timeline-marker {
  box-shadow: 0 0 0 5px #eeeeee;
}

.timeline-content {
  flex: 1;
}

.timeline-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.timeline-top strong {
  font-size: 14px;
}

.timeline-top span {
  font-size: 11px;
  color: #888;
}

.timeline-content p {
  margin: 6px 0;
  color: #707782;
  font-size: 13px;
  line-height: 1.5;
}

.timeline-content small {
  color: #999;
  font-size: 11px;
}


/* =========================================================
   DETALHES
========================================================= */

.order-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.detail-heading > span {
  font-size: 22px;
}

.detail-heading h3 {
  margin: 5px 0 0;
  font-size: 16px;
}

.detail-card p {
  color: #646b75;
  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   PRODUTOS
========================================================= */

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

.product-track-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.product-track-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.product-track-icon {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  background: #f2f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.product-track-info strong {
  font-size: 12px;
}

.product-track-info span {
  font-size: 10px;
  color: #888;
}

.product-track-item > strong {
  font-size: 11px;
}


/* =========================================================
   SUPORTE
========================================================= */

.support-card {
  display: flex;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  background: #111;
  color: white;
}

.support-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-card strong {
  font-size: 13px;
}

.support-card p {
  margin: 5px 0 10px;
  font-size: 11px;
  color: #a8adb5;
}

.support-card a {
  color: white;
  font-size: 11px;
  font-weight: 800;
}


/* =========================================================
   SEGURANÇA
========================================================= */

.tracking-security {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  margin-top: 20px;
  border-radius: 14px;
  background: #eef8f2;
  border: 1px solid #d7efdf;
}

.tracking-security > span {
  font-size: 20px;
}

.tracking-security strong {
  display: block;
  font-size: 12px;
  color: #167543;
}

.tracking-security p {
  margin: 4px 0 0;
  color: #568067;
  font-size: 11px;
}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 850px) {

  .tracking-search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-btn {
    width: 100%;
  }

  .tracking-summary-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .summary-info {
    width: 100%;
    justify-content: space-between;
    gap: 15px;
  }

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

}


@media (max-width: 600px) {

  .page-tracking {
    padding: 35px 14px 60px;
  }

  .tracking-header h1 {
    font-size: 32px;
  }

  .tracking-search-card,
  .timeline-card,
  .detail-card,
  .current-status-card {
    padding: 20px;
  }

  .tracking-examples {
    flex-wrap: wrap;
  }

  .summary-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .timeline-top {
    flex-direction: column;
    gap: 4px;
  }

  .progress-footer {
    font-size: 9px;
  }

}
/* =========================================================
   FLASHMARKET — CENTRAL DE ATENDIMENTO
   AJUSTE PROFISSIONAL
========================================================= */

.page-support {
  min-height: 720px;
  padding: 40px 20px 70px;
  background: #f4f5f7;
}

.support-layout {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;

  align-items: start;
}


/* =========================================================
   CARDS PRINCIPAIS
========================================================= */

.support-layout > .support-card {
  width: 100%;
  min-width: 0;

  box-sizing: border-box;

  background: #101010;
  color: #fff;

  border-radius: 14px;

  padding: 24px;

  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 12px 35px rgba(0,0,0,.12);
}


/* =========================================================
   CARD ESQUERDO — CENTRAL
========================================================= */

.support-layout > .support-card:first-child {
  min-height: 250px;
}

.support-layout > .support-card:first-child h1 {
  margin: 14px 0 10px;

  font-size: clamp(28px, 3vw, 42px);
  line-height: .95;

  font-weight: 900;
  letter-spacing: -1.5px;
}

.support-layout > .support-card:first-child > p {
  max-width: 580px;

  margin: 0;

  color: #b7bbc1;

  font-size: 14px;
  line-height: 1.6;
}


/* =========================================================
   STATUS
========================================================= */

.support-layout .status-pill {
  display: inline-flex;

  align-items: center;
  gap: 6px;

  padding: 7px 11px;

  border-radius: 50px;

  background: #e8f8ef;
  color: #16804a;

  font-size: 10px;
  font-weight: 900;

  text-transform: uppercase;
}


/* =========================================================
   ESTATÍSTICAS
========================================================= */

.support-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 22px;
}

.support-grid[style] {
  margin-top: 10px !important;
}

.support-stat {
  min-width: 0;

  padding: 14px;

  border-radius: 10px;

  background: #191919;
  border: 1px solid #252525;

  transition: .2s ease;
}

.support-stat:hover {
  background: #202020;
  transform: translateY(-2px);
}

.support-stat strong {
  display: block;

  color: #fff;

  font-size: 13px;
  font-weight: 900;

  margin-bottom: 6px;
}

.support-stat small {
  display: block;

  color: #999;

  font-size: 10px;
  line-height: 1.45;
}


/* =========================================================
   CARD DIREITO
========================================================= */

.support-layout > .support-card:nth-child(2) {
  min-height: 500px;
}


/* =========================================================
   TRIAGEM
========================================================= */

.support-triage {
  display: grid;

  grid-template-columns:
    minmax(145px, .75fr)
    minmax(0, 1.25fr);

  gap: 12px;

  margin-top: 16px;
}


/* =========================================================
   MENU
========================================================= */

.triage-menu {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.triage-item {
  width: 100%;

  padding: 13px 12px;

  border: 1px solid #292929;

  border-radius: 8px;

  background: #181818;

  color: #ddd;

  text-align: left;

  font-family: inherit;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;

  transition: .2s ease;
}

.triage-item:hover {
  background: #222;
  border-color: #444;
}

.triage-item.active {
  background: #fff;
  color: #111;
  border-color: #fff;
}


/* =========================================================
   PAINEL DE TRIAGEM
========================================================= */

.triage-panel {
  min-width: 0;

  padding: 20px;

  border-radius: 12px;

  background: #f8f8f8;

  color: #111;
}

.mini-badge {
  display: inline-block;

  padding: 6px 8px;

  border-radius: 50px;

  background: #fff2b8;
  color: #7d6500;

  font-size: 8px;
  font-weight: 900;

  text-transform: uppercase;
}

.triage-panel h3 {
  margin: 13px 0 8px;

  font-size: 18px;
  line-height: 1.1;
}

.triage-panel > p {
  margin: 0;

  color: #777;

  font-size: 11px;
  line-height: 1.6;
}

.triage-steps {
  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-top: 18px;
}

.triage-steps span {
  padding: 9px;

  border-radius: 7px;

  background: #fff;

  border: 1px solid #e5e5e5;

  color: #444;

  font-size: 9px;
  font-weight: 700;
}


/* =========================================================
   BOTÕES RÁPIDOS
========================================================= */

.support-quick-actions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;
}

.support-chip {
  padding: 10px;

  border-radius: 8px;

  border: 1px solid #292929;

  background: #191919;

  color: #ddd;

  font-family: inherit;

  font-size: 9px;
  font-weight: 700;

  cursor: pointer;

  transition: .2s;
}

.support-chip:hover {
  background: #fff;
  color: #111;
}


/* =========================================================
   CHAT
========================================================= */

.chat-box {
  display: flex;

  flex-direction: column;

  height: 245px;

  margin-top: 12px;

  padding: 12px;

  border-radius: 12px;

  background: #f8f8f8;
}


/* =========================================================
   MENSAGENS
========================================================= */

.chat-thread {
  flex: 1;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 3px;
}

.chat-bubble {
  max-width: 85%;

  padding: 9px 11px;

  border-radius: 9px;

  font-size: 10px;
  line-height: 1.45;
}

.chat-bubble.bot {
  align-self: flex-start;

  background: #fff;

  color: #444;

  border: 1px solid #e4e4e4;
}

.chat-bubble.user {
  align-self: flex-end;

  background: #111;

  color: #fff;
}


/* =========================================================
   CAMPO DE MENSAGEM
========================================================= */

.chat-input-row {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: 7px;

  margin-top: 9px;
}

.chat-input-row input {
  width: 100%;
  min-width: 0;

  height: 38px;

  box-sizing: border-box;

  padding: 0 11px;

  border: 1px solid #ddd;

  border-radius: 8px;

  outline: none;

  font-family: inherit;
  font-size: 10px;
}

.chat-input-row input:focus {
  border-color: #111;
}

.chat-input-row button {
  height: 38px;

  padding: 0 14px;

  border: 0;

  border-radius: 8px;

  background: #ffc928;
  color: #111;

  font-family: inherit;

  font-size: 10px;
  font-weight: 900;

  cursor: pointer;
}


/* =========================================================
   ATENDENTE HUMANO
========================================================= */

.support-human-btn {
  width: 100%;

  height: 36px;

  margin-top: 8px;

  border: 0;

  border-radius: 8px;

  background: #111;

  color: #fff;

  font-family: inherit;

  font-size: 10px;
  font-weight: 800;

  cursor: pointer;

  transition: .2s;
}

.support-human-btn:hover {
  background: #242424;
}


/* =========================================================
   RESPONSIVO — TABLET
========================================================= */

@media (max-width: 950px) {

  .support-layout {
    grid-template-columns: 1fr;
  }

  .support-layout > .support-card:nth-child(2) {
    min-height: auto;
  }

}


/* =========================================================
   RESPONSIVO — CELULAR
========================================================= */

@media (max-width: 600px) {

  .page-support {
    padding: 25px 12px 50px;
  }

  .support-layout > .support-card {
    padding: 18px;
    border-radius: 12px;
  }

  .support-layout > .support-card:first-child h1 {
    font-size: 31px;
  }

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

  .support-triage {
    grid-template-columns: 1fr;
  }

  .support-quick-actions {
    grid-template-columns: 1fr;
  }

  .triage-panel {
    padding: 16px;
  }

}
/* =========================================================
   FLASHMARKET — NOVA CENTRAL DE SUPORTE
========================================================= */

.page-support {
  background: #f3f4f6;
  min-height: 750px;
  padding: 45px 20px 70px;
}

.support-page-shell {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.support-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 30px;
}

.support-page-badge {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 50px;

  background: #e8f8ef;
  color: #16804a;

  font-size: 10px;
  font-weight: 900;
}

.support-page-header h1 {
  margin: 12px 0 8px;

  font-size: clamp(34px, 4vw, 50px);
  line-height: .95;
  letter-spacing: -2px;
  font-weight: 900;
}

.support-page-header p {
  max-width: 650px;

  margin: 0;

  color: #707782;

  font-size: 14px;
  line-height: 1.6;
}

.support-online {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 15px;

  background: #fff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.online-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #19a65b;

  box-shadow: 0 0 0 4px #e4f7eb;
}

.support-online strong {
  display: block;
  font-size: 11px;
}

.support-online small {
  display: block;

  margin-top: 3px;

  color: #858b94;
  font-size: 10px;
}


/* =========================================================
   GRID
========================================================= */

.support-main-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(390px, .85fr);

  gap: 22px;

  align-items: start;
}

.support-left,
.support-right {
  min-width: 0;
}


/* =========================================================
   CARD PRINCIPAL
========================================================= */

.support-main-card {
  padding: 28px;

  background: #111;

  color: #fff;

  border-radius: 18px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.12);
}

.support-main-card-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.support-big-icon {
  width: 55px;
  height: 55px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 15px;

  background: #1c1c1c;

  font-size: 25px;
}

.support-label {
  display: block;

  color: #999fa7;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.support-main-card h2 {
  margin: 7px 0;

  font-size: 25px;
  line-height: 1.05;
}

.support-main-card-top p {
  max-width: 500px;

  margin: 0;

  color: #999;

  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   CATEGORIAS
========================================================= */

.support-category-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 9px;

  margin-top: 25px;
}

.support-category {
  position: relative;

  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 0;

  padding: 13px;

  border: 1px solid #282828;
  border-radius: 10px;

  background: #191919;
  color: #fff;

  text-align: left;

  font-family: inherit;

  cursor: pointer;

  transition: .2s ease;
}

.support-category:hover {
  background: #242424;
  transform: translateY(-2px);
}

.support-category.active {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.category-icon {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #252525;

  font-size: 16px;
}

.support-category.active .category-icon {
  background: #f0f0f0;
}

.support-category div {
  min-width: 0;
  flex: 1;
}

.support-category strong {
  display: block;

  font-size: 11px;
}

.support-category small {
  display: block;

  margin-top: 4px;

  color: #8d9299;

  font-size: 9px;
}

.support-category.active small {
  color: #777;
}

.category-arrow {
  color: #777;
  font-size: 14px;
}


/* =========================================================
   ESTATÍSTICAS
========================================================= */

.support-stats {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin-top: 15px;
}

.support-stat {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 15px;

  background: #fff;

  border: 1px solid #e4e6e9;
  border-radius: 12px;
}

.support-stat > span {
  width: 35px;
  height: 35px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #f1f2f4;
}

.support-stat strong {
  display: block;
  font-size: 13px;
}

.support-stat small {
  display: block;

  margin-top: 3px;

  color: #888;

  font-size: 9px;
  line-height: 1.3;
}


/* =========================================================
   TRIAGEM
========================================================= */

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

.support-triage-card {
  padding: 22px;

  background: #111;
  color: #fff;

  border-radius: 18px;
}

.triage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.triage-header h2 {
  margin: 6px 0 0;

  font-size: 19px;
}

.ai-status {
  padding: 5px 8px;

  border-radius: 50px;

  background: #e8f8ef;
  color: #16804a;

  font-size: 8px;
  font-weight: 900;
}

.triage-message {
  display: flex;
  gap: 10px;

  margin-top: 18px;

  padding: 13px;

  border-radius: 11px;

  background: #1b1b1b;
}

.ai-avatar {
  width: 33px;
  height: 33px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #fff;
  color: #111;

  font-weight: 900;
}

.triage-message strong {
  display: block;
  font-size: 11px;
}

.triage-message p {
  margin: 5px 0 0;

  color: #999;

  font-size: 9px;
  line-height: 1.5;
}

.triage-current {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 10px;

  margin-top: 14px;

  padding: 11px 12px;

  border-radius: 9px;

  background: #f8f8f8;

  color: #111;
}

.triage-current span {
  font-size: 8px;
  font-weight: 900;
  color: #888;
}

.triage-current strong {
  font-size: 10px;
}

.triage-steps {
  display: flex;
  flex-direction: column;

  gap: 8px;

  margin-top: 13px;
}

.triage-step {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 10px;

  border-radius: 9px;

  background: #191919;
}

.triage-step > span {
  width: 27px;
  height: 27px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #292929;

  font-size: 9px;
  font-weight: 900;
}

.triage-step.active > span {
  background: #fff;
  color: #111;
}

.triage-step strong {
  display: block;
  font-size: 10px;
}

.triage-step small {
  display: block;

  margin-top: 3px;

  color: #888;

  font-size: 8px;
}


/* =========================================================
   CHAT
========================================================= */

.support-chat-card {
  padding: 17px;

  background: #fff;

  border: 1px solid #e3e5e8;

  border-radius: 16px;
}

.chat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-bottom: 13px;

  border-bottom: 1px solid #eee;
}

.chat-user {
  display: flex;
  align-items: center;

  gap: 9px;
}

.chat-avatar {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #111;
  color: #fff;

  font-size: 14px;
}

.chat-user strong {
  display: block;
  font-size: 11px;
}

.chat-user small {
  display: block;

  margin-top: 2px;

  color: #888;

  font-size: 8px;
}

.chat-online {
  color: #198b4d;

  font-size: 9px;
  font-weight: 800;
}


/* =========================================================
   MENSAGENS
========================================================= */

.chat-thread {
  height: 190px;

  overflow-y: auto;

  display: flex;
  flex-direction: column;

  gap: 10px;

  padding: 13px 3px;
}

.chat-message {
  display: flex;

  gap: 7px;

  max-width: 88%;
}

.chat-message.user {
  align-self: flex-end;
  justify-content: flex-end;
}

.chat-message > div {
  padding: 9px 11px;

  border-radius: 10px;

  background: #f1f2f4;
}

.chat-message.user > div {
  background: #111;
  color: #fff;
}

.message-avatar {
  width: 23px;
  height: 23px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: #111;
  color: #fff;

  font-size: 10px;
}

.chat-message p {
  margin: 0;

  font-size: 9px;
  line-height: 1.45;
}

.chat-message small {
  display: block;

  margin-top: 4px;

  color: #999;

  font-size: 7px;
}


/* =========================================================
   FORM CHAT
========================================================= */

.support-chat-form {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: 7px;
}

.support-chat-form input {
  width: 100%;
  height: 38px;

  box-sizing: border-box;

  padding: 0 11px;

  border: 1px solid #ddd;
  border-radius: 8px;

  outline: none;

  font-family: inherit;
  font-size: 9px;
}

.support-chat-form input:focus {
  border-color: #111;
}

.support-chat-form button {
  height: 38px;

  padding: 0 13px;

  border: 0;
  border-radius: 8px;

  background: #ffc928;
  color: #111;

  font-family: inherit;

  font-size: 9px;
  font-weight: 900;

  cursor: pointer;
}

.human-support-btn {
  width: 100%;
  height: 36px;

  margin-top: 7px;

  border: 0;
  border-radius: 8px;

  background: #111;
  color: #fff;

  font-family: inherit;

  font-size: 9px;
  font-weight: 800;

  cursor: pointer;

  transition: .2s;
}

.human-support-btn:hover {
  background: #252525;
}


/* =========================================================
   WHATSAPP
========================================================= */

.support-whatsapp {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 14px 16px;

  background: #eaf8ef;

  border: 1px solid #d5efdd;

  border-radius: 13px;

  color: #155f38;

  text-decoration: none;
}

.support-whatsapp > span {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #fff;
}

.support-whatsapp div {
  flex: 1;
}

.support-whatsapp strong {
  display: block;

  font-size: 10px;
}

.support-whatsapp small {
  display: block;

  margin-top: 3px;

  color: #59816a;

  font-size: 8px;
}

.support-whatsapp b {
  font-size: 16px;
}


/* =========================================================
   SEGURANÇA
========================================================= */

.support-security {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 20px;

  padding: 15px 18px;

  background: #fff;

  border: 1px solid #e5e7eb;

  border-radius: 12px;
}

.support-security > span {
  font-size: 18px;
}

.support-security strong {
  display: block;

  font-size: 10px;
}

.support-security p {
  margin: 4px 0 0;

  color: #888;

  font-size: 8px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .support-main-grid {
    grid-template-columns: 1fr;
  }

  .support-right {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    align-items: start;
  }

  .support-whatsapp {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

  .page-support {
    padding: 30px 13px 50px;
  }

  .support-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .support-page-header h1 {
    font-size: 35px;
  }

  .support-main-card {
    padding: 20px;
  }

  .support-main-card-top {
    flex-direction: column;
  }

  .support-category-grid {
    grid-template-columns: 1fr;
  }

  .support-stats {
    grid-template-columns: 1fr;
  }

  .support-right {
    display: flex;
  }

}

/* Mobile app surface: preserves the desktop experience while making touch
   targets, safe areas and scrolling comfortable on installed apps. */
@media (max-width: 560px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
  }

  .top-strip {
    padding-top: env(safe-area-inset-top);
  }

  .site-header {
    top: 38px;
  }

  .header-main {
    padding: 8px 0 10px;
  }

  .head-action,
  .mobile-toggle,
  .featured-arrow,
  .wish,
  .add-cart,
  .detail-btn {
    min-height: 44px;
  }

  .mobile-toggle {
    min-width: 44px;
  }

  .nav-inner a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .products-section,
  .categories-section,
  .benefits,
  .newsletter,
  .map-section {
    padding-block: 48px;
  }

  .product-card {
    min-width: 0;
  }

  .product-info {
    padding: 13px;
  }

  .product-info h3 {
    min-height: 2.8em;
  }
}

@media (display-mode: standalone) {
  .top-strip {
    padding-top: env(safe-area-inset-top);
  }
}