:root{
  --yellow:#ffc400;--yellow-soft:#fff4b8;--navy:#083f7a;--navy-2:#0b559b;--ink:#153454;--muted:#6b7c90;
  --bg:#f4f7fb;--white:#fff;--line:#e2e9f1;--danger:#e31937;--green:#1da564;--orange:#f27b27;
  --shadow:0 12px 34px rgba(7,52,94,.10);--shadow-lg:0 24px 60px rgba(7,52,94,.16);--radius:18px;
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);min-height:100vh}button,input{font:inherit}button,a{cursor:pointer}a{text-decoration:none;color:inherit}.ui-icon{display:block;flex:0 0 auto}.mobile-site{display:none!important}.page-shell{width:100%;padding-left:28px;padding-right:28px;margin:0}.site-main{min-height:calc(100vh - 210px);padding:18px 0 36px}.kicker,.eyebrow{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--navy)}.kicker.light,.eyebrow{color:#ffe47b}

/* desktop header */
.desktop-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 2px 16px rgba(7,45,82,.08)}.desktop-topbar{height:112px;background:var(--yellow);display:flex;align-items:center;gap:20px}.desktop-brand{display:flex;align-items:center;width:220px;height:100%}.desktop-brand img{width:202px;height:92px;object-fit:contain}.desktop-slogan{font-family:"Segoe Print","Comic Sans MS",cursive;font-size:20px;line-height:1.16;color:var(--navy);transform:rotate(-2deg);white-space:nowrap}.desktop-top-spacer{flex:1}.desktop-meta{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;color:var(--navy);transition:.18s}.desktop-meta:hover,.top-icon-link:hover,.desktop-cart-button:hover{background:rgba(255,255,255,.38)}.desktop-meta span:last-child,.desktop-cart-button span{display:flex;flex-direction:column}.desktop-meta small,.desktop-cart-button small{font-size:10px}.desktop-meta strong,.desktop-cart-button strong{font-size:12px}.meta-icon-wrap{display:grid;place-items:center}.top-icon-link{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px}.soft-badge,.cart-badge{font-style:normal;font-size:10px;font-weight:900;min-width:20px;height:20px;border-radius:99px;display:grid;place-items:center;padding:0 5px}.soft-badge{position:absolute;right:0;top:1px;background:#cfd9e5;color:#39506a}.cart-badge{background:var(--danger);color:#fff}.desktop-cart-button{position:relative;border:0;background:transparent;color:var(--navy);display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:13px}.desktop-cart-button>.cart-badge{position:absolute;top:0;left:28px}.cart-badge.inline{position:static;display:inline-grid}
.desktop-nav-wrap{background:#fff;padding:8px 0 10px}.desktop-nav{display:flex;align-items:center;min-height:58px;background:var(--navy);color:#fff;gap:10px}.all-categories-link{min-height:58px;display:flex;align-items:center;gap:10px;padding:0 18px;border-right:1px solid rgba(255,255,255,.18);font-size:14px}.all-categories-link.active,.all-categories-link:hover{background:rgba(255,255,255,.1)}.desktop-nav-links{display:flex;align-items:center;gap:2px}.desktop-nav-links a{padding:11px 12px;border-radius:9px;font-size:13px;font-weight:700}.desktop-nav-links a.active,.desktop-nav-links a:hover{background:rgba(255,255,255,.12)}.desktop-search{margin-left:auto;width:min(46vw,620px);height:42px;display:flex;align-items:center;background:#fff;color:#728297;border-radius:10px;overflow:hidden}.desktop-search>svg{margin-left:13px}.desktop-search input{border:0;outline:0;flex:1;min-width:0;height:100%;padding:0 10px;color:var(--ink);background:#fff}.desktop-search button{height:100%;border:0;background:var(--yellow);color:var(--navy);font-weight:900;padding:0 26px}

/* home */
.home-hero{display:grid;grid-template-columns:minmax(360px,41%) 1fr;min-height:360px;overflow:hidden;background:linear-gradient(108deg,var(--navy) 0%,#07569f 100%);color:#fff;box-shadow:var(--shadow);padding:0;margin:0}.hero-copy{padding:45px 40px;align-self:center}.hero-copy h1{font-size:clamp(44px,4.2vw,68px);line-height:.95;letter-spacing:-.045em;margin:10px 0 14px}.hero-copy h1 em{font-style:normal;color:var(--yellow)}.hero-copy p{font-size:17px;line-height:1.5;max-width:520px;margin:0 0 22px;color:#eef6ff}.primary-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:11px;background:var(--yellow);color:var(--navy);padding:13px 20px;font-weight:900}.hero-benefits{display:flex;gap:22px;margin-top:24px;flex-wrap:wrap}.hero-benefits span{display:flex;align-items:center;gap:7px;font-size:12px}.hero-art{overflow:hidden;min-height:360px}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.home-section,.page-section{padding-top:28px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}.section-heading h2{margin:3px 0 0;font-size:26px;letter-spacing:-.025em}.section-heading>a{display:flex;align-items:center;gap:3px;color:var(--navy);font-weight:900;font-size:12px}.category-cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.category-card{background:#fff;border:1px solid var(--line);border-radius:15px;min-height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 7px 18px rgba(7,55,100,.05);transition:.18s}.category-card:hover{transform:translateY(-3px);border-color:#f3cc35;box-shadow:var(--shadow)}.category-card span{font-size:39px}.category-card b{font-size:12px}.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}.catalog-panel{min-width:0}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.product-grid.wide{grid-template-columns:repeat(5,minmax(0,1fr))}.product-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 7px 20px rgba(8,56,101,.055);display:flex;flex-direction:column;min-width:0;transition:.16s}.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.product-media{height:150px;background:linear-gradient(145deg,#f3f7fb,#fff);display:grid;place-items:center;position:relative}.product-media .product-emoji{font-size:72px;filter:drop-shadow(0 8px 11px rgba(17,43,76,.12))}.heart-button{position:absolute;right:10px;top:10px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center}.heart-button.active{color:var(--danger);background:#fff3f5}.product-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:5px;flex:1}.product-body h3{font-size:14px;line-height:1.25;margin:0}.product-unit{font-size:11px;color:var(--muted)}.product-price{font-size:20px;color:var(--navy);font-weight:950}.product-price small{font-size:10px}.weight-note{font-size:9px;color:var(--orange);min-height:13px}.add-to-cart{margin-top:auto;border:0;border-radius:9px;background:var(--yellow);color:var(--navy);font-weight:900;padding:10px;display:flex;align-items:center;justify-content:center;gap:7px}.cart-side-card{position:sticky;top:195px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.cart-side-title{display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid var(--line)}.cart-side-title>span{display:flex;align-items:center;gap:8px;font-weight:900}.cart-side-items{max-height:330px;overflow:auto}.cart-line{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;padding:11px 13px;border-bottom:1px solid #eef3f7}.cart-line-emoji{width:42px;height:42px;background:#f4f7fa;border-radius:10px;display:grid;place-items:center;font-size:23px}.cart-line h4{font-size:12px;margin:0 0 2px}.cart-line small{font-size:9px;color:var(--muted)}.qty-control{display:flex;align-items:center;gap:6px}.qty-control button{width:25px;height:25px;border:1px solid #d8e1eb;background:#fff;border-radius:7px;display:grid;place-items:center;color:var(--navy)}.qty-control span{font-size:10px;font-weight:900;min-width:28px;text-align:center}.cart-empty{text-align:center;padding:26px 16px;color:var(--muted);font-size:12px}.cart-side-footer{padding:14px;background:#fafcff}.cart-side-footer>div,.cart-sheet-footer>div{display:flex;justify-content:space-between;align-items:flex-end}.cart-side-footer span,.cart-sheet-footer span{font-size:11px;color:var(--muted)}.cart-side-footer strong,.cart-sheet-footer strong{font-size:24px;color:var(--navy)}.cart-side-footer button,.cart-sheet-footer button{width:100%;border:0;border-radius:9px;background:var(--yellow);color:var(--navy);padding:12px;font-weight:900;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px}.cart-side-footer small,.cart-sheet-footer small{display:block;margin-top:8px;color:var(--muted);font-size:9px;line-height:1.4}.service-strip{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:10px;margin-top:28px}.service-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px}.service-card.strong{background:var(--navy);color:#fff}.service-card div{display:flex;flex-direction:column}.service-card strong{font-size:13px}.service-card span{font-size:10px;color:var(--muted)}.service-card.strong span{color:#dceafb}

/* internal pages */
.page-hero{min-height:215px;background:linear-gradient(115deg,var(--navy),#0860ac);color:#fff;display:flex;align-items:center;justify-content:space-between;padding-top:36px;padding-bottom:36px}.page-hero.compact{min-height:190px}.page-hero h1{font-size:45px;letter-spacing:-.04em;margin:5px 0 8px}.page-hero p{margin:0;max-width:650px;color:#e4effa;line-height:1.5}.page-hero>svg{opacity:.85;margin-right:30px}.offers-hero{background:linear-gradient(115deg,#073f78,#0a5aa1 62%,#f5b800 160%)}.offer-badge{width:150px;height:150px;border-radius:50%;background:var(--yellow);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-right:40px;box-shadow:0 12px 28px rgba(0,0,0,.14)}.offer-badge span,.offer-badge small{font-size:10px;font-weight:900;text-transform:uppercase}.offer-badge strong{font-size:42px;line-height:1}.category-page-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.category-tile{border:1px solid var(--line);background:#fff;border-radius:15px;padding:16px;display:grid;grid-template-columns:52px 1fr 18px;align-items:center;gap:10px;text-align:left;color:var(--ink);box-shadow:0 6px 17px rgba(8,56,101,.05)}.category-tile>span{width:52px;height:52px;border-radius:13px;background:#f3f7fb;display:grid;place-items:center;font-size:29px}.category-tile div{display:flex;flex-direction:column}.category-tile strong{font-size:13px}.category-tile small{font-size:10px;color:var(--muted)}.category-tile.active,.category-tile:hover{border-color:#f2c728;background:#fffcf0}.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.filter-chips{display:flex;gap:8px;overflow:auto}.filter-chips button{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 13px;border-radius:99px;font-size:11px;font-weight:800;white-space:nowrap}.filter-chips button.active{background:var(--navy);color:#fff;border-color:var(--navy)}#resultCount{font-size:11px;color:var(--muted);white-space:nowrap}.empty-state,.empty-panel{background:#fff;border:1px dashed #cfd9e5;border-radius:17px;text-align:center;padding:46px 20px;color:var(--muted)}.empty-state h3,.empty-panel h2{color:var(--ink);margin:10px 0 5px}.empty-state p,.empty-panel p{margin:0 0 18px}.empty-icon{width:70px;height:70px;border-radius:50%;background:#fff2f4;color:var(--danger);display:grid;place-items:center;margin:0 auto}.order-list{display:flex;flex-direction:column;gap:12px}.order-card{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px}.order-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center}.order-icon.preparing{background:#e3f7ec;color:var(--green)}.order-icon.payment{background:#fff0e7;color:var(--orange)}.order-icon.delivery{background:#e6f1ff;color:#2172c5}.order-main small{color:var(--muted);font-size:10px}.order-main h3{margin:1px 0 3px;font-size:16px}.order-main p{margin:0;color:var(--muted);font-size:11px}.status-pill{font-size:10px;font-weight:900;border-radius:99px;padding:8px 10px;white-space:nowrap}.status-pill.preparing{background:#e3f7ec;color:#137446}.status-pill.payment{background:#fff0e7;color:#b65012}.status-pill.delivery{background:#e6f1ff;color:#185ca0}.detail-link{display:flex;align-items:center;gap:2px;color:var(--navy);font-size:11px;font-weight:900}.account-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.info-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}.info-card>svg{color:var(--navy)}.info-card h3{margin:12px 0 5px}.info-card p{color:var(--muted);font-size:12px;min-height:36px}.info-card button,.info-card a{border:0;background:#edf3f8;color:var(--navy);font-weight:900;border-radius:9px;padding:9px 12px;font-size:11px;display:inline-block}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.help-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;display:flex;gap:14px}.help-card>svg{color:var(--navy)}.help-card h3{margin:0 0 5px}.help-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}

/* footer */
.site-footer{background:var(--navy);color:#fff;padding:16px 0}.footer-inner{display:flex;justify-content:center;gap:13px;font-size:11px}.footer-inner b{color:var(--yellow)}

/* overlay components */
.drawer-backdrop,.modal-backdrop{position:fixed;inset:0;background:rgba(2,20,39,.62);backdrop-filter:blur(7px);z-index:99}.mobile-drawer{position:fixed;z-index:110;left:0;top:0;bottom:0;width:min(86vw,350px);background:#fff;transform:translateX(-103%);transition:.22s ease;box-shadow:24px 0 55px rgba(0,0,0,.22);padding:15px;overflow:auto}.mobile-drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px}.drawer-head img{width:158px;height:90px;object-fit:contain}.drawer-head button,.cart-sheet-head button,.modal-close{border:0;background:transparent;color:var(--navy);display:grid;place-items:center;padding:8px}.drawer-nav{display:flex;flex-direction:column;gap:4px}.drawer-nav a,.drawer-nav button{border:0;background:transparent;color:var(--navy);display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:7px;padding:12px 13px;border-radius:10px;text-align:left;font-weight:800;font-size:13px}.drawer-nav a.active{background:#fff1a5}.drawer-promo{margin-top:17px;border-radius:14px;background:#fff3bd;padding:14px;display:flex;align-items:center;gap:11px}.drawer-promo-icon{width:46px;height:46px;border-radius:13px;background:#fff;display:grid;place-items:center;color:var(--navy)}.drawer-promo div:last-child{display:flex;flex-direction:column}.drawer-promo strong{font-size:12px}.drawer-promo span{font-size:10px;color:#53657a}.drawer-order-button{width:100%;border:0;background:var(--navy);color:#fff;border-radius:11px;padding:13px;margin-top:14px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:7px}.cart-sheet{position:fixed;z-index:111;right:0;top:0;bottom:0;width:min(92vw,390px);background:#fff;transform:translateX(104%);transition:.22s ease;box-shadow:-24px 0 55px rgba(0,0,0,.2);display:flex;flex-direction:column}.cart-sheet.open{transform:translateX(0)}.cart-sheet-head{display:flex;justify-content:space-between;align-items:center;padding:17px;border-bottom:1px solid var(--line)}.cart-sheet-head>div{display:flex;flex-direction:column}.cart-sheet-head small{font-size:10px;color:var(--muted)}.cart-sheet-items{overflow:auto;flex:1}.cart-sheet-footer{padding:15px;border-top:1px solid var(--line);background:#fafcff}.demo-modal{position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,500px);background:#fff;border-radius:20px;padding:28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.25)}.modal-close{position:absolute;right:10px;top:9px}.modal-success{width:66px;height:66px;border-radius:50%;background:#e1f6ea;color:var(--green);display:grid;place-items:center;margin:0 auto 12px}.demo-modal h2{margin:0 0 8px}.demo-modal p{margin:0;color:var(--muted);line-height:1.5}.demo-flow{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:18px 0}.demo-flow span{padding:8px 10px;border-radius:8px;background:#f1f5f9;font-size:10px;font-weight:900}.demo-flow b{color:var(--orange)}.toast{position:fixed;z-index:130;right:22px;bottom:22px;background:var(--navy);color:#fff;border-radius:11px;padding:11px 15px;box-shadow:var(--shadow-lg);font-size:12px;opacity:0;pointer-events:none;transform:translateY(10px);transition:.18s}.toast.show{opacity:1;transform:none}

@media (max-width:1250px){.desktop-slogan{display:none}.desktop-topbar{height:96px}.desktop-brand img{width:175px;height:80px}.desktop-brand{width:185px}.desktop-search{width:min(40vw,500px)}.category-cards{grid-template-columns:repeat(4,1fr)}.product-grid{grid-template-columns:repeat(3,1fr)}.product-grid.wide{grid-template-columns:repeat(4,1fr)}.category-page-grid{grid-template-columns:repeat(3,1fr)}}

@media (max-width:820px){
  body{padding-bottom:65px;background:#f5f7fa}.desktop-site{display:none!important}.mobile-site{display:block!important}.page-shell{padding-left:12px;padding-right:12px}.site-main{padding:10px 0 22px}.mobile-header{position:sticky;top:0;z-index:70;background:#fff;box-shadow:0 3px 15px rgba(7,52,94,.08)}.mobile-top{height:66px;background:var(--yellow);display:grid;grid-template-columns:42px 1fr auto;align-items:center;padding:4px 10px}.mobile-brand{display:flex;justify-content:center}.mobile-brand img{width:128px;height:58px;object-fit:contain}.mobile-actions{display:flex;gap:3px}.mobile-icon-button{position:relative;border:0;background:rgba(255,255,255,.34);width:38px;height:38px;border-radius:10px;color:var(--navy);display:grid;place-items:center}.mini-dot{position:absolute;right:-1px;top:-3px;background:#d4dde8;color:#3f5165;font-style:normal;font-size:9px;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;font-weight:900}.mini-dot.danger{background:var(--danger);color:#fff}.mobile-search{height:48px;padding:6px 10px;display:flex;align-items:center;gap:7px;background:#fff;border-top:1px solid rgba(0,0,0,.03)}.mobile-search>svg{color:#75869a;margin-left:8px}.mobile-search input{flex:1;min-width:0;border:0;outline:0;height:34px}.mobile-search button{height:34px;border:0;border-radius:8px;background:var(--yellow);color:var(--navy);font-weight:900;padding:0 13px;font-size:11px}
  .home-hero{grid-template-columns:1fr;min-height:0;border-radius:14px;margin:0 10px;padding:0}.hero-copy{padding:25px 20px 18px}.hero-copy h1{font-size:39px}.hero-copy p{font-size:14px}.hero-art{min-height:0;height:215px}.home-section,.page-section{padding-top:20px}.section-heading{align-items:center}.section-heading h2{font-size:20px}.section-heading>a{font-size:10px}.category-cards{display:flex;overflow-x:auto;gap:9px;padding-bottom:4px;scrollbar-width:none}.category-cards::-webkit-scrollbar{display:none}.category-card{min-width:83px;min-height:94px;box-shadow:none}.category-card span{font-size:32px}.category-card b{font-size:10px}.shop-layout{grid-template-columns:1fr}.product-grid,.product-grid.wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-media{height:120px}.product-media .product-emoji{font-size:55px}.product-body{padding:9px}.product-body h3{font-size:12px}.product-price{font-size:17px}.add-to-cart{font-size:11px;padding:9px}.service-strip{grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.service-card{padding:11px}.service-card strong{font-size:11px}.service-card span{font-size:9px}.page-hero,.page-hero.compact{min-height:150px;margin:0 10px;border-radius:14px;padding:24px 18px}.page-hero h1{font-size:32px}.page-hero p{font-size:12px}.page-hero>svg{margin-right:4px;width:40px;height:40px}.offer-badge{width:96px;height:96px;margin-right:0}.offer-badge strong{font-size:27px}.category-page-grid{grid-template-columns:1fr 1fr;gap:8px}.category-tile{grid-template-columns:42px 1fr 16px;padding:11px}.category-tile>span{width:42px;height:42px;font-size:23px}.filter-bar{align-items:flex-start;flex-direction:column}.filter-chips{width:100%}.order-card{grid-template-columns:44px 1fr;gap:10px;padding:13px}.order-icon{width:42px;height:42px}.status-pill{grid-column:1/2;justify-self:start}.detail-link{grid-column:2/3;justify-self:end}.order-main p{font-size:10px}.account-grid,.help-grid{grid-template-columns:1fr}.info-card{padding:17px}.help-card{padding:16px}.mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid var(--line);z-index:80;display:grid!important;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#6e7f92}.mobile-bottom-nav a span{font-size:9px}.mobile-bottom-nav a.active{color:var(--navy);font-weight:900}.cart-sheet{top:auto;left:0;right:0;bottom:0;width:100%;max-height:78vh;border-radius:20px 20px 0 0;transform:translateY(105%)}.cart-sheet.open{transform:translateY(0)}.toast{left:10px;right:10px;bottom:74px;text-align:center}.footer-inner{display:none}
}
@media (max-width:390px){.product-grid,.product-grid.wide{grid-template-columns:1fr 1fr}.product-media{height:105px}.hero-copy h1{font-size:34px}.hero-art{height:185px}.service-strip{grid-template-columns:1fr}.category-page-grid{grid-template-columns:1fr}.mobile-brand img{width:116px}.page-hero p{max-width:250px}}

/* ======================================================================
   Seu Silva Demo v0.2.1 - Responsive polish
   - Hero desktop com altura sincronizada entre texto e imagem
   - Drawer mobile com header amarelo
   - Elimina overflow horizontal da viewport
   - Corrige page hero/ofertas em telas estreitas
   ====================================================================== */

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

body {
  position: relative;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Hero: texto e arte sempre compartilham exatamente a mesma altura. */
.home-hero {
  height: clamp(390px, 32vw, 450px);
  min-height: 0;
  align-items: stretch;
}

.hero-copy {
  min-width: 0;
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-art {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.hero-art img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Drawer com identidade da marca e sem vazamento lateral. */
.mobile-drawer {
  box-sizing: border-box;
  max-width: 350px;
  overflow-x: hidden;
  padding: 0;
}

.drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 88px;
  padding: 9px 15px;
  background: var(--yellow);
  border-bottom: 1px solid rgba(8, 63, 122, .08);
}

.drawer-head img {
  width: 140px;
  height: 68px;
}

.drawer-head button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .46);
}

.drawer-nav {
  padding: 12px 15px 0;
}

.drawer-promo {
  margin: 16px 15px 0;
}

.drawer-order-button {
  width: calc(100% - 30px);
  margin: 14px 15px 16px;
}

/* Elementos flex/grid nunca podem empurrar a viewport. */
.site-main,
.page-shell,
.catalog-panel,
.shop-layout,
.section-heading,
.filter-bar,
.filter-chips,
.page-hero > div,
.home-hero > div {
  min-width: 0;
}

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .site-main,
  .mobile-header,
  .mobile-top,
  .mobile-search,
  .mobile-bottom-nav,
  .home-section,
  .page-section,
  .service-strip {
    max-width: 100%;
  }

  /* O elemento já possui largura própria; margem não pode somar sobre 100%. */
  .home-hero,
  .page-hero,
  .page-hero.compact {
    width: auto;
    max-width: none;
    margin-left: 12px;
    margin-right: 12px;
  }

  .home-hero {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    height: auto;
    padding: 25px 20px 18px;
  }

  .hero-art {
    width: 100%;
    height: 215px;
    min-height: 0;
  }

  .hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Ofertas: texto e selo ficam em colunas reais, sem sobreposição. */
  .page-hero.offers-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: center;
    justify-content: initial;
    column-gap: 12px;
    min-height: 154px;
    padding: 22px 14px;
  }

  .offers-hero > div:first-child {
    min-width: 0;
    max-width: 100%;
  }

  .offers-hero .kicker {
    display: block;
    max-width: 100%;
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .offers-hero h1 {
    max-width: 100%;
    margin: 7px 0 8px;
    font-size: clamp(27px, 8.3vw, 33px);
    line-height: 1.02;
    letter-spacing: -.035em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .offers-hero p {
    max-width: 100%;
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .offer-badge {
    width: 86px;
    height: 86px;
    min-width: 86px;
    margin: 0;
    padding: 8px 5px;
    text-align: center;
    overflow: hidden;
    align-self: center;
    justify-self: end;
  }

  .offer-badge span {
    font-size: 8px;
    line-height: 1;
  }

  .offer-badge strong {
    font-size: 27px;
    line-height: .92;
    margin: 2px 0;
  }

  .offer-badge small {
    display: block;
    width: 70px;
    max-width: 70px;
    font-size: 7px;
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: normal;
  }

  /* Chips rolam apenas dentro do próprio componente, nunca a página inteira. */
  .filter-bar {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .filter-chips {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }

  .filter-chips button {
    flex: 0 0 auto;
  }

  .product-grid,
  .product-grid.wide,
  .category-cards,
  .category-page-grid,
  .account-grid,
  .help-grid,
  .order-list {
    max-width: 100%;
  }

  .product-card,
  .category-card,
  .category-tile,
  .order-card,
  .info-card,
  .help-card {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-drawer {
    width: min(86%, 350px);
    max-width: calc(100% - 34px);
  }

  .drawer-backdrop,
  .modal-backdrop {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  .home-hero,
  .page-hero,
  .page-hero.compact {
    margin-left: 10px;
    margin-right: 10px;
  }

  .hero-art {
    height: 185px;
  }

  .page-hero.offers-hero {
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: 9px;
    padding: 20px 12px;
  }

  .offers-hero h1 {
    font-size: 27px;
  }

  .offer-badge {
    width: 78px;
    height: 78px;
    min-width: 78px;
    padding: 7px 4px;
  }

  .offer-badge strong {
    font-size: 24px;
  }

  .offer-badge small {
    width: 64px;
    max-width: 64px;
    font-size: 6.5px;
  }
}

@media (max-width: 340px) {
  .page-hero.offers-hero {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .offers-hero h1 {
    font-size: 24px;
  }

  .offers-hero p {
    font-size: 9px;
  }

  .offer-badge {
    width: 70px;
    height: 70px;
    min-width: 70px;
  }

  .offer-badge strong {
    font-size: 21px;
  }

  .offer-badge small {
    width: 58px;
    max-width: 58px;
    font-size: 6px;
  }
}

/* ======================================================================
   Seu Silva Demo v0.2.2 - Hero desktop seam fix
   Remove a faixa/amostra visual existente na borda esquerda da arte.
   O mobile permanece inalterado.
   ====================================================================== */
@media (min-width: 821px) {
  .home-hero {
    gap: 0 !important;
    column-gap: 0 !important;
  }

  .hero-copy,
  .hero-art {
    margin: 0;
    border: 0;
    outline: 0;
  }

  .hero-art {
    position: relative;
    overflow: hidden;
    margin-left: -1px;
    background: #0b559b;
  }

  .hero-art img {
    display: block;
    width: calc(100% + 13px);
    max-width: none;
    height: 100%;
    margin: 0;
    border: 0;
    transform: translateX(-12px);
    object-fit: cover;
    object-position: center;
  }
}

/* ======================================================================
   Seu Silva Demo v0.2.2 - Hero image final fit
   - Ajuste para o novo banner 16:9
   - Zoom discreto para preencher sem perder informacao importante
   - Mantem desktop e mobile sem overflow lateral
   ====================================================================== */

.hero-art {
  position: relative;
  overflow: hidden;
  background: #07569f;
}

.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.025);
  transform-origin: center center;
}

/* Desktop: pequeno deslocamento para preservar melhor o texto da direita. */
@media (min-width: 821px) {
  .hero-art img {
    object-position: 51% center;
  }
}

/* Mobile: zoom ainda mais leve para preservar toda a composicao. */
@media (max-width: 820px) {
  .hero-art img {
    transform: scale(1.015);
    object-position: center center;
  }
}

/* ======================================================================
   Seu Silva Demo v0.2.3 - Hero sem corte no desktop
   - A imagem atual e 4:3 e o painel desktop e bem mais largo.
   - object-fit: contain preserva 100% da imagem.
   - O fundo azul absorve a sobra lateral sem criar faixa branca.
   - Mobile preserva o comportamento anterior.
   ====================================================================== */

@media (min-width: 821px) {
  .hero-art {
    position: relative;
    overflow: hidden;
    background: #0156cb;
  }

  .hero-art img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    border: 0 !important;
  }
}

@media (max-width: 820px) {
  .hero-art {
    background: #07569f;
  }

  .hero-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.015) !important;
  }
}


/* ======================================================================
   Seu Silva Demo v0.2.4
   - Hero: zoom leve no desktop sem voltar ao crop agressivo
   - Ofertas mobile: chips de categoria sempre inteiros e sem recorte
   - Botão de instalação PWA
   ====================================================================== */

.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-actions .primary-action,
.hero-actions .secondary-action {
  min-height: 47px;
}

.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 12px 18px;
  font-weight: 900;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: .18s ease;
}

.secondary-action:hover {
  background: #fff;
  color: var(--navy);
}

.secondary-action[hidden] {
  display: none !important;
}

/* Desktop: apenas um pequeno zoom na arte inteira. */
@media (min-width: 821px) {
  .hero-art img {
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(1.035) !important;
    transform-origin: center center !important;
  }
}

/* Mobile: todas as categorias ficam visíveis, sem botão cortado na borda. */
@media (max-width: 820px) {
  .filter-bar {
    overflow: visible !important;
  }

  .filter-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .filter-chips button {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    min-height: 34px;
    padding: 8px 12px !important;
    border-radius: 999px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .hero-actions .primary-action,
  .hero-actions .secondary-action {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .filter-chips {
    gap: 6px !important;
  }

  .filter-chips button {
    padding: 7px 10px !important;
    font-size: 10px !important;
  }
}



/* ======================================================================
   Seu Silva Demo v0.2.5 - HOME ICONS + PWA INSTALL BUTTON
   Patch incremental: não altera regras do Hero.
   ====================================================================== */

/* Categorias da Home: substitui emojis por ícones SVG modernos */
.category-card .category-icon{
  width:58px;
  height:58px;
  border-radius:17px;
  display:grid;
  place-items:center;
  background:#eef5fb;
  color:var(--navy);
  box-shadow:inset 0 0 0 1px rgba(8,63,122,.06);
  transition:.18s ease;
  font-size:0 !important;
}

.category-card .category-icon svg{
  width:29px;
  height:29px;
  max-width:none;
}

.category-card:hover .category-icon{
  transform:translateY(-2px) scale(1.04);
}

.category-card:nth-child(1) .category-icon{background:#eaf8ef;color:#218653}
.category-card:nth-child(2) .category-icon{background:#fff0f0;color:#cf3f45}
.category-card:nth-child(3) .category-icon{background:#fff6df;color:#b77b24}
.category-card:nth-child(4) .category-icon{background:#fff8d9;color:#d39313}
.category-card:nth-child(5) .category-icon{background:#e9f8f7;color:#168f8c}
.category-card:nth-child(6) .category-icon{background:#edf3ff;color:#3e70c7}
.category-card:nth-child(7) .category-icon{background:#eaf6ff;color:#2181b8}
.category-card:nth-child(8) .category-icon{background:#f2edff;color:#7056a7}

.category-card b{
  text-align:center;
  line-height:1.15;
}

/* Botão Instalar APP */
.pwa-install-action{
  min-width:185px;
  padding:7px 15px 7px 8px !important;
  gap:10px !important;
  border:1px solid rgba(255,255,255,.72) !important;
  background:rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.pwa-install-action .install-app-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--yellow);
  color:var(--navy);
  box-shadow:0 6px 15px rgba(0,0,0,.12);
}

.pwa-install-action:hover{
  background:#fff !important;
  color:var(--navy) !important;
}

.pwa-install-action:hover .install-app-icon{
  transform:translateY(-1px);
}

@media (max-width:820px){
  .category-cards{
    gap:10px !important;
    padding-right:12px;
  }

  .category-card{
    min-width:98px !important;
    min-height:105px !important;
    padding:10px 8px !important;
    gap:8px !important;
  }

  .category-card .category-icon{
    width:52px;
    height:52px;
    border-radius:15px;
  }

  .category-card .category-icon svg{
    width:26px;
    height:26px;
  }

  .category-card b{
    font-size:10px !important;
    white-space:nowrap;
  }

  .pwa-install-action{
    min-width:0;
    width:100% !important;
    min-height:56px !important;
    padding:8px 14px 8px 9px !important;
    justify-content:center;
  }

  .pwa-install-action .install-app-icon{
    width:40px;
    height:40px;
  }
}