/**
 * Horizon Core: commerce skeleton section styles (G1 R2, HORIZON-20260927-007, Core 1.41.25).
 *
 * Collections grid, announcements, contact page, size guide, the New badge, the product category eyebrow and (R3)
 * the home "Our story" band.
 * LIFTED VERBATIM from wp-child-theme-commerce (hp-home.css, hp-contact.css, hp-shop.css, hp-responsive.css) by
 * docs/research/g1-r2-build-2026-09-28/lift-css.mjs: every rule whose selector names one of those classes, with
 * its @media wrapper, declarations unchanged. The theme retires at G5; these become the one copy.
 *
 * Enqueued ONLY for skeleton `commerce` on a theme that does not wire its own storefront
 * (Commerce/storefront-styles.php, hp_enqueue_commerce_skeleton_assets). The commerce theme still ships its
 * own copy, so today this loads nowhere: the commerce-theme stores are on that theme; no shell tenant is on commerce.
 */
/* from hp-home.css */
.hp-collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hp-sp-6); }
.hp-collection-card { display: block; border-radius: var(--hp-r-md); overflow: hidden; border: 1px solid var(--hp-border); text-decoration: none !important; transition: border-color var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease), transform var(--hp-dur) var(--hp-ease); background: var(--hp-bg-surface); }
.hp-collection-card:hover { border-color: var(--hp-gold); box-shadow: var(--hp-shadow-raised); transform: translateY(-2px); }
.hp-collection-card__img-wrap { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hp-bg-raised); }
.hp-collection-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--hp-ease); }
.hp-collection-card:hover .hp-collection-card__img-wrap img { transform: scale(1.04); }
.hp-collection-card__label { padding: var(--hp-sp-4) var(--hp-sp-5); display: flex; align-items: baseline; justify-content: space-between; gap: var(--hp-sp-3); }
.hp-collection-card__name { font-weight: 600; font-size: var(--hp-text-sm); color: var(--hp-text); }
.hp-collection-card__count { font-size: var(--hp-text-xs); color: var(--hp-text-muted); white-space: nowrap; }
.hp-announcements-section { background: var(--hp-surface); }
.hp-announcements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hp-sp-8); margin-top: var(--hp-sp-10); }
.hp-announcement-card { display: flex; flex-direction: column; background: var(--hp-bg-surface); border-radius: var(--hp-r-md); border: 1px solid var(--hp-border); overflow: hidden; transition: box-shadow var(--hp-dur) var(--hp-ease); }
.hp-announcement-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.hp-announcement-card__img { display: block; overflow: hidden; aspect-ratio: 16 / 9; flex-shrink: 0; }
.hp-announcement-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--hp-ease); }
.hp-announcement-card:hover .hp-announcement-card__img img { transform: scale(1.04); }
.hp-announcement-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--hp-sp-6); gap: var(--hp-sp-3); }
.hp-announcement-card__date { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-gold); }
.hp-announcement-card__title { font-family: var(--hp-font-display); font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.3; }
.hp-announcement-card__title a { color: var(--hp-text); text-decoration: none; }
.hp-announcement-card__title a:hover { color: var(--hp-gold); }
.hp-announcement-card__excerpt { font-size: 0.875rem; color: var(--hp-text-muted); line-height: 1.65; flex: 1; margin: 0; }
.hp-announcement-card__readmore { align-self: flex-start; margin-top: var(--hp-sp-3); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-text); text-decoration: none; transition: color var(--hp-dur) var(--hp-ease); }
.hp-announcement-card__readmore:hover { color: var(--hp-gold); }
@media (max-width: 1024px) {
  .hp-collections-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-announcements-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hp-collections-grid { grid-template-columns: 1fr; }
  .hp-announcements-grid { grid-template-columns: 1fr; }
}
/* from hp-contact.css */
.hp-contact-quick { padding-top: var(--hp-sp-8); padding-bottom: var(--hp-sp-8); }
.hp-contact-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--hp-sp-4); }
.hp-contact-action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hp-sp-2); padding: var(--hp-sp-5); background: var(--hp-bg-surface); border: 1px solid var(--hp-border); border-radius: var(--hp-r-lg); text-decoration: none; color: var(--hp-text); transition: transform var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease); }
.hp-contact-action:hover,
.hp-contact-action:focus-visible { transform: translateY(-3px); border-color: var(--hp-gold); box-shadow: var(--hp-shadow-raised); }
.hp-contact-action__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--hp-r-md); background: var(--hp-gold-muted); color: var(--hp-gold); margin-bottom: var(--hp-sp-1); }
.hp-contact-action__label { font-family: var(--hp-font-display); font-size: var(--hp-text-base); font-weight: 600; }
.hp-contact-action__desc { font-size: var(--hp-text-sm); color: var(--hp-text-muted); }
.hp-contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--hp-sp-8); align-items: start; }
@media (min-width: 900px) {
  .hp-contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--hp-sp-12); }
}
.hp-contact-info__title { font-size: var(--hp-text-2xl); margin: 0 0 var(--hp-sp-2); }
.hp-contact-info__lead { color: var(--hp-text-muted); margin: 0 0 var(--hp-sp-6); line-height: 1.6; }
.hp-contact-info__list { list-style: none; margin: 0 0 var(--hp-sp-6); padding: 0; display: flex; flex-direction: column; gap: var(--hp-sp-4); }
.hp-contact-info__row { display: flex; align-items: flex-start; gap: var(--hp-sp-3); font-size: var(--hp-text-sm); line-height: 1.5; }
.hp-contact-info__row strong { font-weight: 600; }
.hp-contact-info__row a { color: var(--hp-gold); text-decoration: underline; }
.hp-contact-info__ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--hp-r-full); background: var(--hp-gold-muted); color: var(--hp-gold); }
.hp-contact-callout { display: flex; align-items: flex-start; gap: var(--hp-sp-3); padding: var(--hp-sp-4); margin-top: var(--hp-sp-3); border: 1px solid var(--hp-border); border-radius: var(--hp-r-md); text-decoration: none; color: var(--hp-text); font-size: var(--hp-text-sm); line-height: 1.5; transition: border-color var(--hp-dur) var(--hp-ease), background var(--hp-dur) var(--hp-ease); }
.hp-contact-callout:hover,
.hp-contact-callout:focus-visible { border-color: var(--hp-gold); }
.hp-contact-callout--accent { background: var(--hp-gold-muted); border-color: transparent; }
.hp-contact-callout__ic { flex: 0 0 auto; color: var(--hp-gold); margin-top: 2px; }
.hp-contact-form-wrap { background: var(--hp-bg-surface); border: 1px solid var(--hp-border); border-radius: var(--hp-r-lg); box-shadow: var(--hp-shadow-card); padding: var(--hp-sp-6); }
@media (min-width: 900px) {
  .hp-contact-form-wrap { padding: var(--hp-sp-8); }
}
.hp-contact-form-wrap__title { font-size: var(--hp-text-2xl); margin: 0 0 var(--hp-sp-5); }
.hp-contact-form__row { display: grid; grid-template-columns: 1fr; gap: var(--hp-sp-4); }
@media (min-width: 560px) {
  .hp-contact-form__row { grid-template-columns: 1fr 1fr; }
}
.hp-contact-form .hp-field { margin-bottom: var(--hp-sp-4); }
.hp-contact-form__row .hp-field { margin-bottom: 0; }
.hp-field__optional { color: var(--hp-text-muted); font-weight: 400; }
.hp-contact-form__submit { width: 100%; margin-top: var(--hp-sp-2); }
.hp-contact-form__reassure { text-align: center; color: var(--hp-text-muted); font-size: var(--hp-text-sm); margin-top: var(--hp-sp-3); }
.hp-contact-social__label { font-size: var(--hp-text-lg); margin-bottom: var(--hp-sp-5); }
.hp-size-steps { display: grid; grid-template-columns: 1fr; gap: var(--hp-sp-5); margin-bottom: var(--hp-sp-6); }
@media (min-width: 720px) {
  .hp-size-steps { grid-template-columns: repeat(3, 1fr); }
}
.hp-size-step { display: flex; flex-direction: column; gap: var(--hp-sp-2); }
.hp-size-step__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--hp-r-md); background: var(--hp-gold-muted); color: var(--hp-gold); }
.hp-size-step__label { font-family: var(--hp-font-display); font-size: var(--hp-text-lg); font-weight: 600; }
.hp-size-step__desc { font-size: var(--hp-text-sm); color: var(--hp-text-muted); line-height: 1.55; }
.hp-size-note { font-size: var(--hp-text-sm); color: var(--hp-text-muted); line-height: 1.6; padding: var(--hp-sp-4) var(--hp-sp-5); background: var(--hp-bg-surface); border-left: 3px solid var(--hp-gold); border-radius: var(--hp-r-sm); margin: 0; }
.hp-size-chart { margin-bottom: var(--hp-sp-8); }
.hp-size-chart:last-of-type { margin-bottom: 0; }
.hp-size-chart__title { font-size: var(--hp-text-xl); margin: 0 0 var(--hp-sp-4); }
.hp-size-table-wrap { overflow-x: auto; border: 1px solid var(--hp-border); border-radius: var(--hp-r-md); background: var(--hp-bg); -webkit-overflow-scrolling: touch; }
.hp-size-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--hp-text-sm); }
.hp-size-table th,
.hp-size-table td { padding: var(--hp-sp-3) var(--hp-sp-4); text-align: center; white-space: nowrap; border-bottom: 1px solid var(--hp-border); }
.hp-size-table thead th { font-family: var(--hp-font-display); font-weight: 600; color: var(--hp-text); background: var(--hp-bg-surface); }
.hp-size-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--hp-text); }
.hp-size-table tbody tr:nth-child(odd) td,
.hp-size-table tbody tr:nth-child(odd) th[scope="row"] { background: var(--hp-bg-surface); }
.hp-size-table tbody tr:last-child th,
.hp-size-table tbody tr:last-child td { border-bottom: 0; }
.hp-size-help { margin-top: var(--hp-sp-6); font-size: var(--hp-text-sm); color: var(--hp-text-muted); }
.hp-size-help a { color: var(--hp-gold); text-decoration: underline; }
/* from hp-shop.css */
.hp-product-category-eyebrow { display: block; font-family: var(--hp-font-body); font-size: var(--hp-text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-text-muted); padding: var(--hp-sp-4) var(--hp-sp-4) 0; }
.hp-limited-badge--new { background: #2d7a45; }
.hp-collection-hero__bg { position: absolute; inset: 0; z-index: 0; }
.hp-collection-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.25; display: block; }
.hp-collection-hero__breadcrumb { font-size: var(--hp-text-xs); color: var(--hp-text-muted); margin-bottom: var(--hp-sp-4); }
.hp-collection-hero__breadcrumb a { color: var(--hp-text-muted); text-decoration: none; }
.hp-collection-hero__breadcrumb a:hover { color: var(--hp-text); }
.hp-size-guide { max-width: 720px; }
.hp-size-guide table { width: 100%; border-collapse: collapse; font-size: var(--hp-text-sm); margin-top: var(--hp-sp-4); }
.hp-size-guide th,
.hp-size-guide td { padding: var(--hp-sp-3) var(--hp-sp-4); border: 1px solid var(--hp-border); text-align: left; }
.hp-size-guide th { background: var(--hp-bg-surface); font-weight: 600; color: var(--hp-text); }
.hp-size-guide td { color: var(--hp-text-muted); }
/* from hp-responsive.css */
@media (max-width: 600px) {
  .hp-page-header,
  .hp-shop-header,
  .hp-collection-hero { margin-top: 0; }
}

