/* ═══════════════════════════════════════════════════════════
   JEWEL YOUR HOME — Main Stylesheet
   Palette: Turquoise #7DD3D3 · Gold #D4AF37 · Teal #2C7A7B
═══════════════════════════════════════════════════════════ */

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

:root {
  --turquoise: #7DD3D3;
  --mint:      #B8E8E8;
  --white:     #F5FAFA;
  --gold:      #D4AF37;
  --gold-light:#E8CC6A;
  --teal:      #2C7A7B;
  --gray:      #4A5568;
  --gray-light:#718096;
  --black:     #1A1A2E;

  /* Dark theme — about page & contact section */
  --bg-dark:   #0d1b2a;
  --bg-card:   #112233;
  --border:    rgba(125,211,211,.12);
  --text-light:#f5fafa;

  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Raleway', sans-serif;
  --radius:    6px;
  --shadow:    0 4px 24px rgba(44,122,123,.12);
  --shadow-lg: 0 12px 48px rgba(44,122,123,.18);
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--gray);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Typography ── */
h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.15; color: var(--teal); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 400; }
h3 { font-size: 1.35rem; font-weight: 500; }
em { font-style: italic; color: var(--gold); }

.container {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ══════════════════════════════════ BUTTONS ════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2.2rem;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn--gold {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.btn--gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,175,55,.35);
}
.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.btn--outline:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
}
.btn--outline-teal {
  background: transparent;
  color: var(--teal);
  border-color: var(--turquoise);
}
.btn--outline-teal:hover {
  background: var(--turquoise);
  color: #fff;
}
.btn--sm { padding: .6rem 1.4rem; font-size: .75rem; }
.btn--lg { padding: 1rem 3rem; font-size: .9rem; }
.btn--full { width: 100%; justify-content: center; }
.btn--teal {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.btn--teal:hover {
  background: #3a9a9b;
  border-color: #3a9a9b;
  transform: translateY(-2px);
}

/* ══════════════════════════════════ HEADER ════════════════════════════════════ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.2rem 0;
  transition: var(--transition);
}
.header.scrolled {
  background: rgba(245,250,250,.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(44,122,123,.1);
  padding: .8rem 0;
}
.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}
.logo__jewel {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: .02em;
}
.logo__sub {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: -.1rem;
}
.header.scrolled .logo__jewel { color: var(--gold); }
.header.scrolled .logo__sub   { color: var(--teal); }
.logo--white .logo__jewel { color: var(--gold); }
.logo--white .logo__sub   { color: rgba(255,255,255,.7); }

/* Nav */
.nav {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}
.nav__link {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  transition: color var(--transition);
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link:hover { color: var(--gold); }
.header.scrolled .nav__link { color: var(--teal); }
.header.scrolled .nav__link:hover { color: var(--gold); }
/* Marks the current page's nav link, used in about.html and gallery.html headers */
.nav__link--active { color: var(--gold); }

/* Header actions */
.header__actions { display: flex; align-items: center; gap: 1.2rem; }
.lang-switcher { display: flex; align-items: center; gap: .4rem; }
.lang-switcher__btn {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255,255,255,.7);
  cursor: pointer; transition: color .2s;
}
.lang-switcher__btn.active,
.lang-switcher__btn:hover { color: var(--gold); }
.header.scrolled .lang-switcher__btn { color: var(--gray-light); }
.header.scrolled .lang-switcher__btn.active { color: var(--gold); }
.lang-switcher__sep { color: rgba(255,255,255,.3); font-size: .7rem; }
.header.scrolled .lang-switcher__sep { color: var(--gray-light); }

.account-btn {
  color: rgba(255,255,255,.9); text-decoration: none;
  padding: .3rem; display: flex; align-items: center; transition: color .2s;
}
.account-btn:hover { color: var(--gold); }
.header.scrolled .account-btn { color: var(--teal); }
.cart-btn {
  position: relative;
  background: none; border: none;
  color: rgba(255,255,255,.9);
  cursor: pointer; padding: .3rem;
  transition: color .2s;
}
.cart-btn:hover { color: var(--gold); }
.header.scrolled .cart-btn { color: var(--teal); }
.cart-count {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--gold);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none;
  cursor: pointer; padding: .3rem;
}
.menu-btn span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.9);
  border-radius: 2px; transition: var(--transition);
}
.header.scrolled .menu-btn span { background: var(--teal); }

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0; right: -100%; bottom: 0;
  width: 280px;
  background: var(--white);
  z-index: 1001;
  padding: 5rem 2rem 2rem;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: -4px 0 24px rgba(0,0,0,.1);
  transition: right var(--transition);
}
.mobile-nav.open { right: 0; }
.mobile-nav a {
  font-size: 1.1rem; font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 1px solid var(--mint);
  padding-bottom: .8rem;
}

/* ══════════════════════════════════ HERO ══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__marble {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(125,211,211,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(184,232,232,.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 60% 80%, rgba(44,122,123,.3) 0%, transparent 50%),
    radial-gradient(ellipse 90% 90% at 50% 50%, rgba(212,175,55,.06) 0%, transparent 70%),
    linear-gradient(145deg, #b8e8e8 0%, #7DD3D3 30%, #4aadae 55%, #2C7A7B 80%, #1a5a5b 100%);
  animation: marbleShift 18s ease-in-out infinite alternate;
}

@keyframes marbleShift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(4deg) brightness(1.04); }
  100% { filter: hue-rotate(-3deg) brightness(.97); }
}

/* Marble veins overlay */
.hero__marble::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 80px,
      rgba(212,175,55,.12) 80px,
      rgba(212,175,55,.12) 81px,
      transparent 81px,
      transparent 200px
    ),
    repeating-linear-gradient(
      30deg,
      transparent 0px,
      transparent 120px,
      rgba(255,255,255,.08) 120px,
      rgba(255,255,255,.08) 121px,
      transparent 121px,
      transparent 280px
    );
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
  padding: 0 2rem;
  animation: heroFadeUp .9s ease both;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.4rem;
  text-shadow: 0 1px 8px rgba(212,175,55,.3);
}
/* index.html's hero__eyebrow is currently left empty (the "Isabella Stefunkova
   Pouzancre · Riyadh" line was removed from the homepage) — collapse its
   margin so it doesn't leave a gap above .hero__title. Editable via the admin
   visual editor (data-edit="hero.eyebrow_en"); if text is added back, this
   :empty rule stops applying automatically. */
.hero__eyebrow:empty { margin-bottom: 0; }

.hero__title {
  color: #fff;
  font-size: clamp(3.2rem, 7vw, 5.8rem);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 1.6rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.18);
}
.hero__title em {
  color: var(--gold-light);
  font-style: italic;
  display: block;
  font-size: 1.08em;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255,255,255,.9);
  max-width: 580px;
  margin: 0 auto 2.8rem;
  line-height: 1.85;
  letter-spacing: .01em;
}

.hero__ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.6);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  animation: scrollPulse 2.5s ease-in-out infinite;
}
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
}
@keyframes scrollPulse {
  0%,100% { opacity: .5; transform: translateX(-50%) translateY(0); }
  50%     { opacity: 1;  transform: translateX(-50%) translateY(5px); }
}

