/* Tablet and mobile layout refinements for HÔMEA. */
img{max-width:100%}
button,input,select,textarea{max-width:100%}

@media (max-width:1100px){
  .header{padding:0 4%;height:78px}
  .logo{width:150px}
  .nav{margin-left:5%;gap:22px}
  .nav a,.header-actions button,.nav-dropdown>button{font-size:12px}
  .header-actions{gap:14px}
  .hero{min-height:620px}
  .hero-copy{padding-left:8%;width:55%}
  .hero-image{left:45%}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .catalogue-modal .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rewards{padding:75px 8%;gap:40px}
  .story-copy{padding:9% 10%}
  .contact-map{max-width:880px}
  .admin-modal{width:min(960px,calc(100% - 24px));padding:30px}
}

@media (max-width:760px){
  html{scroll-padding-top:70px}
  body{font-size:14px;overflow-x:hidden}
  .announcement{padding:8px 14px;font-size:8px;letter-spacing:.11em;line-height:1.35}
  .announcement span{display:none}
  .header{height:68px;padding:0 14px;position:sticky;top:0;z-index:25}
  .logo{width:128px;margin:auto}
  .nav{display:none}
  .mobile-menu{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;color:inherit;font-size:22px}
  .header-actions{margin:0;gap:4px}
  .header-actions .text-icon{display:flex;padding:7px}
  .account-label{display:none}
  .account-symbol{width:21px;height:21px}
  .cart-button{padding:7px 0 7px 7px;font-size:0!important;min-width:30px}
  .cart-button:before{content:'⌑';font-size:23px;line-height:1;color:inherit}
  .cart-button b{position:relative;top:-11px;left:-4px;font-size:9px;padding:2px 5px;margin:0}
  .mobile-nav{position:fixed;z-index:28;inset:68px 12px auto 12px;background:#171311;color:#f8f0e9;box-shadow:0 18px 38px #0007;visibility:hidden;opacity:0;transform:translateY(-10px);transition:.2s;padding:10px}
  .mobile-nav.open{visibility:visible;opacity:1;transform:none}
  .mobile-nav a,.mobile-nav button{display:block;width:100%;border:0;border-bottom:1px solid #ffffff1f;background:transparent;color:inherit;text-align:left;padding:15px 10px;font:600 13px var(--sans);letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
  .mobile-nav .mobile-subnav{padding:4px 0 8px}
  .mobile-nav .mobile-subnav a{color:#e1a489;font-size:11px;padding:10px 20px}
  .hero{min-height:min(720px,calc(100svh - 68px));display:block}
  .hero-image{inset:0}
  .hero-image:after{background:linear-gradient(0deg,#171311 5%,#17131199 38%,transparent 76%)}
  .hero-copy{display:flex;flex-direction:column;justify-content:flex-end;min-height:min(720px,calc(100svh - 68px));width:100%;padding:100px 24px 42px;position:relative}
  .hero h1{font-size:clamp(42px,13vw,60px);max-width:390px;margin-bottom:17px}
  .hero-copy>p:not(.eyebrow){font-size:14px;line-height:1.55;margin:0 0 25px;max-width:350px}
  .hero-note{display:none}
  .button{padding:14px 16px;gap:34px}
  .intro{padding:76px 22px 64px}
  .intro h2,.contact h2{font-size:clamp(37px,11vw,49px)}
  .intro>p:last-child{font-size:14px;line-height:1.65}
  .section{padding:0 16px 72px}
  .section-heading{align-items:flex-start;gap:16px;margin-bottom:22px}
  .section-heading h2{font-size:36px}
  .underlined{font-size:10px;white-space:nowrap}
  .underlined span{margin-left:7px}
  .filters{margin:0 -16px;padding:14px 16px 20px;overflow:auto;scrollbar-width:none;white-space:nowrap}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:0 0 auto;padding:9px 12px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .product-image{aspect-ratio:1/1.17}
  .product-info{display:block;padding-top:10px}
  .product-info h3{font-size:16px;line-height:1.15}
  .product-info p{margin-top:5px;font-size:10px;line-height:1.35}
  .product-info strong{display:block;margin-top:8px;font-size:12px}
  .add{padding:10px 5px;font-size:9px}
  .rewards{display:block;padding:58px 24px}
  .rewards h2{font-size:42px;line-height:1.06}
  .rewards-copy{padding-top:20px}
  .rewards-copy>p{font-size:14px}
  .reward-steps{display:grid;grid-template-columns:1fr;gap:8px;line-height:1.4}
  .reward-levels{overflow:auto;padding-bottom:5px;margin-right:-24px}
  .reward-levels div{flex:0 0 145px}
  .story{grid-template-columns:1fr}
  .story-photo{min-height:300px;height:58vw}
  .story-copy{padding:60px 24px 65px}
  .story-copy h2{font-size:40px}
  .contact{padding:72px 24px}
  .contact-info{display:grid;grid-template-columns:1fr;gap:15px;margin-top:32px;text-align:left}
  .contact-info p{margin:0}
  .contact-map{height:260px;margin-top:32px}
  footer{display:grid;grid-template-columns:1fr;gap:18px;padding:34px 24px;align-items:start;line-height:1.55}
  footer p{margin:0}
  .footer-logo{font-size:28px}
  .panel{width:100%;padding:22px 18px}
  .cart-row{grid-template-columns:60px 1fr auto;gap:11px}
  .cart-row img{width:60px;height:72px}
  .modal{top:50%;width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:32px 20px;transform:translate(-50%,-47%)}
  .modal.open{transform:translate(-50%,-50%)}
  .modal h2{font-size:clamp(32px,10vw,42px);margin:0 28px 20px 0}
  .modal-close{top:14px;right:14px}
  .checkout-modal{padding-top:36px}
  .checkout-modal .two-cols,.two-cols{grid-template-columns:1fr;gap:0}
  .checkout-modal form>label,.checkout-modal .two-cols>label{font-size:12px}
  .pay-option{font-size:13px!important;padding:12px!important}
  .account-popover{position:fixed;z-index:29;top:78px;right:10px;left:10px;width:auto;max-height:calc(100dvh - 90px);overflow:auto;padding:23px}
  .account-popover h3{font-size:28px}
  .catalogue-modal{padding:32px 16px}
  .catalogue-modal h2{font-size:37px}
  .catalogue-modal .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .cookie-banner{z-index:27;left:10px;right:10px;bottom:10px;max-width:none;padding:12px}
  .cookie-banner h3{font-size:20px}.cookie-banner p{font-size:12px;margin-bottom:9px}.cookie-banner button{padding:8px;font-size:11px}
  .cookie-banner a{margin-top:7px}
  #promotionOffer.open~.cookie-banner{bottom:8px;transform:scale(.94);transform-origin:left bottom}
  .admin-modal{width:calc(100% - 14px);padding:25px 14px}
  .admin-bar{padding-bottom:14px;margin-bottom:15px}.admin-bar h2{font-size:28px}
  .admin-tabs{gap:15px;margin:0 -14px 15px;padding:0 14px;scrollbar-width:none}.admin-tabs::-webkit-scrollbar{display:none}
  .admin-grid,.admin-grid.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 20px}
  .admin-stat{padding:13px}.admin-stat b{font-size:22px}.admin-columns{grid-template-columns:1fr;gap:18px}
  .admin-panel{overflow-x:auto}.admin-table{min-width:610px}.admin-search{width:100%}
  .product-editor{grid-template-columns:1fr}.product-editor .wide{grid-column:auto}
  .tracking-order form{grid-template-columns:1fr}.tracking-order .admin-action{width:100%}
  .toast{z-index:40;width:calc(100% - 36px);max-width:410px;text-align:center;bottom:18px;font-size:11px}
}

@media (min-width:761px) and (max-width:1100px){
  .checkout-modal{width:min(620px,calc(100% - 40px))}
  .admin-table{min-width:700px}
  .admin-panel{overflow-x:auto}
}