/* ═══════════════════════════════════════════
   YveCrafts — Main Stylesheet
   ═══════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --cream: #faf6f1;
  --blush: #f0c4bc;
  --rose:  #c9736a;
  --deep:  #3b1f1a;
  --sage:  #8a9b7c;
  --gold:  #c8a96e;
  --white: #ffffff;
  --text:  #2c1810;
  --muted: #9b7d75;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2.5rem;
  background: rgba(250, 246, 241, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 115, 106, .12);
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 2px 20px rgba(59, 31, 26, .08); }

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--deep);
  letter-spacing: .02em;
  text-decoration: none;
}
.nav-logo span { color: var(--rose); font-style: italic; }

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .2s;
}
.nav-links a:hover { color: var(--rose); }

.nav-cta {
  background: var(--rose);
  color: var(--white) !important;
  padding: .5rem 1.2rem;
  border-radius: 2rem;
}
.nav-cta:hover { background: var(--deep) !important; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  border: none;
  background: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--deep);
}

.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--cream);
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--blush);
  z-index: 99;
  gap: 1.2rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

/* ── AUTH BUTTONS IN NAV ── */
.nav-auth { display: flex; align-items: center; gap: .6rem; }

.btn-signin {
  background: transparent;
  color: var(--deep);
  border: 1.5px solid rgba(59, 31, 26, .25);
  padding: .45rem 1.1rem;
  border-radius: 2rem;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  letter-spacing: .03em;
}
.btn-signin:hover { border-color: var(--rose); color: var(--rose); }

.btn-signup {
  background: var(--rose);
  color: var(--white);
  border: none;
  padding: .48rem 1.1rem;
  border-radius: 2rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  letter-spacing: .03em;
}
.btn-signup:hover { background: var(--deep); }

/* User avatar in nav when logged in */
.nav-user { display: none; align-items: center; gap: .6rem; cursor: pointer; }
.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--rose));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--white);
  border: 2px solid var(--white);
  box-shadow: 0 2px 8px rgba(201, 115, 106, .3);
}
.nav-username { font-size: .82rem; font-weight: 500; color: var(--deep); }
.nav-logout {
  font-size: .75rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  padding: .2rem .5rem;
  border-radius: 1rem;
  transition: all .2s;
}
.nav-logout:hover { background: rgba(201, 115, 106, .1); color: var(--rose); }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
#home {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: 70px;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(240, 196, 188, .35) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(138, 155, 124, .15) 0%, transparent 60%);
}

.hero-decor {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18rem;
  font-weight: 300;
  color: rgba(201, 115, 106, .06);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  top: 0;
  right: -2rem;
}

.hero-text {
  position: relative;
  z-index: 1;
  padding: 4rem 2.5rem 4rem 5vw;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
  background: rgba(201, 115, 106, .1);
  padding: .4rem 1rem;
  border-radius: 2rem;
  margin-bottom: 1.5rem;
}
.hero-tag::before { content: '✦'; font-size: .6rem; }

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--deep);
  margin-bottom: 1.5rem;
}
.hero-title em { font-style: italic; color: var(--rose); }