/* from hp-contact.css: the contact form's status alerts. Missed by lift-css.mjs (no prefix for them); Core's contact_support
   section prints them after a submit, and nothing on the shell styles them. Added 2026-09-29, verbatim. */
.hp-form-alert { padding: var(--hp-sp-4) var(--hp-sp-5); border-radius: var(--hp-r-md); margin-bottom: var(--hp-sp-5); font-size: var(--hp-text-sm); line-height: 1.5; }
.hp-form-alert--success { background: var(--hp-success-muted, rgba(110, 184, 122, 0.15)); border: 1px solid rgba(110, 184, 122, 0.35); color: var(--hp-text); }
.hp-form-alert--error { background: var(--hp-error-muted, rgba(201, 110, 110, 0.15)); border: 1px solid rgba(201, 110, 110, 0.35); color: var(--hp-text); }

/* from hp-base.css: the page-header band matches the body (--hp-bg), not --hp-bg-surface. The commerce theme's own
   note: the three near-identical creams read as a mis-aligned stripe; one body-toned band with a 1px divider is the
   premium look. Found by comparing a merch store's /contact/ (Alex's protected page) on the shell, 2026-09-29.
   `.site-main` for one level of specificity: the shell's hp-base.css may load after this file. */
.site-main .hp-page-header { position: relative; background: var(--hp-bg); overflow: hidden; }

