/* ============================================================
   TYNORA — Main Stylesheet
   Premium Jewellery Ecommerce Frontend
   Built to match Shopify Atelier Theme (Pixel-Perfect)
   ============================================================ */

/* Google Fonts — preload for performance */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@1,6..72,200;1,6..72,300;1,6..72,400&family=Red+Hat+Text:wght@300;400;500;600&display=swap');

/* Design tokens */
@import url('./variables.css');

/* Animations */
@import url('./animations.css');

/* Components */
@import url('./components.css');

/* Responsive */
@import url('./responsive.css');

/* ============================================================
   CSS Reset & Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-size-body);
  line-height: var(--lh-body-loose);
  color: var(--color-fg);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

::selection      { background-color: var(--color-black); color: var(--color-white); }
::-moz-selection { background-color: var(--color-black); color: var(--color-white); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.4); }
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent; }

:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }

a { color: inherit; text-decoration: none; transition: opacity var(--transition); }
a:hover { color: inherit; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; object-fit: cover; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

/* ── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--color-fg-heading); margin: 0; }

h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-h1);
  line-height: var(--lh-display-tight);
  letter-spacing: var(--ls-tight);
}
h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-h2);
  line-height: var(--lh-display-tight);
  letter-spacing: var(--ls-tight);
}
h3 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-h3);
  line-height: var(--lh-heading-tight);
  letter-spacing: var(--ls-normal);
}
h4 {
  font-family: var(--font-subheading);
  font-style: italic;
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-h4);
  line-height: var(--lh-heading-normal);
  letter-spacing: var(--ls-normal);
  text-transform: none;
}
h5 {
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-size-h5);
  line-height: var(--lh-display-loose);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}
h6 {
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-size-h6);
  line-height: var(--lh-display-loose);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}
p { font-size: var(--font-size-body); line-height: var(--lh-body-loose); }

/* ── Layout ─────────────────────────────────────────────────────── */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.page-wrapper > *,
main,
header,
footer,
section,
.section,
.marquee-section,
.hero,
.announcement-bar {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.page-content { 
  flex: 1; 
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Inner pages (solid / scrolled fixed header): give top padding so title and inputs are never hidden */
.header-wrapper:not(.header-wrapper--transparent) ~ .page-content {
  padding-top: calc(var(--header-height, 60px) + var(--space-xl, 24px));
}

/* Homepage with transparent hero banner starts at 0 */
.header-wrapper--transparent ~ .page-content {
  padding-top: 0 !important;
}

.page-width {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);
  box-sizing: border-box;
}
.page-width--narrow {
  width: 100%;
  max-width: var(--page-width-narrow);
  margin-inline: auto;
  padding-inline: var(--page-padding);
  box-sizing: border-box;
}
.section { position: relative; width: 100%; }
.section-background { position: absolute; inset: 0; z-index: -1; background-color: var(--color-bg); }
.section-spacing    { padding-block: var(--space-5xl); }
.section-spacing--sm { padding-block: var(--space-3xl); }
.section-spacing--lg { padding-block: var(--space-6xl); }

/* ── Utilities ──────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.hidden { display: none !important; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-muted   { color: var(--color-muted); }
.text-sm      { font-size: var(--font-size-sm); }
.text-xs      { font-size: var(--font-size-xs); }
.fw-normal    { font-weight: 400; }
.fw-medium    { font-weight: 500; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start   { justify-content: flex-start; }
.gap-xs  { gap: var(--gap-xs); }
.gap-sm  { gap: var(--gap-sm); }
.gap-md  { gap: var(--gap-md); }
.gap-lg  { gap: var(--gap-lg); }
.gap-xl  { gap: var(--gap-xl); }
.gap-2xl { gap: var(--gap-2xl); }

.skip-to-content {
  position: fixed; top: -100%; left: 0; z-index: 9999;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-black); color: var(--color-white);
  font-size: var(--font-size-sm); text-transform: uppercase;
  letter-spacing: var(--ls-loose); transition: top var(--transition);
}
.skip-to-content:focus { top: 0; }

.divider { border: none; border-top: 1px solid var(--color-border); margin-block: var(--space-lg); }

/* Color schemes */
[data-color-scheme="1"], .scheme-1 { background-color: #ffffff; color: #000000; --color-bg:#ffffff; --color-fg:#000000; --color-fg-heading:#000000; --color-muted:#666666; --color-border:#e6e6e6; }
[data-color-scheme="3"], .scheme-3 { background-color: #f2f2f2; color: #000000; --color-bg:#f2f2f2; --color-fg:#000000; --color-fg-heading:#000000; --color-border:#d0d0d0; }
[data-color-scheme="4"], .scheme-4 { background-color: #383838; color: #ffffff; --color-bg:#383838; --color-fg:#ffffff; --color-fg-heading:#ffffff; --color-border:#383838; --btn-primary-bg:#ffffff; --btn-primary-text:#383838; }
[data-color-scheme="5"], .scheme-5 { background-color: #000000; color: #ffffff; --color-bg:#000000; --color-fg:#ffffff; --color-fg-heading:#ffffff; --color-border:#666666; --btn-primary-bg:#ffffff; --btn-primary-text:#000000; }
[data-color-scheme="6"], .scheme-6 { background-color: transparent; color: #ffffff; --color-bg:transparent; --color-fg:#ffffff; --color-fg-heading:#ffffff; --color-border:transparent; }