.hero-sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 38ch;
  margin-bottom: 2.5rem;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 115, 106, .2);
}
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--deep);
  line-height: 1;
}
.stat-label {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .2rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-visual {
  position: relative;
  z-index: 1;
  padding: 6rem 5vw 4rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-img-wrap { position: relative; width: 100%; max-width: 460px; }

.hero-img-main {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #f0c4bc, #e8a39a, #c9736a);
  border-radius: 2rem 2rem 8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8rem;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(59, 31, 26, .18);
}

.hero-img-badge {
  position: absolute;
  bottom: 2rem;
  left: -2rem;
  background: var(--white);
  border-radius: 1rem;
  padding: .8rem 1.2rem;
  box-shadow: 0 8px 32px rgba(59, 31, 26, .12);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.badge-label {
  font-size: .7rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.badge-val { font-size: .95rem; font-weight: 600; color: var(--deep); }

.hero-img-pill {
  position: absolute;
  top: 2rem;
  right: -1.5rem;
  background: var(--deep);
  color: var(--white);
  border-radius: 2rem;
  padding: .6rem 1rem;
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
}

.dot {
  position: absolute;
  border-radius: 50%;
  animation: float 4s ease-in-out infinite;
}
.dot-1 { width: 12px; height: 12px; background: var(--gold);  top: 20%;  left: -8%; }
.dot-2 { width: 8px;  height: 8px;  background: var(--sage);  bottom: 30%; right: -4%; animation-delay: 1s; }
.dot-3 { width: 16px; height: 16px; background: var(--blush); top: 60%;  left: -12%; animation-delay: 2s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn-primary {
  background: var(--deep);
  color: var(--white);
  padding: .85rem 2rem;
  border-radius: 3rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  transition: all .25s;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  display: inline-block;
}
.btn-primary:hover {
  background: var(--rose);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 115, 106, .3);
}

.btn-outline {
  background: transparent;
  color: var(--deep);
  padding: .85rem 2rem;
  border-radius: 3rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1.5px solid var(--deep);
  transition: all .25s;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  display: inline-block;
}
.btn-outline:hover {
  background: var(--deep);
  color: var(--white);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   SECTIONS
══════════════════════════════════════ */
section { padding: 6rem 5vw; }

body.page-mode .site-page { display: none !important; }
body.page-mode .site-page.page-active { display: block !important; }
body.page-mode #home.page-active,
body.page-mode #about.page-active { display: grid !important; }

.nav-links a.active-page {
  color: var(--rose);
}

.section-tag {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: .8rem;
  font-weight: 500;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--deep);
  margin-bottom: 1rem;
}
.section-title em { font-style: italic; color: var(--rose); }
.section-sub { font-size: 1rem; color: var(--muted); max-width: 50ch; line-height: 1.7; }

/* ══════════════════════════════════════
   GALLERY
══════════════════════════════════════ */
#gallery { background: var(--white); }

.gallery-header { text-align: center; margin-bottom: 3.5rem; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.8rem;
  align-items: stretch;
}

/* Series Tabs */
.series-tabs {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.series-tab {
  background: transparent;
  border: 1.5px solid rgba(201, 115, 106, .3);
  color: var(--muted);
  padding: .55rem 1.6rem;
  border-radius: 3rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .25s;
}
.series-tab:hover { border-color: var(--rose); color: var(--rose); }
.series-tab.active { background: var(--deep); border-color: var(--deep); color: var(--white); }

/* Series Block */
.series-block { margin-bottom: 4rem; }
.series-block:last-child { margin-bottom: 0; }
.series-block.hidden { display: none; }

.series-header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(201, 115, 106, .15);
}

.series-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: .35rem;
}
.series-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 400;
  color: var(--deep);
  line-height: 1.1;
}
.series-name em { font-style: italic; color: var(--rose); }

.series-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 38ch;
  margin-left: auto;
  padding-bottom: .2rem;
}
.series-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(201, 115, 106, .15);
  line-height: 1;
  margin-left: auto;
  align-self: flex-start;
}

/* Product Card */
.product-card {
  background: var(--cream);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(59, 31, 26, .12);
}

.product-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blush);
  flex-shrink: 0;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.product-card:hover .product-img img { transform: scale(1.06); }

.product-info {
  padding: 1.2rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-tag {
  font-size: .68rem;
  color: var(--rose);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: .3rem;
}
.product-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 1rem;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid rgba(201, 115, 106, .15);
}
.product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rose);
  white-space: nowrap;
}
.product-price span { font-size: .72rem; font-weight: 400; color: var(--muted); }

