
/* ES FASHIONS v34 — Mobile Visual Perfection
   Final phone/tablet polish layer. Loaded after every previous public stylesheet.
   Objective: no squeezed desktop layouts, no horizontal overflow, clear image-first
   hierarchy, stable fixed navigation, keyboard-safe forms and consistent touch UX. */

:root{
  --v34-safe-top: env(safe-area-inset-top, 0px);
  --v34-safe-right: env(safe-area-inset-right, 0px);
  --v34-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v34-safe-left: env(safe-area-inset-left, 0px);
  --v34-header-h: 66px;
  --v34-bottom-nav-h: 68px;
  --v34-gutter: clamp(10px, 3.6vw, 18px);
}
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
main,section,header,footer,nav,aside,article,figure,form{
  max-width:100%;
}
img,video,canvas,svg,iframe{
  max-width:100%;
}
img{
  display:block;
}
h1,h2,h3,h4,p,li,a,button,label,span,strong,small{
  overflow-wrap:break-word;
}
h1,h2,h3,h4{
  word-break:normal;
  hyphens:none;
}
a,button,input,select,textarea,summary{
  -webkit-tap-highlight-color:transparent;
}
section[id]{
  scroll-margin-top:calc(var(--v34-header-h) + 16px);
}

/* Hide horizontal scrollbars but keep touch scrolling */
.v19-category-strip,
.v26-path-grid,
.v19-editorial-images,
.process-grid,
.v9-image-triptych,
.v9-chapters,
.v31-visual-grid,
.v32-image-grid,
.v21-sector-grid,
.v21-trust-band .container,
.v21-process-grid,
.v11-showroom-tabs,
.v11-viewer-thumbs,
.customer-tabs,
.v34-snap-row{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.v19-category-strip::-webkit-scrollbar,
.v26-path-grid::-webkit-scrollbar,
.v19-editorial-images::-webkit-scrollbar,
.process-grid::-webkit-scrollbar,
.v9-image-triptych::-webkit-scrollbar,
.v9-chapters::-webkit-scrollbar,
.v31-visual-grid::-webkit-scrollbar,
.v32-image-grid::-webkit-scrollbar,
.v21-sector-grid::-webkit-scrollbar,
.v21-trust-band .container::-webkit-scrollbar,
.v21-process-grid::-webkit-scrollbar,
.v11-showroom-tabs::-webkit-scrollbar,
.v11-viewer-thumbs::-webkit-scrollbar,
.customer-tabs::-webkit-scrollbar,
.v34-snap-row::-webkit-scrollbar{
  display:none;
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .v21-page-subnav .container{
    overflow-x:auto;
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    padding-block:8px;
  }
  .v21-page-subnav a{
    white-space:nowrap;
  }
  .v21-sector-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .v21-editorial-split{
    grid-template-columns:1fr!important;
  }
  .v21-editorial-media{
    min-height:520px!important;
  }
  .v21-management-grid{
    grid-template-columns:1fr 1fr!important;
  }
}

/* ---------- Main mobile authority ---------- */
@media (max-width:820px){
  :root{
    --v34-header-h:64px;
    --v34-bottom-nav-h:66px;
  }
  html{
    scroll-padding-top:calc(var(--v34-header-h) + 12px);
  }
  body{
    padding-left:var(--v34-safe-left);
    padding-right:var(--v34-safe-right);
    padding-bottom:calc(var(--v34-bottom-nav-h) + var(--v34-safe-bottom))!important;
  }
  body.v34-keyboard-open{
    padding-bottom:var(--v34-safe-bottom)!important;
  }
  body.v34-keyboard-open .v5-bottom-nav,
  body.v34-keyboard-open .v6-bottom-nav,
  body.v34-keyboard-open .v8-bottom-nav,
  body.v34-keyboard-open .v32-whatsapp-float{
    display:none!important;
  }
  body.v34-keyboard-open .v12-step-actions{
    bottom:0!important;
  }

  .container{
    width:calc(100% - (var(--v34-gutter) * 2))!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  /* Header / shell */
  .v5-header,.v6-header,.v8-header{
    min-height:var(--v34-header-h)!important;
    height:auto!important;
  }
  .v5-nav,.v8-nav{
    min-height:var(--v34-header-h)!important;
    height:var(--v34-header-h)!important;
    gap:8px!important;
  }
  .v5-brand{
    min-width:0!important;
    max-width:calc(100vw - 116px)!important;
  }
  .v5-brand-copy{
    min-width:0!important;
  }
  .v5-brand-copy b{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .v5-menu-btn{
    flex:0 0 auto!important;
  }
  .v5-nav-actions{
    flex:0 0 auto!important;
  }
  .mobile-drawer,.v5-drawer,.v8-drawer{
    padding-left:max(16px,var(--v34-safe-left))!important;
    padding-right:max(16px,var(--v34-safe-right))!important;
  }
  .v5-drawer-foot select{
    font-size:16px!important;
    min-height:46px!important;
  }

  /* Fixed bottom nav must never cover page controls */
  .v5-bottom-nav,.v6-bottom-nav,.v8-bottom-nav{
    min-height:calc(var(--v34-bottom-nav-h) + var(--v34-safe-bottom))!important;
    height:calc(var(--v34-bottom-nav-h) + var(--v34-safe-bottom))!important;
    padding-bottom:calc(6px + var(--v34-safe-bottom))!important;
  }
  .v5-bottom-nav a{
    min-height:50px!important;
    min-width:0!important;
  }
  .v5-bottom-nav small{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Global content rhythm */
  .section{
    padding:48px 0!important;
  }
  .section + .section{
    margin-top:0!important;
  }
  .section-head,
  .section-head.split,
  .v21-section-heading,
  .v32-head{
    margin-bottom:22px!important;
  }
  .section-head h2,
  .v21-section-heading h2,
  .v32-head h2,
  .global-next h2{
    max-width:100%!important;
    font-size:clamp(2.05rem,9.5vw,3.35rem)!important;
    line-height:.98!important;
    letter-spacing:-.035em!important;
  }
  .section-head p,
  .v21-section-heading p,
  .v32-head p{
    max-width:100%!important;
    font-size:.94rem!important;
    line-height:1.68!important;
  }
  .eyebrow{
    max-width:100%!important;
    white-space:normal!important;
  }

  /* Phone buttons */
  .btn,
  a.btn,
  button.btn{
    width:auto;
    min-width:0!important;
    max-width:100%!important;
    min-height:48px!important;
  }
  .page-hero-actions,
  .v9-hero-actions,
  .v21-hero-actions,
  .v27-hero-actions,
  .v21-final-actions,
  .v13-header-actions,
  .v13-decision-actions,
  .customer-head-actions,
  .v32-contact-actions{
    width:100%!important;
  }
  .page-hero-actions .btn,
  .v9-hero-actions .btn,
  .v21-hero-actions .btn,
  .v27-hero-actions .btn,
  .v21-final-actions .btn,
  .v13-header-actions .btn,
  .v13-decision-actions .btn,
  .customer-head-actions .btn,
  .v32-contact-actions .btn{
    width:100%!important;
  }

  /* Hero system: fit shorter phones without burying content */
  .v19-home-hero,
  .page-hero,
  .v9-campaign-hero,
  .customer-hero,
  .v12-config-hero,
  .v11-showroom-hero{
    min-height:min(690px,calc(100svh - var(--v34-header-h) + 90px))!important;
  }
  .v19-home-hero .container,
  .page-hero-inner,
  .v9-campaign-content,
  .customer-hero-inner,
  .v12-config-hero-inner,
  .v11-showroom-hero-inner{
    min-height:min(690px,calc(100svh - var(--v34-header-h) + 90px))!important;
    padding-top:clamp(210px,42svh,330px)!important;
    padding-bottom:30px!important;
  }
  .page-hero h1,
  .v9-campaign-hero h1,
  .customer-hero h1,
  .v12-config-hero h1,
  .v11-showroom-hero h1{
    margin-bottom:12px!important;
  }
  .v19-hero-copy>p,
  .page-hero p,
  .v9-campaign-hero p,
  .customer-hero p,
  .v12-config-hero p,
  .v11-showroom-hero p{
    margin-bottom:18px!important;
  }

  /* Uniform House — dedicated phone experience */
  .v21-page-subnav{
    display:none!important;
  }
  .v21-uniform-hero{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    background:#080706!important;
  }
  .v21-uniform-visual{
    order:1!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
  }
  .v21-uniform-visual img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
    object-position:58% 22%!important;
  }
  .v21-uniform-visual:after{
    background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.12))!important;
  }
  .v21-uniform-visual figcaption{
    display:none!important;
  }
  .v21-uniform-copy{
    order:2!important;
    position:relative!important;
    min-height:0!important;
    background:#080706!important;
    align-items:stretch!important;
  }
  .v21-uniform-copy-inner{
    padding:30px var(--v34-gutter) 38px!important;
    max-width:none!important;
    width:100%!important;
  }
  .v21-uniform-copy h1{
    font-size:clamp(2.55rem,12vw,3.65rem)!important;
    line-height:.9!important;
    letter-spacing:-.045em!important;
    margin:10px 0 16px!important;
  }
  .v21-uniform-copy h1 span{
    display:block!important;
    white-space:normal!important;
  }
  .v21-uniform-copy p{
    font-size:.94rem!important;
    line-height:1.65!important;
    margin-bottom:20px!important;
  }
  .v21-hero-metrics{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-top:22px!important;
    border-top:1px solid rgba(255,255,255,.14)!important;
  }
  .v21-hero-metrics article{
    padding:12px 0!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
  }
  .v21-hero-metrics span{
    max-width:none!important;
  }
  .v21-trust-band .container{
    display:flex!important;
    width:100%!important;
    padding-left:var(--v34-gutter)!important;
    padding-right:var(--v34-gutter)!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
  }
  .v21-trust-band article{
    flex:0 0 72vw!important;
    min-width:0!important;
    scroll-snap-align:start!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
  }
  .v21-sector-grid{
    display:flex!important;
    gap:10px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    background:transparent!important;
    margin-right:calc(var(--v34-gutter) * -1)!important;
    padding-right:var(--v34-gutter)!important;
  }
  .v21-sector-card{
    flex:0 0 82vw!important;
    min-width:82vw!important;
    min-height:420px!important;
    scroll-snap-align:start!important;
    border-radius:16px!important;
  }
  .v21-sector-card>div{
    left:16px!important;
    right:16px!important;
    bottom:16px!important;
  }
  .v21-sector-card h3{
    font-size:1.55rem!important;
  }
  .v21-editorial-split{
    display:flex!important;
    flex-direction:column!important;
  }
  .v21-editorial-media{
    order:1!important;
    display:flex!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    min-height:0!important;
    gap:8px!important;
    padding:10px!important;
    background:#080706!important;
  }
  .v21-editorial-media figure,
  .v21-editorial-media figure:first-child{
    flex:0 0 84vw!important;
    width:84vw!important;
    height:430px!important;
    min-height:0!important;
    grid-row:auto!important;
    scroll-snap-align:start!important;
    border-radius:14px!important;
  }
  .v21-editorial-copy{
    order:2!important;
    padding:42px var(--v34-gutter) 50px!important;
  }
  .v21-editorial-copy h2{
    font-size:clamp(2.35rem,10vw,3.5rem)!important;
    line-height:.95!important;
  }
  .v21-editorial-copy blockquote{
    font-size:1.3rem!important;
    margin:20px 0!important;
  }
  .v21-process-grid{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    border-left:0!important;
    gap:10px!important;
    margin-right:calc(var(--v34-gutter) * -1)!important;
    padding-right:var(--v34-gutter)!important;
  }
  .v21-process-grid article{
    flex:0 0 78vw!important;
    min-width:78vw!important;
    min-height:210px!important;
    scroll-snap-align:start!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }
  .v21-management-grid{
    grid-template-columns:1fr!important;
  }
  .v21-management-grid article{
    min-height:0!important;
    padding:22px!important;
    border-radius:14px!important;
  }
  .v21-fabric-split{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
  }
  .v21-fabric-visual{
    order:1!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
  }
  .v21-fabric-copy{
    order:2!important;
    padding:42px var(--v34-gutter) 48px!important;
  }
  .v21-fabric-copy h2{
    font-size:clamp(2.35rem,10vw,3.5rem)!important;
  }
  .v21-proof-band .container{
    padding-top:34px!important;
    padding-bottom:34px!important;
  }
  .v21-proof-band .btn{
    width:100%!important;
  }

  /* School/service landing pages */
  .v27-service-hero{
    overflow:hidden!important;
  }
  .v27-service-image{
    aspect-ratio:4/3!important;
  }
  .v27-service-copy-inner{
    padding-left:var(--v34-gutter)!important;
    padding-right:var(--v34-gutter)!important;
  }
  .v31-visual-grid,
  .v32-image-grid{
    margin-right:calc(var(--v34-gutter) * -1)!important;
    padding-right:var(--v34-gutter)!important;
  }
  .v31-visual-card,
  .v31-visual-card:first-child,
  .v32-image-card{
    min-width:84vw!important;
    width:84vw!important;
    flex-basis:84vw!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  .v31-visual-card img,
  .v32-image-card figure{
    height:auto!important;
    aspect-ratio:4/5!important;
  }
  .v27-deliverables article{
    border-radius:14px!important;
  }
  .v27-process{
    margin-right:calc(var(--v34-gutter) * -1)!important;
    padding-right:var(--v34-gutter)!important;
  }
  .v27-process article{
    min-width:82vw!important;
    border-radius:14px!important;
  }

  /* Showroom: clearer one-look-per-screen rhythm */
  .v11-showroom-nav{
    top:var(--v34-header-h)!important;
  }
  .v11-showroom-section{
    padding-top:28px!important;
  }
  .v11-showroom-grid{
    width:100%!important;
  }
  .v11-showroom-card,
  .v11-look-card{
    width:100%!important;
    min-width:0!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  .v11-card-media{
    min-height:0!important;
    aspect-ratio:4/5!important;
  }
  .v11-viewer{
    max-height:calc(var(--v34-visual-vh, 100dvh) - 24px)!important;
  }
  .v11-viewer-media img{
    object-fit:contain!important;
    background:#0a0908!important;
  }

  /* Configurator: prevent sticky controls from overlapping fields */
  .v12-config-workspace{
    padding-bottom:calc(112px + var(--v34-safe-bottom))!important;
  }
  .v12-step-actions{
    bottom:calc(var(--v34-bottom-nav-h) + var(--v34-safe-bottom))!important;
    box-shadow:0 -12px 30px rgba(20,15,10,.08)!important;
  }
  .v12-step-actions .btn{
    min-height:50px!important;
  }
  .v12-field textarea{
    min-height:120px!important;
  }
  .v12-option-card,
  .v12-choice,
  .v12-project-card{
    min-height:52px!important;
  }

  /* Forms and account pages */
  input,select,textarea{
    font-size:16px!important;
  }
  textarea{
    resize:vertical;
  }
  .customer-auth-card,
  .customer-main-card,
  .customer-wide-card,
  .v13-panel,
  .v13-side-card{
    box-shadow:none!important;
  }
  .customer-tabs{
    display:flex!important;
    white-space:nowrap!important;
    scroll-snap-type:x proximity!important;
  }
  .customer-tabs button{
    flex:0 0 auto!important;
  }
  .v13-summary-grid,
  .customer-summary{
    gap:8px!important;
  }

  /* Tables */
  .v33-table-scroll,.v34-table-scroll{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Contact blocks */
  .v32-direct-contact a{
    word-break:break-word!important;
  }
  .v32-whatsapp-float{
    z-index:175!important;
  }

  /* Footer */
  .v8-footer,
  .v5-footer,
  .v6-footer{
    overflow:hidden!important;
  }
}

/* Narrow phones */
@media (max-width:520px){
  :root{
    --v34-gutter:12px;
  }
  .v21-uniform-visual{
    aspect-ratio:1/1!important;
  }
  .v21-uniform-copy h1{
    font-size:clamp(2.35rem,12vw,3.15rem)!important;
  }
  .v21-trust-band article{
    flex-basis:82vw!important;
  }
  .v21-sector-card{
    flex-basis:88vw!important;
    min-width:88vw!important;
  }
  .v21-editorial-media figure,
  .v21-editorial-media figure:first-child{
    flex-basis:88vw!important;
    width:88vw!important;
    height:390px!important;
  }
  .v21-process-grid article{
    flex-basis:84vw!important;
    min-width:84vw!important;
  }
  .v31-visual-card,
  .v31-visual-card:first-child,
  .v32-image-card{
    min-width:88vw!important;
    width:88vw!important;
    flex-basis:88vw!important;
  }
}

/* 390px benchmark */
@media (max-width:390px){
  :root{
    --v34-header-h:62px;
    --v34-bottom-nav-h:64px;
    --v34-gutter:10px;
  }
  .v5-brand{
    max-width:calc(100vw - 88px)!important;
  }
  .v5-brand-copy b{
    font-size:.68rem!important;
    letter-spacing:.08em!important;
  }
  .v5-menu-btn{
    margin-left:auto!important;
  }
  .v19-home-hero,
  .page-hero,
  .v9-campaign-hero,
  .customer-hero,
  .v12-config-hero,
  .v11-showroom-hero{
    min-height:min(620px,calc(100svh - 20px))!important;
  }
  .v19-home-hero .container,
  .page-hero-inner,
  .v9-campaign-content,
  .customer-hero-inner,
  .v12-config-hero-inner,
  .v11-showroom-hero-inner{
    min-height:min(620px,calc(100svh - 20px))!important;
    padding-top:clamp(190px,38svh,245px)!important;
  }
  .v21-uniform-copy-inner{
    padding-top:26px!important;
  }
  .v21-uniform-copy p,
  .v27-service-copy p{
    font-size:.9rem!important;
  }
  .v11-showroom-nav{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .v12-config-preview{
    grid-template-columns:74px 1fr!important;
  }
  .v12-step-actions{
    margin-left:-10px!important;
    margin-right:-10px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

/* 340–360px safety */
@media (max-width:360px){
  .v5-brand-copy{
    display:block!important;
  }
  .v5-brand-copy small{
    display:none!important;
  }
  .v5-brand-copy b{
    font-size:.62rem!important;
  }
  .v5-monogram{
    font-size:1.55rem!important;
  }
  .v5-menu-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }
  .v5-bottom-nav small{
    font-size:.52rem!important;
  }
  .v5-bottom-nav span{
    font-size:1rem!important;
  }
  .v21-uniform-copy h1{
    font-size:2.25rem!important;
  }
  .v27-service-copy h1{
    font-size:2rem!important;
  }
  .v11-showroom-tools{
    grid-template-columns:1fr!important;
  }
  .v12-step-actions{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .v12-step-actions .btn{
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:.66rem!important;
  }
}

/* Small-height phones (landscape or browser chrome taking space) */
@media (max-width:820px) and (max-height:720px){
  .v19-home-hero,
  .page-hero,
  .v9-campaign-hero,
  .customer-hero,
  .v12-config-hero,
  .v11-showroom-hero{
    min-height:560px!important;
  }
  .v19-home-hero .container,
  .page-hero-inner,
  .v9-campaign-content,
  .customer-hero-inner,
  .v12-config-hero-inner,
  .v11-showroom-hero-inner{
    min-height:560px!important;
    padding-top:190px!important;
  }
}

/* Phone landscape: keep navigation usable and content compact */
@media (max-width:920px) and (orientation:landscape) and (max-height:520px){
  body{
    padding-bottom:0!important;
  }
  .v5-bottom-nav,.v6-bottom-nav,.v8-bottom-nav{
    display:none!important;
  }
  .v32-whatsapp-float{
    bottom:12px!important;
  }
  .v19-home-hero,
  .page-hero,
  .v9-campaign-hero,
  .customer-hero,
  .v12-config-hero,
  .v11-showroom-hero{
    min-height:500px!important;
  }
  .v19-home-hero .container,
  .page-hero-inner,
  .v9-campaign-content,
  .customer-hero-inner,
  .v12-config-hero-inner,
  .v11-showroom-hero-inner{
    min-height:500px!important;
    padding-top:150px!important;
  }
  .v21-uniform-hero{
    display:grid!important;
    grid-template-columns:44% 56%!important;
  }
  .v21-uniform-copy{
    order:1!important;
  }
  .v21-uniform-visual{
    order:2!important;
    aspect-ratio:auto!important;
    height:100%!important;
  }
  .v21-uniform-copy-inner{
    padding:26px 22px!important;
  }
  .v21-uniform-copy h1{
    font-size:2.45rem!important;
  }
  .v21-hero-metrics{
    display:none!important;
  }
}

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


@media (max-width:820px){
  .v34-overflow-contained{
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  .v34-overflow-contained img,
  .v34-overflow-contained video,
  .v34-overflow-contained svg{
    max-width:100%!important;
  }
  .v5-bottom-nav a.is-current{
    color:#d9b66f!important;
  }
  .v5-bottom-nav a.is-current::before{
    content:"";
    position:absolute;
    top:2px;
    left:50%;
    width:18px;
    height:2px;
    transform:translateX(-50%);
    background:#d9b66f;
    border-radius:2px;
  }
  .v5-bottom-nav a{position:relative!important}
}
