/* Flower Jewelry storefront — Italian Heritage theme.
 * Warm sand + espresso + terracotta + olive. Cormorant Garamond italic
 * serif for editorial moments, Italiana for the brand wordmark,
 * Inter sans for everything functional. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Italiana&display=swap');

:root {
  --bg:        #F2EAD8;  /* warm sand */
  --bg-alt:    #EBE0CA;  /* deeper sand — for section bands */
  --ink:       #2D1F15;  /* espresso — headings + nav text */
  --muted:     #6B5340;  /* warm taupe — secondary text */
  --line:      #D9CFB8;  /* sand border */
  --line-soft: #E5DCC4;  /* softer divider */
  --accent:    #A05A3A;  /* terracotta — primary CTAs + links */
  --olive:     #7A8456;  /* Mediterranean olive — category tags */
  --card:      #FAF5EA;  /* lighter cream — card surfaces */
  --serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --maxw: 1280px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.45;
  /* Lining figures = numerals same height as capital letters (not "old-style" smaller).
     Tabular figures = every numeral same width so they line up. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
/* Re-apply on text elements that browsers sometimes reset */
h1, h2, h3, h4, p, span, a, div, button, input, select, label,
.card-title, .card-price, .card-cat, .brand, .nav-links a, .price, .label, .sub, .qty {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: 0; margin: 0 0 0.5em;
  color: var(--ink); }
h1 { font-size: 2.4rem; font-style: italic; letter-spacing: 0.01em; }
h2 { font-size: 1.7rem; font-style: italic; }
h3 { font-size: 1.1rem; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

/* Top bar */
.topbar { background: var(--ink); color: #fff; text-align: center; padding: 8px 12px;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }

/* Returning-customer banner — sand-tinted, terracotta link */
.returning-banner { background: #EBD9B8; color: #5A3A1A; text-align: center;
  padding: 11px 44px 11px 16px; font-size: 0.88rem; position: relative;
  border-bottom: 1px solid var(--line); }
.returning-banner a { color: var(--accent); text-decoration: underline; font-weight: 500; }
.returning-banner a:hover { color: var(--ink); }
.returning-banner strong { color: var(--ink); }
.returning-banner .dismiss { position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); background: none; border: none; color: #5A3A1A;
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 10px;
  font-family: inherit; }
.returning-banner .dismiss:hover { color: var(--ink); }

.nav { border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: 0; z-index: 50; }

/* Single nav bar: brand left · tabs TRUE-CENTERED · icons right.
   Generous vertical padding (36px) so the header reads as a proper
   branded band. The 1fr·auto·1fr grid keeps the tabs middle column
   at the absolute horizontal center of the page no matter how wide
   the brand or icons cluster happens to be. */
.nav-bar { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 64px; }
.nav-bar .brand { justify-self: start; }
.nav-bar .nav-icons { justify-self: end; }

/* Brand block — flower icon stacked over the wordmark, all centered as a
   single mark. Sabrina-format: icon on top, FLOWER big, JEWELRY smaller
   below in letter-spaced caps. */
.brand { text-decoration: none; display: inline-flex; flex-direction: column;
  align-items: center; gap: 6px; color: var(--ink); }
.brand-icon { color: var(--ink); display: block; }
.brand-wordmark { display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1; color: var(--ink); text-align: center; }
.brand-name { font-family: 'Italiana', 'Cormorant Garamond', serif;
  font-size: 2.6rem; letter-spacing: 0.16em; color: var(--ink);
  font-weight: 400; white-space: nowrap; line-height: 1;
  text-indent: 0.16em; }   /* offset right-bias of letter-spacing so word is optically centered */
.brand-sub { font-family: 'Italiana', 'Cormorant Garamond', serif;
  font-size: 1.1rem; letter-spacing: 0.36em; color: var(--ink);
  font-weight: 400; white-space: nowrap; margin-top: 6px;
  text-indent: 0.36em; }

/* Tabs centered, ALWAYS one line, no wrap. White-space:nowrap on the
   container belts; flex-wrap:nowrap suspenders. */
.nav-links { display: flex; gap: 32px; justify-content: center; flex-wrap: nowrap;
  white-space: nowrap; min-width: 0; }
.nav-links a { font-size: 0.92rem; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 8px 0; display: inline-block; color: var(--ink); white-space: nowrap; }
.nav-links a:hover { color: var(--accent); }

/* Icons right — three equal icons on one horizontal line, evenly spaced. */
.nav-icons { display: flex; align-items: center; gap: 20px; justify-self: end; }
.nav-icon { color: var(--ink); display: inline-flex; align-items: center;
  justify-content: center; padding: 4px; position: relative; }
.nav-icon:hover { color: var(--accent); }
.account-toggle { color: var(--ink); display: inline-flex; align-items: center;
  justify-content: center; padding: 4px; cursor: pointer; text-decoration: none; }
.account-toggle:hover { color: var(--accent); }
/* Label hidden — Andrew wanted just the three icons on one line. shop.js
   still updates the text in the background so we can flip it back any time. */
.account-label { display: none; }
.nav-item { position: relative; }
.nav-item .dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line); min-width: 200px; padding: 10px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06); display: none; z-index: 60; }
.nav-item:hover .dropdown { display: block; }
.nav-item .dropdown a { display: block; padding: 8px 22px; font-size: 0.78rem;
  letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; }
