/* Ajustes de estabilidad y legibilidad en pantallas pequeñas */
html,body{max-width:100%;overflow-x:hidden}
section[id]{scroll-margin-top:96px}
.occasion-card>div{min-width:0;width:100%}
.occasion-card strong,.occasion-card small{display:block}
.occasion-card strong{line-height:1.18;overflow-wrap:break-word}
.occasion-card small{line-height:1.4;margin-top:7px}
.product-card,.product-info,.product-title-row{min-width:0}
.product-title-row h3{overflow-wrap:break-word}

@media(max-width:820px){
  section[id]{scroll-margin-top:82px}
  .site-header{width:100%;min-width:0}
  .site-header .brand{min-width:0}
  .site-header .brand>span:last-child{min-width:0}
  .site-header .brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .section-heading{min-width:0}
  .section-heading>div{min-width:0}
  .occasion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .occasion-card{min-width:0}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-tools{min-width:0;max-width:100%}
  .search-box{min-width:0}
  .map-actions>*{min-width:0}
}

@media(max-width:560px){
  .announcement{padding:7px 12px;line-height:1.3}
  .site-header{height:68px;padding:0 14px;gap:10px}
  .brand{gap:9px;min-width:0}
  .brand-mark{width:38px;height:38px;flex:0 0 38px;font-size:22px}
  .brand strong{font-size:18px;max-width:190px}
  .cart-button{height:42px;padding:0 12px;flex:none}

  .section{padding-left:16px;padding-right:16px}
  .section-narrow{margin-left:16px;margin-right:16px}
  .section-heading{gap:12px;margin-bottom:24px;align-items:flex-end}
  .section-heading h2{font-size:34px;line-height:1.05;margin-top:6px;overflow-wrap:normal}
  .section-heading .button-link{flex:none;font-size:13px;margin-bottom:4px}

  .occasion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .occasion-card{min-height:170px;padding:17px 14px;border-radius:18px;justify-content:flex-start;gap:18px}
  .occasion-card>span{font-size:32px;line-height:1}
  .occasion-card strong{font-size:18px;line-height:1.18;margin:0;word-break:normal}
  .occasion-card small{font-size:13px;line-height:1.45;margin-top:7px;color:var(--muted)}

  .products-heading{display:block}
  .product-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;margin-top:16px}
  .search-box{width:100%}
  .product-tools select{width:auto;max-width:132px;padding-left:10px;padding-right:10px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-info{padding:11px 2px}
  .product-title-row{display:block}
  .product-title-row h3{font-size:17px;line-height:1.2;margin:0;overflow-wrap:break-word}
  .product-price{font-size:14px;margin-top:5px;white-space:normal}
  .product-meta{font-size:10px;line-height:1.25;white-space:normal}
  .stock-chip{max-width:100%;white-space:normal;line-height:1.2}
  .product-badge{max-width:calc(100% - 58px);white-space:normal;line-height:1.15}

  .hero-actions{flex-wrap:wrap}
  .hero-actions .primary-button{max-width:100%}

  .cart-line{grid-template-columns:66px minmax(0,1fr);gap:10px}
  .cart-thumb{width:66px;height:76px}
  .cart-line .line-price{grid-column:2;text-align:left;margin-top:-2px}
  .cart-actions{flex-wrap:wrap}

  .modal{width:calc(100% - 12px);max-height:calc(100dvh - 12px)}
  .product-modal-copy{padding:22px 18px 28px}
  .product-modal-copy h2,.checkout-head h2{font-size:31px;line-height:1.08;padding-right:34px}
  .checkout-modal{padding:26px 16px}
  .field input,.field select,.field textarea,.map-actions input{font-size:16px}
  .map-actions{grid-template-columns:1fr}
  .map-actions input{grid-column:auto}
  .soft-button{min-height:44px}
}

@media(max-width:370px){
  .brand strong{max-width:145px;font-size:17px}
  .section-heading h2{font-size:31px}
  .occasion-grid{gap:9px}
  .occasion-card{padding:15px 11px;min-height:166px}
  .occasion-card strong{font-size:16px}
  .occasion-card small{font-size:12px}
  .product-grid{gap:9px}
}

.store-status-banner{background:#2d2827;color:#fff;text-align:center;padding:10px 18px;font-size:13px;line-height:1.4;position:relative;z-index:19}
@media(max-width:560px){.store-status-banner{font-size:12px;padding:9px 14px}}

@media(max-width:820px){
  .header-location{font-size:11px;padding:6px 9px}
  .brand-logo{width:44px;height:44px;flex-basis:44px}
}
@media(max-width:560px){
  .site-header{gap:8px}
  .brand-logo{width:43px;height:43px;flex-basis:43px}
  .site-header .brand strong{font-size:16px;max-width:150px}
  .header-location{padding:6px 8px;font-size:10px}
}
@media(max-width:390px){
  .site-header .brand strong{max-width:118px;font-size:15px}
  .header-location{padding:5px 7px}
}