/* J&G's Hair Fashion — Applied base theme (Adanola system).
   Load order: variables.css -> theme.css. */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--color-paper-white);color:var(--color-carbon-ink);
  font-family:var(--font-primary);font-size:var(--text-body);line-height:var(--leading-body);
  letter-spacing:var(--letter-spacing-brand);font-weight:var(--font-weight-regular);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,picture,svg,video{display:block;max-width:100%;}
img{border-radius:var(--radius-images);}
a{color:inherit;text-decoration:none;}

/* Type roles */
.h-display{font-size:var(--text-display);line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);font-weight:var(--font-weight-regular);} /* whisper hero */
.h-heading{font-size:var(--text-heading);line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);font-weight:var(--font-weight-bold);}
.t-body{font-size:var(--text-body);line-height:var(--leading-body);}
.t-caption{font-size:12px;line-height:1.2;}
.t-micro{font-size:9px;line-height:1;letter-spacing:0.06em;text-transform:uppercase;}
.t-secondary{color:var(--color-smoke-charcoal);}

/* Hairlines / surfaces */
.hairline{border:0;border-top:1px solid var(--color-carbon-ink);}
.surf-mist{background:var(--color-soft-mist);}
.surf-warm{background:var(--color-warm-fog);}
.surf-sand{background:var(--color-blush-sand);}
.surf-tide{background:var(--color-pale-tide);}
.surf-ink{background:var(--color-carbon-ink);color:var(--color-paper-white);}

/* Buttons */
.btn{font-family:var(--font-primary);font-size:12px;font-weight:var(--font-weight-medium);
  letter-spacing:var(--letter-spacing-brand);cursor:pointer;border-radius:var(--radius-buttons);
  display:inline-flex;align-items:center;justify-content:center;transition:background .18s,color .18s;}
.btn--ghost{background:transparent;border:1px solid var(--color-carbon-ink);
  color:var(--color-carbon-ink);padding:6px 24px;} /* DEFAULT primary action */
.btn--ghost:hover{background:var(--color-carbon-ink);color:var(--color-paper-white);}
.btn--ghost.on-dark{border-color:var(--color-paper-white);color:var(--color-paper-white);}
.btn--fill{background:var(--color-carbon-ink);color:var(--color-paper-white);
  border:1px solid var(--color-carbon-ink);padding:4px 10px;} /* Quick Add */

/* Inputs */
.input-underline{background:transparent;border:0;border-bottom:1px solid var(--color-smoke-charcoal);
  border-radius:var(--radius-inputs) var(--radius-inputs) 0 0;font-family:var(--font-primary);
  font-size:12px;color:var(--color-carbon-ink);padding:6px 2px;}
.input-underline::placeholder{color:var(--color-smoke-charcoal);opacity:.6;}

/* Layout */
.container{max-width:var(--page-max-width);margin-inline:auto;padding-inline:16px;}
.section{padding-block:var(--section-gap);}
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:var(--spacing-16);row-gap:var(--section-gap);}
@media (max-width:1024px){.grid-products{grid-template-columns:repeat(2,1fr);}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* =====================================================================
   J&G additions (on top of theme.css, verbatim above)
   ===================================================================== */
[hidden] { display: none !important; }
html { scroll-behavior: auto; }
html.is-locked { overflow: hidden; }
body { font-feature-settings: "ss01", "cv11"; font-optical-sizing: auto; }
h1, h2, h3, h4, p, figure, address { margin: 0; font-style: normal; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.surf-ink :focus-visible, [data-tone="dark"] :focus-visible, .slot--dark :focus-visible { outline-color: var(--color-paper-white); }
.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-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--color-paper-white); color: var(--color-ink); border: 1px solid var(--color-ink); padding: 8px 12px; font-size: 12px; font-weight: var(--font-weight-medium); text-transform: uppercase; }
.skip-link:focus { top: 8px; }
.container { padding-inline: var(--gutter); }
.container--flush { padding-inline: 0; }
.section { padding-block: var(--section-pad); }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.t-label { font-size: 12px; line-height: 1.2; font-weight: var(--font-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; }
.tok { font-variant-numeric: tabular-nums; }
.grid-products { row-gap: var(--grid-row-gap); }
/* reveal gate: hidden only once JS has confirmed it will animate; never under reduced motion */
.js .reveal { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; } }
/* 44px hit areas on touch without changing the compact visual sizes */
@media (pointer: coarse) {
  .hit { position: relative; }
  .hit::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}