/* Shared storefront sizing. Keep archived concepts and the phone journey intact. */
:root {
  --store-width: 1840px;
  --store-gutter: clamp(24px, 3vw, 56px);
  --store-gap: clamp(28px, 3.5vw, 64px);
}

@media (min-width: 761px) {
  :is(.hhi-breadcrumb, .hhi-title, .hhi-content, .hhi-collection,
      .hhi-help, .hhi-page-hero, .hhi-detail, .hhi-editorial-grid,
      .hhi-gallery-wrap, .hhi-faq-wrap, .hhi-contact, .hhi-compare,
      .hhi-related, .hhi-home-explore, .simple-shopping, .shop-product) {
    width: 100%;
    max-width: var(--store-width);
    padding-inline: var(--store-gutter);
  }
  .process-page .hhi-content { max-width: var(--store-width); }
  .hhi-content.hhi-article { max-width: 860px; }
  .hhi-title > p, .shop-paths p, .shop-visit p { max-width: 65ch; }
  .hhi-title h1 { max-width: 24ch; }
  .hhi-footer, .development-notice {
    padding-inline: max(var(--store-gutter), calc((100% - var(--store-width)) / 2 + var(--store-gutter)));
  }
  .development-notice { padding-block: 4px; }
  .development-notice p { margin-block: 8px; }

  .simple-shopping {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 20px var(--store-gap);
    padding-block: clamp(24px, 2.2vw, 40px) 48px;
  }
  .simple-intro h1 {
    font-size: clamp(36px, 3vw, 58px);
    line-height: 1.1;
    margin: 8px 0 14px;
  }
  .simple-intro > p:not(.hhi-eyebrow) { max-width: 58ch; margin-block: 12px; }
  .simple-intro .hhi-eyebrow { margin: 0; }
  .simple-intro .simple-assurance { margin: 12px 0 0; }
  .simple-hero-actions { margin-top: 18px; }
  .simple-hero-actions .hhi-button { min-height: 48px; padding-block: 12px; }
  .simple-house { top: 20px; }
  .simple-house-picture {
    height: clamp(240px, calc(100svh - 240px), 660px);
    background: #efede8;
  }
  /* Keep the whole doorway visible on wide, short laptop windows. */
  .simple-house-picture img, .simple-house-picture canvas { object-fit: contain; object-position: center; }
  .simple-selection { padding: 14px 18px; gap: 4px 12px; }
  .simple-selection > [data-simple-status] { font-size: 17px; min-height: 2.7em; }
  .simple-house-note { padding: 0 18px 14px; }
  .simple-range-heading { margin: 4px 0 10px; }
  .simple-range-heading .hhi-eyebrow { margin: 0; }
  .simple-range-heading h2 { font-size: clamp(26px, 2vw, 34px); margin-top: 6px; }
  .simple-filters { margin-top: 14px; }
  .simple-instruction { margin: 8px 0 12px; }
  .simple-door-grid { gap: clamp(12px, 1.2vw, 22px); }
  .simple-door-card img { height: clamp(156px, 12vw, 230px); margin-bottom: 12px; }
  .simple-door-name { font-size: clamp(14px, .95vw, 17px); }
  .simple-door-price { font-size: 13px; }

  .shop-product { column-gap: var(--store-gap); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .shop-product-heading, .shop-product-options { width: 100%; max-width: 680px; }
  .shop-product-image { width: 100%; padding: 24px 28px 16px; }
  .shop-product .shop-product-image [data-catalogue-photo] {
    height: clamp(280px, calc(100svh - 250px), 680px);
  }
  .shop-product-heading h1 { font-size: clamp(36px, 3vw, 52px); }
  .shop-visit { gap: var(--store-gap); }
  .shop-visit > img { height: clamp(380px, 30vw, 560px); }
  .hhi-products { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  /* Forms keep a narrower reading width while their outer edges share the gutters. */
  .checkout-main, .design-order { max-width: 1360px; padding-inline: var(--store-gutter); }
  .checkout-grid, .design-order-layout { gap: var(--store-gap); }
  .design-order-visual { top: 24px; }
}

@media (min-width: 1001px) {
  .hhi-header {
    min-height: 92px;
    padding-block: 10px;
    padding-inline: max(var(--store-gutter), calc((100% - var(--store-width)) / 2 + var(--store-gutter)));
    gap: clamp(12px, 1.5vw, 28px);
  }
  .hhi-header .hhi-brand { width: clamp(148px, 10vw, 174px); }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .simple-shopping { gap: 20px 24px; }
  .simple-selection { grid-template-columns: 1fr; }
  .simple-house-picture { height: clamp(240px, calc(100svh - 240px), 520px); }
  .shop-product { column-gap: 28px; }
  .hhi-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1101px) and (max-height: 820px) {
  .simple-intro h1 { font-size: clamp(36px, 2.7vw, 48px); }
  .simple-intro > p:not(.hhi-eyebrow) { font-size: 16px; line-height: 1.5; }
  .simple-door-card img { height: 156px; }
  .simple-shopping { padding-top: 24px; row-gap: 12px; }
  .simple-intro h1 { margin-bottom: 10px; }
  .simple-hero-actions { margin-top: 12px; }
  .simple-range-heading .hhi-eyebrow { margin-bottom: 0; }
  .simple-filters { margin-top: 8px; }
}

/* Keep the picture beside the choices on laptops as well as larger screens.
   Only the image area shrinks; captions and controls keep their readable size.
   Native sticky positioning releases the panel at the end of its section. */
@media (min-width: 761px) {
  .simple-shopping > .simple-house,
  .shop-product > .shop-product-image {
    position: sticky;
    top: 20px;
    align-self: start;
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - 40px);
  }
  .simple-house > *, .shop-product-image > * { flex-shrink: 0; }
  /* Leave room for the preview help bar and the scroll-to-top button. */
  .has-preview-navigation .simple-house { max-height: calc(100svh - 100px); }
  .simple-selection > [data-simple-status], .simple-selection > .simple-price { margin: 0; }
  .simple-house-note, .simple-house-scene-label { padding-right: 80px; }
  .simple-house > .simple-house-picture,
  .shop-product .shop-product-image > [data-catalogue-photo],
  .shop-product .shop-product-image > .product-setting {
    flex-shrink: 1;
    min-height: 0;
  }
  .shop-product-image .product-setting canvas { object-fit: contain; }
}

@media (min-width: 761px) and (max-height: 500px) {
  .simple-selection { padding-block: 10px; gap: 2px 12px; }
  .simple-selection > [data-simple-status] { min-height: 0; }
}

/* At extreme zoom, keep every control reachable through normal page scrolling. */
@media (min-width: 761px) and (max-height: 360px) {
  .simple-shopping > .simple-house, .shop-product > .shop-product-image {
    position: static;
    max-height: none;
  }
}

/* Long bespoke specifications still need normal scrolling at high zoom. */
@media (min-width: 761px) and (max-height: 650px) {
  .design-order-visual { position: static; }
}