/* ============================================================
   LovelyHair — Base element defaults + foundation utilities
   Element defaults are lifted VERBATIM from the Design System
   (tokens/base.css). Everything references tokens — nothing is
   hard-coded here. Utilities below (container, grid, a11y
   helpers) are the theme's shared scaffolding.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Brand image loader — a muted LovelyHair mark, centred in a photo well's
   BACKGROUND, so it sits under the image and shows only until the photo paints.
   No JS and no pseudo-element, so any well can take it without disturbing its
   own ::before/::after. Use as the first background layer:
     background: var(--lh-img-loader, none), var(--surface-image);
   The `none` fallback keeps the surface colour if the URL vars are missing.
   --lh-loader-lockup / --lh-loader-mark come from theme-styles-variables. */
:root {
  --lh-img-loader: var(--lh-loader-lockup) center / min(46%, 180px) auto no-repeat;
  /* Thumbnails are too small for the wordmark to read: the L alone. */
  --lh-img-loader-sm: var(--lh-loader-mark) center / 36% auto no-repeat;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Kill phantom horizontal scroll at the root (e.g. carousel arrows that hang
     outside their track by a few px). `clip` doesn't create a scroll container,
     so position: sticky (PDP gallery, sticky bars) keeps working; vertical
     scrolling is unaffected. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Guard against phantom horizontal scroll: full-bleed `width: 100vw` breakouts
     (100vw includes the scrollbar) overshoot by the scrollbar width on desktop
     browsers with classic scrollbars — a sliver headless/overlay-scrollbar
     testing never shows. `clip` (not `hidden`) removes it WITHOUT creating a
     scroll container, so position: sticky (PDP gallery, sticky ATC) still works. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--font-h1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); font-weight: var(--weight-semibold); }
h4 { font-size: var(--font-h4); font-weight: var(--weight-semibold); }

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

/* Inherit fonts for form controls so the brand type holds everywhere */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
/* Phones: body copy scales below 16px (--type-scale), but a text field under 16px makes
   iOS Safari zoom the page on focus. Every typeable field stays at --font-input. The
   selector outranks the single-class field styles in the components. */
@media (max-width: 749px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select:not([hidden]):not([disabled]),
  textarea:not([hidden]):not([readonly]) {
    font-size: var(--font-input);
  }
}

/* ---- Eyebrow / overline label — recurring brand motif ---- */
.lh-overline {
  font-family: var(--font-body);
  font-size: var(--font-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ---- Container ---- */
.lh-container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
/* Content pages (contact, salon, our story) share one narrower measure. */
.lh-container.lh-container--content { max-width: min(var(--page-max), var(--page-content)); }

/* ---- Product / card grid (4-up desktop, 2-up mobile) ---- */
.lh-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (min-width: 768px) {
  .lh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap-lg); }
}

/* ---- Accessibility helpers ---- */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-to-content-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  color: var(--text-link);
  border-radius: 0 0 var(--radius-sm) 0;
  box-shadow: var(--shadow-md);
  transform: translateY(-120%);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.skip-to-content-link:focus {
  transform: translateY(0);
}

/* Visible, on-brand focus ring for keyboard users across the theme */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

/* ---- Press feedback ----
   A pressed control shrinks to --scale-press so the tap registers before the
   network does. The individual `scale` property composes with each control's own
   `transform` (the hero arrows' translateY(-50%), the button hover lift), so no
   rule here can knock a control out of position. :where() keeps it at zero
   specificity. */
:where(.lh-button, .lh-icon-button, .lh-header__icon, .lh-product-card__add,
  .lh-pdp__atc, .lh-pdp__buy-now, .lh-pdp-sticky__atc, .lh-pdp__qty-btn,
  .lh-qv__atc, .lh-qv__qty-btn, .lh-newsletter__submit, .lh-cart-drawer__discount-apply,
  .lh-pagination__btn, .lh-hero__nav, .lh-recs__arrow, .lh-testimonials__arrow,
  .lh-sia__arrow, .lh-svc-inc__arrow, .lh-review-modal__nav, .lh-pdp-lightbox__nav,
  .lh-scroll-to-top):active:not(:disabled, [aria-disabled="true"]) {
  scale: var(--scale-press);
}

/* ---- Shared pagination (styles Shopify `default_pagination` output) ---- */
.lh-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1); margin-top: var(--space-10); }
.lh-pagination .page,
.lh-pagination .prev,
.lh-pagination .next,
.lh-pagination .deco {
  min-width: 40px; height: 40px; display: inline-grid; place-items: center;
  padding: 0 var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--font-body-sm); color: var(--text-body);
}
/* Scope the legacy fill to default_pagination wrappers only — otherwise it bleeds
   onto the shared .lh-pagination__page/__btn anchors (snippets/pagination.liquid),
   forcing each link to width:100% and stacking them vertically. */
.lh-pagination :is(.page, .prev, .next) a { color: var(--text-body); display: inline-grid; place-items: center; width: 100%; height: 100%; }
.lh-pagination :is(.page, .prev, .next) a:hover { color: var(--color-primary); }
.lh-pagination .page:hover { background: var(--surface-sunken); }
.lh-pagination .page.current { background: var(--color-action); color: var(--color-on-action); font-weight: var(--weight-semibold); }
.lh-pagination .deco { color: var(--text-subtle); }

/* ---- Generic carousel dots (created by [data-carousel] in global.js) ----
   Shared so every carousel (testimonials, product recommendations, …) styles
   its dots without each section re-declaring them. */
.lh-carousel-dot {
  width: 8px; height: 8px; padding: 0; border: 0;
  border-radius: var(--radius-circle);
  background: var(--border-strong);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-carousel-dot:hover { background: var(--text-subtle); }
.lh-carousel-dot.is-active { width: 24px; border-radius: var(--radius-pill); background: var(--color-primary); }

/* ---- Branded image placeholder (snippets/image-placeholder.liquid) ----
   Fills its container and crops gracefully. Per-section __placeholder-svg
   classes may add their own sizing; this is the safe global default. */
.lh-placeholder { display: block; width: 100%; height: 100%; }

/* ---- Reduced motion (DS global reset) ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}