/*
 * Jetin Store · Responsive System
 * Canonical public breakpoints: 360 / 390 / 430 / 768 / 820 / desktop.
 * Final responsive authority. Loads after page-specific styles.
 * 2026-09-22
 */
:root{--jetin-gutter-desktop:24px;--jetin-gutter-tablet:18px;--jetin-gutter-mobile:14px;--jetin-gutter-narrow:12px}
html,body{max-width:100%}body{overflow-x:clip}img,svg,video,canvas{max-width:100%}
button,a,summary,input,select,textarea{touch-action:manipulation}
:where(button,a,summary,[role="button"]){-webkit-tap-highlight-color:transparent}
:where(button,a,summary,[role="button"]):focus-visible{outline:3px solid #A66C46;outline-offset:3px}

@media (min-width:821px){
  header nav[aria-label="Navegación principal"]{display:flex!important}
  #menuBtn{display:none!important}#mobileMenu{display:none!important}
  .head-nav,.lib-nav{display:flex!important}.mobile-nav,.lib-mobile-nav{display:none!important}
  .lib-hero{grid-template-columns:1.15fr .85fr!important}
  .lib-section-head{grid-template-columns:.8fr 1.2fr!important}
  .lib-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .lib-two{grid-template-columns:1fr 1fr!important}
  .runway-sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:820px){
  header nav[aria-label="Navegación principal"]{display:none!important}
  #menuBtn{display:inline-flex!important}
  #mobileMenu.hidden{display:none!important}#mobileMenu:not(.hidden){display:block!important}
  .head-nav,.lib-nav{display:none!important}.mobile-nav,.lib-mobile-nav{display:block!important}
  .head-inner,.lib-head-inner{min-height:70px!important;padding:9px var(--jetin-gutter-tablet)!important;display:flex!important;align-items:center!important;gap:12px!important}
  .hero,.lib-hero{grid-template-columns:1fr!important}
  .hero{min-height:0!important;padding:34px!important;gap:26px!important}
  .lib-hero{gap:18px!important}.lib-hero-art{min-height:260px!important}
  .browse-head,.mug-guide-head,.mug-price-layout,.delivery-layout{grid-template-columns:1fr!important}
  .delivery-search-wrap{position:static!important;top:auto!important}
  .catalog-grid,.managed-catalog-grid,.lib-grid,.polera-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .lib-section-head,.lib-two,.runway-sheet-grid{grid-template-columns:1fr!important}
  .category-deck-head,.showcase-head,.family-heading,.footer-cta-inner{grid-template-columns:1fr!important}
  .category-deck-grid,.jetin-catalog-grid,.jetin-catalog-grid-rich{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .family-block,.family-tail{grid-template-columns:1fr!important}
  .family-products-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .family-products-four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .showcase-head{gap:16px!important}.showcase-stage{height:590px!important}
  .lightbox-shell,.lib-product-dialog-shell,.managed-gallery-shell{grid-template-columns:1fr!important}
  .lightbox,.lib-product-dialog,.managed-product-gallery{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important}
  .lightbox-media{height:min(54svh,520px)!important}.lib-product-dialog-visual{min-height:390px!important}.managed-gallery-shell{min-height:0!important}
  .jetin-universal-filter{grid-template-columns:1fr 1fr!important}
  .jetin-filter-search,.jetin-universal-filter>strong{grid-column:1/-1!important}
  .site-footer-main{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .site-footer-brand{grid-column:1/-1!important;grid-row:auto!important}
}

@media (max-width:768px){
  .catalog-main{padding:16px var(--jetin-gutter-mobile) 64px!important}
  .lib-hero{margin-top:14px!important;padding:0 var(--jetin-gutter-mobile)!important}
  .lib-section{padding:52px var(--jetin-gutter-mobile)!important}
  .managed-catalog{padding:0 var(--jetin-gutter-mobile)!important}
  .hero{padding:26px!important;border-radius:28px!important;gap:22px!important}
  .hero h1{font-size:clamp(2.65rem,10vw,4.35rem)!important}
  .lib-hero-copy{padding:32px 26px!important;border-radius:28px!important}
  .lib-hero-art{border-radius:28px!important;padding:25px!important;min-height:220px!important}
  .category-deck{padding:54px var(--jetin-gutter-mobile) 64px!important}
  .family-shell{padding:58px var(--jetin-gutter-mobile) 68px!important}
  .delivery-editorial{padding-left:var(--jetin-gutter-mobile)!important;padding-right:var(--jetin-gutter-mobile)!important}
  .showcase-shell{padding:0 var(--jetin-gutter-mobile)!important}
  .category-deck-grid,.jetin-catalog-grid,.jetin-catalog-grid-rich,.catalog-grid,.managed-catalog-grid,.polera-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mug-price-grid,.mug-size-grid,.delivery-grid,.care-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .facts,.lib-facts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .showcase-stage{height:560px!important;border-radius:30px!important}
  .showcase-slide-content{left:22px!important;right:22px!important;width:auto!important}
  .showcase-slide-content h3{font-size:clamp(42px,9vw,62px)!important}
  .mobile-nav nav,.lib-mobile-nav nav{width:min(320px,calc(100vw - 28px))!important;max-height:72svh!important;overflow:auto!important}
  .site-footer-main{padding:42px var(--jetin-gutter-mobile) 32px!important}
  .site-footer-bottom{padding-left:var(--jetin-gutter-mobile)!important;padding-right:var(--jetin-gutter-mobile)!important}
}

@media (max-width:430px){
  :root{--jetin-gutter-mobile:12px}
  .hero{padding:22px!important;border-radius:24px!important}.hero h1{font-size:clamp(2.35rem,12vw,3.55rem)!important}.hero-lead{font-size:13px!important}
  .lib-hero-copy{padding:27px 21px!important;border-radius:24px!important}.lib-hero h1{font-size:clamp(2.35rem,12vw,3.55rem)!important}
  .lib-hero-art{min-height:195px!important;border-radius:24px!important}
  .category-deck-grid,.lib-grid{grid-template-columns:1fr!important}
  .catalog-grid,.managed-catalog-grid,.polera-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .facts,.lib-facts{grid-template-columns:1fr!important}
  .mug-price-grid,.mug-size-grid,.delivery-grid,.care-grid{grid-template-columns:1fr!important}
  .category-deck-card{aspect-ratio:4/3!important;border-radius:20px!important}
  .product-card,.managed-product,.polera-card{min-width:0!important}
  .product-body,.managed-product-copy,.polera-card-body{padding:11px!important}
  .showcase-stage{height:525px!important;border-radius:25px!important}
  .showcase-slide-content{left:18px!important;right:18px!important;bottom:74px!important}
  .showcase-slide-content h3{font-size:clamp(38px,12vw,52px)!important}.showcase-fact{max-width:58%!important}
  .jetin-universal-filter{grid-template-columns:1fr!important;margin-left:12px!important;margin-right:12px!important}
  .jetin-universal-filter>*{grid-column:1!important}.capacity-filter-label{margin-left:0!important}
  .site-footer-main{grid-template-columns:1fr!important}.footer-cta-button{width:100%!important}
  .lightbox,.lib-product-dialog,.managed-product-gallery{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;border-radius:20px!important}
}

@media (max-width:390px){
  .head-inner,.lib-head-inner{padding-left:12px!important;padding-right:12px!important}
  .brand img,.lib-brand img{max-width:40px!important}.brand-copy small,.lib-brand small{display:none!important}
  .catalog-grid,.managed-catalog-grid,.polera-grid{gap:8px!important}
  .product-body h3,.managed-product-copy h3,.polera-card h3{font-size:.9rem!important;overflow-wrap:anywhere}
  .product-note{font-size:9px!important;min-height:0!important}
  .product-wa,.managed-product-copy a,.polera-card a{min-height:44px!important}
  .showcase-stage{height:505px!important}.showcase-slide-content h3{font-size:clamp(36px,12vw,48px)!important}
  .mobile-nav nav,.lib-mobile-nav nav{width:calc(100vw - 24px)!important}
}

@media (max-width:360px){
  .catalog-grid,.managed-catalog-grid,.polera-grid{grid-template-columns:1fr!important}
  .product-body,.managed-product-copy,.polera-card-body{padding:13px!important}
  .product-body h3,.managed-product-copy h3,.polera-card h3{font-size:1rem!important}
  .hero,.lib-hero-copy{padding-left:19px!important;padding-right:19px!important}
  .showcase-stage{height:490px!important}.showcase-fact{display:none!important}
  .mobile-nav nav,.lib-mobile-nav nav{right:-2px!important;width:calc(100vw - 20px)!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}
