/* The store's secondary pages share the homepage's visual system.
   Explicit body opt-in keeps the homepage, portfolio and standalone apps isolated. */
body.storefront-page {
  --store-field: #f5f3ef;
  --store-border: #dfe1de;
  --store-radius: 16px;
  --store-surface: #e7d9f5;
  --store-soft: #f1eafa;
  --store-accent: #685184;
  --store-accent-ink: #242030;
  background: var(--store-field);
}
.storefront-page.store-business { --store-surface: #d5eadc; --store-soft: #eef5ef; --store-accent: #315b45; --store-accent-ink: #244430; }
.storefront-page.store-tools { --store-surface: #ffdd8d; --store-soft: #fff5dd; --store-accent: #885413; --store-accent-ink: #282217; }
.storefront-page.store-resources { --store-surface: #d9ebf6; --store-soft: #edf5f9; --store-accent: #315b70; --store-accent-ink: #24495f; }
.storefront-page.store-forms,
.storefront-page.store-legal { --store-surface: #e8edf0; --store-soft: #f4f6f7; --store-accent: #315b70; --store-accent-ink: #253b48; }
.storefront-page #main { color: #15191d; }
.storefront-page #main > .container,
.storefront-page #main > .studio-profile {
  max-width: 1500px;
  padding: 24px 24px 48px;
  margin-inline: auto;
  background: transparent;
}
.storefront-page #main :is(h1,h2,h3) { overflow-wrap: break-word; }
.storefront-page #main :is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #2162a1; outline-offset: 3px; }
.storefront-page #main :is(.btn,.save-offer,.save-full,.preview-link,.gallery-choices button,.shelf-controls button,.row-actions button,.booking-retry,.booking-enquiry-link,.enquiry-options > summary) { min-height: 44px; }
.storefront-page #main .btn { font-size: 14px; line-height: 1.4; font-weight: 600; padding: 10px 18px; }
.storefront-page #main :is(.breadcrumb,.about-breadcrumb) { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 20px; font-size: 13px; }

/* Department, search, saved and resource introductions share a clear entry point. */
.storefront-page :is(.catalogue-title,.department-heading,.resource-intro) {
  max-width: none;
  margin: 0 0 24px;
  padding: 28px 32px;
  border: 1px solid var(--store-border);
  border-radius: var(--store-radius);
  background: var(--store-surface);
  color: var(--store-accent-ink);
}
.storefront-page .catalogue-title { align-items: center; flex-wrap: wrap; }
.storefront-page .catalogue-title > div { min-width: 0; }
.storefront-page :is(.catalogue-title,.department-heading,.resource-intro) h1 {
  margin: 0;
  color: var(--store-accent-ink);
  font-size: clamp(30px,3vw,40px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 750;
}
.storefront-page :is(.catalogue-title,.department-heading,.resource-intro) p:last-child {
  max-width: 66ch;
  margin-top: 12px;
  color: var(--store-accent-ink);
  font-size: 16px;
  line-height: 1.55;
}
.storefront-page .catalogue-title > a { display: inline-flex; align-items: center; min-height: 44px; max-width: none; text-align: left; font-weight: 600; }
.storefront-page .catalogue-layout { grid-template-columns: 220px minmax(0,1fr); gap: 24px; align-items: start; }
.storefront-page .search-filter-panel { padding: 22px 18px; border: 1px solid var(--store-border); border-radius: var(--store-radius); background: #fff; }
.storefront-page .search-filter-panel h2 { margin-bottom: 14px; font-size: 17px; }
.storefront-page .department-filters button { min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; }
.storefront-page .department-filters button[aria-pressed=true] { color: var(--store-accent-ink); background: var(--store-soft); border-color: var(--store-accent); box-shadow: none; font-weight: 700; }
.storefront-page .search-toolbar { flex-wrap: wrap; gap: 12px 24px; margin-bottom: 20px; padding: 4px 0 16px; border-color: var(--store-border); }
.storefront-page .result-sort-label select,
.storefront-page .search-filter-panel select { min-height: 44px; border-radius: 8px; }
.storefront-page .active-search-filters button { min-height: 44px; border-radius: 999px; padding: 8px 14px; }
.storefront-page .catalogue-grid { gap: 20px; min-width: 0; }

/* The same offer card appears in catalogues, saved items and related shelves. */
.storefront-page .retail-card,
.storefront-page .catalogue-grid > .retail-card { padding: 0; border: 1px solid var(--store-border); border-radius: 12px; background: #fff; }
.storefront-page .retail-card:hover { border-color: #96a3ad; }
.storefront-page .retail-card:focus-within { border-color: #2162a1; }
.storefront-page .retail-art { background: #f6f5f2; border-bottom: 1px solid #ecebe7; }
.storefront-page .retail-art img { height: 196px; }
.storefront-page .catalogue-grid .retail-art img { height: 224px; }
.storefront-page .retail-card .retail-content,
.storefront-page .catalogue-grid .retail-card .retail-content { padding: 20px; }
.storefront-page .retail-content h3,
.storefront-page .catalogue-grid .retail-content h3,
.storefront-page .catalogue-grid.three .retail-content h3 { font-size: 20px; line-height: 1.28; font-weight: 700; }
.storefront-page .retail-content h3 a { color: #2162a1; }
.storefront-page .retail-content h3 a:hover { color: #0c3353; }
.storefront-page .retail-category { margin-bottom: 7px; font-size: 12px; }
.storefront-page .retail-description,
.storefront-page .catalogue-grid .retail-description { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.storefront-page .retail-format { font-size: 13px; line-height: 1.5; color: #565959; }
.storefront-page .retail-price { padding-top: 20px; }
.storefront-page .retail-price .price { color: #15191d; font-size: 30px; line-height: 1.15; font-weight: 500; }
.storefront-page .retail-actions { margin-top: 18px; }
.storefront-page .save-offer { padding: 10px 12px; background: #fff; }
.storefront-page :is(.save-offer,.save-full)[aria-pressed=true] { background: #fff0b1; border-color: #b58a13; }
.storefront-page .format-badge { padding: 5px 8px; border: 1px solid #c5ccce; border-radius: 5px; background: #fff; color: #424849; font-size: 11px; }
.storefront-page .product-shelf,
.storefront-page .product-page .product-shelf { margin-top: 24px; padding: 28px; border: 1px solid var(--store-border); border-radius: var(--store-radius); background: #fff; }
.storefront-page .shelf-heading { flex-wrap: wrap; gap: 12px 20px; margin-bottom: 20px; }
.storefront-page .shelf-heading h2 { font-size: 25px; line-height: 1.2; letter-spacing: -.02em; }
.storefront-page .shelf-heading a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.storefront-page .shelf-controls { margin-left: auto; }
.storefront-page .shelf-controls button { min-width: 44px; border-radius: 10px; padding: 8px 12px; box-shadow: none; }
.storefront-page .shelf-track { gap: 20px; padding: 3px 3px 16px; scroll-padding-inline: 3px; }
.storefront-page .shelf-track > .retail-card { flex-basis: 264px; }

/* Product pages retain the image / details / booking relationship. */
.storefront-page .retail-product {
  grid-template-columns: minmax(0,1fr) minmax(0,1.16fr) minmax(250px,.78fr);
  gap: 28px;
  padding: 28px;
  border: 1px solid var(--store-border);
  border-radius: var(--store-radius);
  background: #fff;
}
.storefront-page :is(.product-gallery,.product-summary,.retail-buy) { min-width: 0; }
.storefront-page .gallery-image:not(.resource-preview-shell) { border-radius: 12px; background: var(--store-soft); }
.storefront-page .gallery-choices button { padding: 10px 14px; border-radius: 8px; }
.storefront-page .sample-preview { border-radius: 12px; border-top-color: var(--store-accent); }
.storefront-page .product-summary > .eyebrow { color: var(--store-accent); font-size: 12px; font-weight: 700; letter-spacing: .035em; line-height: 1.5; }
.storefront-page .product-summary h1 { color: #15191d; font-size: clamp(28px,2.5vw,36px); line-height: 1.13; letter-spacing: -.025em; font-weight: 750; }
.storefront-page .product-tagline { margin-top: 18px; padding-bottom: 20px; font-size: 16px; line-height: 1.6; border-color: var(--store-border); }
.storefront-page .product-facts { margin: 20px 0; padding: 16px; background: var(--store-soft); border-radius: 10px; }
.storefront-page .product-facts > div { margin-top: 10px; line-height: 1.5; }
.storefront-page .product-facts > div:first-child { margin-top: 0; }
.storefront-page .product-summary > h2 { font-size: 18px; }
.storefront-page .product-summary .included li { font-size: 15px; line-height: 1.5; }
.storefront-page .retail-buy { padding: 22px; border: 1px solid var(--store-border); border-top: 5px solid var(--store-accent); border-radius: 12px; background: #fff; }
.storefront-page .retail-buy .price.large { font-size: 34px; line-height: 1.1; font-weight: 500; }
.storefront-page .retail-buy :is(.fine,.micro,.booking-status) { line-height: 1.55; }
.storefront-page .retail-buy .save-full { border-radius: 999px; }
.storefront-page .product-section-nav { gap: 12px 24px; margin-top: 24px; padding: 12px 22px; border: 1px solid var(--store-border); border-radius: 12px; background: #fff; }
.storefront-page .product-section-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.storefront-page .product-copy { margin-top: 24px; padding: 28px; border: 1px solid var(--store-border); border-radius: var(--store-radius); background: #fff; }
.storefront-page .product-copy > h2,
.storefront-page .product-copy.receive h2 { font-size: 25px; line-height: 1.25; letter-spacing: -.02em; }
.storefront-page .product-copy > p,
.storefront-page .receive p { font-size: 16px; line-height: 1.65; }
.storefront-page .product-copy.receive { gap: 32px; }
.storefront-page .product-faq summary { min-height: 44px; padding-block: 18px; line-height: 1.5; }
.storefront-page .product-faq details p { max-width: 75ch; }
.storefront-page :is(.shop-explainer,.compare-wrap,.mobile-training-comparison) { margin-top: 24px; padding: 28px; border: 1px solid var(--store-border); border-radius: var(--store-radius); background: #fff; }
.storefront-page :is(.shop-explainer,.compare-wrap,.mobile-training-comparison) > h2 { font-size: 25px; line-height: 1.25; }
.storefront-page .compare-wrap th,
.storefront-page .compare-wrap td { padding: 18px 16px; }
.storefront-page .compare-wrap thead { background: var(--store-soft); }

/* Resources use the same cards; reading directories keep their connected list. */
.storefront-page .resource-page { margin-bottom: 0; }
.storefront-page .resource-card { padding: 26px; border-color: var(--store-border); border-radius: 12px; }
.storefront-page .resource-card h2,
.storefront-page .resource-card h3 { font-size: 23px; line-height: 1.25; font-weight: 700; }
.storefront-page .resource-card p { font-size: 15px; line-height: 1.55; }
.storefront-page .resource-grid > .resource-card { border-top: 5px solid var(--store-accent); }
.storefront-page .resource-article-list { border-color: var(--store-border); border-radius: var(--store-radius); overflow: hidden; }
.storefront-page .resource-article-list > .resource-card { padding: 26px 28px; border: 0; border-bottom: 1px solid var(--store-border); border-radius: 0; }
.storefront-page .resource-article-list > .resource-card:last-child { border-bottom: 0; }
.storefront-page .resource-article-list h2 { font-size: 22px; }
.storefront-page .resource-article-list .btn { align-self: flex-start; width: auto; }
.storefront-page .resource-preview-shell .gallery-image,
.storefront-page .gallery-image.resource-preview-shell { background: transparent; }
.storefront-page .retail-card .retail-art[data-free-tool] > .resource-preview-link > img { height: auto; }

/* Saved, cart and enquiry states stay readable and task focused. */
.storefront-page .retail-cart { min-height: 56vh; }
.storefront-page :is(.basket-panel,.basket-total,.empty-cart,.catalogue-empty) { padding: 28px; border: 1px solid var(--store-border); border-radius: var(--store-radius); background: #fff; }
.storefront-page .basket-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; }
.storefront-page .basket-total { border-top: 5px solid var(--store-accent); }
.storefront-page :is(.basket-panel,.empty-cart) h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.025em; font-weight: 750; }
.storefront-page :is(.basket-total,.catalogue-empty) h2 { font-size: 23px; line-height: 1.25; font-weight: 700; }
.storefront-page .basket-panel > p { max-width: 72ch; font-size: 15px; line-height: 1.6; }
.storefront-page .basket-row { gap: 20px; padding-block: 26px; border-color: var(--store-border); }
.storefront-page .basket-row > img { border-radius: 10px; background: #f6f5f2; }
.storefront-page .basket-row h2 { font-size: 20px; line-height: 1.3; font-weight: 700; }
.storefront-page .basket-row h2 a { color: #2162a1; }
.storefront-page .basket-row > div { min-width: 0; }
.storefront-page .enquiry-preview { margin-top: 20px; padding: 22px; background: #f4f6f7; border-color: var(--store-border); border-radius: 10px; line-height: 1.6; }
.storefront-page .saved-undo-panel { border-radius: 12px; }
.storefront-page .cart-inline-status,
.storefront-page .notice { border-radius: 10px; line-height: 1.55; }
/* Keep empty live regions available without reserving a decorated blank box. */
.storefront-page :is(.cart-inline-status,.inline-status,.notice,.add-feedback,.booking-status):empty:not([hidden]) { display: block; min-height: 0; padding: 0; border: 0; margin: 0; background: transparent; }
.storefront-page #main :is(input[type=date],input[type=email],input[type=text],select,textarea) { min-height: 44px; border-radius: 8px; }

/* About retains its portrait and factual history, with a warmer shared frame. */
.storefront-page .studio-profile .about-hero { padding: 32px; gap: 40px; border-color: var(--store-border); border-radius: var(--store-radius); background: var(--store-soft); }
.storefront-page .studio-profile .about-portrait img { border-radius: 12px; }
.storefront-page .studio-profile .about-eyebrow { color: var(--store-accent); }
.storefront-page .studio-profile h1 { letter-spacing: -.025em; font-weight: 750; }
.storefront-page .studio-profile .about-section { border-color: var(--store-border); border-radius: var(--store-radius); }
.storefront-page .studio-profile .about-section h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.02em; }
.storefront-page .studio-profile .about-next { background: #d9ebf6; }

/* Legal and withdrawal pages stay calm and narrower than shopping layouts. */
.storefront-page .legal-page { width: calc(100% - 48px); max-width: 900px; margin: 24px auto 48px; padding: 36px; border: 1px solid var(--store-border); border-radius: var(--store-radius); background: #fff; line-height: 1.65; }
.storefront-page .legal-page h1 { margin-block: 28px 24px; font-size: 34px; line-height: 1.15; letter-spacing: -.025em; }
.storefront-page .legal-page h2 { font-size: 23px; line-height: 1.3; }
.storefront-page .legal-navigation { gap: 6px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--store-border); }
.storefront-page .legal-navigation a { display: inline-flex; align-items: center; min-height: 44px; }
.storefront-page .withdraw-form { padding: 24px; background: var(--store-soft); border-color: var(--store-border); border-radius: 12px; }
.storefront-page .legal-page pre { border-radius: 10px; }

/* The older landing route remains usable within the same store family. */
.storefront-page .retail-home .shop-banner { border: 1px solid var(--store-border); border-radius: var(--store-radius); overflow: hidden; }
.storefront-page .retail-home .banner-slide { background: #e7d9f5; }
.storefront-page .retail-home .banner-week { background: #ffe7a3; }
.storefront-page .retail-home .banner-team { background: #d5eadc; }
.storefront-page .retail-home .banner-copy h1 { color: #15191d; font-weight: 750; letter-spacing: -.025em; }
.storefront-page .retail-home .banner-art { background: transparent; }
.storefront-page .retail-home .banner-art img { border-radius: 12px; }
.storefront-page .need-grid { gap: 20px; }
.storefront-page .need-grid > a { padding: 24px; border: 1px solid var(--store-border); border-radius: var(--store-radius); }

@media(max-width:1100px) {
  .storefront-page .retail-product { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 24px; }
  .storefront-page .product-gallery { grid-column: 1; grid-row: 1; position: static; }
  .storefront-page .product-summary { grid-column: 2; grid-row: 1 / span 2; }
  .storefront-page .retail-buy { grid-column: 1; grid-row: 2; }
  .storefront-page .catalogue-layout { grid-template-columns: 190px minmax(0,1fr); gap: 20px; }
  .storefront-page .catalogue-grid .retail-card .retail-content { padding: 18px; }
}
@media(max-width:760px) {
  .storefront-page #main > .container,
  .storefront-page #main > .studio-profile { padding: 20px 16px 32px; }
  .storefront-page :is(.catalogue-title,.department-heading,.resource-intro) { padding: 24px; margin-bottom: 20px; }
  .storefront-page .catalogue-layout { grid-template-columns: minmax(0,1fr); }
  .storefront-page .search-filter-panel { padding: 20px; }
  .storefront-page .catalogue-grid { gap: 16px; }
  .storefront-page .catalogue-grid.three { grid-template-columns: minmax(0,1fr); }
  .storefront-page .catalogue-grid.three .retail-card { display: flex; }
  .storefront-page .catalogue-grid.three .retail-art img { height: 240px; min-height: 0; }
  .storefront-page .retail-product { display: flex; flex-direction: column; padding: 24px; gap: 24px; }
  .storefront-page :is(.product-gallery,.product-summary,.retail-buy) { width: 100%; }
  .storefront-page .product-summary { order: 0; }
  .storefront-page .product-gallery { order: 1; }
  .storefront-page .retail-buy { order: 2; }
  .storefront-page .gallery-image:not(.resource-preview-shell) { max-width: 480px; margin-inline: auto; }
  .storefront-page .product-copy.receive { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .storefront-page :is(.product-copy,.product-shelf,.product-page .product-shelf,.shop-explainer,.compare-wrap,.mobile-training-comparison) { padding: 24px; }
  .storefront-page .basket-layout { grid-template-columns: minmax(0,1fr); }
  .storefront-page .basket-total { position: static; }
  .storefront-page .studio-profile .about-hero { padding: 24px; gap: 24px; }
}
@media(max-width:480px) {
  .storefront-page #main > .container,
  .storefront-page #main > .studio-profile { padding: 12px 12px 28px; }
  .storefront-page :is(.catalogue-title,.department-heading,.resource-intro) { padding: 24px 20px; }
  .storefront-page :is(.catalogue-title,.department-heading,.resource-intro) h1 { font-size: 30px; }
  .storefront-page :is(.catalogue-title,.department-heading,.resource-intro) p:last-child { font-size: 15px; }
  .storefront-page .search-filter-panel { padding: 18px; }
  .storefront-page .catalogue-grid .retail-card .retail-content { padding: 20px; }
  .storefront-page .catalogue-grid .retail-art img,
  .storefront-page .catalogue-grid.three .retail-art img { height: 216px; }
  .storefront-page .retail-product { padding: 20px; }
  .storefront-page .product-summary h1 { font-size: 30px; }
  .storefront-page .product-facts { padding: 14px; }
  .storefront-page .retail-buy { padding: 20px; }
  .storefront-page :is(.product-copy,.product-shelf,.product-page .product-shelf,.shop-explainer,.mobile-training-comparison) { padding: 22px 18px; }
  .storefront-page :is(.product-copy,.shop-explainer,.mobile-training-comparison) > h2,
  .storefront-page .product-copy.receive h2,
  .storefront-page .shelf-heading h2 { font-size: 23px; }
  .storefront-page .shelf-track > .retail-card { flex-basis: min(264px,calc(100vw - 78px)); }
  .storefront-page .product-section-nav { gap: 4px 16px; padding: 10px 18px; }
  .storefront-page .resource-card { padding: 22px; }
  .storefront-page .resource-article-list > .resource-card { padding: 24px 20px; }
  .storefront-page :is(.basket-panel,.basket-total,.empty-cart,.catalogue-empty) { padding: 22px 18px; }
  .storefront-page :is(.basket-panel,.empty-cart) h1 { font-size: 29px; }
  .storefront-page .basket-row { grid-template-columns: 72px minmax(0,1fr); gap: 14px; }
  .storefront-page .basket-row > img { width: 72px; }
  .storefront-page .basket-row h2 { font-size: 18px; }
  .storefront-page .enquiry-preview { padding: 16px; }
  .storefront-page .studio-profile .about-hero,
  .storefront-page .studio-profile .about-section { padding: 22px 20px; }
  .storefront-page .studio-profile .about-section h2 { font-size: 23px; }
  .storefront-page .legal-page { width: calc(100% - 24px); margin: 12px auto 28px; padding: 24px 20px; }
  .storefront-page .legal-page h1 { font-size: 30px; }
  .storefront-page .withdraw-form { padding: 18px 14px; }
  .storefront-page .need-grid { gap: 16px; }
  .storefront-page .need-grid > a { padding: 22px; }
}