/* from hp-home.css: the home "Our story" band (brand_story section). Missed by the R2 lift (no prefix for it); found on
   `store` by the G2 rehearsal as the only newly undefined section class. G1 R3, HORIZON-20260929-003, lifted by
   lift-css.mjs "hp-brand-story", declarations verbatim. */
.hp-brand-story { position: relative; overflow: hidden; background: var(--hp-bg-raised); padding: var(--hp-sp-24) 0; }
.hp-brand-story__bg { position: absolute; inset: 0; z-index: 0; }
.hp-brand-story__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; display: block; }
.hp-brand-story__inner { max-width: 600px; display: flex; flex-direction: column; gap: var(--hp-sp-5); }
.hp-brand-story__inner h2 { margin: 0; font-family: var(--hp-font-display); font-size: clamp(var(--hp-text-2xl), 4vw, var(--hp-text-4xl)); line-height: 1.2; color: var(--hp-text); }
.hp-brand-story__inner p { color: var(--hp-text-muted); line-height: 1.8; margin: 0; font-size: var(--hp-text-base); }
@media (max-width: 640px) {
  .hp-brand-story__inner { max-width: 100%; }
}

/* from hp-components.css: the store's SPLIT sign-up band (copy + form left, photo right), printed by horizon-shell's
   template-parts/email-signup.php on skeleton commerce only. G1 R3, HORIZON-20260929-003. Lifted by lift-css.mjs with
   the split's own class prefixes, declarations verbatim.
   ⚠️ Several classes are ALSO the shell's (`__body`, `__form`, `__input`, `__privacy`), same specificity. These win
   because this file is enqueued at wp_enqueue_scripts priority 20, after the shell's hp-components.css, which is the
   order the commerce theme's own copy had. Core's hp-mobile.css (`body .x`, 0,1,1) still beats both, as it did on
   the theme. This file loads nowhere but skeleton commerce on a non-wiring theme, so no creator tenant sees it. */
