/* Final responsive fixes — loaded after all page styles */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}
.container,.wrap{width:min(100% - 48px,1440px);margin-inline:auto}

/* Keep page content spacious on wide screens */
@media (min-width:1200px){
  .container,.wrap{width:min(100% - 96px,1440px)}
}

/* Parlour hero: increased height and restored right-side image */
.parlour-hero{min-height:620px!important;background:#fdeef2!important}
.parlour-hero .hero-content{min-height:620px!important}
.parlour-hero .hero-image{
  display:block!important;
  inset:0 0 0 46%!important;
  min-height:620px!important;
  background-image:url('../assets/parlour-hero.jpg')!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}
.parlour-hero .hero-copy{width:48%!important;padding:72px 0 58px!important}
.parlour-hero .hero-copy h1{font-size:clamp(52px,5vw,78px)!important;line-height:1.02!important}
.parlour-hero .hero-copy>p{font-size:16px!important;max-width:520px!important}
.parlour-hero .hero-features{flex-wrap:wrap;row-gap:18px}

/* General desktop/tablet spacing */
section{scroll-margin-top:80px}
.service-grid,.product-grid,.products-grid{align-items:stretch}
.service-grid article,.product-card{height:100%}

@media (max-width:1100px){
  .container,.wrap{width:min(100% - 40px,1440px)}
  .main-nav{gap:8px!important}
  .main-nav a{padding-left:14px!important;padding-right:14px!important}
  .parlour-hero{min-height:560px!important}
  .parlour-hero .hero-content{min-height:560px!important}
  .parlour-hero .hero-image{min-height:560px!important;inset:0 0 0 50%!important}
  .parlour-hero .hero-copy{width:50%!important;padding:54px 0!important}
  .parlour-hero .hero-copy h1{font-size:54px!important}
}

@media (max-width:820px){
  .container,.wrap{width:min(100% - 30px,1440px)}
  .site-header{position:sticky;top:0;z-index:1000}
  .nav-wrap{min-height:64px}
  .main-nav{max-height:calc(100vh - 64px);overflow-y:auto}

  /* Stack every two-column hero cleanly */
  .parlour-hero{min-height:auto!important;overflow:visible!important;display:flex!important;flex-direction:column!important}
  .parlour-hero .hero-content{min-height:auto!important;order:1!important;display:block!important}
  .parlour-hero .hero-copy{width:100%!important;padding:42px 0 38px!important}
  .parlour-hero .hero-copy h1{font-size:clamp(42px,10vw,58px)!important}
  .parlour-hero .hero-image{
    position:relative!important;
    order:2!important;
    inset:auto!important;
    width:100%!important;
    min-height:500px!important;
    background-position:center 16%!important;
  }
  .parlour-hero .hero-image:before{background:linear-gradient(180deg,#fdeef2 0%,rgba(253,238,242,.18) 20%,transparent 42%)!important}
  .parlour-hero .hero-features{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important}
  .parlour-hero .hero-features>div{min-width:0}

  .why-card{grid-template-columns:1fr!important;gap:24px!important;padding:20px!important}
  .salon-photo img{height:auto!important;max-height:420px;object-fit:cover}
  .appointment-inner{grid-template-columns:74px 1fr!important;padding:24px!important;gap:16px!important}
  .appointment-inner .book-btn{grid-column:1/-1!important;width:100%;margin-top:4px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px!important}

  /* Bootstrap-based pages */
  .hero .row,.main-wrap .row,.gift-box .row,.contact-content .row{--bs-gutter-x:1.25rem}
  .sidebar{margin-bottom:24px}
}

@media (max-width:560px){
  .container,.wrap{width:min(100% - 24px,1440px)}
  h1{overflow-wrap:anywhere}
  .parlour-hero .hero-copy{padding:32px 0 28px!important}
  .parlour-hero .breadcrumb{margin-bottom:18px!important}
  .parlour-hero .hero-copy h1{font-size:42px!important}
  .parlour-hero .hero-copy h2{font-size:19px!important;line-height:1.35}
  .parlour-hero .hero-copy>p{font-size:15px!important;line-height:1.7}
  .parlour-hero .hero-features{grid-template-columns:1fr!important}
  .parlour-hero .hero-features>div{padding:4px 0}
  .parlour-hero .hero-image{min-height:390px!important;background-position:center top!important}
  .wide-divider{margin-top:0}
  .service-grid{grid-template-columns:1fr!important}
  .service-grid article{min-height:auto!important;padding:22px 18px!important}
  .section-title h2,.why-copy h2{font-size:29px!important}
  .why-card{padding:14px!important}
  .appointment-inner{grid-template-columns:1fr!important;text-align:center;padding:24px 18px!important}
  .appointment-icon{margin:auto}
  .appointment-inner .book-btn{grid-column:auto!important}
  .footer-grid{grid-template-columns:1fr!important;gap:24px!important}
  .copyright{grid-template-columns:1fr auto 1fr!important}

  /* Product and contact pages */
  .product-grid,.products-grid{grid-template-columns:1fr!important}
  .contact-grid,.contact-content{grid-template-columns:1fr!important}
  .hero-copy h1,.contact-hero h1{font-size:clamp(38px,12vw,54px)!important}
  .trust-strip .row>*,.benefits-card>*,.feature-row>*{width:100%!important;max-width:100%!important}
}

/* Fancy page: exact reference-style desktop banner with increased height */
@media (min-width: 768px){
  body:has(.hero .hero-art) .hero{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    min-height:clamp(600px,39.85vw,760px)!important;
    height:clamp(600px,39.85vw,760px)!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#fff1f5 url('../assets/fancy-banner-reference.jpg') center center/cover no-repeat!important;
  }
  body:has(.hero .hero-art) .hero>.row{
    min-height:100%!important;
    height:100%!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body:has(.hero .hero-art) .trust-strip{
    margin:12px 0 0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    padding-left:max(24px,calc((100vw - 1440px)/2))!important;
    padding-right:max(24px,calc((100vw - 1440px)/2))!important;
  }
}

/* Fancy banner remains readable and functional on phones */
@media (max-width: 767.98px){
  body:has(.hero .hero-art) .hero{
    margin:0!important;
    min-height:auto!important;
    height:auto!important;
    background:#fff1f5!important;
    border-radius:0!important;
  }
  body:has(.hero .hero-art) .hero>.row{
    min-height:auto!important;
    height:auto!important;
    visibility:visible!important;
  }
  body:has(.hero .hero-art) .hero-copy{
    padding:42px 24px 34px!important;
  }
  body:has(.hero .hero-art) .hero-copy h1{
    font-size:clamp(42px,13vw,64px)!important;
    line-height:1!important;
  }
  body:has(.hero .hero-art) .hero-art{
    min-height:330px!important;
    background-image:url('../assets/fancy-banner-reference.jpg')!important;
    background-size:cover!important;
    background-position:68% center!important;
  }
  body:has(.hero .hero-art) .trust-strip{
    margin:10px 0 0!important;
    border-radius:0!important;
  }
}


/* Hero responsive update */
.hero-section,.hero-banner,.hero{
  min-height:850px !important;
}
@media (max-width:991px){
.hero-section,.hero-banner,.hero{min-height:700px !important;}
}
@media (max-width:767px){
.hero-section,.hero-banner,.hero{min-height:720px !important;background-position:center center !important;}
.hero-content{padding:80px 25px 50px !important;text-align:center;}
.hero-buttons{display:flex;flex-direction:column;gap:15px;}
.hero-buttons .btn,.hero-buttons a{width:100%;}
.hero-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
}

.footer-brand img{width:260px;height:auto;display:block;max-width:100%;}
@media(max-width:768px){.footer-brand img{width:220px;}}