.nav-item .dropdown a:hover { background: #f5f5f5; }
.nav-item .dropdown-wide { display: none; min-width: 540px;
  grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 18px 0; }
.nav-item:hover .dropdown-wide { display: grid; }
.dropdown-col { padding: 0 14px; }
.dropdown-col .dropdown-head { font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--muted); padding: 4px 10px 8px; text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.nav-right { display: flex; gap: 18px; align-items: center; font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase; }
.cart-badge { background: var(--accent); color: var(--bg); border-radius: 999px;
  padding: 1px 6px; font-size: 0.62rem; display: none; letter-spacing: 0;
  position: absolute; top: -3px; right: -6px; min-width: 16px; text-align: center;
  font-variant-numeric: lining-nums tabular-nums; line-height: 1.4; }
.cart-badge.show { display: inline-block; }

/* Account quick-view popover — hangs off "Hi, Drew" in the top-right nav */
.account-pop { position: relative; display: inline-block; }
.account-toggle { cursor: pointer; }
.account-toggle.has-session::after { content: ' ▾'; font-size: 0.7em; opacity: 0.7; }
.account-panel { position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--line); width: 380px; padding: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08); display: none; z-index: 100;
  text-transform: none; letter-spacing: 0; font-size: 0.88rem; }
.account-panel.open { display: block; }
.account-panel-head { display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); gap: 12px; }
.account-panel-head .name { font-weight: 500; font-size: 0.95rem; }
.account-panel-head .email { color: var(--muted); font-size: 0.78rem; margin-top: 2px;
  word-break: break-all; }
.account-panel-head .signout { color: #a83434; font-size: 0.75rem; cursor: pointer;
  white-space: nowrap; letter-spacing: 0.06em; }