.hp-email-signup-split { display: grid; grid-template-columns: 1fr; align-items: center; padding: var(--hp-sp-16) 0; gap: var(--hp-sp-12); }
.hp-email-signup-split--has-image { grid-template-columns: 1fr 1fr; }
.hp-email-signup__left { display: flex; flex-direction: column; gap: var(--hp-sp-4); }
.hp-email-signup__headline { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.2; margin: 0; color: var(--hp-text); }
.hp-email-signup__body { color: var(--hp-text-muted); font-size: var(--hp-text-sm); line-height: 1.7; margin: 0; }
.hp-email-signup__form { margin-top: var(--hp-sp-2); }
.hp-email-signup__field-row { display: flex; height: 52px; }
.hp-email-signup__input { flex: 1; background: var(--hp-bg); border: 1px solid var(--hp-border-strong); border-right: none; border-radius: var(--hp-r-sm) 0 0 var(--hp-r-sm); color: var(--hp-text); font-family: var(--hp-font-body); font-size: var(--hp-text-sm); padding: 0 1rem; height: 100%; transition: border-color var(--hp-dur) var(--hp-ease); }
.hp-email-signup__input:focus { outline: none; border-color: var(--hp-text); }
.hp-email-signup__btn { flex-shrink: 0; padding: 0 var(--hp-sp-6); height: 100%; background: var(--hp-text); color: var(--hp-bg); border: 1px solid var(--hp-text); border-radius: 0 var(--hp-r-sm) var(--hp-r-sm) 0; font-family: var(--hp-font-body); font-size: var(--hp-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease); }
.hp-email-signup__btn:hover { background: var(--hp-gold); border-color: var(--hp-gold); color: var(--hp-on-accent); }
.hp-email-signup__privacy { font-size: var(--hp-text-xs); color: var(--hp-text-subtle); margin: 0; }
.hp-email-signup__right { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.hp-email-signup__right img { display: block; width: 100%; max-height: 420px; object-fit: cover; object-position: center top; border-radius: var(--hp-r-md); }
@media (max-width: 768px) {
  .hp-email-signup-split,
  .hp-email-signup-split--has-image { grid-template-columns: 1fr; padding: var(--hp-sp-10) 0; }
  .hp-email-signup__right { display: none; }
  .hp-email-signup__field-row { flex-direction: column; height: auto; gap: var(--hp-sp-3); }
  .hp-email-signup__input { border-right: 1px solid var(--hp-border-strong); border-radius: var(--hp-r-sm); height: 48px; }
  .hp-email-signup__btn { border-radius: var(--hp-r-sm); height: 48px; width: 100%; }
}
.hp-email-signup__form { flex-wrap: wrap; }
/* The section ground from the same file. `:where()` keeps its declarations verbatim at ZERO specificity, so on the
   home page the shell's hp-home.css `.hp-email-section` (the same rule as the theme's hp-home.css) still wins, exactly
   as the theme's hp-home.css beat its own hp-components.css there. Every other page gets the tinted band. */
:where(.hp-email-section) { background: var(--hp-bg-raised); border-top: 1px solid var(--hp-border); border-bottom: 1px solid var(--hp-border); overflow: hidden; }
/* NOT lifted: the shell makes `.hp-email-signup__form` a flex row for its centred block; the theme's form is a plain
   block (only `flex-wrap` is set, and it does nothing on a block). Without this, the field row shrinks to its content. */
.hp-email-signup-split .hp-email-signup__form { display: block; }