.btn-view {
  background: var(--rose);
  color: var(--white);
  padding: .48rem 1.1rem;
  border-radius: 2rem;
  font-size: .78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-view:hover {
  background: var(--deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59, 31, 26, .2);
}

/* ══════════════════════════════════════
   PRODUCT MODAL
══════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(59, 31, 26, .55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: 2rem;
  max-width: 580px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
  animation: modalIn .3s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: var(--cream);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.modal-close:hover { background: var(--blush); }

.modal-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1.2rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--blush);
}
.modal-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.modal-badge {
  display: inline-block;
  font-size: .68rem;
  color: var(--rose);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.modal-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: .35rem;
}
.modal-price { font-size: 1.3rem; color: var(--rose); font-weight: 700; margin-bottom: 1rem; }
.modal-desc  { font-size: .95rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; }

.modal-divider { border: none; border-top: 1px solid rgba(201, 115, 106, .15); margin: .5rem 0 1.2rem; }

.modal-label {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .07em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .4rem;
}
.modal-select {
  width: 100%;
  padding: .6rem 1rem;
  border: 1.5px solid rgba(201, 115, 106, .3);
  border-radius: .6rem;
  font-size: .9rem;
  background: var(--cream);
  color: var(--text);
  margin-bottom: 1.1rem;
  outline: none;
  transition: border-color .2s;
  font-family: 'DM Sans', sans-serif;
}
.modal-select:focus { border-color: var(--rose); }

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
#about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-visual { position: relative; }
.about-main-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--cream);
  border-radius: 2rem 6rem 2rem 2rem;
  box-shadow: 0 24px 60px rgba(59, 31, 26, .15);
  overflow: hidden;
  display: block;
}
.about-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-card {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--deep);
  color: var(--white);
  border-radius: 1.2rem;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 12px 32px rgba(59, 31, 26, .2);
}
.about-card-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.about-card-label { font-size: .78rem; color: rgba(255, 255, 255, .7); margin-top: .2rem; }

.value-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin: 1.5rem 0 2rem;
}
.value-list li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.5;
}
.value-list li::before {
  content: '✦';
  color: var(--rose);
  font-size: .7rem;
  margin-top: .25rem;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════ */
#testimonials { background: var(--cream); overflow: hidden; }

.testimonials-header { text-align: center; margin-bottom: 3.5rem; }

.testi-track-wrap { position: relative; overflow-x: auto; overflow-y: hidden; padding-bottom: .8rem; scroll-behavior: smooth; }
.testi-track-wrap::before,
.testi-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.testi-track-wrap::before { left: 0;  background: linear-gradient(to right, var(--cream), transparent); }
.testi-track-wrap::after  { right: 0; background: linear-gradient(to left,  var(--cream), transparent); }

.testi-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: scrollLeft 32s linear infinite;
}
.testi-track-wrap:hover .testi-track { animation-play-state: running; }
.testi-track-wrap::-webkit-scrollbar { height: 8px; }
.testi-track-wrap::-webkit-scrollbar-track { background: rgba(201, 115, 106, .12); border-radius: 999px; }
.testi-track-wrap::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 999px; }

@keyframes scrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.testi-card {
  background: var(--white);
  border-radius: 1.5rem;
  padding: 1.8rem 2rem;
  min-width: 320px;
  max-width: 320px;
  box-shadow: 0 4px 24px rgba(59, 31, 26, .07);
  border: 1px solid rgba(201, 115, 106, .1);
  flex-shrink: 0;
  transition: transform .3s, box-shadow .3s;
}
.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(59, 31, 26, .12);
}

.testi-stars { display: flex; gap: 2px; margin-bottom: .9rem; }
.testi-stars span { color: var(--gold); font-size: 1rem; }

.testi-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--deep);
  line-height: 1.65;
  margin-bottom: 1.2rem;
  font-style: italic;
}
.testi-quote::before {
  content: '\201C';
  font-size: 2rem;
  color: var(--blush);
  line-height: 0;
  vertical-align: -.5rem;
  margin-right: .15rem;
}
.testi-quote::after {
  content: '\201D';
  font-size: 2rem;
  color: var(--blush);
  line-height: 0;
  vertical-align: -.5rem;
  margin-left: .15rem;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 115, 106, .12);
}
.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.testi-name  { font-size: .9rem;  font-weight: 600; color: var(--deep); }
.testi-meta  { font-size: .75rem; color: var(--muted); margin-top: .1rem; }

.testi-cta { text-align: center; margin-top: 3rem; }
.testi-cta p { font-size: .95rem; color: var(--muted); margin-bottom: 1rem; }

/* ══════════════════════════════════════
   FAQs
══════════════════════════════════════ */
#faqs { background: var(--deep); color: var(--white); }
#faqs .section-title { color: var(--white); }
#faqs .section-sub   { color: rgba(255, 255, 255, .6); }
#faqs .section-tag   { color: var(--gold); }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 3rem;
}

.faq-item {
  background: rgba(255, 255, 255, .05);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  transition: border-color .2s;
}
.faq-item:hover { border-color: rgba(201, 115, 106, .4); }
.faq-item.open  { border-color: var(--rose); }

.faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  gap: 1rem;
}
.faq-arrow { font-size: 1.2rem; transition: transform .3s; flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(45deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s;
  font-size: .88rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.7;
  padding: 0 1.5rem;
}
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 1.2rem; }

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
#contact { background: var(--white); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-icon {
  width: 42px;
  height: 42px;
  border-radius: .8rem;
  background: rgba(201, 115, 106, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-method-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.contact-method-val { font-size: .95rem; color: var(--deep); font-weight: 500; margin-top: .2rem; }

.social-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.social-btn {
  background: var(--cream);
  border-radius: .8rem;
  padding: .5rem 1rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--deep);
  text-decoration: none;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.social-btn:hover { background: var(--rose); color: var(--white); }

.contact-form {
  background: var(--cream);
  border-radius: 1.5rem;
  padding: 2.5rem;
}
.form-group { margin-bottom: 1.3rem; }
.form-group label {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid rgba(201, 115, 106, .25);
  border-radius: .7rem;
  font-size: .92rem;
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
  font-family: 'DM Sans', sans-serif;
  resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--rose); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-success {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
  background: rgba(138, 155, 124, .15);
  border-radius: 1rem;
  color: var(--sage);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  background: var(--deep);
  color: var(--white);
  padding: 4rem 5vw 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-brand-name span { color: var(--rose); font-style: italic; }
.footer-about { font-size: .85rem; color: rgba(255, 255, 255, .55); line-height: 1.7; margin-bottom: 1.5rem; }

.footer-col h4 {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1.2rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.footer-col a { font-size: .88rem; color: rgba(255, 255, 255, .7); text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--rose); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 2rem;
  font-size: .8rem;
  color: rgba(255, 255, 255, .4);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  background: var(--deep);
  color: var(--white);
  padding: .8rem 1.5rem;
  border-radius: 1rem;
  font-size: .9rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(59, 31, 26, .3);
  transform: translateY(100px);
  opacity: 0;
  transition: all .3s;
  pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

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

/* ══════════════════════════════════════
   AUTH MODAL
══════════════════════════════════════ */
.auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(59, 31, 26, .55);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.auth-overlay.open { display: flex; }

.auth-box {
  background: var(--white);
  border-radius: 2rem;
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  position: relative;
  animation: authIn .3s ease;
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

.auth-strip { height: 6px; background: linear-gradient(90deg, var(--blush), var(--rose), var(--gold)); }

.auth-inner { padding: 2.2rem 2.4rem 2.4rem; }

.auth-close {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  background: var(--cream);
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 1;
}
.auth-close:hover { background: var(--blush); }

.auth-tabs {
  display: flex;
  background: var(--cream);
  border-radius: 1rem;
  padding: .3rem;
  margin-bottom: 1.8rem;
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: .55rem;
  border-radius: .7rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  color: var(--muted);
  transition: all .25s;
}
.auth-tab.active {
  background: var(--white);
  color: var(--deep);
  box-shadow: 0 2px 10px rgba(59, 31, 26, .08);
}

.auth-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--deep);
  text-align: center;
  margin-bottom: .3rem;
}
.auth-logo span { color: var(--rose); font-style: italic; }
.auth-tagline { text-align: center; font-size: .8rem; color: var(--muted); margin-bottom: 1.6rem; }

.auth-panel        { display: none; }
.auth-panel.active { display: block; }

.auth-group { margin-bottom: 1.1rem; }
.auth-group label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.auth-group input {
  width: 100%;
  padding: .7rem 1rem;
  border: 1.5px solid rgba(201, 115, 106, .25);
  border-radius: .7rem;
  font-size: .92rem;
  background: var(--cream);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
  font-family: 'DM Sans', sans-serif;
}
.auth-group input:focus { border-color: var(--rose); background: var(--white); }

.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.auth-forgot {
  display: block;
  text-align: right;
  font-size: .75rem;
  color: var(--rose);
  text-decoration: none;
  margin-top: -.4rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.auth-forgot:hover { text-decoration: underline; }

.auth-submit {
  width: 100%;
  padding: .85rem;
  background: var(--deep);
  color: var(--white);
  border: none;
  border-radius: 2rem;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .25s;
  margin-top: .4rem;
  letter-spacing: .03em;
}
.auth-submit:hover {
  background: var(--rose);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 115, 106, .3);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.2rem 0;
  color: var(--muted);
  font-size: .78rem;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(201, 115, 106, .2); }

.auth-social { display: flex; gap: .7rem; }
.auth-social-btn {
  flex: 1;
  padding: .6rem;
  border: 1.5px solid rgba(201, 115, 106, .25);
  border-radius: .7rem;
  background: var(--white);
  font-size: .8rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.auth-social-btn:hover { border-color: var(--rose); color: var(--rose); }

.auth-switch { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 1.2rem; }
.auth-switch a { color: var(--rose); font-weight: 600; cursor: pointer; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

.auth-success { display: none; text-align: center; padding: 1rem 0 .5rem; }
.auth-success-icon  { font-size: 3rem; margin-bottom: .8rem; }
.auth-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: .4rem;
}
.auth-success-sub { font-size: .88rem; color: var(--muted); line-height: 1.6; }

/* ══════════════════════════════════════
   ADMIN DASHBOARD
══════════════════════════════════════ */
.admin-entry {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 500;
  background: var(--deep);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59, 31, 26, .3);
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-entry:hover { background: var(--rose); transform: scale(1.1); }

/* Admin login overlay */
.admin-login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(59, 31, 26, .7);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}
.admin-login-overlay.open { display: flex; }

.admin-login-box {
  background: var(--white);
  border-radius: 1.5rem;
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
  animation: authIn .3s ease;
}
.admin-login-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: .3rem;
}
.admin-login-sub { font-size: .82rem; color: var(--muted); margin-bottom: 1.8rem; }
.admin-login-box .auth-group { margin-bottom: 1rem; }
.admin-login-box .auth-group label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.admin-login-box .auth-group input {
  width: 100%;
  padding: .7rem 1rem;
  border: 1.5px solid rgba(201, 115, 106, .25);
  border-radius: .7rem;
  font-size: .92rem;
  background: var(--cream);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
  font-family: 'DM Sans', sans-serif;
}
.admin-login-box .auth-group input:focus { border-color: var(--rose); }
.admin-err { font-size: .8rem; color: var(--rose); margin-bottom: .8rem; display: none; }

/* Dashboard */
.dashboard {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  background: #f4f1ee;
  flex-direction: row;
  font-family: 'DM Sans', sans-serif;
}
.dashboard.open { display: flex; }

/* Sidebar */
.dash-sidebar {
  width: 230px;
  background: var(--deep);
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
  flex-shrink: 0;
}
.dash-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white);
  padding: 0 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dash-brand span  { color: var(--rose); font-style: italic; }