/* ══════════════════════════════════ SECTION BASE ══════════════════════════════ */
.section { padding: 6rem 0; }

.section__header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section__eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .8rem;
}
.section__title { margin-bottom: .8rem; }
.section__subtitle {
  font-size: .95rem;
  color: var(--gray-light);
  max-width: 500px;
  margin: 0 auto;
}
.section__cta { text-align: center; margin-top: 3rem; }
/* Gold variant of .section__eyebrow, used in the Commission CTA section of index.html */
.section__eyebrow--gold { color: var(--gold); }
/* #collection-cta starts hidden; the inline <script> in index.html shows it
   (cta.style.display = '') when there are more than 6 artworks to link to gallery.html */
#collection-cta { display: none; }

/* ══════════════════════════════════ FILTER TABS ═══════════════════════════════ */
.filter-tabs {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.filter-tab {
  padding: .55rem 1.6rem;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid var(--mint);
  background: transparent;
  color: var(--gray-light);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}
.filter-tab.active,
.filter-tab:hover {
  background: var(--turquoise);
  border-color: var(--turquoise);
  color: #fff;
}

/* ══════════════════════════════ ARTWORK GRID ════════════════════════════════ */
.artworks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) {
  .artworks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .artworks-grid { grid-template-columns: 1fr; }
}
/* Status message shown inside #artworks-grid (loading/empty/error states),
   set via innerHTML by the inline <script> in index.html */
.artworks-grid__message { color: var(--gray-light); text-align: center; padding: 3rem 0; grid-column: 1/-1; }

.artwork-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.artwork-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.artwork-card.hidden { display: none; }

.artwork-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.artwork-card__img {
  width: 100%; height: 100%;
  transition: transform .5s ease;
  background-size: cover;
  background-position: center;
}
.artwork-card:hover .artwork-card__img { transform: scale(1.05); }

/* Artwork placeholder gradients */
.artwork-card__img--1 {
  background: linear-gradient(135deg, #7DD3D3 0%, #4aadae 30%, #D4AF37 60%, #b8960c 100%);
}
.artwork-card__img--2 {
  background: linear-gradient(160deg, #2C7A7B 0%, #7DD3D3 40%, #D4AF37 70%, #f0c040 100%);
}
.artwork-card__img--3 {
  background: linear-gradient(120deg, #B8E8E8 0%, #7DD3D3 35%, #c85a2a 65%, #D4AF37 100%);
}
.artwork-card__img--4 {
  background: linear-gradient(145deg, #D4AF37 0%, #7DD3D3 40%, #2C7A7B 70%, #B8E8E8 100%);
}
.artwork-card__img--5 {
  background: linear-gradient(110deg, #2C7A7B 0%, #5ab8b9 30%, #B8E8E8 55%, #D4AF37 85%, #9c6b00 100%);
}
.artwork-card__img--6 {
  background: linear-gradient(155deg, #f0e8c0 0%, #D4AF37 25%, #7DD3D3 55%, #2C7A7B 100%);
}

.artwork-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(44,122,123,.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}
.artwork-card:hover .artwork-card__overlay { opacity: 1; }

.artwork-card__badge {
  position: absolute;
  top: .8rem; left: .8rem;
  background: var(--gold);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 50px;
}
.artwork-card__badge--sold { background: var(--gray-light); }

.artwork-card__info {
  padding: 1.2rem 1.4rem 1.4rem;
}
.artwork-card__title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: .25rem;
}
.artwork-card__medium {
  font-size: .78rem;
  color: var(--gray-light);
  margin-bottom: .8rem;
}
.artwork-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.artwork-card__price {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--teal);
}
.add-cart-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.add-cart-btn:hover { background: var(--gold-light); transform: scale(1.1); }
.add-cart-btn.disabled { background: var(--mint); cursor: not-allowed; }
.add-cart-btn.fav-btn.active { background: var(--teal); }

/* ══════════════════════════════ ABOUT PREVIEW ════════════════════════════════ */
.about-preview {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(184,232,232,.2) 0%, rgba(245,250,250,1) 100%);
}
.about-preview__marble {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 0% 50%, rgba(125,211,211,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 20%, rgba(212,175,55,.06) 0%, transparent 50%);
  pointer-events: none;
}
.about-preview__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .about-preview__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.about-preview__photo { display: flex; justify-content: center; }
.about-preview__photo-frame {
  width: 340px; height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--mint);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.about-preview__photo-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--turquoise));
  z-index: -1;
}
.about-preview__photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--mint) 0%, var(--turquoise) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; color: var(--teal);
}
.about-preview__photo-placeholder p {
  font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .7;
}

.about-preview__body {
  color: var(--gray);
  margin-bottom: 1rem;
  line-height: 1.8;
}
/* Adds top spacing to the "Discover the Story" CTA below .about-preview__body */
.about-preview__cta { margin-top: 2rem; }

/* ══════════════════════════════════ PROCESS ═══════════════════════════════════ */
.process { background: var(--white); }
.process__steps {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
}
@media (max-width: 768px) {
  .process__steps { flex-direction: column; gap: 2rem; }
  .process__connector { display: none; }
}

.process__step {
  flex: 1;
  max-width: 280px;
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(125,211,211,.2);
  transition: var(--transition);
}
.process__step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--turquoise);
}
.process__connector {
  width: 60px; height: 2px;
  background: linear-gradient(to right, var(--turquoise), var(--gold));
  flex-shrink: 0;
}
.process__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint) 0%, rgba(212,175,55,.15) 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  color: var(--teal);
}
.process__title {
  margin-bottom: .6rem;
  color: var(--teal);
}
.process__text { font-size: .88rem; color: var(--gray-light); }

/* ════════════════════════════ COMMISSION CTA ══════════════════════════════════ */
.commission-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.commission-cta__marble {
  position: absolute; inset: 0;
  background:
    linear-gradient(145deg, #1a5a5b 0%, #2C7A7B 40%, #3a9a9b 70%, #2C7A7B 100%);
}
.commission-cta__marble::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      -40deg, transparent 0, transparent 100px,
      rgba(212,175,55,.08) 100px, rgba(212,175,55,.08) 101px,
      transparent 101px, transparent 250px
    );
}
.commission-cta__inner {
  position: relative; z-index: 1;
  padding: 5rem 2rem;
  max-width: 680px;
  margin: 0 auto;
}
.commission-cta__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: #fff;
  margin-bottom: 1.2rem;
}
.commission-cta__text {
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: .8rem;
}
.commission-cta__timeline {
  font-size: .8rem;
  color: var(--gold-light);
  letter-spacing: .05em;
  margin-bottom: 2.5rem;
}

/* ═══════════════════════════ INSTAGRAM ═══════════════════════════════════════ */
.instagram { background: var(--white); }
.instagram__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .instagram__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .instagram__grid { grid-template-columns: repeat(2, 1fr); }
}

