/* Public jewelry shop (shop.eastcoastworldwide.com). The shop wears the MAIN MARKETING
   CHROME (marketing/base.html — same fixed sidebar nav, footer, fonts, brand tokens) so
   customers don't notice the subdomain; there is NO separate shop header / staff top-nav.
   These rules style only the shop's own content inside .site-main. Reuses brand tokens from
   marketing/base.css (--sage, --steel, --green-ink, --maxw, --r, fonts). */

/* The shop's content sits inside the marketing layout's .site-main (which is already offset
   from the fixed sidebar). This wrapper caps the width like the marketing .container and adds
   a little extra left padding so the first content isn't flush against the nav column. */
.shop-wrap {
  max-width: var(--maxw, 1140px);
  margin: 0 auto;
  padding: 1rem 24px 3rem 40px;   /* extra left padding = breathing room from the nav */
}

/* Buttons reused on the detail page CTA (the page chrome itself comes from marketing). */
.shop-book, .shop-secondary {
  background: var(--sage, #c2bf8b); color: #1f2a24 !important; padding: .55rem 1.1rem;
  border-radius: 999px; font-weight: 600; text-decoration: none;
}
.shop-secondary { background: transparent; border: 1px solid var(--sage, #c2bf8b); }

/* Hero */
.shop-hero { text-align: center; padding: 1.5rem 0 1rem; }
.shop-hero h1 { font-family: "Cormorant Garamond", serif; font-size: 2.4rem; margin: 0 0 .35rem; }
.shop-hero p { color: var(--slate, #4a5651); margin: 0; }

/* Filters — a compact, content-sized control (NOT full-bleed). The collapsed bar sizes to
   its summary; when open it grows only as wide as its fields need, up to a sensible cap. */
.shop-filterbar {
  display: inline-block;            /* shrink-to-content, not edge-to-edge */
  width: auto; max-width: 100%;
  background: #fff; border: 1px solid #e0ddd0; border-radius: 12px;
  padding: .1rem 1rem; margin: 1rem 0 1.25rem;
}
.shop-filterbar[open] { max-width: 640px; }   /* opened: a tidy compact column, never page-wide */
.shop-filterbar > summary { font-weight: 700; cursor: pointer; padding: .65rem 0; list-style: none; }
.shop-filterbar > summary::-webkit-details-marker { display: none; }
.shop-filterbar > summary::before { content: "\2630\00a0\00a0"; color: #9a9a90; }
.shop-filter-on { color: #8f8b55; font-weight: 600; font-size: .85rem; }
.shop-filter-form { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; align-items: flex-end; padding: .2rem 0 1rem; }
.sf-block { display: flex; flex-direction: column; font-weight: 600; font-size: .78rem; gap: .25rem; }
.sf-block input, .sf-block select {
  padding: .5rem .55rem; border: 1px solid #d8d8cf; border-radius: 8px;
  font: inherit; font-weight: 400; min-width: 175px;
}
.sf-check { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 500; }
.sf-actions { display: flex; gap: .6rem; align-items: center; }
.sf-actions button {
  background: var(--steel, #333c45); color: #fff; border: none; border-radius: 8px;
  padding: .55rem 1rem; font-weight: 600; cursor: pointer;
}
.shop-clear { color: var(--slate, #4a5651); font-size: .9rem; }
.shop-count { text-align: center; color: var(--slate, #4a5651); font-size: .9rem; margin: .25rem 0 1.25rem; }

/* Grid */
.shop-grid {
  display: grid; gap: .8rem;
  /* Fluid: auto-fill columns within the (now fluid) .shop-wrap width — more products per row on
     wide monitors, gracefully fewer on laptops; drops to 2 on phones (720px override below). */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.shop-card {
  background: #fff; border: 1px solid #ececdf; border-radius: var(--r, 18px);
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s;
}
.shop-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.shop-card-img { aspect-ratio: 1 / 1; background: #f3f3ec; }
.shop-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #b7b7a8; font-size: .85rem;
}
.shop-card-body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.shop-card-brand { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--steel, #333c45); }
.shop-card-name { font-weight: 600; font-size: .98rem; line-height: 1.25; }
.shop-badge {
  align-self: flex-start; margin-top: .35rem; font-size: .72rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 999px;
}
.shop-badge--in { background: #e3efe5; color: #2c6b3f; }
.shop-badge--out { background: #f1e3e3; color: #9a3b3b; }

/* Pager */
.shop-pager { display: flex; gap: 1.5rem; justify-content: center; align-items: center; margin: 2rem 0 0; }
.shop-pager a { color: var(--steel, #333c45); text-decoration: none; font-weight: 600; }
.shop-pager span { color: var(--slate, #4a5651); font-size: .9rem; }
.shop-empty { text-align: center; color: var(--slate, #4a5651); padding: 2rem 0; }

/* Detail */
.shop-crumb { margin: .5rem 0 1.25rem; }
.shop-crumb a { color: var(--steel, #333c45); text-decoration: none; }
/* The media column is sized to the main photo (scales 320-440px on desktop) — NOT a full half-page column —
   so the product info sits right beside it. Brad's spec: a small main image with the extra
   photos as a compact thumbnail row underneath; click either to enlarge in the lightbox. */
.shop-detail { display: grid; grid-template-columns: clamp(320px, 30vw, 440px) 1fr; gap: 2.5rem; align-items: start; }
.shop-detail-media { width: clamp(320px, 30vw, 440px); max-width: 440px; }
.shop-detail-img { background: #fff; border: 1px solid #ececdf; border-radius: var(--r, 18px); overflow: hidden; }
.shop-detail-img img { width: 100%; height: clamp(320px, 30vw, 440px); object-fit: contain; display: block; cursor: zoom-in; background: #fafaf7; }
.shop-zoom-hint { color: #b7b7a8; font-size: .78rem; margin: .45rem 0 0; text-align: center; }
.shop-detail-info h1 { font-family: "Cormorant Garamond", serif; font-size: 2rem; margin: .35rem 0 .6rem; }
.shop-detail-desc { margin: 1rem 0; color: var(--slate, #4a5651); line-height: 1.55; }
.shop-detail-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 .75rem; }
.shop-detail-note { color: #8a8a7d; font-size: .85rem; }

/* Mobile */
@media (max-width: 720px) {
  .shop-wrap { padding: 1rem 18px 2.5rem; }   /* tighter gutters on phones */
  .shop-filterbar, .shop-filterbar[open] { display: block; max-width: 100%; }
  /* On mobile the media stacks above the info, but the main photo stays SMALL (not full-bleed) —
     centered, with the thumbnail row under it. The lightbox shows the full-size shot on tap. */
  .shop-detail { grid-template-columns: 1fr; gap: 1.25rem; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .7rem; }
}

/* meta row + page-size selector (added 2026-06-05) */
.shop-meta { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.25rem 0 1.25rem; }
.shop-count { margin:0; text-align:left; }
.shop-per { font-size:.9rem; color:var(--slate,#4a5651); display:flex; gap:.55rem; align-items:center; }
.shop-per a { color:var(--steel,#333c45); text-decoration:none; }
.shop-per strong { color:var(--green-ink,#1f2a24); }
.shop-detail-sku { color:#8a8a7d; font-size:.85rem; margin:.4rem 0 0; }

/* one-card-per-product: option count + variants table (2026-06-05) */
.shop-card-opts { font-size:.78rem; color:#8a8a7d; }
.shop-variants-h { font-family:"Cormorant Garamond",serif; font-size:1.2rem; margin:1.25rem 0 .5rem; }
.shop-variants { width:100%; border-collapse:collapse; font-size:.92rem; }
.shop-variants th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#8a8a7d; border-bottom:1px solid #ececdf; padding:.4rem .5rem; }
.shop-variants td { padding:.5rem; border-bottom:1px solid #f1f1e8; vertical-align:middle; }
.shop-variant-sku { color:#b7b7a8; font-size:.78rem; margin-left:.35rem; }
.shop-variants .shop-badge { margin-top:0; }

/* Click-to-enlarge lightbox (A5, 2026-06-07). Dependency-free overlay. */
.shop-thumbs { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }
.shop-thumb { padding:0; border:2px solid transparent; border-radius:8px; background:#faf9f2; cursor:pointer; width:60px; height:60px; overflow:hidden; }
.shop-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.shop-thumb.is-active { border-color:#333c45; }
body.shop-lb-open { overflow: hidden; }
.shop-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,24,22,.86); padding: 2rem; cursor: zoom-out;
}
.shop-lightbox[hidden] { display: none; }
.shop-lightbox img {
  max-width: min(92vw, 900px); max-height: 88vh; width: auto; height: auto;
  object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 12px 48px rgba(0,0,0,.4);
}
.shop-lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem; font-size: 2.4rem; line-height: 1;
  color: #fff; background: none; border: 0; cursor: pointer; opacity: .85;
}
.shop-lightbox-close:hover { opacity: 1; }
@media (max-width: 720px) {
  /* keep the small main photo (don't stretch full-bleed); center it + its thumbnail row */
  .shop-detail-media { width: min(86vw, 340px); max-width: 340px; margin: 0 auto; }
  .shop-detail-img img { height: min(86vw, 340px); }
  .shop-thumbs { justify-content: center; }
  .shop-zoom-hint { text-align: center; }
}

/* Staff edit/notation widget on shop product pages (Brad 2026-06-11) */
.staff-flag{margin:1.5rem 0;max-width:540px}
.staff-flag summary{cursor:pointer;font-weight:600;color:#333c45;padding:.5rem .8rem;background:#f4f3ea;border:1px solid #e0ddd0;border-radius:10px;list-style:none}
.staff-flag summary::-webkit-details-marker{display:none}
.staff-flag[open] summary,.staff-flag details[open] summary{border-radius:10px 10px 0 0}
.staff-flag-form{display:flex;flex-direction:column;gap:.5rem;padding:.8rem;border:1px solid #e0ddd0;border-top:none;border-radius:0 0 10px 10px}
.staff-flag-form select,.staff-flag-form input,.staff-flag-form textarea{font:inherit;padding:.45rem .6rem;border:1px solid #d8d8cf;border-radius:8px}
.staff-flag-pick{display:flex;gap:.5rem;flex-wrap:wrap}
.staff-flag-pick input{flex:1;min-width:140px}
.staff-flag-recent{padding:.4rem .8rem .8rem}
.staff-flag-recent ul{margin:.3rem 0 0;padding-left:1.1rem}

/* Aftercare on the shop (browse-only, no price) — Brad 2026-06-11 */
.shop-hero-also{margin-top:.5rem;font-size:.95rem}
.shop-hero-also a{color:#333c45;font-weight:600;border-bottom:2px solid #c2bf8b;text-decoration:none}
.ac-shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,200px));gap:18px;justify-content:center;max-width:900px;margin:1.6rem auto}
.ac-shop-card{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;border:1px solid #e7e4d8;border-radius:12px;padding:1rem;color:#333c45;background:#fff;transition:box-shadow .15s}
.ac-shop-card:hover{box-shadow:0 12px 26px rgba(51,60,69,.1)}
.ac-shop-img{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.ac-shop-img img{max-height:120px;width:auto;object-fit:contain}
.ac-shop-name{font-weight:600}
.ac-shop-for{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:#7c7c74;margin-top:.2rem}
.ac-shop-foot{text-align:center;color:#7c7c74;margin:1.6rem 0}
.ac-detail{display:flex;flex-wrap:wrap;gap:2rem;max-width:760px;margin:1rem auto 2rem;align-items:flex-start}
.ac-detail-img{flex:1 1 240px;text-align:center}
.ac-detail-img img{max-width:100%;max-height:320px;border-radius:12px}
.ac-detail-body{flex:1 1 280px}
.ac-detail-for{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#7c7c74}