.dash-brand small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .2rem;
}

.dash-nav { list-style: none; padding: 1.5rem 0; flex: 1; }
.dash-nav li a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1.5rem;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: all .2s;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.dash-nav li a:hover { color: var(--white); background: rgba(255, 255, 255, .05); }
.dash-nav li a.active {
  color: var(--white);
  border-left-color: var(--rose);
  background: rgba(201, 115, 106, .1);
}
.dash-nav li a .icon { font-size: 1rem; width: 20px; text-align: center; }

.dash-logout-btn {
  margin: 0 1rem 1rem;
  padding: .6rem;
  background: rgba(255, 255, 255, .06);
  border: none;
  border-radius: .7rem;
  color: rgba(255, 255, 255, .5);
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.dash-logout-btn:hover { background: rgba(201, 115, 106, .2); color: var(--white); }

/* Main content */
.dash-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.dash-topbar {
  background: var(--white);
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(201, 115, 106, .12);
  position: sticky;
  top: 0;
  z-index: 10;
}
.dash-page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--deep);
}
.dash-admin-tag {
  font-size: .75rem;
  color: var(--muted);
  background: var(--cream);
  padding: .3rem .8rem;
  border-radius: 1rem;
}
.dash-content { padding: 2rem; flex: 1; }

/* Panels */
.dash-panel        { display: none; }
.dash-panel.active { display: block; }

/* Stat cards */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--white);
  border-radius: 1.2rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(201, 115, 106, .1);
}
.stat-card-icon   { font-size: 1.5rem; margin-bottom: .8rem; }
.stat-card-val    {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--deep);
  line-height: 1;
}
.stat-card-label  { font-size: .75rem; color: var(--muted); margin-top: .3rem; text-transform: uppercase; letter-spacing: .06em; }
.stat-card-change { font-size: .75rem; color: var(--sage); font-weight: 600; margin-top: .4rem; }

/* Chart */
.dash-chart {
  background: var(--white);
  border-radius: 1.2rem;
  padding: 1.6rem;
  border: 1px solid rgba(201, 115, 106, .1);
  margin-bottom: 1.5rem;
}
.dash-chart-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.bar-chart { display: flex; align-items: flex-end; gap: .6rem; height: 120px; }
.bar-wrap  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.bar       { border-radius: .4rem .4rem 0 0; transition: opacity .2s; cursor: default; }
.bar:hover { opacity: .8; }
.bar-label { font-size: .68rem; color: var(--muted); }

