/*
 * SAMBO Enfold Child v1.3.3 — Responsive pass.
 * Complementary stylesheet. Desktop mural and all entrance keyframes remain intact.
 * Layer positioning continues using the editable --mx/--my/--mw variables from SAMBO Suite.
 */

/* Avoid content flex/grid min-content pushing the viewport wider than its width. */
@media (max-width:1020px) {
  .sambo-root .sambo-main,
  .sambo-root .sambo-section,
  .sambo-root .sambo-drop-inner,
  .sambo-root .sambo-radio-widget,
  .sambo-root .sambo-newsletter,
  .sambo-root .sambo-footer {min-width:0;max-width:100%}
  .sambo-root .sambo-display,
  .sambo-root .sambo-section h2,
  .sambo-root .sambo-faq summary {overflow-wrap:break-word}
  .sambo-root .sambo-product-scroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .sambo-root .sambo-hero-modular .sambo-hero-stage {overflow:hidden}
}

/* Mid-size tablets keep the approved 2:1 desktop mural fully composed. */
@media (min-width:731px) and (max-width:1020px) {
  .sambo-root .sambo-hero-modular{
    aspect-ratio:1774 / 887;
    height:auto;
    min-height:0;
    overflow:hidden;
  }
  .sambo-root .sambo-hero-modular .sambo-hero-stage{width:100%;height:100%}
  .sambo-root .sambo-hero-modular .sambo-hero-layer {max-width:none}
  .sambo-root .sambo-drop-heading{gap:12px}
  .sambo-root .sambo-drop-heading-main{min-width:0}
  .sambo-root .sambo-radio-widget{min-width:0}
  .sambo-root .sambo-header{padding-inline:clamp(13px,2.8vw,26px)}
}

/* Mobile art direction: independent layout rather than shrinking the desktop mural.
   Figures align to the bottom and preserve their editable position offset.
   No animation keyframe or visibility rule is changed. */
