/* Stage 3C — Katie's Salon responsive catalogue, advice and information pages.
   Only presentation: product data/RRPs, photos, Wix Blog, consent, analytics,
   SEO ownership and Katie's manual enquiry process are unchanged. */

/* One consistent editorial width shared with approved Stages 3A/3B. */
:is(.products-page,.about-page-v23,.salon-information-page) {
  --salon-content-gutter: clamp(18px,3.2vw,54px);
  --salon-card-gap: clamp(15px,2vw,26px);
}
:is(.products-page,.about-page-v23,.salon-information-page) .container {
  width:min(calc(100% - 2 * var(--salon-content-gutter)),1360px);
  margin-inline:auto;
}
:is(.products-page,.about-page-v23,.salon-information-page) .pagehero {
  padding-block:clamp(42px,5.8vw,88px);
}
:is(.products-page,.about-page-v23,.salon-information-page) .pagehero h1 {
  font-size:clamp(2.3rem,3.5vw + .9rem,4.65rem);
  line-height:1.13;
  max-width:24ch;
  text-wrap:balance;
  overflow-wrap:normal;
}
:is(.products-page,.about-page-v23,.salon-information-page) .pagehero .lead {
  max-width:69ch;
  font-size:clamp(1rem,.55vw + .75rem,1.18rem);
  line-height:1.68;
}
:is(.products-page,.about-page-v23,.salon-information-page) .section {
  padding-block:clamp(48px,5.7vw,90px);
}
:is(.products-page,.about-page-v23,.salon-information-page) h2 {
  text-wrap:balance;
}

/* Catalogue: retain server-rendered hidden cards, range scroll and WebP images. */
.products-page .retail-section .container {
  min-width:0;
}
.products-page .retail-toolbar {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:10px clamp(12px,2vw,24px);
  scroll-margin-top:125px;
}
.products-page .retail-toolbar > label {
  grid-column:1/-1;
  line-height:1.35;
  font-weight:700;
}
.products-page .retail-toolbar input[type="search"] {
  grid-column:1;
  min-width:0;
  width:100%;
  max-width:100%;
  min-height:48px;
  font-size:1rem;
}
.products-page .retail-toolbar .count-label {
  grid-column:2;
  min-width:0;
  align-self:center;
  overflow-wrap:break-word;
  line-height:1.5;
}
.products-page .range-guide {
  min-width:0;
}
.products-page .range-guide > summary {
  min-height:54px;
  cursor:pointer;
}
.products-page .range-overview {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(11px,1.3vw,18px);
}
.products-page .range-mini {
  min-width:0;
  height:100%;
  padding:clamp(14px,1.6vw,22px);
}
.products-page .range-mini p {
  overflow-wrap:break-word;
  line-height:1.65;
}
.products-page .product-filter {
  scroll-padding-inline:18px;
  overscroll-behavior-x:contain;
}
.products-page .product-filter button {
  min-height:44px;
  line-height:1.3;
}
.products-page #retail-product-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:var(--salon-card-gap);
}
.products-page #retail-product-grid > article {
  min-width:0;
  height:100%;
}
.products-page .retail-product .product-visual {
  height:clamp(210px,18vw,290px);
  min-width:0;
}
.products-page .retail-product .product-shot {
  object-fit:contain;
  object-position:center;
  max-width:100%;
}
.products-page .retail-product .product-details {
  min-width:0;
  padding:clamp(19px,1.8vw,27px);
  gap:clamp(8px,1vw,12px);
}
.products-page .retail-product h3 {
  min-height:0;
  font-size:clamp(1.08rem,.68vw + .79rem,1.25rem);
  line-height:1.36;
  text-wrap:pretty;
  overflow-wrap:break-word;
}
.products-page .retail-product .retail-price {
  line-height:1.4;
}
.products-page .retail-product .retail-enquiry-link {
  line-height:1.6;
  overflow-wrap:break-word;
}
.products-page .yellow-brand-feature {
  gap:clamp(18px,2.6vw,36px);
}
.products-page :is(.retail-toolbar input,.product-filter button,.range-guide summary,
  .retail-product .retail-enquiry-link,#product-show-more):focus-visible {
  outline:3px solid #765180;
  outline-offset:3px;
}

