:root { --gutter:40px; --mono:'DM Mono', ui-monospace, monospace; --display:var(--mono); --ink:#2d2b2a; --pink:#ffadad; --green:#b3dec1; --mute:#777; --bg:#fff; --soft:#f5f5f5; --radius:12px; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 'Albert Sans', system-ui, -apple-system, sans-serif; color:var(--ink); background:var(--bg); }
a { color:inherit; }
/* Header: logo left, nav centered, search + cart right. Hamburger below 900px.
   On the home page it floats over the video hero (white) and turns solid once you scroll past. */
header { position:sticky; top:0; z-index:20; background:var(--bg); color:var(--ink);
         transition:background .25s, color .25s, box-shadow .25s; }
.hdr { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
       padding:16px calc(var(--gutter) + 24px); }   /* +24px so the logo and cart sit inside the video's edge */   /* 16px above/below the logo and nav items */
.logo { justify-self:start; }
.logo { display:block; }
.logo img { display:block; height:30px; width:auto; }
/* White stacked logo over the video; the color logo everywhere else */
.logo .logo-white { display:none; }   /* same size as the color logo */
header.over-hero:not(.menu-open) .logo .logo-color { display:none; }
header.over-hero:not(.menu-open) .logo .logo-white { display:block; }
.site-nav > ul { list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:36px; }
.site-nav a { display:flex; align-items:center; height:30px; padding:0; text-decoration:none; font-weight:500; font-size:15px; letter-spacing:.3px; }
.site-nav a:hover { text-decoration:underline; text-underline-offset:4px; }
.site-nav li { position:relative; }
.site-nav .sub { list-style:none; margin:0; padding:8px 0; position:absolute; left:50%; transform:translateX(-50%); top:100%;
                 min-width:190px; background:var(--bg); color:var(--ink); border-radius:var(--radius);
                 box-shadow:0 8px 24px rgba(0,0,0,.1); display:none; text-align:center; }
.site-nav .sub a { padding:8px 16px; font-weight:400; }
.site-nav .has-sub:hover .sub, .site-nav .has-sub:focus-within .sub { display:block; }
.site-nav .has-sub > a { gap:4px; }   /* 4px between the label and the caret */
.site-nav .caret { width:14px; height:14px; fill:currentColor; flex:none; transition:transform .2s; }
.site-nav .has-sub:hover .caret, .site-nav .has-sub:focus-within .caret { transform:rotate(180deg); }
.actions { justify-self:end; display:flex; align-items:center; gap:4px; }
.icon-btn { position:relative; width:36px; height:30px; border:0; background:none; color:inherit; cursor:pointer;
            display:grid; place-items:center; border-radius:999px; }
.icon-btn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.badge { position:absolute; top:-4px; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
         background:var(--pink); color:var(--ink); font-size:10px; font-weight:600; line-height:16px; }
.search { display:flex; align-items:center; }
.search input { width:0; padding:0; opacity:0; border:0; background:var(--soft); color:var(--ink); border-radius:999px;
                font:inherit; font-size:14px; height:30px; transition:width .25s, padding .25s, opacity .2s; }
header.search-open .search input { width:220px; padding:0 14px; opacity:1; }
.menu-btn { display:none; width:36px; height:30px; border:0; background:none; color:inherit; cursor:pointer; padding:7px 6px;
            flex-direction:column; justify-content:space-between; }
.menu-btn span { display:block; height:2px; background:currentColor; border-radius:2px; transition:transform .2s, opacity .2s; }
.menu-btn[aria-expanded=true] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded=true] span:nth-child(2) { opacity:0; }
.menu-btn[aria-expanded=true] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); background:var(--ink); color:#fff;
         padding:10px 18px; border-radius:999px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.toast.show { opacity:1; transform:translate(-50%, 0); }

