/* Phone comfort and app controls. Keep desktop styling from styles.css. */
[hidden]{display:none!important}
.install-button{background:var(--sage);color:var(--ink);white-space:nowrap;gap:8px;min-height:44px}
.install-button:hover{background:#dbe7d0}
.footer-install{margin-top:12px}
.mobile-nav,.filter-toggle{display:none}
.install-dialog{max-width:460px}
.install-dialog .modal-heading{align-items:flex-start}
.install-dialog .modal-heading h2{font-size:27px;line-height:1.2}
.install-dialog p,.install-dialog li{font-size:14px}
.install-dialog ol{padding-left:22px}
.install-dialog li{padding:6px 0}
.install-dialog .install-note{font-size:12px;color:#687b71}
.install-app-icon{width:64px;height:64px;border-radius:16px;margin-bottom:18px}
.install-dialog>.button{width:100%}
.network-status{padding:10px 16px;background:#fff0cd;color:#5d4319;text-align:center;font-size:13px}
.store-contact a{display:block;width:fit-content;padding-block:10px;text-decoration:underline;overflow-wrap:anywhere}
.detail-layout>*{min-width:0}
.breadcrumb{flex-wrap:wrap}
.page-title h1,.detail-copy h1,.table-product b{overflow-wrap:anywhere}

@media(max-width:1100px){
  .header-row .header-link{display:none}
  .header-row{gap:14px}
}
@media(max-width:760px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .wrap{width:calc(100% - 32px);min-width:0}
  .announcement{justify-content:center;padding-top:max(8px,env(safe-area-inset-top,0px))}
  .announcement>span{display:none}
  .announcement a{font-size:11px;min-height:24px}
  .header-row{gap:8px;padding-block:10px}
  .header-row .logo{width:136px}
  .header-row .header-saved,.cart-link>span{display:none}
  .header-row .install-button{padding:8px 11px;font-size:12px}
  .header-row .cart-link{min-height:44px;min-width:44px;justify-content:center}
  .header-row .search{padding:4px 5px 4px 12px;gap:8px}
  .header-row .search input{font-size:16px;min-height:44px}
  .header-row .search button{font-size:12px;min-height:44px;padding-inline:14px}
  .main-nav{min-height:48px}
  .main-nav>a{display:flex;align-items:center;min-height:44px;font-size:12px}
  input,select,textarea,.shop-layout input,.shop-layout select,.results-bar select,.admin-toolbar input,.upload-zone input{font-size:16px}
  input:not([type=checkbox]),select{min-height:46px}
  label,.form-grid label,.shop-layout form label{font-size:12px}
  button,.button,.icon-button,.save-button,.add-button{min-height:44px}
  .button{font-size:13px}
  .icon-button,.save-button,.add-button{min-width:44px}
  .save-button{width:44px;height:44px;top:5px;right:5px}
  .save-button svg{width:18px;height:18px}
  .product-art>a{padding-top:58px}
  .product-art .tag{top:14px;left:8px;max-width:calc(100% - 58px);font-size:8px;line-height:1.3}
  .product-meta h3{font-size:14px;line-height:1.4}
  .product-meta small,.price-row span{font-size:10px}
  .price-row{gap:4px}
  .price-row strong{font-size:16px}
  .product-art img,.shop-layout .product-art img{height:145px}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .text-link{padding-block:12px;font-size:12px}
  .hero h1{font-size:clamp(38px,10vw,48px)}
  .hero p{font-size:14px}
  .benefits small{font-size:10px;line-height:1.4}
  .benefits b{font-size:11px}
  .category-card span{font-size:11px}
  .category-grid{scroll-snap-type:x proximity}
  .category-card{scroll-snap-align:start}
  .budget-options a{min-height:44px;font-size:12px}
  .filter-toggle{display:flex;width:100%;justify-content:flex-start;margin-bottom:14px}
  .filter-toggle svg:last-child{margin-left:auto}
  .shop-layout .filters-collapsed #filters{display:none}
  .shop-layout aside form{padding:16px;background:var(--cream);border-radius:12px}
  .shop-layout aside h3{font-size:14px;margin-bottom:5px}
  .shop-layout aside .reset{display:grid;place-content:center;min-height:44px;font-size:12px}
  .results-bar{font-size:12px;gap:8px;flex-wrap:wrap}
  .results-bar label{font-size:12px}
  .results-bar select{max-width:190px;flex:1}
  .detail-copy form{grid-template-columns:1fr}
  .detail-actions{flex-wrap:wrap}
  .detail-actions .button{min-height:48px}
  .whatsapp-link{padding-block:10px;font-size:14px}
  .cart-item{grid-template-columns:75px minmax(0,1fr) 44px;gap:10px}
  .cart-item img{width:75px;height:90px}
  .cart-item p{overflow-wrap:anywhere}
  .cart-item .icon-button{padding:8px}
  .quantity-control{gap:8px}
  .quantity-control button{min-width:44px;min-height:44px}
  .form-grid .button{font-size:14px;min-height:48px}
  .footer-grid a:not(.footer-brand){font-size:12px;min-height:36px;overflow-wrap:anywhere}
  .footer-grid p{font-size:12px}
  .footer-grid{gap:26px 18px}
  .footer-grid>div:last-child{grid-column:1/-1}
  .footer-bottom{font-size:11px}
  .footer-bottom a{min-height:44px}
  .mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;inset:auto 0 0;z-index:90;background:#fffffff5;backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 -4px 20px #173d3708}
  .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;gap:3px;border-radius:10px;font-size:11px;font-weight:600;color:#657b70}
  .mobile-nav a[aria-current=page]{background:#e8eee3;color:var(--ink)}
  .mobile-nav svg{width:21px;height:21px}
  .mobile-nav b{background:var(--ink);color:white;border-radius:9px;padding:1px 5px;font-size:10px}
  #toast{bottom:calc(87px + env(safe-area-inset-bottom,0px));width:max-content;max-width:calc(100% - 32px);padding:12px 18px}
  dialog{max-height:calc(100dvh - 32px);padding:22px 18px;overscroll-behavior:contain}
  .modal-heading{gap:10px}
  .modal-heading h2{overflow-wrap:anywhere}
  .modal-actions{flex-wrap:wrap}
  .admin-toolbar{flex-wrap:wrap}
  .admin-toolbar input{width:100%}
  .admin-toolbar .button{font-size:12px}
  .admin-stats small{font-size:9px}
  .admin-tabs{gap:12px;overflow:auto}
  .admin-tabs button{white-space:nowrap;padding-inline:8px}
  .table-scroll{max-width:100%;overscroll-behavior-x:contain}
  .orders-list .panel{overflow-wrap:anywhere}
}
@media(max-width:360px){
  .wrap{width:calc(100% - 24px)}
  .header-row .logo{width:115px}
  .header-row .install-button{padding-inline:8px;gap:5px}
  .hero-copy{padding:24px 19px 0}
  .benefits{gap:14px 8px}
  .benefits>div{gap:7px}
  .product-grid,.shop-layout .product-grid{gap:18px 10px}
  .product-art img,.shop-layout .product-art img{height:125px}
  .price-row strong{font-size:14px}
  .product-meta h3{font-size:13px}
  .shop-layout aside form{grid-template-columns:1fr}
}
@media print{.mobile-nav,.install-button,.network-status{display:none!important}body{padding-bottom:0}}