@media (max-width:730px) {
  .sambo-root .sambo-hero-modular {
    width:100%;
    height:clamp(565px,166vw,740px);
    min-height:0;
    aspect-ratio:auto;
    overflow:hidden;
    background:#0a080b;
  }
  .sambo-root .sambo-hero-modular .sambo-hero-stage{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
  .sambo-root .sambo-hero-modular .sambo-hero-layer{left:var(--mx);top:var(--my);width:var(--mw);height:auto;max-width:none}
  .sambo-root .sambo-hero-modular .sambo-hero-layer picture{display:block;width:100%;line-height:0}
  .sambo-root .sambo-hero-modular .sambo-hero-layer img{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-background{inset:0!important;width:100%!important;height:100%!important}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-background picture,
  .sambo-root .sambo-hero-modular .sambo-hero-layer-background img{width:100%;height:100%;object-fit:cover;object-position:center}

  .sambo-root .sambo-hero-modular .sambo-hero-layer-graffiti {
    left:calc(var(--mx) + 4%);
    top:calc(var(--my) + .2%);
    width:calc(var(--mw) - 8%);
    z-index:6;
  }
  .sambo-root .sambo-hero-modular .sambo-hero-layer-slogan {
    left:calc(var(--mx) + 4%);
    top:calc(var(--my) - 5%);
    width:min(calc(var(--mw) - 7%),320px);
    z-index:7;
  }
  .sambo-root .sambo-hero-modular .sambo-hero-layer-model {
    left:var(--mx);
    top:auto;
    bottom:calc(49.5% - var(--my));
    width:var(--mw);
    z-index:4;
  }
  .sambo-root .sambo-hero-modular .sambo-hero-layer-artist {
    left:var(--mx);
    top:auto;
    bottom:calc(50.5% - var(--my));
    width:calc(var(--mw) + 1%);
    z-index:5;
  }
  /* Decorative layers stay behind subjects to avoid covering faces. */
  .sambo-root .sambo-hero-modular .sambo-hero-layer-paint_front{z-index:3;opacity:.68}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-paint_back{z-index:1;opacity:.7}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-crown_main{z-index:8}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-tag{z-index:8;left:6%;top:87%;width:min(22%,95px)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-arrow_white,
  .sambo-root .sambo-hero-modular .sambo-hero-layer-arrow_red,
  .sambo-root .sambo-hero-modular .sambo-hero-layer-crown_side{display:none}
  .sambo-root .sambo-hero-modular .sambo-hero-credit{right:10px;bottom:10px;z-index:11;font-size:8px}

  /* Header with touch-friendly controls and a working full-height navigation sheet. */
  .sambo-root .sambo-header{padding:0 12px;gap:8px;min-width:0}
  .sambo-root .sambo-brand{min-width:0;gap:5px;flex-shrink:1}
  .sambo-root .sambo-brand-face{height:40px;width:40px;flex-shrink:0}
  .sambo-root .sambo-brand-name{width:clamp(76px,25vw,100px);height:44px;object-fit:contain;flex-shrink:1}
  .sambo-root .sambo-header-actions{gap:clamp(7px,2vw,12px)}
  .sambo-root .sambo-icon-action{min-width:32px;width:32px;min-height:40px;display:grid;place-items:center}
  .sambo-root .sambo-navigation{width:min(360px,100vw);max-width:100vw;padding:22px 20px 32px;overscroll-behavior:contain}
  .sambo-root .sambo-navigation .sambo-menu a{min-height:44px;display:flex;align-items:center;font-size:21px!important}
  .sambo-root .sambo-search-panel{left:10px;right:10px;width:auto;max-width:calc(100vw - 20px);min-width:0;padding:10px;gap:7px}
  .sambo-root .sambo-search-panel input[type='search']{flex:1 1 auto;min-width:0;width:0}
  .sambo-root .sambo-search-panel label{font-size:10px}
  .sambo-root .sambo-search-panel button{min-width:37px;height:40px;flex-shrink:0}

  /* Other homepage sections: sensible widths without sideways scrolling. */
  .sambo-root .sambo-drop{padding-block:30px 26px}
  .sambo-root .sambo-drop-heading{min-width:0}
  .sambo-root .sambo-drop-heading-main{min-width:0}
  .sambo-root .sambo-drop-heading-main h2 img{max-width:100%;height:auto;max-height:74px;object-fit:contain;object-position:left center}
  .sambo-root .sambo-product-scroll{gap:12px;padding-left:14px;padding-right:14px;scroll-padding-inline:14px}
  .sambo-root .sambo-product{flex-basis:clamp(175px,53vw,235px);max-width:74vw}
  .sambo-root .sambo-radio{padding-inline:14px}
  .sambo-root .sambo-radio-widget{max-width:min(100%,520px)}
  .sambo-root .sambo-radio-placeholder{max-width:100%;min-width:0}
  .sambo-root .sambo-categories-grid,
  .sambo-root .sambo-lookbook-grid,
  .sambo-root .sambo-artist-grid{max-width:100%;min-width:0}
  .sambo-root .sambo-section{padding-inline:clamp(12px,4vw,22px)}
  .sambo-root .sambo-section .sambo-display{font-size:clamp(43px,11.4vw,82px)!important;line-height:.94!important;letter-spacing:-.04em!important}
  .sambo-root .sambo-newsletter{padding-inline:clamp(12px,4vw,22px)}
  .sambo-root .sambo-newsletter h2{font-size:clamp(39px,11vw,67px)!important;line-height:.98!important}
  .sambo-root .sambo-footer{padding-inline:clamp(12px,4vw,22px)}
}

/* Ultra-small phones: cap logo size and give all interactive icons room. */
@media (max-width:359px){
  .sambo-root .sambo-hero-modular{height:565px}
  .sambo-root .sambo-header{gap:3px;padding-inline:7px}
  .sambo-root .sambo-brand{gap:3px}
  .sambo-root .sambo-brand-face{width:35px;height:35px}
  .sambo-root .sambo-brand-name{width:68px;height:40px}
  .sambo-root .sambo-header-actions{gap:4px}
  .sambo-root .sambo-icon-action{width:30px;min-width:30px;min-height:38px}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-graffiti{top:calc(var(--my) + .4%)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-slogan{top:calc(var(--my) - 3%)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-paint_front{opacity:.53}
  .sambo-root .sambo-benefits{gap:5px 0;padding-inline:4px}
  .sambo-root .sambo-benefit{padding:7px 5px;gap:5px}
  .sambo-root .sambo-benefit strong{font-size:10px!important}
  .sambo-root .sambo-benefit small{font-size:7px}
  .sambo-root .sambo-benefit svg{width:24px;height:24px}
  .sambo-root .sambo-categories-grid{gap:8px}
  .sambo-root .sambo-category{min-height:206px}
  .sambo-root .sambo-category strong{font-size:clamp(20px,5.8vw,32px)!important}
  .sambo-root .sambo-artist{height:315px}
}

/* Larger phones keep the text clear above the models, not across the hats. */
@media (min-width:430px) and (max-width:539px){
  .sambo-root .sambo-hero-modular{height:clamp(695px,160vw,760px)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-graffiti{left:calc(var(--mx) + 6%);width:calc(var(--mw) - 12%)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-slogan{left:calc(var(--mx) + 7%);top:calc(var(--my) - 5.5%);width:min(calc(var(--mw) - 12%),350px)}
}

/* Landscape phones and compact portrait tablets get a balanced wide portrait mural. */
@media (min-width:540px) and (max-width:730px){
  .sambo-root .sambo-hero-modular{height:clamp(670px,105vw,790px)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-graffiti{left:calc(var(--mx) + 15%);top:calc(var(--my) - 4%);width:calc(var(--mw) - 30%)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-slogan{left:calc(var(--mx) + 20%);top:calc(var(--my) - 9%);width:calc(var(--mw) - 40%);max-width:390px}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-model{left:calc(var(--mx) + 3%);width:calc(var(--mw) - 16%)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-artist{left:calc(var(--mx) + 7%);width:calc(var(--mw) - 15%)}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-crown_main{left:81%;top:3%;width:9%}
  .sambo-root .sambo-hero-modular .sambo-hero-layer-tag{top:88%;width:16%}
  .sambo-root .sambo-section .sambo-display{font-size:clamp(60px,9vw,88px)!important}
  .sambo-root .sambo-categories-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Short landscape phones: keep all models, allow normal page scrolling. */
@media (max-height:450px) and (max-width:730px) and (orientation:landscape){
  .sambo-root .sambo-hero-modular{height:clamp(530px,90vw,660px)}
  .sambo-root .sambo-header{height:56px}
  .sambo-root .sambo-navigation{top:56px;height:calc(100dvh - 56px)}
}

/* Native reduced-motion preference always takes priority over art direction. */
@media (prefers-reduced-motion:reduce){
  .sambo-root .sambo-hero-modular .sambo-hero-layer,
  .sambo-root .sambo-hero-modular .sambo-hero-layer img{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}


/* v1.3.5 — Banner móvil ligeramente más compacto conservando las dos gorras. */
@media(max-width:730px){
    .sambo-root .sambo-hero-modular{height:clamp(550px,155vw,708px)}
}
@media(max-width:359px){
    .sambo-root .sambo-hero-modular{height:550px}
}
@media(min-width:430px) and (max-width:539px){
    .sambo-root .sambo-hero-modular{height:clamp(640px,153vw,710px)}
}
@media(min-width:540px) and (max-width:730px){
    .sambo-root .sambo-hero-modular{height:clamp(640px,107vw,730px)}
}