/* Floating over the hero: transparent, white logo (the color logo is turned white with a filter) and white text */
body.has-hero header { position:fixed; left:0; right:0; }
header.over-hero:not(.menu-open) { background:transparent; color:#fff; }
header:not(.over-hero) { box-shadow:0 1px 0 rgba(0,0,0,.06); }

/* Video hero (home page) */
.hero { position:relative; height:min(92vh, 860px); min-height:520px; margin:0 var(--gutter); border-radius:0 0 24px 24px; overflow:hidden;
        background:#2b2b2b; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Darken the video so the white text and nav stay readable */
.hero-shade { position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%),
             linear-gradient(to top right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.15) 100%); }
/* Headline: always exactly two lines ("One-of-a-kind" / "handmade beaded jewelry"), sized to fit the width */
.hero-title { position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(32px, 8vh, 88px); margin:0;
              color:#fff; font:400 clamp(22px, 5.2vw, 76px)/1.08 var(--display); letter-spacing:-.03em; }
.hero-title span { display:block; white-space:nowrap; }
.hero-title em { font-style:italic; }

.page-title { font:500 26px/1.2 var(--display); letter-spacing:-.02em; margin:8px 0 16px; }
.empty { color:var(--mute); padding:32px 0; }
.promo { background:var(--pink); color:#000; text-align:center; padding:8px 16px; font-size:14px; font-weight:500; }
.promo:empty { display:none; }
main { padding:16px var(--gutter); }   /* content fills the width inside the side margins */
footer { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
         padding:48px var(--gutter) 32px; margin-top:48px; border-top:1px solid var(--soft); }
.footer-logo img { display:block; height:30px; width:auto; max-width:80vw; }
.footer-icons { display:flex; gap:12px; }
.footer-icons:empty { display:none; }
.icon-link { display:grid; place-items:center; width:40px; height:40px; border-radius:999px; color:var(--ink); transition:background .2s; }
.icon-link:hover { background:var(--soft); }
.icon-link svg { width:28px; height:28px; }
.footer-copy { margin:0; color:var(--mute); font-size:11px; }
.footer-copy a { color:inherit; text-decoration:none; }
.footer-copy a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* Photos */
.photo { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--soft); border-radius:var(--radius); }

/* Shop page */
.bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; align-items:center; }
.chip { border:0; background:var(--soft); border-radius:999px; padding:5px 12px; font:inherit; font-size:13px; cursor:pointer; }
.chip[aria-pressed=true] { background:var(--ink); color:#fff; }
.count { color:var(--mute); font-size:13px; margin:6px 0 14px; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.card { display:block; text-decoration:none; }
.card .t { padding:10px 0 4px; }
.card .n { font-size:16px; font-weight:500; }
.card .p { color:var(--mute); font-size:14px; }
.card:hover .n { text-decoration:underline; }

/* Product page */
.crumbs { font-size:14px; color:var(--mute); margin:4px 0 20px; }
.crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.crumbs li + li::before { content:"/"; margin-right:6px; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { text-decoration:underline; color:var(--ink); }
.crumbs [aria-current] { color:var(--ink); }
/* photo column is exactly as wide as the photo (capped by window height), so the gap to the text is always 40px */
.pd { display:grid; grid-template-columns:minmax(min(100%, 320px), min(calc(50% - 20px), calc(100vh - 230px))) 1fr; gap:40px; align-items:start; }
/* Main photo: always a full square that fits on screen (header + breadcrumbs + thumbnails need ~230px) */
.gallery { width:100%; }
.zoom { display:block; width:100%; border:0; padding:0; background:none; cursor:zoom-in; position:relative; }
.zoom::after { content:""; position:absolute; right:12px; bottom:12px; width:34px; height:34px; border-radius:999px;
  background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2b2a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 2px 8px rgba(0,0,0,.12); }

/* Larger view: still 1:1, as big as the screen allows */
.lightbox { position:fixed; inset:0; z-index:50; background:rgba(20,18,17,.92); display:none; place-items:center; }
.lightbox.open { display:grid; }
.lb-stage { width:min(92vw, 88vh); height:min(92vw, 88vh); overflow:hidden; border-radius:var(--radius); background:#fff; cursor:zoom-in; }
.lightbox img { width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .2s ease; }
/* Zoom: click (or tap) the big photo to magnify 2.5x, move the mouse or drag to look around */
.lb-stage.zoomed { cursor:zoom-out; touch-action:none; }
.lb-stage.zoomed img { transform:scale(2.5); transition:none; }
.lb-btn { position:absolute; width:48px; height:48px; border:0; border-radius:999px; background:rgba(255,255,255,.92); color:var(--ink);
          display:grid; place-items:center; cursor:pointer; font-size:22px; line-height:1; }
.lb-close { top:16px; right:16px; }
.lb-prev { left:16px; top:50%; transform:translateY(-50%); }
.lb-next { right:16px; top:50%; transform:translateY(-50%); }
.lb-count { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#fff; font-size:14px; }
body.lb-open { overflow:hidden; }
.thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.thumbs .thumb > button { border:0; padding:0; background:none; cursor:pointer; opacity:.6; }
.thumbs .thumb > button[aria-current=true] { opacity:1; }
.thumbs .photo { border-radius:8px; }
.thumb { width:72px; }
.thumbs .thumb > button { width:100%; }
/* Owner-only (admin.js): only shown when running tools/serve.py locally */
.set-main { display:block; width:100%; margin-top:4px; border:0; background:var(--soft); border-radius:999px;
            font:inherit; font-size:11px; padding:2px 0; cursor:pointer; color:var(--ink); }
.set-main:disabled { background:var(--pink); cursor:default; }
.info h1 { margin:0 0 4px; font:500 24px/1.25 var(--display); letter-spacing:-.02em; }
.price { font-size:20px; margin:4px 0 16px; }
.meta { font-size:13px; color:var(--mute); }
.length { font-size:14px; margin-top:8px; }
.tags { display:flex; flex-wrap:wrap; gap:4px; margin:14px 0; }
.tags span { font-size:12px; background:var(--soft); padding:2px 8px; border-radius:999px; }
.opt { display:block; margin:6px 0; font-size:14px; }
.soon { font-size:13px; color:var(--mute); margin-top:6px; min-height:1em; }

/* Buttons match jessicagoldmandesign.com: pill, 2px top/left + 4px right/bottom outline */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border-radius:100px;
       border:2px solid var(--ink); border-right-width:4px; border-bottom-width:4px; background:#fff; color:var(--ink);
       font:600 16px/24px 'Albert Sans', sans-serif; letter-spacing:.3px; cursor:pointer; text-decoration:none;
       transition:transform .08s, border-width .08s; }
.btn:hover { transform:translate(1px, 1px); border-right-width:3px; border-bottom-width:3px; }
.btn:active { transform:translate(2px, 2px); border-right-width:2px; border-bottom-width:2px; }
.btn-primary { background:var(--pink); }
.buy { margin-top:16px; width:100%; }

@media (max-width:1024px) { .grid { grid-template-columns:repeat(2, 1fr); gap:20px; } }
@media (max-width:900px) {
  .hdr { grid-template-columns:auto 1fr auto; padding:16px calc(var(--gutter) + 24px); gap:8px; }
  .menu-btn { display:flex; }
  .logo { justify-self:center; }
  .logo img { height:auto; width:min(48vw, 230px); }
  .menu-btn { grid-row:1; grid-column:1; }
  .logo { grid-row:1; grid-column:2; }
  .actions { grid-row:1; grid-column:3; }
  .site-nav { display:none; grid-row:2; grid-column:1 / -1; }
  .site-nav.open { display:block; }
  .site-nav > ul { flex-direction:column; gap:0; padding:4px 4px 12px; }
  .site-nav > ul > li { border-top:1px solid var(--soft); }
  .site-nav a { height:auto; padding:12px 0; font-size:17px; }
  .site-nav .caret { display:none; }   /* sub-items are always shown in the phone menu */
  .site-nav .sub { display:block; position:static; transform:none; box-shadow:none; padding:0 0 8px 16px; text-align:left; min-width:0; }
  .site-nav .sub a { padding:8px 0; font-size:15px; color:var(--mute); }
  .actions { gap:0; }
  /* Search opens as a full-width bar under the header on small screens */
  .search { position:static; }
  header.search-open .search input { position:absolute; left:var(--gutter); right:var(--gutter); top:100%; width:auto; margin-top:4px;
                                     box-shadow:0 6px 20px rgba(0,0,0,.12); background:#fff; }
  .hero { border-radius:0 0 20px 20px; height:min(86vh, 720px); }
  .hero-title { font-size:clamp(20px, 5.6vw, 44px); }
}
@media (max-width:640px) {
  :root { --gutter:20px; }   /* 40px would squeeze phone screens */
  .grid { grid-template-columns:1fr; gap:24px; }
  .pd { grid-template-columns:1fr; gap:20px; }
  .gallery { width:100%; }
  .lb-prev, .lb-next { top:auto; bottom:12px; transform:none; }
}

/* DM Mono for navigation and small labels (tags, filters, breadcrumbs, banner, details) */
.site-nav a, .promo, .sort, .footer-copy, .footer-links a, .policy-jump, .policy-updated, .sold-tag, .chip, .tags span, .feature-tag, .cart-remove, .cart-fine, .cart-upg, .qty, .crumbs, .meta, .count, .length, .lb-count, .set-main, .soon, .toast {
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em;
}
.site-nav a { font-size:14px; font-weight:400; }
.site-nav .sub a { font-size:13px; }
.promo { font-size:13px; font-weight:400; }
.chip { font-size:12px; }
.tags span { font-size:11px; }
.crumbs { font-size:12px; }
.meta, .count, .length { font-size:12px; }
@media (max-width:900px) { .site-nav a { font-size:15px; } .site-nav .sub a { font-size:14px; } }
/* Highlight tag (logo green, black text), e.g. "Sterling silver upgrade +$10" */
.feature-tag { position:absolute; top:12px; right:12px; background:var(--green); color:#000; font-size:11px;
               padding:3px 8px; border-radius:999px; pointer-events:none; }
.media { position:relative; }
.gallery .feature-tag { font-size:12px; }

/* Cart panel (cart.js) */
.cart-drawer { position:fixed; inset:0; z-index:60; pointer-events:none; }
.cart-scrim { position:absolute; inset:0; background:rgba(20,18,17,.4); opacity:0; transition:opacity .25s; }
.cart-panel { position:absolute; top:0; right:0; bottom:0; width:min(420px, 100vw); background:var(--bg); color:var(--ink);
              display:flex; flex-direction:column; transform:translateX(100%); transition:transform .28s ease;
              box-shadow:-12px 0 32px rgba(0,0,0,.12); }
.cart-drawer.open { pointer-events:auto; }
.cart-drawer.open .cart-scrim { opacity:1; }
.cart-drawer.open .cart-panel { transform:none; }
.cart-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--soft); }
.cart-head h2 { margin:0; font:500 18px/1.2 var(--display); letter-spacing:-.02em; }
.cart-body { flex:1; overflow:auto; padding:8px 20px; }
.cart-empty { color:var(--mute); padding:24px 0; }
.cart-line { display:grid; grid-template-columns:72px 1fr auto; gap:14px; padding:14px 0; border-bottom:1px solid var(--soft); align-items:start; }
.cart-line .photo { border-radius:8px; }
.cart-name { font-weight:500; text-decoration:none; line-height:1.3; }
.cart-name:hover { text-decoration:underline; }
.cart-upg { font-size:11px; color:var(--mute); margin-top:4px; }
.cart-row { display:flex; align-items:center; gap:14px; margin-top:8px; }
.cart-price { font-weight:500; }
.cart-remove { border:0; background:none; padding:0; color:var(--mute); font-size:11px; cursor:pointer; text-decoration:underline; }
.qty { display:inline-flex; align-items:center; border-radius:999px; background:var(--soft); font-size:12px; }
.qty button { width:28px; height:28px; border:0; background:none; cursor:pointer; font-size:15px; color:var(--ink); }
.qty button:disabled { opacity:.3; cursor:default; }
.qty span { min-width:16px; text-align:center; }
.cart-foot { padding:16px 20px 20px; border-top:1px solid var(--soft); display:grid; gap:8px; }
.cart-foot .btn { width:100%; }
.cart-sum { display:flex; justify-content:space-between; font-size:15px; }
.cart-disc { color:#2f6b45; }
.cart-total { font-weight:600; font-size:17px; padding-top:4px; }
.cart-fine { font-size:11px; color:var(--mute); margin:0 0 6px; }
.cart-nudge { margin:0 0 4px; background:var(--green); color:#000; border-radius:8px; padding:8px 12px; font-size:13px; }
.cart-note { margin:0; font-size:13px; color:var(--mute); min-height:1em; text-align:center; }
.cart-checkout:disabled { opacity:.7; cursor:progress; }
.thanks { max-width:560px; margin:48px auto; text-align:center; }
.thanks h1 { font:400 clamp(34px, 6vw, 56px)/1.05 var(--display); letter-spacing:-.03em; margin:0 0 16px; }
.thanks p { color:var(--mute); margin:0 0 28px; }
.ship-to { border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; }
.ship-to legend { float:left; margin-right:12px; color:var(--mute); }
.ship-to label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
/* Sold pieces */
.sold-tag { position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; font-size:11px;
            padding:3px 10px; border-radius:999px; pointer-events:none; }
.card.is-sold .photo { opacity:.55; }
.card.is-sold .p { text-decoration:line-through; }
.buy:disabled { cursor:not-allowed; opacity:.6; }
/* Footer policy links */
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; }
.footer-links a { font-size:11px; color:var(--ink); text-decoration:none; }
.footer-links a:hover { text-decoration:underline; text-underline-offset:3px; }
.cart-fine a { color:inherit; }

/* Shop policies page */
.policy { max-width:680px; margin:0 auto; padding:8px 0 24px; }
.policy h1 { font:400 clamp(32px, 5vw, 48px)/1.1 var(--display); letter-spacing:-.03em; margin:0 0 12px; }
.policy-intro { font-size:18px; margin:0 0 12px; }
.policy-jump { font-size:12px; color:var(--mute); margin:0 0 32px; }
.policy-jump a { color:var(--ink); }
.policy section { padding-top:8px; margin-bottom:28px; scroll-margin-top:90px; }
.policy h2 { font:500 20px/1.25 var(--display); letter-spacing:-.02em; margin:0 0 10px; }
.policy ul { padding-left:20px; margin:0 0 12px; }
.policy li { margin:6px 0; line-height:1.55; }
.policy p { line-height:1.6; }
.policy-updated { font-size:11px; color:var(--mute); margin-top:40px; }
/* Color filter swatches: 14px circles, with a larger invisible tap area */
.swatch { width:26px; height:26px; padding:0; border:0; background:none; border-radius:999px; cursor:pointer;
          display:grid; place-items:center; }
.swatch span { width:14px; height:14px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.swatch:hover span { transform:scale(1.15); }
.swatch[aria-pressed=true] { box-shadow:0 0 0 1.5px var(--ink); }
/* Category filter bar: centered, 40px above and below */
#cats { justify-content:center; margin:40px 0; }
.has-hero #shop { padding-top:0; }
/* Category pages: Color + Stone filters */
.filters { display:grid; gap:10px; margin:8px 0 24px; }
.filters[hidden] { display:none; }
.filter-row { display:flex; align-items:flex-start; gap:12px; }
.filter-label { font:500 12px/1 var(--mono); text-transform:uppercase; letter-spacing:.04em; color:var(--mute); width:48px; flex:none; padding-top:8px; }
.filter-row .bar { margin:0; }
#colors { gap:4px; }
[hidden] { display:none !important; }
/* Listing: hidden until products are drawn, so the page never flashes a half-built layout */
#shop.loading { visibility:hidden; min-height:100vh; }
/* Count on the left, sort on the right, right above the grid */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; }
.toolbar .count { margin:0; }
.sort { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mute); }
.sort select { appearance:none; -webkit-appearance:none; font:inherit; font-size:12px; text-transform:uppercase; color:var(--ink);
  border:1px solid #ddd; border-radius:999px; padding:7px 32px 7px 14px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%232d2b2a' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; }
.sort select:hover { border-color:var(--ink); }