.insta-tile {
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.insta-tile--1 { background: linear-gradient(135deg, #7DD3D3, #2C7A7B); }
.insta-tile--2 { background: linear-gradient(135deg, #D4AF37, #7DD3D3); }
.insta-tile--3 { background: linear-gradient(135deg, #2C7A7B, #B8E8E8); }
.insta-tile--4 { background: linear-gradient(135deg, #B8E8E8, #D4AF37); }
.insta-tile--5 { background: linear-gradient(135deg, #4aadae, #D4AF37); }
.insta-tile--6 { background: linear-gradient(135deg, #D4AF37, #2C7A7B); }

.insta-tile__overlay {
  position: absolute; inset: 0;
  background: rgba(44,122,123,.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--transition);
}
.insta-tile:hover .insta-tile__overlay { opacity: 1; }

/* ═══════════════════════════ NEWSLETTER ════════════════════════════════════ */
.newsletter {
  background: linear-gradient(135deg, rgba(125,211,211,.08) 0%, rgba(212,175,55,.05) 100%);
  border-top: 1px solid var(--mint);
  border-bottom: 1px solid var(--mint);
}
.newsletter__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 768px) {
  .newsletter__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
.newsletter__title {
  font-size: 2rem; font-weight: 400;
  margin-bottom: .8rem;
}
.newsletter__body { color: var(--gray-light); font-size: .92rem; line-height: 1.8; }

.newsletter__form { display: flex; flex-direction: column; gap: .8rem; }
.newsletter__input {
  width: 100%;
  padding: .85rem 1.2rem;
  border: 1.5px solid var(--mint);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--gray);
  outline: none;
  transition: border-color .2s;
}
.newsletter__input:focus { border-color: var(--turquoise); }
.newsletter__disclaimer {
  font-size: .72rem; color: var(--gray-light);
  text-align: center; margin-top: .3rem;
}

/* ═══════════════════════════════ FOOTER ════════════════════════════════════ */
.footer { background: var(--black); color: rgba(255,255,255,.7); }
.footer__top { padding: 4rem 0; }
.footer__top-inner {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 768px) {
  .footer__top-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
.footer__tagline { font-size: .85rem; line-height: 1.7; margin: 1rem 0 1.5rem; }
.footer__social { display: flex; gap: .8rem; }
.social-link {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  transition: var(--transition);
}
.social-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}
.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 480px) {
  .footer__links { grid-template-columns: repeat(2, 1fr); }
}
.footer__col { display: flex; flex-direction: column; gap: .7rem; }
.footer__col-title {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .3rem;
}
.footer__col a {
  font-size: .84rem;
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.footer__col a:hover { color: var(--turquoise); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.4rem 0;
}
.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer__bottom p { font-size: .75rem; color: rgba(255,255,255,.3); }
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a {
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  transition: color .2s;
}
.footer__legal a:hover { color: var(--turquoise); }

/* ═══════════════════════════ CART DRAWER ════════════════════════════════════ */
.cart-drawer {
  position: fixed;
  top: 0; right: -420px; bottom: 0;
  width: 380px;
  background: var(--white);
  z-index: 1100;
  box-shadow: -4px 0 40px rgba(0,0,0,.15);
  transition: right var(--transition);
  display: flex; flex-direction: column;
}
.cart-drawer.open { right: 0; }
.cart-drawer__header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--mint);
  display: flex; justify-content: space-between; align-items: center;
}
.cart-drawer__header h3 {
  font-size: 1.1rem; font-weight: 500; color: var(--teal);
}
.cart-drawer__close {
  background: none; border: none; font-size: 1.1rem;
  color: var(--gray-light); cursor: pointer; padding: .3rem;
}
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.cart-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 200px; gap: 1rem; color: var(--gray-light);
}
.cart-empty p { font-size: .88rem; }
.cart-drawer__footer { padding: 1.2rem; border-top: 1px solid var(--mint); }

.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1099;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.cart-overlay.visible { opacity: 1; pointer-events: all; }

/* ═══════════════════════════════ REVEAL ANIMATIONS ════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════ RESPONSIVE NAV ════════════════════════════════════ */
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .mobile-nav { display: flex; }
}

/* ═══════════════════════ GALLERY PAGE ═══════════════════════════════════════ */

/* ── Intro header ── */
.gallery-intro {
  padding: 8rem 0 3rem;
  text-align: center;
  background: linear-gradient(160deg, rgba(184,232,232,.2) 0%, #fafafa 100%);
  border-bottom: 1px solid #E8F5F5;
}
.gallery-intro__eyebrow {
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  color: #7DD3D3; margin-bottom: .8rem;
}
.gallery-intro h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #2C7A7B; font-weight: 400; margin-bottom: .5rem;
}
.gallery-intro p { color: #718096; font-size: .9rem; }

/* ── Filter bar ── */
.gallery-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 0; border-bottom: 1px solid #E8F5F5;
  gap: 1rem; flex-wrap: wrap;
}
.filter-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-pill {
  padding: .35rem 1rem; border: none; border-radius: 20px;
  font-size: .72rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: #718096; cursor: pointer;
  background: #fff; transition: all .2s; font-family: inherit;
}
.filter-pill:hover { color: #2C7A7B; }
.filter-pill.active { background: #2C7A7B; color: #fff; }
.gallery-count { font-size: .78rem; color: #718096; white-space: nowrap; }
.gallery-count strong { color: #2C7A7B; }

/* ── Masonry grid ── */
.gallery-grid { columns: 3; column-gap: 14px; padding: 2rem 0 5rem; }
@media (max-width: 1000px) { .gallery-grid { columns: 2; } }
@media (max-width: 560px)  { .gallery-grid { columns: 1; } }
/* Status message shown inside #gallery-grid (loading/empty/error states),
   set via innerHTML by the inline <script> in gallery.html */
.gallery-grid__message { columns: 1; text-align: center; padding: 4rem; color: var(--gray-light); font-size: .9rem; }
/* Smaller variant used for the "no results in this category" / "could not load" messages */
.gallery-grid__message--sm { padding: 3rem; font-size: 1rem; }

/* ── Artwork card ── */
.aw-card {
  break-inside: avoid; margin-bottom: 14px; position: relative;
  cursor: pointer; border-radius: 3px; overflow: hidden;
  background: #E8F0F0; display: block;
}
.aw-card__visual { position: relative; overflow: hidden; }
.aw-card__visual img, .aw-card__gradient {
  width: 100%; display: block; object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.aw-card__gradient { aspect-ratio: 3/4; }
.aw-card:hover .aw-card__visual img,
.aw-card:hover .aw-card__gradient { transform: scale(1.04); }

.aw-card__hover-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3rem 1.1rem .9rem;
  background: linear-gradient(transparent, rgba(15,35,35,.7));
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.aw-card:hover .aw-card__hover-label { opacity: 1; }
.aw-card__hover-label span {
  font-family: 'Cormorant Garamond', serif;
  color: #fff; font-size: 1rem; font-weight: 400; letter-spacing: .03em;
}

.aw-card__sold-tag {
  position: absolute; top: .85rem; left: .85rem;
  background: rgba(20,40,40,.65); backdrop-filter: blur(4px);
  color: #fff; font-size: .6rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 2px;
}

.aw-card__details {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  padding: .9rem 1.1rem .8rem;
  transform: translateY(105%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  border-top: 2px solid #7DD3D3;
}
.aw-card.open .aw-card__details { transform: translateY(0); }
.aw-card__d-title {
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
  color: #2C7A7B; margin-bottom: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw-card__d-meta { font-size: .72rem; color: #718096; margin-bottom: .65rem; }
.aw-card__d-footer {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.aw-card__d-price {
  font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: #2C7A7B; font-weight: 400;
}
.aw-card__d-price.sold {
  color: #718096; font-size: .8rem; font-family: inherit; letter-spacing: .05em; text-transform: uppercase;
}
.aw-card__d-actions { display: flex; gap: .4rem; }
.btn-details {
  padding: .35rem .8rem; border: 1.5px solid #2C7A7B; border-radius: 4px;
  color: #2C7A7B; font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  text-decoration: none; background: none; cursor: pointer;
  font-family: inherit; transition: all .2s;
}
.btn-details:hover { background: #2C7A7B; color: #fff; }
.btn-order {
  padding: .35rem .8rem; border: none; border-radius: 4px;
  background: #D4AF37; color: #fff; font-size: .72rem;
  font-weight: 600; letter-spacing: .05em; cursor: pointer;
  font-family: inherit; transition: background .2s;
}
.btn-order:hover { background: #E8CC6A; }
.btn-order.active { background: #2C7A7B; }

/* ═══════════════════ ABOUT PAGE — DARK THEME ════════════════════════════════ */
.about-hero {
  min-height: 80vh; display: flex; align-items: flex-end;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0d1b2a 0%, #1a2f3d 50%, #0d1b2a 100%);
  padding-bottom: 4rem;
}
.about-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 70% 40%, rgba(125,211,211,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(212,175,55,.06) 0%, transparent 60%);
}
.about-hero__content {
  position: relative; z-index: 1; padding: 8rem 2rem 0;
  max-width: 900px; margin: 0 auto; width: 100%;
}
.about-hero__eyebrow {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.about-hero__name {
  font-family: var(--font-head); font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 300; line-height: 1.05; color: var(--text-light); margin-bottom: .6rem;
}
.about-hero__name em { font-style: italic; color: var(--teal); }
.about-hero__location {
  font-size: .85rem; color: rgba(255,255,255,.45); letter-spacing: .08em; margin-bottom: 2rem;
}
.about-hero__tagline {
  font-family: var(--font-head); font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 300; font-style: italic; color: rgba(255,255,255,.65);
  max-width: 560px; line-height: 1.7;
  border-left: 2px solid var(--gold); padding-left: 1.2rem;
}
.about-hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.3); font-size: .65rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.about-hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0%,100% { opacity: .3; } 50% { opacity: .8; } }

.about-story { background: var(--bg-dark); padding: 6rem 2rem; }
.about-story__inner {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;
}
@media (max-width: 700px) { .about-story__inner { grid-template-columns: 1fr; gap: 2.5rem; } }
.about-story__photo-wrap { position: sticky; top: 7rem; }
.about-story__photo {
  aspect-ratio: 3/4; background: linear-gradient(145deg, #1a2f3d, #0d1b2a);
  border-radius: 4px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.15); font-size: .8rem; text-align: center; overflow: hidden;
}
.about-story__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder label shown inside .about-story__photo before a portrait image is set via setImg() in about.html */
.about-story__photo-placeholder { margin-top: .8rem; font-size: .75rem; }
.about-story__photo-caption {
  font-size: .72rem; color: rgba(255,255,255,.35);
  text-align: center; margin-top: .8rem; letter-spacing: .06em;
}
.about-story__eyebrow {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 1rem;
}
.about-story__title {
  font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300; color: var(--text-light); line-height: 1.2; margin-bottom: 2rem;
}
.about-story__title em { font-style: italic; color: var(--gold); }
.about-story__body { font-size: .95rem; line-height: 1.9; color: rgba(255,255,255,.65); margin-bottom: 1.4rem; }
.about-story__body strong { color: var(--text-light); font-weight: 500; }

.about-journey {
  background: var(--bg-card); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 5rem 2rem;
}
.about-journey__inner { max-width: 900px; margin: 0 auto; }
.about-journey__title {
  font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300; color: var(--text-light); margin-bottom: .5rem;
}
.about-journey__sub { color: rgba(255,255,255,.4); font-size: .82rem; margin-bottom: 3rem; }
.journey-list { display: flex; flex-direction: column; gap: 0; position: relative; }
.journey-list::before {
  content: '';
  position: absolute; left: 14px; top: 6px; bottom: 6px;
  width: 1px; background: linear-gradient(to bottom, var(--teal), var(--gold));
}
.journey-item { display: flex; gap: 2rem; padding-bottom: 2.2rem; position: relative; }
.journey-item:last-child { padding-bottom: 0; }
.journey-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-dark); border: 1px solid var(--teal);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; margin-top: 2px;
}
.journey-dot--active { background: var(--teal); border-color: var(--teal); }
.journey-dot--active::after { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
.journey-dot--past::after { content: ''; width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }
.journey-place { font-family: var(--font-head); font-size: 1.1rem; color: var(--text-light); margin-bottom: .2rem; }
.journey-country { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.journey-desc { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.6; }

.about-technique { background: var(--bg-dark); padding: 6rem 2rem; }
.about-technique__inner { max-width: 900px; margin: 0 auto; }
.about-technique__eyebrow {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .8rem;
}
.about-technique__title {
  font-family: var(--font-head); font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300; color: var(--text-light); margin-bottom: .6rem;
}
.about-technique__sub { color: rgba(255,255,255,.45); font-size: .88rem; max-width: 560px; }
.technique-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
@media (max-width: 700px) { .technique-grid { grid-template-columns: 1fr; } }
.technique-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.8rem; transition: border-color .3s;
}
.technique-card:hover { border-color: var(--teal); }
.technique-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, rgba(125,211,211,.15), rgba(212,175,55,.1));
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; color: var(--teal);
}
.technique-title { font-family: var(--font-head); font-size: 1.05rem; color: var(--text-light); margin-bottom: .5rem; }
.technique-desc  { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.65; }

.about-stats {
  background: linear-gradient(135deg, rgba(125,211,211,.06), rgba(212,175,55,.04));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4rem 2rem;
}
.stats-grid {
  max-width: 700px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center;
}
@media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
.stat-number {
  font-family: var(--font-head); font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300; color: var(--teal); line-height: 1;
}
.stat-label {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-top: .5rem;
}

.about-cta { background: var(--bg-dark); padding: 6rem 2rem; text-align: center; }
.about-cta__title {
  font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300; color: var(--text-light); margin-bottom: 1rem;
}
.about-cta__title em { font-style: italic; color: var(--gold); }
.about-cta__sub {
  color: rgba(255,255,255,.5); font-size: .9rem; margin-bottom: 2.5rem;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════ CONTACT SECTION ════════════════════════════════════════ */
.contact-section {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5rem 0;
}
.contact-section__inner { max-width: 640px; margin: 0 auto; padding: 0 2rem; }
.contact-section .section__header { text-align: left; }
.contact-section .section__eyebrow { color: var(--gold); }
.contact-section .section__title { color: var(--text-light); }
.contact-section__sub { color: rgba(255,255,255,.55); font-size: .9rem; margin-top: .5rem; }
.contact-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form__field { display: flex; flex-direction: column; gap: .35rem; }
.contact-form__label {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light);
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  background: var(--bg-dark); border: 1px solid var(--border);
  color: var(--text-light); padding: .7rem 1rem; border-radius: 8px;
  font-family: var(--font-body); font-size: .9rem; outline: none;
  transition: border-color .2s; width: 100%;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus { border-color: var(--turquoise); }
.contact-form__select option { background: var(--bg-dark); }
.contact-form__textarea { resize: vertical; }
.contact-form__success { color: #20c997; font-size: .85rem; display: none; }
.contact-form__error { color: #f08080; font-size: .85rem; display: none; }
.contact-form__error a { color: var(--turquoise); }

/* ═══════════════════════ PAGE (generic) ══════════════════════════════════════ */
.page-hero {
  padding: 7rem 0 3rem;
  background: radial-gradient(ellipse at 30% 50%, rgba(125,211,211,.2) 0%, transparent 60%),
    linear-gradient(180deg, #F0F7F7 0%, #fff 100%);
  text-align: center;
}
.page-hero__eyebrow { font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: #7DD3D3; margin-bottom: 1rem; }
.page-hero__title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3.5rem); color: #2C7A7B; line-height: 1.15; }
.page-body { max-width: 760px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.page-body p { color: #4A5568; line-height: 1.85; font-size: 1.02rem; margin-bottom: 1.5rem; }
.page-body h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: #2C7A7B; margin: 2.5rem 0 1rem; }
.page-body h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: #2C7A7B; margin: 2rem 0 .8rem; }
.not-found { text-align: center; padding: 6rem 2rem; }
.not-found h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: #2C7A7B; margin-bottom: 1rem; }
.not-found p { color: #718096; margin-bottom: 2rem; }
/* page.html starts with #page-hero, #page-body and #not-found hidden; the inline
   <script> in page.html toggles these to display:block once content.json loads
   and the requested page slug is resolved (or shows #not-found if missing). */
#page-hero, .page-body, .not-found { display: none; }

/* ═══════════════════════ ARTWORK DETAIL PAGE ══════════════════════════════════ */
/* Used only by artwork.html (<body class="aw-page">). The #ids below (#aw-content,
   #aw-tabs, #gallery-strip, #proc-main, #process-strip, #aw-desc, #not-found,
   #aw-related-section) are toggled at runtime by the inline <script> in
   artwork.html via show()/hide() (sets style.display on the element). If you
   rename any of these ids in artwork.html, update both this file and that script,
   or the show/hide toggles will silently stop working. */
body.aw-page { background: #fafafa; }

/* Initial hidden state — revealed by the boot script in artwork.html once
   content.json data has loaded successfully */
.aw-page #aw-content { display: none; }

/* ── Layout ── */
.aw-hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 4rem;
  padding: 7rem 0 4rem;
  align-items: start;
}
@media (max-width: 900px) {
  .aw-hero { grid-template-columns: 1fr; gap: 2rem; padding: 6rem 0 2rem; }
}

/* ── Main image ── */
.aw-images { position: sticky; top: 90px; }
.aw-gallery { position: relative; }
.aw-main-img {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #E8F0F0;
}
.aw-main-img img, .aw-main-gradient {
  width: 100%; display: block; object-fit: cover; max-height: 68vh;
}
.aw-main-gradient { aspect-ratio: 3/4; }

/* Image fade animation */
@keyframes aw-fadein {
  from { opacity: 0; transform: scale(1.012); }
  to   { opacity: 1; transform: scale(1); }
}
.aw-main-img img { animation: aw-fadein .3s ease; }

/* Main image arrows */
.aw-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  background: rgba(255,255,255,.58); backdrop-filter: blur(5px);
  border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #2C7A7B; font-size: 1.15rem;
  transition: background .2s, opacity .2s;
  z-index: 10; opacity: .8;
}
.aw-arrow:hover  { background: rgba(255,255,255,.9); opacity: 1; }
.aw-arrow:active { transform: translateY(-50%) scale(.9); }
.aw-arrow--prev  { left: .6rem; }
.aw-arrow--next  { right: .6rem; }
.aw-arrow[hidden] { display: none; }

/* ── Tab bar ── */
/* Hidden until the boot script in artwork.html determines there's more than one
   tab to show (gallery + description and/or process), then calls show('aw-tabs') */
#aw-tabs { display: none; }
.aw-tabs {
  display: flex;
  border-bottom: 2px solid #E8F5F5;
  margin-top: 1rem;
}
.aw-tab {
  padding: .55rem 1.1rem;
  background: none; border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #a0aec0;
  transition: color .2s, border-color .2s;
}
.aw-tab:hover  { color: #2C7A7B; }
.aw-tab.active { color: #2C7A7B; border-bottom-color: #7DD3D3; }

/* ── Tab panels ── */
.aw-tabpanel { padding-top: .85rem; }
.aw-tabpanel[hidden] { display: none; }

/* ── Thumbnail strip carousel ── */
/* #gallery-strip / #process-strip start hidden — artwork.html's boot script shows
   each one only when the artwork has more than one image for that tab */
#gallery-strip, #process-strip { display: none; }
.aw-strip {
  display: flex; align-items: center; gap: .3rem;
}
.aw-strip-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: rgba(125,211,211,.14);
  border: 1.5px solid #B8E8E8;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #2C7A7B; font-size: .95rem;
  transition: background .2s;
}
.aw-strip-btn:hover    { background: rgba(125,211,211,.38); }
.aw-strip-btn:disabled { opacity: .3; cursor: default; }
.aw-strip-scroll { flex: 1; overflow: hidden; }
.aw-strip-track {
  display: flex; gap: .4rem;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.aw-thumb {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 4px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, transform .15s;
  background: #E8F0F0;
}
.aw-thumb:hover  { transform: scale(1.06); }
.aw-thumb:active { transform: scale(.95); }
.aw-thumb.active { border-color: #7DD3D3; box-shadow: 0 0 0 2px rgba(125,211,211,.35); }
.aw-thumb img    { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Process tab ── */
/* #proc-main starts hidden — shown by showProcImage() in artwork.html when the
   artwork has process images */
#proc-main { display: none; }
.aw-proc-main {
  width: 100%; border-radius: 5px; overflow: hidden;
  background: #E8F0F0; margin-bottom: .75rem;
}
.aw-proc-main img {
  width: 100%; display: block; object-fit: cover; max-height: 54vh;
  animation: aw-fadein .3s ease;
}
.aw-proc-text {
  color: #4A5568; line-height: 1.85; font-size: .9rem;
  margin-bottom: .9rem;
}
.aw-proc-text p { margin-bottom: .8rem; }

/* ── Description tab ── */
.aw-desc-text {
  color: #4A5568; line-height: 1.9; font-size: .92rem; max-width: 620px;
}
.aw-desc-text p { margin-bottom: 1rem; }

/* ── Info sidebar ── */
.aw-info { padding-top: .5rem; }
.aw-info__eyebrow {
  font-size: .67rem; letter-spacing: .22em; text-transform: uppercase;
  color: #7DD3D3; margin-bottom: .6rem;
}
.aw-info__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #2C7A7B; font-weight: 400; line-height: 1.15;
  margin-bottom: 1.2rem;
}
.aw-info__specs { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.5rem; }
.aw-info__spec {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0; border-bottom: 1px solid #E8F5F5; font-size: .84rem;
}
.aw-info__spec-label { color: #718096; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aw-info__spec-value { color: #2D3748; }
/* #aw-desc starts hidden — shown by show('aw-desc') in artwork.html only if the
   artwork has a desc_en field */
#aw-desc { display: none; }
.aw-info__desc { color: #4A5568; line-height: 1.8; font-size: .9rem; margin-bottom: 1.8rem; }
.aw-info__price-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 0; border-top: 2px solid #B8E8E8; border-bottom: 2px solid #B8E8E8;
  margin-bottom: 1.1rem;
}
.aw-info__price-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #718096; }
.aw-info__price { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: #2C7A7B; }
.aw-info__sold {
  background: #f0f0f0; color: #718096;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .7rem 1.2rem; border-radius: 6px; text-align: center;
}
.btn-add-cart {
  width: 100%; padding: .9rem;
  background: #D4AF37; color: #fff; border: none; border-radius: 6px;
  font-family: inherit; font-size: .84rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .2s; margin-bottom: .65rem;
}
.btn-add-cart:hover { background: #E8CC6A; }
.btn-enquire {
  width: 100%; padding: .72rem; background: none; color: #2C7A7B;
  border: 1.5px solid #7DD3D3; border-radius: 6px;
  font-family: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; text-decoration: none; display: block; text-align: center;
  transition: background .2s;
}
.btn-enquire:hover { background: #E8F5F5; }
.aw-info__shipping {
  display: flex; align-items: center; gap: .5rem;
  font-size: .73rem; color: #718096; margin-top: 1rem;
}

/* ── Related section ── */
.aw-section { padding: 3rem 0; border-top: 1px solid #E8F5F5; }
.aw-section__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; color: #2C7A7B; font-weight: 400; margin-bottom: 1.2rem;
}
.related-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 1.2rem;
}
@media (max-width: 640px) { .related-grid { grid-template-columns: 1fr 1fr; } }
.related-card { border-radius: 4px; overflow: hidden; cursor: pointer; text-decoration: none; display: block; }
.related-card__img { aspect-ratio: 3/4; background: #E8F0F0; overflow: hidden; }
.related-card__img img, .related-card__grad {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s;
}
.related-card:hover .related-card__img img,
.related-card:hover .related-card__grad { transform: scale(1.04); }
.related-card__title { font-size: .8rem; color: #2C7A7B; margin-top: .5rem; font-family: 'Cormorant Garamond', serif; }
.related-card__price { font-size: .7rem; color: #718096; }

/* ── Toast / not-found ── */
.aw-page #not-found { display: none; text-align: center; padding: 8rem 2rem; }
.aw-page #not-found h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: #2C7A7B; margin-bottom: 1rem; }
/* Used for the static #not-found block AND re-injected by showError() in
   artwork.html's inline script — keep both in sync if you rename these classes */
/* Shared by the static #not-found block and the HTML showError() injects in
   artwork.html's inline script */
.aw-notfound-text { color: #718096; margin-bottom: 1rem; }
.aw-notfound-btn { margin-top: 1.5rem; display: inline-block; }
/* "← Back to Gallery" link above the artwork hero */
.aw-back-link { padding: 1.5rem 0 0; font-size: .75rem; color: #718096; }
.aw-back-link a { color: #7DD3D3; text-decoration: none; }
.toast-added {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: #2C7A7B; color: #fff;
  padding: .7rem 1.6rem; border-radius: 30px;
  font-size: .82rem; font-weight: 600;
  opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 999;
}
.toast-added.show { opacity: 1; }

/* ═══════════════════════ FAVORITES + REQUEST QUOTE ═══════════════════════════
   Used by js/favorites.js (drawer rows in #cartBody, modal injected into <body>)
   and by the favorite-toggle buttons on artwork cards / the artwork detail page. */
.favorites-quote-btn {
  margin-top: .35rem; padding: .3rem .7rem;
  background: none; border: 1px solid #7DD3D3; border-radius: 4px;
  color: #2C7A7B; font-family: inherit; font-size: .68rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .2s;
}
.favorites-quote-btn:hover { background: #E8F5F5; }
.favorites-quote-all {
  display: block; width: 100%; margin-top: 1rem; padding: .8rem;
  background: #D4AF37; color: #fff; border: none; border-radius: 6px;
  font-family: inherit; font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s;
}
.favorites-quote-all:hover { background: #E8CC6A; }

/* Heart-style favorite toggle button (gallery cards, artwork detail page) */
.fav-btn {
  background: none; border: 1.5px solid #B8E8E8; border-radius: 6px;
  color: #2C7A7B; cursor: pointer; transition: background .2s, border-color .2s;
}
.fav-btn.active { background: #E8F5F5; border-color: #D4AF37; color: #D4AF37; }
.fav-btn svg { display: block; }

/* Full-width text variant used on the artwork detail page (#aw-actions) */
.aw-fav-btn {
  width: 100%; padding: .72rem; font-family: inherit;
  font-size: .8rem; font-weight: 600; margin-bottom: .65rem;
}
.aw-fav-btn:hover { background: #E8F5F5; }

/* Guest "Request Quote" modal (built/shown by openQuoteModal() in js/favorites.js) */
.quote-modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(44,122,123,.35); align-items: center; justify-content: center;
}
.quote-modal.open { display: flex; }
.quote-modal__box {
  background: #fff; border-radius: 8px; padding: 2rem;
  width: 90%; max-width: 360px; position: relative; text-align: center;
}
.quote-modal__close {
  position: absolute; top: .7rem; right: .9rem;
  background: none; border: none; color: #718096; font-size: 1rem; cursor: pointer;
}
.quote-modal__title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: #2C7A7B; margin-bottom: .6rem; }
.quote-modal__text { font-size: .82rem; color: #718096; margin-bottom: 1.2rem; }
.quote-modal__login { display: block; margin-bottom: 1rem; }
.quote-modal__divider { font-size: .72rem; color: #718096; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.quote-modal__box .contact-form__input { margin-bottom: .7rem; }
.quote-modal__send { margin-bottom: 0; }

/* ═══════════════════════ CHECKOUT PAGE ════════════════════════════════════════ */
/* Used only by checkout.html (<body class="checkout-page">). The #ids below
   (#state-empty, #state-checkout, #state-confirmation, #paypal-error) are toggled
   at runtime by the inline <script> in checkout.html. If you rename any of these
   ids in checkout.html, update this file and that script too. */
body.checkout-page { background: #F8FAFA; }

.checkout-header {
  padding: 5.5rem 0 2.5rem;
  text-align: center;
  background: linear-gradient(160deg, rgba(184,232,232,.25) 0%, #F8FAFA 100%);
  border-bottom: 1px solid #B8E8E8;
}
.checkout-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #2C7A7B;
  font-weight: 400;
}
.checkout-header p { color: #718096; font-size: .9rem; margin-top: .4rem; }

.checkout-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 820px) {
  .checkout-wrap { grid-template-columns: 1fr; }
}

.checkout-card {
  background: #fff;
  border: 1px solid #B8E8E8;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
/* Right-column payment card stays visible while scrolling the form */
.checkout-card--sticky { position: sticky; top: 90px; }
.checkout-card__header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid #E8F5F5;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.checkout-card__header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: #2C7A7B;
  font-weight: 500;
}
.checkout-card__num {
  width: 24px; height: 24px;
  background: #7DD3D3;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  flex-shrink: 0;
}
.checkout-card__body { padding: 1.4rem; }

/* Order items — order-item__thumb's `background` gradient is set inline by
   renderItems() in checkout.html using per-cart-item data (item.gradient),
   so it can't be a static class */
.order-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid #E8F5F5;
}
.order-item:last-child { border-bottom: none; }
.order-item__thumb {
  width: 60px; height: 60px;
  border-radius: 8px;
  flex-shrink: 0;
}
.order-item__info { flex: 1; min-width: 0; }
.order-item__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.08rem;
  color: #2C7A7B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order-item__sub { font-size: .78rem; color: #718096; margin-top: .15rem; }
.order-item__price { font-size: .95rem; color: #2C7A7B; font-weight: 500; white-space: nowrap; }

/* Cart drawer item rows, used by updateCartUI() in gallery.html and index.html.
   .gallery-cart-item__thumb's `background` gradient is set inline per item
   (item.gradient), so it can't be a static class — same pattern as .order-item__thumb. */
.gallery-cart-item { padding: .8rem 0; border-bottom: 1px solid var(--mint); display: flex; align-items: center; gap: .8rem; }
.gallery-cart-item__thumb { width: 44px; height: 44px; border-radius: 5px; flex-shrink: 0; overflow: hidden; }
.gallery-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-cart-item__info { flex: 1; min-width: 0; }
.gallery-cart-item__title { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: #2C7A7B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-cart-item__price { font-size: .75rem; color: var(--gray-light); }
.gallery-cart-item__remove { background: none; border: none; color: var(--gray-light); cursor: pointer; }

/* Form */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 1rem; }
.form-group--last { margin-bottom: 0; }
.form-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4A5568;
  margin-bottom: .4rem;
}
.form-input, .form-select {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid #B8E8E8;
  border-radius: 8px;
  font-family: inherit;
  font-size: .9rem;
  color: #2D3748;
  background: #fff;
  outline: none;
  transition: border-color .18s;
  box-sizing: border-box;
}
textarea.form-input { resize: vertical; }
.form-input:focus, .form-select:focus { border-color: #7DD3D3; }
.form-input.error { border-color: #e53e3e; }

/* Price breakdown */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 0;
  font-size: .9rem;
  color: #4A5568;
}
.price-row + .price-row { border-top: 1px solid #E8F5F5; }
.price-row--total {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2C7A7B;
  padding-top: .9rem;
  border-top: 2px solid #7DD3D3 !important;
  margin-top: .3rem;
}
.shipping-badge {
  font-size: .72rem;
  background: #E8F5F5;
  color: #2C7A7B;
  padding: .15rem .5rem;
  border-radius: 20px;
}

/* PayPal container */
#paypal-button-container { margin-top: 1.2rem; min-height: 48px; }
.paypal-loading {
  text-align: center;
  padding: 1.2rem;
  color: #718096;
  font-size: .85rem;
}
/* Error banner — hidden by default, shown by adding .is-visible from
   checkout.html's PayPal onError handler / SDK-load catch block */
.paypal-error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 8px;
  padding: .9rem 1rem;
  color: #c53030;
  font-size: .85rem;
  margin-top: .8rem;
  display: none;
}
.paypal-error.is-visible { display: block; }
.secure-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .75rem;
  color: #718096;
  justify-content: center;
}
.secure-note svg { flex-shrink: 0; }

/* Sandbox badge */
.sandbox-badge {
  display: inline-block;
  background: #fef3c7;
  color: #b45309;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 4px;
  margin-left: .5rem;
}

/* Fallback "no online payment configured" panel — built by checkout.html's
   boot script when settings.payment.paypal.client_id is empty */
.checkout-no-payment {
  background: var(--bg-card, #1e2a35);
  border: 1px solid var(--border, #2c3e50);
  border-radius: 12px;
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.checkout-no-payment p { color: var(--text-light, #e2e8f0); font-size: .95rem; margin: 0 0 .8rem; }
.checkout-no-payment p.muted { color: var(--gray-light, #718096); font-size: .82rem; margin: 0 0 1.1rem; }
.checkout-no-payment p.note { color: var(--gray-light, #718096); font-size: .75rem; margin: .9rem 0 0; }
.checkout-no-payment a {
  display: inline-block; background: var(--teal, #7dd3d3); color: #fff;
  text-decoration: none; padding: .7rem 1.6rem; border-radius: 8px; font-size: .9rem;
}

/* Empty state — shown by checkout.html's boot script when the cart is empty */
#state-empty { display: none; text-align: center; padding: 5rem 2rem; }
#state-empty h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: #2C7A7B; margin-bottom: 1rem; }
#state-empty p { color: #718096; margin-bottom: 2rem; }
.state-empty__icon { font-size: 3rem; margin-bottom: 1.2rem; opacity: .4; }
.state-empty__cta { margin-top: .5rem; }

/* Main checkout grid — hidden until the boot script confirms the cart isn't
   empty, see #state-checkout in checkout.html */
#state-checkout { display: none; }

/* Confirmation — shown by showConfirmation() in checkout.html after PayPal capture */
#state-confirmation { display: none; text-align: center; padding: 5rem 2rem; max-width: 560px; margin: 0 auto; }
#state-confirmation .conf-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #7DD3D3, #2C7A7B);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.8rem;
}
#state-confirmation h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; color: #2C7A7B;
  margin-bottom: .8rem;
}
#state-confirmation p { color: #718096; line-height: 1.7; margin-bottom: 1rem; }
.conf-order-id {
  display: inline-block;
  background: #E8F5F5;
  color: #2C7A7B;
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem 1rem;
  border-radius: 6px;
  letter-spacing: .05em;
  margin-bottom: 2rem;
}
.conf-meta { font-size: .85rem; }
.conf-actions { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════ ACCOUNT PAGE ═════════════════════════════════════════ */
/* .auth-page / .auth-card / .auth-* / .btn-google / .divider / .form-group /
   .form-input / .btn-auth / .auth-footer / .error-msg below are SHARED between
   account.html (login view) and register.html — both load this stylesheet, so
   if you change these, check both pages.
   #login-view / #account-view are toggled by onAuthStateChanged() in
   account.html's <script type="module">: logged-out users see #login-view,
   logged-in users see #account-view. If you rename either id, update that script too.
   NOTE: .form-group / .form-input below are scoped to .auth-card and
   .account-page because checkout.html already defines its own (different)
   .form-group / .form-input — without scoping, whichever rule loads last in
   this file would silently override the other page's form styling. */
#account-view { display: none; }

/* ── Auth card ── */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-dark); padding: 2rem 1rem;
}
.auth-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.6rem 2.2rem; width: 100%; max-width: 440px;
}
.auth-logo { text-align: center; margin-bottom: 1.8rem; }
.auth-logo a { text-decoration: none; }
.auth-logo .brand { font-family: var(--font-head); font-size: 1.5rem; color: var(--teal); letter-spacing: .04em; }
.auth-logo .sub   { font-size: .72rem; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; margin-top: .1rem; }
.auth-title { font-family: var(--font-head); font-size: 1.6rem; color: var(--text-light); margin-bottom: .4rem; text-align: center; }
.auth-sub   { font-size: .82rem; color: var(--gray-light); text-align: center; margin-bottom: 1.8rem; }

.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .7rem;
  background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: 8px;
  padding: .75rem; font-size: .9rem; font-family: var(--font-body); cursor: pointer;
  transition: box-shadow .2s; margin-bottom: 1.2rem;
}
.btn-google:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.btn-google svg { flex-shrink: 0; }
.divider {
  display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem;
  color: var(--gray-light); font-size: .75rem;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Scoped form styles for the auth card and account dashboard — see note above */
.auth-card .form-group, .account-page .form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.auth-card .form-group label, .account-page .form-group label { font-size: .78rem; color: var(--gray-light); letter-spacing: .04em; text-transform: uppercase; }
.auth-card .form-input, .account-page .form-input {
  background: var(--bg-dark); border: 1px solid var(--border); color: var(--text-light);
  padding: .65rem .9rem; border-radius: 8px; font-size: .9rem; font-family: var(--font-body);
  outline: none; transition: border-color .2s; width: 100%; box-sizing: border-box;
}
.auth-card .form-input:focus, .account-page .form-input:focus { border-color: var(--teal); }
.btn-auth {
  width: 100%; background: var(--teal); color: #fff; border: none; border-radius: 8px;
  padding: .85rem; font-size: .9rem; font-family: var(--font-body); cursor: pointer;
  transition: opacity .2s; margin-top: .2rem;
}
.btn-auth:disabled { opacity: .5; cursor: not-allowed; }
.auth-footer { text-align: center; margin-top: 1.4rem; font-size: .82rem; color: var(--gray-light); }
.auth-footer a { color: var(--teal); text-decoration: none; }
.forgot-link { text-align: right; font-size: .78rem; margin-top: -.4rem; margin-bottom: .8rem; }
.forgot-link a { color: var(--gray-light); text-decoration: none; }
.forgot-link a:hover { color: var(--teal); }
/* .error-msg / .success-msg start hidden — shown by setting style.display = 'block'
   in account.html's inline script (form validation / auth feedback messages) */
.error-msg {
  background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.3);
  color: #f08080; padding: .7rem .9rem; border-radius: 8px; font-size: .82rem;
  margin-bottom: 1rem; display: none;
}
.success-msg {
  background: rgba(32,201,151,.1); border: 1px solid rgba(32,201,151,.3);
  color: #20c997; padding: .7rem .9rem; border-radius: 8px; font-size: .82rem;
  margin-bottom: 1rem; display: none;
}

/* ── Dashboard ── */
.account-page { min-height: 100vh; background: var(--bg-dark); padding: 3rem 1.5rem; }
.account-wrap { max-width: 860px; margin: 0 auto; }
.account-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border);
}
.account-header__actions { display: flex; align-items: center; gap: 1rem; }
.account-name-area { display: flex; align-items: center; gap: 1rem; }
.account-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--teal);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 1.4rem; flex-shrink: 0; overflow: hidden;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-name  { font-family: var(--font-head); font-size: 1.4rem; color: var(--text-light); }
.account-email { font-size: .78rem; color: var(--gray-light); margin-top: .15rem; }
.btn-logout {
  background: transparent; border: 1px solid var(--border); color: var(--gray-light);
  padding: .45rem .9rem; border-radius: 8px; font-size: .78rem; cursor: pointer;
  font-family: var(--font-body); transition: border-color .2s;
}
.btn-logout:hover { border-color: var(--teal); color: var(--teal); }
.home-link { color: var(--teal); text-decoration: none; font-size: .85rem; }

.account-section { margin-bottom: 2.4rem; }
.section-title { font-family: var(--font-head); font-size: 1rem; color: var(--teal); margin-bottom: 1.1rem; letter-spacing: .03em; }

.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-light); text-align: left; padding: .5rem .8rem; border-bottom: 1px solid var(--border); }
.orders-table td { padding: .75rem .8rem; font-size: .85rem; color: var(--text-light); border-bottom: 1px solid rgba(255,255,255,.04); }
.order-id-cell { font-family: monospace; font-size: .8rem; }
.status-badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.status-processing { background: rgba(125,211,211,.12); color: var(--teal); }
.status-shipped    { background: rgba(212,175,55,.12);  color: var(--gold); }
.status-delivered  { background: rgba(32,201,151,.12);  color: #20c997; }
.empty-state { text-align: center; padding: 2.5rem; color: var(--gray-light); font-size: .88rem; }
.empty-state a { color: var(--teal); text-decoration: none; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .profile-grid { grid-template-columns: 1fr; } }
.btn-save-profile {
  background: var(--teal); color: #fff; border: none; border-radius: 8px;
  padding: .65rem 1.4rem; font-size: .85rem; font-family: var(--font-body); cursor: pointer; margin-top: .5rem;
}
/* #profile-status starts hidden — shown briefly by saveProfile() in
   account.html's inline script after a successful profile save */
.profile-status { font-size: .8rem; color: var(--teal); margin-left: .8rem; display: none; }

/* ═══════════════════════ REGISTER PAGE ════════════════════════════════════════ */
/* Used only by register.html. Reuses .auth-page / .auth-card / .auth-* /
   .btn-google / .divider / .form-group / .form-input / .btn-auth / .auth-footer /
   .error-msg from the ACCOUNT PAGE section above (shared auth-card layout) — see
   the note at the top of that section before changing those shared rules. */
.checkbox-group { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem; }
.checkbox-group input[type="checkbox"] { margin-top: 3px; accent-color: var(--teal); width: 16px; height: 16px; flex-shrink: 0; }
.checkbox-group label { font-size: .8rem; color: var(--gray-light); line-height: 1.45; cursor: pointer; }

/* Password strength meter — width/color/text set live by checkStrength()
   in register.html's inline script as the user types */
.strength-bar { height: 3px; border-radius: 2px; margin-top: .3rem; background: var(--border); overflow: hidden; }
.strength-fill { height: 100%; width: 0; transition: width .3s, background .3s; border-radius: 2px; }
.strength-label { font-size: .72rem; color: var(--gray-light); margin-top: .2rem; }

/* Reusable inline accent for snippets injected via innerHTML in register.html
   (e.g. the post-signup "check your inbox" message and error links) */
.text-teal { color: var(--teal); }

/* ═══════════════════════ DEV ADMIN SHORTCUT (index.html) ══════════════════════ */
/* Temporary floating link to login.php, shown only on index.html. Remove this
   block (and the matching markup in index.html) once the dev/admin link is no
   longer needed. */
.dev-admin-link-wrap { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 9999; display: flex; align-items: center; gap: .5rem; }
.dev-admin-link-wrap__version { font-size: .6rem; font-family: monospace; color: rgba(44,122,123,.5); letter-spacing: .05em; }
.dev-admin-link {
  background: rgba(0,0,0,.55); color: var(--turquoise);
  font-size: .72rem; font-family: monospace; letter-spacing: .08em;
  padding: .45rem .85rem; border-radius: 20px; text-decoration: none;
  border: 1px solid rgba(125,211,211,.3); backdrop-filter: blur(6px);
  transition: opacity .2s;
}