/* Advice: preserve Wix Blog content and original photos, improve reading rhythm. */
.legacy-article {
  width:min(calc(100% - 2 * clamp(18px,3.2vw,54px)),860px);
  max-width:860px;
  margin-inline:auto;
  padding-block:clamp(40px,5vw,75px) clamp(66px,6vw,105px);
  min-width:0;
}
.legacy-article h1 {
  max-width:20ch;
  font-size:clamp(2.25rem,4vw + .65rem,3.5rem);
  line-height:1.15;
  text-wrap:balance;
}
.legacy-article :is(.archive-intro,.post-summary) {
  max-width:68ch;
  font-size:clamp(1.05rem,.5vw + .83rem,1.22rem);
  line-height:1.7;
}
.legacy-article .archive-group {
  margin-block:clamp(38px,5vw,62px);
}
.legacy-article ul.archive-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(15px,2vw,25px);
}
.legacy-article .archive-grid > li {
  min-width:0;
  height:100%;
  overflow:hidden;
}
.legacy-article .archive-grid .archive-cover {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}
.legacy-article .archive-grid .archive-copy {
  padding:clamp(19px,2vw,27px);
}
.legacy-article .archive-grid h3 {
  margin-block:8px 12px;
  font-size:clamp(1.22rem,.85vw + .9rem,1.48rem);
  line-height:1.3;
  overflow-wrap:break-word;
}
.legacy-article .article-rich {
  max-width:74ch;
  margin-inline:auto;
  overflow-wrap:break-word;
}
.legacy-article .article-rich :is(p,li) {
  line-height:1.8;
}
.legacy-article .article-rich :is(h2,h3) {
  text-wrap:balance;
  scroll-margin-top:124px;
}
.legacy-article :is(.post-hero,.article-rich figure) img {
  max-width:100%;
  height:auto;
}
.legacy-article .guide-next {
  padding:clamp(22px,3vw,34px);
}
.legacy-article :is(.guide-next,.archive-grid a,.article-rich a,.faq-hub a):focus-visible {
  outline:3px solid #765180;
  outline-offset:4px;
}

/* FAQ: comfortable reading and clearly tappable in-page topic navigation. */
.legacy-article .faq-hub {
  min-width:0;
}
.legacy-article .faq-hero {
  margin-bottom:clamp(32px,4vw,52px);
}
.legacy-article .faq-hero h1 {
  max-width:19ch;
}
.legacy-article .faq-topics {
  padding:clamp(19px,2.5vw,30px);
  margin-bottom:clamp(36px,4.5vw,60px);
}
.legacy-article .faq-topics ul {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px clamp(14px,2.5vw,30px);
}
.legacy-article .faq-topics li {
  min-width:0;
}
.legacy-article .faq-topics a {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:7px 0;
  line-height:1.5;
  overflow-wrap:break-word;
  text-underline-offset:3px;
}
.legacy-article .faq-topic {
  scroll-margin-top:130px;
  margin-bottom:clamp(44px,5vw,70px);
}
.legacy-article .faq-item {
  padding-block:clamp(19px,2.2vw,27px);
}
.legacy-article .faq-item p {
  max-width:72ch;
}
.legacy-article .faq-more {
  padding:clamp(22px,3vw,36px);
}
.legacy-article .faq-cta {
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* About and policies retain their authored words, photographs and links. */
.about-page-v23 .about-split-v23 {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,70px);
  align-items:center;
}
.about-page-v23 .about-split-v23 > * {
  min-width:0;
}
.about-page-v23 .about-photo-v23 img {
  width:100%;
  height:auto;
  max-height:690px;
  object-fit:cover;
  object-position:center 37%;
}
.about-page-v23 .about-actions-v23 {
  flex-wrap:wrap;
  gap:12px;
}
.salon-information-page .policy-content {
  max-width:900px;
  margin-inline:auto;
  min-width:0;
}
.salon-information-page .policy-content section {
  scroll-margin-top:120px;
}
.salon-information-page .policy-content h2 {
  font-size:clamp(1.6rem,2vw + .65rem,2.2rem);
  line-height:1.25;
}
.salon-information-page .policy-content :is(p,li) {
  max-width:74ch;
  line-height:1.85;
  overflow-wrap:break-word;
}
.salon-information-page .policy-content a:focus-visible {
  outline:3px solid #765180;
  outline-offset:4px;
}

@media (max-width:1100px) {
  .products-page #retail-product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .products-page .range-overview {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:820px) {
  .about-page-v23 .about-split-v23 {
    grid-template-columns:minmax(0,1fr);
    gap:clamp(28px,4vw,43px);
  }
  .about-page-v23 .about-photo-v23 {
    max-width:650px;
  }
}
@media (max-width:680px) {
  .products-page #retail-product-grid {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .products-page .retail-product .product-visual {
    height:clamp(215px,64vw,310px);
  }
  .products-page .retail-product .product-details {
    padding:20px;
  }
  .products-page .range-overview {
    grid-template-columns:minmax(0,1fr);
  }
  .products-page .retail-toolbar {
    grid-template-columns:minmax(0,1fr);
  }
  .products-page .retail-toolbar > label,
  .products-page .retail-toolbar input[type="search"],
  .products-page .retail-toolbar .count-label {
    grid-column:1;
  }
  .products-page .retail-toolbar .count-label {
    justify-self:start;
  }
  .legacy-article {
    padding-block:35px 80px;
  }
  .legacy-article ul.archive-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .legacy-article .faq-topics ul {
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }
  .legacy-article .faq-section-heading {
    gap:12px;
  }
  .legacy-article .article-rich :is(p,li) {
    line-height:1.76;
  }
}
@media (max-width:370px) {
  :is(.products-page,.about-page-v23,.salon-information-page) .pagehero h1 {
    font-size:clamp(2.1rem,9.5vw,2.7rem);
  }
  .legacy-article h1 {
    font-size:clamp(2rem,8.8vw,2.7rem);
  }
  .products-page .yellow-brand-feature {
    padding:18px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .products-page .retail-product {
    transition:none;
  }
  .products-page .retail-product:hover {
    transform:none;
  }
}