/* Orders table */
.dash-table-wrap {
  background: var(--white);
  border-radius: 1.2rem;
  border: 1px solid rgba(201, 115, 106, .1);
  overflow: hidden;
}
.dash-table-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr .8fr .8fr .9fr;
  padding: .8rem 1.4rem;
  background: var(--cream);
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.dash-table-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr .8fr .8fr .9fr;
  padding: .9rem 1.4rem;
  border-top: 1px solid rgba(201, 115, 106, .08);
  align-items: center;
  font-size: .84rem;
  color: var(--text);
  transition: background .15s;
}
.dash-table-row:hover { background: rgba(250, 246, 241, .6); }

.order-badge { display: inline-block; padding: .2rem .7rem; border-radius: 1rem; font-size: .7rem; font-weight: 600; }
.badge-pending   { background: rgba(200, 169, 110, .15); color: #9a6c00; }
.badge-done      { background: rgba(138, 155, 124, .15); color: #4a6741; }
.badge-cancelled { background: rgba(201, 115, 106, .12); color: var(--rose); }

/* Customer order tracking */
.my-orders-section { background: var(--white); }
.my-orders-wrap {
  max-width: 980px;
  margin: 0 auto;
  background: var(--cream);
  border: 1px solid rgba(201, 115, 106, .12);
  border-radius: 1.2rem;
  padding: 1.2rem;
}
.my-orders-empty {
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  padding: 1.6rem;
}
.my-orders-list {
  display: grid;
  gap: 1rem;
}
.my-order-card {
  background: var(--white);
  border: 1px solid rgba(201, 115, 106, .12);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
}
.my-order-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .8rem;
}
.my-order-id {
  font-size: .78rem;
  color: var(--rose);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.my-order-product {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--deep);
  margin-top: .15rem;
}
.my-order-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  font-size: .82rem;
  color: var(--muted);
}
.my-order-meta strong {
  display: block;
  color: var(--text);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.order-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  margin: .9rem 0;
}
.progress-step {
  height: 6px;
  border-radius: 999px;
  background: rgba(201, 115, 106, .15);
}
.progress-step.active { background: var(--rose); }
.progress-step.done { background: var(--sage); }
.progress-step.cancelled { background: var(--rose); }

.order-builder {
  background: var(--cream);
  border: 1.5px solid rgba(201, 115, 106, .2);
  border-radius: .9rem;
  padding: .85rem;
}
.order-builder-head,
.order-item-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 64px 86px 34px;
  gap: .6rem;
  align-items: center;
}
.order-builder-head {
  font-size: .68rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.order-item-row { margin-bottom: .55rem; }
.order-item-row select,
.order-item-row input {
  width: 100%;
  padding: .58rem .7rem;
  border: 1.5px solid rgba(201, 115, 106, .25);
  border-radius: .65rem;
  background: var(--white);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
}
.order-item-row input { text-align: center; }
.order-line-subtotal {
  color: var(--rose);
  font-size: .86rem;
  font-weight: 700;
}
.order-remove-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(201, 115, 106, .1);
  color: var(--rose);
  cursor: pointer;
}
.order-add-btn {
  padding: .6rem 1rem;
  font-size: .82rem;
  width: 100%;
  text-align: center;
  margin-top: .2rem;
}
.order-total-row {
  display: flex;
  justify-content: space-between;
  padding-top: .75rem;
  margin-top: .75rem;
  border-top: 1px solid rgba(201, 115, 106, .16);
  color: var(--deep);
}

/* Product manager */
.prod-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.prod-mgr-card {
  background: var(--white);
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(201, 115, 106, .1);
  transition: box-shadow .2s;
}
.prod-mgr-card:hover { box-shadow: 0 6px 24px rgba(59, 31, 26, .1); }
.prod-mgr-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  overflow: hidden;
  position: relative;
}
.prod-mgr-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-mgr-series-tag {
  position: absolute;
  top: .6rem;
  left: .6rem;
  background: var(--deep);
  color: var(--white);
  font-size: .62rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.prod-mgr-body   { padding: 1rem 1.2rem 1.2rem; }
.prod-mgr-name   { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--deep); margin-bottom: .2rem; }
.prod-mgr-price  { font-size: .88rem; color: var(--rose); font-weight: 700; margin-bottom: .8rem; }
.prod-mgr-actions{ display: flex; gap: .5rem; }