.account-panel .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-bottom: 16px; }
.account-panel .stat { padding: 12px 8px; background: #fafafa; text-align: center; }
.account-panel .stat .lbl { font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.account-panel .stat .val { font-size: 1.1rem; font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums; }
.account-panel .ap-section { margin-bottom: 14px; }
.account-panel .ap-head { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft); }
.account-panel .ap-item { display: flex; justify-content: space-between; padding: 6px 0;
  gap: 10px; align-items: baseline; }
.account-panel .ap-item .title { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.account-panel .ap-item .sub { color: var(--muted); font-size: 0.78rem; }
.account-panel .ap-item .amt { color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap; }
.account-panel .ap-empty { color: var(--muted); padding: 6px 0; font-size: 0.85rem; }
.account-panel .view-all { display: block; text-align: center; padding: 11px;
  background: var(--ink); color: #fff; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
.account-panel .view-all:hover { opacity: 0.88; color: #fff; }
@media (max-width: 720px) {
  .account-panel { position: fixed; top: auto; bottom: 0; right: 0; left: 0;
    width: auto; border-radius: 0; max-height: 80vh; overflow-y: auto; }
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 24px; }

/* Hero */
.hero { padding: 80px 24px; text-align: center; max-width: 900px; margin: 0 auto; }
.hero h1 { font-family: var(--serif); font-size: 3rem; font-style: italic;
  font-weight: 500; letter-spacing: 0.01em; }
.hero p { color: var(--muted); font-size: 1rem; max-width: 540px; margin: 0 auto 24px; }
.btn { display: inline-block; padding: 14px 32px; background: var(--accent); color: var(--bg);
  border: none; cursor: pointer; font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; transition: opacity 0.15s; font-family: inherit; font-weight: 500; }
.btn:hover { color: var(--bg); opacity: 0.88; }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { color: var(--bg); }

/* Page banner — big italic-serif title on a deeper sand strip */
.page-banner { background: var(--bg-alt); padding: 70px 24px; }
.page-banner-inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.page-banner h1 { font-family: var(--serif); font-size: 3rem; font-style: italic;
  font-weight: 500; letter-spacing: 0.01em; margin: 0; color: var(--ink); }

/* Layout with filter sidebar */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px;
  max-width: var(--maxw); margin: 0 auto; padding: 24px; }

.filters { font-size: 0.88rem; }
.filters-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.filter-group { border-top: 1px solid var(--line-soft); padding: 14px 0; }
.filter-title { display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; padding: 4px 0; font-weight: 500; }
.filter-title .caret { font-size: 0.7rem; color: var(--muted); }
.filter-body { padding-top: 8px; display: none; max-height: 280px; overflow-y: auto; }
.filter-group.open .filter-body { display: block; }
.filter-group.open .filter-title .caret { transform: rotate(180deg); display: inline-block; }
.filter-option { display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 0.85rem; color: #333; cursor: pointer; }
.filter-option input { margin: 0; }
.filter-reset { color: var(--muted); font-size: 0.8rem; cursor: pointer; text-decoration: underline;
  margin-top: 6px; display: inline-block; background: none; border: none; padding: 0; font-family: inherit; }

/* Results bar */
.results-bar { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
.results-count { color: var(--muted); font-size: 0.85rem; }
.results-controls { display: flex; gap: 12px; align-items: center; font-size: 0.85rem; }
.select, .search { padding: 9px 14px; border: 1px solid var(--line); background: #fff;
  font-size: 0.9rem; font-family: inherit; color: var(--ink); }
.search { min-width: 240px; }
.search:focus, .select:focus { outline: 1px solid var(--ink); }

/* Product grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.card { background: transparent; border: none; transition: opacity 0.15s; display: block; }
.card:hover { opacity: 0.85; }
.card-img-wrap { background: var(--card); aspect-ratio: 1; overflow: hidden;
  border: 0.5px solid var(--line-soft); position: relative; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity 0.3s ease; }
/* Quick view — second image fades in on hover when present */
.card-img-wrap img.alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-img-wrap img.alt { opacity: 1; }
.card:hover .card-img-wrap img.primary { opacity: 0; }
.card-cat { color: var(--olive); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 12px 0 4px; font-weight: 500; }
.card-title { font-size: 0.95rem; font-weight: 400; margin: 0 0 4px; line-height: 1.4;
  color: var(--ink); }
.card-price { font-size: 0.88rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.card-colors { display: flex; gap: 5px; margin-top: 8px; }
.card-color-dot { width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15); position: relative; }
.card-color-dot[data-natural="1"]::after { content: ''; position: absolute;
  top: 1px; right: 1px; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; border: 0.5px solid rgba(0,0,0,0.3); }
.stock-pill { display: inline-block; padding: 2px 8px; font-size: 0.65rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-left: 6px; vertical-align: middle; }
.stock-in { background: #E5EBD8; color: #4D5C2F; }       /* olive-tinted */
.stock-back { background: #F2E3CC; color: #8C5A1F; }     /* warm amber */
.stock-out { background: #EFD8D0; color: #8B3E20; }      /* terracotta-tinted */

/* Detail page — flowerjewelrynyc.com layout */
.detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 32px 0; }
.detail-img-wrap { background: #f7f7f7; aspect-ratio: 1; overflow: hidden; }
.detail-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.detail-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px; margin-top: 10px; }
.detail-thumbs .thumb { aspect-ratio: 1; background: #f7f7f7; cursor: pointer; overflow: hidden;
  border: 1px solid transparent; transition: border-color 0.1s; }
.detail-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-thumbs .thumb.active { border-color: var(--ink); }
.detail-thumbs .thumb:hover { border-color: #999; }
/* Lightbox for click-to-zoom */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none;
  align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Wishlist heart on product detail */
.wish-btn { display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 18px; background: #fff; color: var(--ink); border: 1px solid var(--ink);
  cursor: pointer; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: inherit; font-weight: 500; }
.wish-btn:hover { background: #fafafa; }
.wish-btn.active { background: var(--ink); color: #fff; }
.wish-btn .heart::before { content: '♡'; font-size: 1.1rem; line-height: 1; }
.wish-btn.active .heart::before { content: '♥'; }
.detail-body { padding-top: 8px; }
.detail-brand { color: var(--olive); font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; margin-bottom: 14px; font-weight: 500; }
.detail-body h1 { font-family: var(--serif); font-size: 2.2rem; font-style: italic;
  font-weight: 500; margin: 0 0 14px; }
.detail-body .price { font-size: 1.35rem; margin: 0 0 14px;
  font-variant-numeric: lining-nums tabular-nums; }
.detail-body .desc { color: var(--ink); margin: 0 0 28px; font-size: 0.95rem; line-height: 1.65; }

/* Color (metal) picker — small swatches like flowerjewelrynyc.com */
.option-row { margin: 22px 0; }
.option-label { font-size: 0.78rem; letter-spacing: 0.06em; margin-bottom: 10px; }
.option-label .picked { color: var(--muted); margin-left: 4px; }
.color-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch { width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid #d0d0d0; position: relative; transition: transform 0.1s; }
.color-swatch:hover { transform: scale(1.06); }
.color-swatch.selected { box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--ink); }
.color-swatch[data-natural="1"]::after { content: ''; position: absolute;
  top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; border: 1px solid var(--ink); }

/* Length / size pills */
.size-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pill { padding: 9px 14px; border: 1px solid #d0d0d0; background: #fff;
  cursor: pointer; font-size: 0.82rem; font-family: inherit; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums; transition: all 0.1s; }
.size-pill:hover { border-color: var(--ink); }
.size-pill.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.size-pill.unavail { color: #b0b0b0; text-decoration: line-through; cursor: not-allowed; }
.size-pill.unavail:hover { border-color: #d0d0d0; }

/* Qty + Add to order */
.qty-add-row { display: flex; gap: 12px; margin-top: 32px; align-items: stretch; }
.qty { width: 80px; padding: 14px 12px; border: 1px solid var(--line); font-size: 1rem;
  font-family: inherit; text-align: center; }
.add { flex: 1; padding: 14px 32px; background: var(--ink); color: #fff; border: none;
  cursor: pointer; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-family: inherit; font-weight: 500; }
.add:hover { opacity: 0.88; }
.add:disabled { opacity: 0.4; cursor: not-allowed; }
.add-status { margin-top: 12px; font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }

/* Breadcrumb on detail page */
.breadcrumb { font-size: 0.78rem; color: var(--muted); margin-bottom: 18px;
  letter-spacing: 0.04em; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }

/* Empty / loading */
.empty { text-align: center; padding: 80px 24px; color: var(--muted); }

/* Footer */
.footer { border-top: 1px solid var(--line); margin-top: 80px; padding: 40px 24px;
  text-align: center; color: var(--muted); font-size: 0.85rem; }

/* Show/hide password toggle */
.pw-field { position: relative; }
.pw-field input { padding-right: 60px !important; width: 100%; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 12px; font-family: inherit; }
.pw-toggle:hover { color: var(--ink); }

/* Login form */
.form-card { max-width: 420px; margin: 60px auto; background: #fff; border: 1px solid var(--line);
  padding: 40px 32px; }
.form-card h1 { text-align: center; margin-bottom: 24px; font-size: 1.6rem; font-weight: 400; }
.form-card label { display: block; margin: 12px 0 6px; font-size: 0.85rem; }
.form-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  font-size: 0.95rem; font-family: inherit; }
.form-card input:focus { outline: 1px solid var(--ink); }
.form-card .btn { width: 100%; margin-top: 20px; }
.form-card .alt { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--muted); }

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters { display: none; }
  .filters.mobile-open { display: block; }
}
@media (max-width: 960px) {
  .nav-bar { grid-template-columns: auto 1fr auto; gap: 16px; padding: 20px 16px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.7rem; }
  .brand-wordmark { font-size: 1.6rem; }
}
@media (max-width: 760px) {
  .account-label { display: none; }
}
@media (max-width: 720px) {
  .detail { grid-template-columns: 1fr; gap: 24px; }
  .nav-bar { grid-template-columns: 1fr auto; row-gap: 10px; }
  .nav-links { grid-column: 1 / -1; padding: 6px 0 0; font-size: 0.68rem;
    border-top: 1px solid var(--line-soft); }
  .brand-wordmark { font-size: 1.3rem; }
  .brand-logo svg { width: 30px; height: 30px; }
  h1 { font-size: 1.7rem; }
  .hero h1 { font-size: 1.9rem; }
  .page-banner h1 { font-size: 1.9rem; }
}