/* Shared responsive layout for the static preview and the WordPress theme. */
@media (max-width: 1060px) {
  html { scroll-padding-top: 80px; }
  .site-header { grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 12px; }
  body[data-page="home"] .site-header { position: sticky; z-index: 20; }
  .brand { grid-column: 1; grid-row: 1; }
  .header-actions { grid-column: 2; grid-row: 1; min-width: 0; }
  .menu-toggle { grid-column: 3; grid-row: 1; width: 44px; height: 44px; cursor: pointer; }
  .main-nav { top: 100%; left: 12px; right: 12px; padding: 12px; gap: 0; max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; }
  .main-nav a { display: block; min-height: 44px; padding: 12px; line-height: 1.3; overflow-wrap: anywhere; }
  .main-nav .main-menu, .main-nav .sub-menu { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .main-nav .sub-menu { padding-left: 14px; }
  .main-nav a:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  body.admin-bar .site-header { top: 32px; }
  .form-card input, .form-card select, .form-card textarea,
  .woman-field input, .woman-field select, .woman-field textarea { font-size: 16px; }
  .site-footer nav { gap: 6px 18px; }
  .site-footer nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding-block: 8px; }
  .path-dots button { min-height: 44px; }
  .path-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 16px; }
}

@media (max-width: 800px) {
  .woman-product { grid-template-columns: minmax(0, 1fr); }
  .woman-preview { position: static; }
  .woman-product-visual { min-width: 0; padding: 16px; }
  .woman-product-visual .woman-preview > img { width: 100%; height: auto; max-height: min(58svh, 420px); object-fit: contain; }
  .woman-product-visual figcaption { padding: 16px 4px 4px; font-size: 1.1rem; }
  .woman-product-visual figcaption span { margin-top: 6px; }
  .hairstyle-gallery { max-width: 360px; margin: 16px auto 0; gap: 8px; }
  .hairstyle-gallery button { min-height: 48px; }
  .woman-style-options { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .woman-options { padding: 24px; }
  .woman-options h3, .woman-intro h2, .woman-description, .woman-summary { overflow-wrap: anywhere; }
  .woman-description img, .configuration-intro img { max-width: 100%; height: auto; }
}

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

@media (max-width: 680px) {
  .site-header { grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 8px; padding: 10px 12px; }
  .brand { width: 52px; height: 44px; }
  .brand-logo { width: 50px; height: 50px; transform: translateY(-50%); }
  .header-actions { gap: 6px; }
  .header-actions .cart-button { display: inline-flex; padding: 0 8px; min-height: 44px; font-size: .8rem; }
  .header-actions .button { min-height: 44px; padding: 0 10px; font-size: .8rem; }
  .cart-button span { min-width: 20px; height: 20px; font-size: .72rem; }
  .main-nav { max-height: calc(100dvh - 80px); }
  body.admin-bar .main-nav { max-height: calc(100dvh - 126px); }
  main, main > *, .section > *, .page-hero > *, .split-section > *, .form-card { min-width: 0; }
  .section { padding: 44px 20px; }
  .page-hero { min-height: 0; padding: 40px 20px; gap: 28px; }
  h1, .page-hero h1, .booking-copy h1, .contact-copy h1, .legal-heading h1 { font-size: clamp(1.8rem, 7.5vw, 2.6rem); line-height: 1.15; overflow-wrap: anywhere; }
  h2, .section-heading h2, .split-copy h2, .about-copy h2, .legal-heading h2,
  body[data-page="home"] .problem-section-refresh .section-heading h2 { font-size: clamp(1.6rem, 6.4vw, 2.1rem); line-height: 1.2; overflow-wrap: anywhere; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 3.25rem); line-height: 1.13; }
  .hero-title-white { white-space: normal; }
  .hero { min-height: calc(85svh - 64px); }
  .hero-content { padding: 52px 20px; }
  .hero-content p, .page-hero p:not(.eyebrow) { font-size: 1rem; line-height: 1.65; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { flex: 1 1 140px; }
  .button { max-width: 100%; min-height: 46px; padding-block: 10px; line-height: 1.35; white-space: normal; text-align: center; }
  .section-heading { margin-bottom: 26px; }
  .split-copy, .about-copy { padding: 0; }
  .feature-grid article, .detail-grid article, .values-grid article,
  .about-method-grid article, body[data-page="home"] .intro-grid .feature-grid article { min-height: 0; padding: 22px 20px; }
  .feature-grid article > :last-child, .detail-grid article > :last-child,
  .values-grid article > :last-child { margin-bottom: 0; }
  .about-text, .about-list-panel { font-size: 1rem; }
  .consultation-actions > .button { flex: 1 1 160px; }
  .path-slide { padding: 24px 18px; }
  .path-slide h3 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .path-dots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .path-dots button { min-width: 0; padding: 10px 8px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
  .page-hero img { min-height: 0; height: auto; max-height: 400px; object-fit: contain; }
  .split-media, .split-media img { min-height: 0; }
  .split-media img { height: auto; max-height: 420px; object-fit: contain; }
  .form-card { padding: 22px 18px; }
  .form-card input, .form-card select, .form-card textarea,
  .woman-field input, .woman-field select, .woman-field textarea,
  .woocommerce input, .woocommerce select, .woocommerce textarea { min-width: 0; max-width: 100%; font-size: 16px; }
  .form-card input:not([type="hidden"]), .form-card select,
  .woman-field input, .woman-field select { min-height: 48px; }
  .form-card textarea, .woman-field textarea { min-height: 120px; }
  .contact-cards { gap: 12px; }
  .contact-cards strong, .legal-card, .site-footer { overflow-wrap: anywhere; }
  .legal-shell { width: 100%; }
  .legal-card { padding: 24px 18px; }
  .legal-card h2 { font-size: 1.4rem; line-height: 1.3; }
  .legal-card h3 { font-size: 1.1rem; }
  .site-footer { padding: 30px 20px max(30px, env(safe-area-inset-bottom)); gap: 22px; }
  .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .site-footer nav a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: .9rem; }
  .catalog-shop { padding: 32px 16px 48px; }
  .catalog-heading { margin-bottom: 22px; }
  .catalog-heading h1 { font-size: 2.1rem; }
  .catalog-heading p { margin-bottom: 0; }
  .catalog-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-bottom: 20px; }
  .catalog-filters a, .catalog-filters button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 52px; padding: 8px 5px; font-size: .85rem; line-height: 1.3; text-align: center; white-space: normal; }
  .catalog-toolbar { gap: 12px; padding: 18px 0; }
  .catalog-toolbar > *, .catalog-toolbar label, .catalog-toolbar .woocommerce-ordering { width: 100%; margin: 0 !important; }
  .catalog-toolbar select { width: 100%; min-height: 46px; font-size: 16px; }
  .catalog-empty { padding: 40px 18px; }
  .woman-configurator { margin-top: 26px; }
  .woman-intro { margin-bottom: 24px; }
  .woman-intro h2 { font-size: clamp(1.6rem, 6.5vw, 2rem); line-height: 1.2; }
  .woman-intro .eyebrow { font-size: .7rem; }
  .woman-options { padding: 24px 16px; }
  .woman-style-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .woman-style-options label, .woman-style-options input { min-width: 0; min-height: 48px; }
  .woman-style-options > label > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; height: 100%; }
  .woman-style-options > label > span > img { flex-shrink: 0; }
  .woman-style-options b { width: 100%; min-width: 0; }
  .woman-measurements { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .woman-summary { padding: 16px; }
  .hairstyle-empty-preview { aspect-ratio: 4 / 3; }
  .cart-panel { padding: 20px 16px max(20px, env(safe-area-inset-bottom)); gap: 14px; }
  .cart-header h2 { font-size: 1.6rem; margin: 0; }
  .cart-items { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .cart-item { align-items: flex-start; }
  .cart-item > div { min-width: 0; overflow-wrap: anywhere; }
  .cart-item [data-remove], .icon-button { min-width: 44px; min-height: 44px; }
  .cart-total { padding: 14px 0; }
  .woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: 100%; min-width: 0; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { padding-left: 0; display: flex; flex-wrap: wrap; }
  .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: 100%; }
  .woocommerce form .form-row-first, .woocommerce form .form-row-last { float: none; width: 100%; }
  .wc-block-components-sidebar-layout { flex-direction: column; }
  .wc-block-components-sidebar-layout > .wc-block-components-main,
  .wc-block-components-sidebar-layout > .wc-block-components-sidebar { width: 100%; padding-inline: 0; }
}

@media (max-width: 600px) {
  /* The WordPress admin toolbar scrolls away at this breakpoint. */
  body.admin-bar .site-header { top: 0; }
}