.btn-edit {
  flex: 1;
  padding: .45rem;
  background: var(--cream);
  border: 1.5px solid rgba(201, 115, 106, .25);
  border-radius: .6rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--deep);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
}
.btn-edit:hover { border-color: var(--rose); color: var(--rose); }

.btn-del {
  padding: .45rem .7rem;
  background: rgba(201, 115, 106, .08);
  border: none;
  border-radius: .6rem;
  font-size: .78rem;
  color: var(--rose);
  cursor: pointer;
  transition: all .2s;
}
.btn-del:hover { background: var(--rose); color: var(--white); }

.btn-add-product {
  background: var(--rose);
  color: var(--white);
  border: none;
  padding: .6rem 1.3rem;
  border-radius: 2rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.btn-add-product:hover { background: var(--deep); }

/* Product edit modal */
.prod-edit-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(59, 31, 26, .5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.prod-edit-overlay.open { display: flex; }

.prod-edit-box {
  background: var(--white);
  border-radius: 1.5rem;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  animation: authIn .25s ease;
  position: relative;
}
.prod-edit-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: 1.5rem;
}
.prod-edit-box .auth-group { margin-bottom: 1rem; }
.prod-edit-box .auth-group label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.prod-edit-box .auth-group input,
.prod-edit-box .auth-group select,
.prod-edit-box .auth-group textarea {
  width: 100%;
  padding: .7rem 1rem;
  border: 1.5px solid rgba(201, 115, 106, .25);
  border-radius: .7rem;
  font-size: .9rem;
  background: var(--cream);
  color: var(--text);
  outline: none;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .2s;
}
.prod-edit-box .auth-group input:focus,
.prod-edit-box .auth-group select:focus,
.prod-edit-box .auth-group textarea:focus { border-color: var(--rose); }

.prod-edit-actions { display: flex; gap: .7rem; margin-top: 1.2rem; }

.btn-save {
  flex: 1;
  padding: .8rem;
  background: var(--deep);
  color: var(--white);
  border: none;
  border-radius: 2rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
}
.btn-save:hover { background: var(--rose); }

.btn-cancel-edit {
  padding: .8rem 1.4rem;
  background: var(--cream);
  border: none;
  border-radius: 2rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
}
.btn-cancel-edit:hover { background: var(--blush); color: var(--deep); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
  #home                   { grid-template-columns: 1fr; padding: 5rem 5vw 3rem; }
  .hero-visual            { display: none; }
  #about                  { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual           { display: none; }
  .faq-grid               { grid-template-columns: 1fr; }
  .contact-grid           { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid            { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .nav-links              { display: none; }
  .hamburger              { display: flex; }
  nav                     { padding: 1rem 1.5rem; }
}
@media (max-width: 768px) {
  .dash-sidebar           { display: none; }
  .stat-cards             { grid-template-columns: 1fr 1fr; }
  .dash-table-head,
  .dash-table-row         { grid-template-columns: 1fr 1fr .8fr; }
}
@media (max-width: 560px) {
  section                 { padding: 4rem 5vw; }
  .hero-text              { padding: 2rem 5vw; }
  .hero-stats             { gap: 1.5rem; }
  .form-row               { grid-template-columns: 1fr; }
  .order-builder-head     { display: none; }
  .order-item-row         { grid-template-columns: 1fr; }
  .order-line-subtotal    { text-align: right; }
  .order-remove-btn       { width: 100%; height: 2.4rem; }
  .footer-grid            { grid-template-columns: 1fr; }
  .footer-bottom          { flex-direction: column; text-align: center; }
  .modal                  { padding: 1.5rem; }
  .product-grid           { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .auth-inner             { padding: 1.6rem 1.4rem 2rem; }
  .auth-row               { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .product-grid           { grid-template-columns: 1fr; }
}

/* Premium gallery ordering enhancements */
.premium-product-card {
  border: 1px solid rgba(201, 115, 106, .16);
  background: linear-gradient(180deg, var(--white), var(--cream));
}
.premium-product-card .btn-view { white-space: nowrap; }
.premium-product-img {
  min-height: 230px;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.95), rgba(248,241,235,.95));
}
.bouquet-art { position: relative; width: 180px; height: 210px; transform: translateY(4px); transition: transform .35s ease; }
.bouquet-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.product-card:hover .bouquet-photo { transform: scale(1.04); }
.custom-modal-visual .bouquet-photo { width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: 1rem; background: var(--white); box-shadow: 0 18px 45px rgba(59,31,26,.12); }
.product-card:hover .bouquet-art { transform: translateY(-4px) scale(1.03); }
.bouquet-bloom { position: absolute; border-radius: 50%; box-shadow: inset -10px -12px 0 rgba(59,31,26,.08), 0 12px 28px rgba(201,115,106,.18); }
.bloom-a { width: 82px; height: 82px; left: 48px; top: 10px; background: #f3a5b9; }
.bloom-b { width: 70px; height: 70px; left: 20px; top: 60px; background: #fff1d2; }
.bloom-c { width: 74px; height: 74px; right: 20px; top: 62px; background: #c98998; }
.bouquet-art-gold .bloom-a { background: #e6c56d; }
.bouquet-art-gold .bloom-b { background: #fff7dc; }
.bouquet-art-gold .bloom-c { background: #b98086; }
.bouquet-wrap { position: absolute; width: 118px; height: 112px; left: 31px; bottom: 12px; background: linear-gradient(145deg,#f8e8e4,#fff); clip-path: polygon(8% 0,92% 0,70% 100%,30% 100%); border: 1px solid rgba(201,115,106,.18); }
.bouquet-ribbon { position: absolute; width: 86px; height: 18px; left: 47px; bottom: 52px; background: var(--rose); border-radius: 999px; box-shadow: 0 8px 16px rgba(201,115,106,.24); }
.bouquet-detail-line { margin-top: .75rem; font-size: .82rem; color: var(--deep); font-weight: 600; }
.custom-order-modal { max-width: 980px; padding: 1.3rem; max-height: 92vh; overflow-y: auto; }
.custom-modal-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.5rem; align-items: start; }
.custom-modal-visual { background: var(--cream); border-radius: 1.4rem; min-height: 440px; display: grid; place-items: center; align-content: center; padding: 1rem; border: 1px solid rgba(201,115,106,.12); }
.color-list-btn { width: 100%; justify-content: center; margin-top: .75rem; }
.custom-modal-body { min-width: 0; }
.custom-spec { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; background: var(--cream); border-radius: .9rem; margin: .8rem 0; color: var(--deep); }
.color-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-height: 172px; overflow-y: auto; padding-right: .25rem; }
.color-choice { display: flex; align-items: center; gap: .45rem; padding: .5rem; border: 1px solid rgba(201,115,106,.16); border-radius: .7rem; font-size: .78rem; color: var(--text); background: var(--white); cursor: pointer; }
.color-choice input { accent-color: var(--rose); }
.color-choice span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(59,31,26,.15); flex: 0 0 auto; }
.solo-option { display: flex; align-items: center; gap: .5rem; margin: .8rem 0; font-size: .88rem; color: var(--deep); }
.custom-row { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
.selected-preview { margin-top: .9rem; padding: .85rem; background: var(--cream); border-radius: .9rem; border: 1px solid rgba(201,115,106,.14); }
#selectedColorDots { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .45rem; }
.preview-dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(59,31,26,.18); }
.preview-empty, #customSummary { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.custom-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.color-modal-overlay { position: fixed; inset: 0; z-index: 260; background: rgba(59,31,26,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.color-modal { background: var(--white); border-radius: 1.5rem; max-width: 760px; width: 100%; padding: 1.5rem; position: relative; box-shadow: 0 24px 70px rgba(59,31,26,.2); }
.satin-color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin-top: 1rem; }
.satin-color-card { display: flex; align-items: center; gap: .6rem; padding: .7rem; background: var(--cream); border-radius: .8rem; border: 1px solid rgba(201,115,106,.12); font-size: .84rem; color: var(--deep); }
.satin-color-card span { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(59,31,26,.16); }
@media (max-width: 760px) {
  .custom-modal-grid { grid-template-columns: 1fr; }
  .custom-modal-visual { min-height: 260px; }
  .color-choice-grid { grid-template-columns: 1fr; max-height: 220px; }
  .custom-modal-actions, .custom-row { grid-template-columns: 1fr; }
  .premium-product-img { min-height: 200px; }
}
.color-image-modal { max-width: min(940px, 96vw); max-height: 92vh; overflow-y: auto; }
.satin-color-image-wrap { margin-top: 1rem; border-radius: 1rem; overflow: hidden; background: var(--cream); border: 1px solid rgba(201,115,106,.14); }
.satin-color-image-wrap img { display: block; width: 100%; height: auto; }
@media (max-width: 560px) {
  .color-image-modal { padding: 1rem; }
}