/* =============================================
   CRYSTALS JEWELLERY — Clean Luxury 2026
============================================= */

:root {
  --bg:       #FAF8F5;
  --bg2:      #F2EDE7;
  --white:    #FFFFFF;
  --border:   rgba(30,18,12,.09);

  --ink:      #1E120C;
  --ink2:     #6B5548;
  --ink3:     #A8958A;

  --rose:     #A0746A;
  --rose-bg:  rgba(160,116,106,.10);
  --rose-bd:  rgba(160,116,106,.25);
  --price:    #5C3D2E;

  --serif:  'Playfair Display', Georgia, serif;
  --cond:   'Cormorant Garamond', Georgia, serif;
  --sans:   'Inter', system-ui, -apple-system, sans-serif;

  --r12:12px; --r16:16px; --r20:20px; --r24:24px;

  --sh:  0 2px 16px rgba(30,18,12,.07);
  --sh2: 0 8px 32px rgba(30,18,12,.10);
  --sh3: 0 20px 60px rgba(30,18,12,.14);
  --sh-rose: 0 4px 18px rgba(160,116,106,.28);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  max-width:895px; margin:0 auto;
  min-width:320px;
}
button, input { font-family:inherit; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
::selection { background:rgba(160,116,106,.18); }

/* ── Overlay ── */
.overlay {
  position:fixed; inset:0; z-index:80;
  background:rgba(30,18,12,.50); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.overlay.open { opacity:1; pointer-events:auto; }

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease; }
.reveal.in { opacity:1; transform:none; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 28px; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer;
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.9px; text-transform:uppercase;
  transition:all .2s; user-select:none; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn.primary {
  background:var(--rose); color:#fff;
  border-color:var(--rose); box-shadow:var(--sh-rose);
}
.btn.primary:hover { background:#8B5F56; border-color:#8B5F56; }
.btn.secondary {
  background:transparent; color:var(--ink); border-color:var(--border);
}
.btn.secondary:hover { background:var(--bg2); }
.btn.ghost {
  background:var(--bg2); color:var(--ink2); border-color:var(--border);
}
.btn.ghost:hover { background:var(--white); }
.btn.small { height:38px; padding:0 18px; font-size:11px; }

/* ── Icon button ── */
.iconBtn {
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--white);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--sh); transition:all .18s;
}
.iconBtn:hover { background:var(--bg2); }
.iconBtn:active { transform:scale(.93); }
.iconBtn svg { width:18px; height:18px; stroke:var(--ink); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ── HERO ── */
.hero { height:100svh; min-height:580px; position:relative; overflow:hidden; background:#E8E0D5; }
.hero::before {
  content:''; position:absolute; inset:0;
  background:url('../assets/hero.jpg') center/cover no-repeat;
  transform:scale(1.04); filter:brightness(.72) saturate(.9);
}
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(20,12,8,.22) 0%, rgba(20,12,8,.08) 25%,
    rgba(20,12,8,.00) 50%, rgba(20,12,8,.30) 80%,
    rgba(20,12,8,.55) 100%);
}
.heroTop {
  position:absolute; z-index:10;
  top:max(14px, env(safe-area-inset-top));
  left:14px; right:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.heroTop .iconBtn {
  background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
}
.heroTop .iconBtn svg { stroke:#fff; }
.heroBadge {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.20); border:1.5px solid rgba(255,255,255,.30);
  backdrop-filter:blur(14px); color:rgba(255,255,255,.90); font-size:12px; letter-spacing:.3px;
}
.dot { width:5px; height:5px; border-radius:50%; background:#F5C0C5; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

.heroStage {
  position:relative; z-index:5; height:100%; padding:0 20px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding-top:max(82px, 13vh);
}
.heroText { text-align:center; width:min(440px,100%); margin-top:7vh; }
.heroTitle {
  font-family:var(--cond); font-size:clamp(42px,9vw,68px); font-weight:300;
  line-height:1.0; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.30);
}
.heroTitle em {
  display:block; font-style:italic; text-transform:none;
  font-family:var(--serif); font-size:.68em; font-weight:400;
  letter-spacing:.02em; color:#FDDDE0; margin-bottom:4px;
}
.heroTitle::after {
  content:''; display:block; margin:12px auto 0; width:28px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.heroSub {
  margin-top:10px; font-size:11.5px; font-weight:400;
  letter-spacing:.55px; text-transform:uppercase; color:rgba(255,255,255,.72);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px;
}
.heroSub span { white-space:nowrap; }
.heroSubDot { opacity:.6; }
@media (max-width:480px){
  .heroSub { flex-direction:column; gap:4px; }
  .heroSubDot { display:none; }
}
.heroCenter { display:none; }
.heroActions {
  margin-top:clamp(60px, 20svh, 220px);
  display:flex; flex-direction:column; gap:10px; width:min(380px,100%);
}
.heroActions .btn { font-size:11px; letter-spacing:1px; }
.heroActions .btn.primary {
  background:rgba(255,255,255,.18); color:#fff;
  border-color:rgba(255,255,255,.55); box-shadow:none;
  backdrop-filter:blur(8px);
}
.heroActions .btn.primary:hover { background:rgba(255,255,255,.28); }
.heroActions .btn.secondary {
  background:transparent; color:rgba(255,255,255,.75);
  border-color:rgba(255,255,255,.30);
}
.heroActions .btn.secondary:hover { background:rgba(255,255,255,.10); }
.chev { display:none; }

/* ── SECTIONS ── */
.section { padding:32px 16px 44px; max-width:980px; margin:0 auto; }
.sectionHead { padding-bottom:18px; }
.h2 { font-family:var(--serif); font-size:26px; font-weight:500; color:var(--ink); }
.sub { font-size:13px; color:var(--ink3); margin-top:4px; }
.paper {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r20); padding:20px 18px; box-shadow:var(--sh);
  color:var(--ink2); line-height:1.7; font-size:14px;
}
.paper b { color:var(--ink); font-weight:600; }
.paper p + p { margin-top:12px; }
.contact-link { color:var(--rose); border-bottom:1px solid var(--rose-bd); transition:opacity .18s; }
.contact-link:hover { opacity:.75; }

/* ── CHIPS ── */
.chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:14px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex:0 0 auto; padding:9px 18px; border-radius:999px;
  font-size:11px; font-weight:500; letter-spacing:.5px; text-transform:uppercase;
  border:1.5px solid var(--border); background:var(--white);
  color:var(--ink2); cursor:pointer; transition:all .18s; box-shadow:var(--sh);
}
.chip.active { background:var(--rose); border-color:var(--rose); color:#fff; }
.chip:hover:not(.active) { background:var(--bg2); color:var(--ink); }

/* ── SEARCH ── */
.tools { display:flex; flex-direction:column; gap:10px; }
.search {
  height:48px; border-radius:var(--r16);
  background:var(--white); border:1.5px solid var(--border);
  display:flex; align-items:center; gap:10px; padding:0 14px;
  box-shadow:var(--sh); transition:border-color .18s;
}
.search:focus-within { border-color:var(--rose-bd); }
.search svg { width:16px; height:16px; stroke:var(--ink3); stroke-width:2; fill:none; stroke-linecap:round; flex-shrink:0; }
.search input { flex:1; border:0; outline:0; background:transparent; font-size:14px; color:var(--ink); }
.search input::placeholder { color:var(--ink3); }
.pill {
  height:48px; width:48px; flex-shrink:0; border-radius:var(--r16);
  background:var(--white); border:1.5px solid var(--border);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh); transition:background .18s;
}
.pill:hover { background:var(--bg2); }
.pill svg { width:16px; height:16px; stroke:var(--ink2); stroke-width:2; fill:none; stroke-linecap:round; }
.activeFilters { display:none; }

/* ── PRODUCT CARDS ── */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r20); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; box-shadow:var(--sh);
  transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--sh2); }
.card:active { transform:scale(.98); }
.thumb { position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg2); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.9,.2,1); }
.card:hover .thumb img { transform:scale(1.05); }
.badge {
  position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:999px;
  background:rgba(250,248,245,.90); border:1px solid var(--border);
  font-size:10px; font-weight:500; letter-spacing:.4px; text-transform:uppercase; color:var(--ink2);
}
.meta { padding:16px 16px 18px; flex:1; display:flex; flex-direction:column; }
.name {
  font-family:var(--serif); font-size:15px; font-weight:500;
  line-height:1.25; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word; /* щоб довгі слова не вилазили за картку */
}
@media (max-width:480px){
  .name { font-size:14px; line-height:1.2; }
}
.desc {
  font-size:12px; color:var(--ink3); line-height:1.5; margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.row {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--border);
  flex-wrap:wrap; /* щоб ціна і кнопка не вилазили */
}
.price {
  font-family:var(--serif); font-size:16px; font-weight:400;
  color:var(--ink2); letter-spacing:.02em;
  white-space:nowrap;
}
.miniAdd {
  height:34px; padding:0 16px; border-radius:999px;
  font-size:10px; font-weight:500; letter-spacing:.6px; text-transform:uppercase;
  background:var(--rose); border:none; color:#fff;
  cursor:pointer; box-shadow:var(--sh-rose);
  transition:all .18s; white-space:nowrap;
}
@media (max-width:480px){
  .price { font-size:15px; }
  .miniAdd { padding:0 12px; font-size:9.5px; }
}
.miniAdd:hover { background:#8B5F56; }
.miniAdd:active { transform:scale(.95); }

/* ── PAGINATION ── */
.pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:32px 0 8px;
  flex-wrap:wrap;
}
.pageBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--white);
  color:var(--ink2);
  cursor:pointer;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:18px;
  font-weight:500;
  text-decoration:none;
  letter-spacing:0.02em;
  box-shadow:0 1px 3px rgba(122,62,62,.06);
  transition:all .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.pageBtn:hover {
  background:var(--rose-bg);
  border-color:var(--rose-bd);
  color:var(--rose);
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(122,62,62,.12);
}
.pageBtn:active { transform:translateY(0); }
.pageBtn.active {
  background:var(--rose);
  border-color:var(--rose);
  color:#fff;
  box-shadow:0 4px 12px rgba(122,62,62,.25);
  transform:translateY(-1px);
  cursor:default;
  pointer-events:none;
}
@media (max-width:480px){
  .pageBtn { min-width:38px; height:38px; padding:0 10px; font-size:16px; }
}

/* ── QUIZ ── */
.quizCard {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r24); padding:22px 18px 20px; box-shadow:var(--sh2);
}
.quizStep { display:flex; flex-direction:column; gap:14px; }
.qTitle { font-family:var(--serif); font-size:21px; font-weight:500; color:var(--ink); }
.qOpts { display:flex; flex-direction:column; gap:8px; }
.qOpt {
  padding:14px 16px; border-radius:var(--r16);
  border:1.5px solid var(--border); background:var(--bg);
  color:var(--ink2); text-align:left; display:flex;
  justify-content:space-between; align-items:center; gap:10px;
  cursor:pointer; font-size:14px; transition:all .18s;
}
.qOpt:hover { border-color:var(--rose-bd); color:var(--ink); background:var(--white); }
.qOpt.active {
  background:var(--rose-bg);
  border-color:var(--rose);
  border-width:2px;
  color:var(--ink);
  font-weight:500;
}
.qOpt small { display:block; margin-top:2px; font-size:11.5px; color:var(--ink3); }
.quizNav { display:flex; gap:10px; margin-top:16px; }
.quizNav .btn {
  flex:1; height:48px;
  min-width:0;        /* дозволяє стискати кнопку */
  padding:0 12px;     /* менше боків — щоб вмістився довгий текст */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:480px){
  .quizNav { flex-direction:column-reverse; }
  .quizNav .btn { width:100%; flex:0 0 auto; }
}
.quizProgress { height:2px; background:var(--bg2); border-radius:999px; margin-top:14px; overflow:hidden; }
.quizProgress .bar { height:100%; background:var(--rose); border-radius:999px; transition:width .4s cubic-bezier(.2,.9,.2,1); }
.quizHint { margin-top:8px; font-size:12px; color:var(--ink3); }

/* ── SIDE MENU ── */
.side {
  position:fixed; top:0; left:0; height:100%; width:min(85vw,320px);
  background:rgba(250,248,245,.97); border-right:1px solid var(--border);
  backdrop-filter:blur(20px); box-shadow:var(--sh3);
  transform:translateX(-102%); transition:transform .32s cubic-bezier(.16,1,.3,1);
  z-index:90; padding:max(16px,env(safe-area-inset-top)) 16px 16px;
  display:flex; flex-direction:column; gap:14px;
}
.side.open { transform:translateX(0); }
.sideTop { display:flex; align-items:center; justify-content:space-between; }
.sideTitle { font-family:var(--serif); font-size:20px; font-weight:500; color:var(--ink); }
.sideBtns { display:flex; flex-direction:column; gap:8px; }
.sideBtn {
  height:50px; border-radius:var(--r16);
  border:1.5px solid var(--border); background:var(--white);
  color:var(--ink2); cursor:pointer; font-size:14px; transition:all .18s;
}
.sideBtn:hover { background:var(--bg2); color:var(--ink); }
.sideBtn.primary { color:var(--rose); background:var(--rose-bg); border-color:var(--rose-bd); }
.sideFoot { margin-top:auto; border-top:1px solid var(--border); padding-top:12px; font-size:12px; color:var(--ink3); }

/* ── PANELS ── */
.sheet {
  position:fixed; left:8px; right:8px;
  top:max(8px,env(safe-area-inset-top));
  bottom:calc(8px + env(safe-area-inset-bottom));
  border-radius:var(--r24); background:rgba(250,248,245,.98);
  border:1px solid var(--border); backdrop-filter:blur(20px);
  box-shadow:var(--sh3); transform:translateY(110%);
  transition:transform .34s cubic-bezier(.16,1,.3,1);
  z-index:95; overflow:hidden; display:flex; flex-direction:column;
  max-width:879px; margin:0 auto;
}
.sheet.open { transform:translateY(0); }
.sheetHead {
  padding:14px 16px 12px; display:flex; align-items:center;
  justify-content:space-between; border-bottom:1px solid var(--border); flex-shrink:0;
}
.sheetTitle { font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink); }
.sheet .iconBtn { background:var(--bg2); border-color:var(--border); }
.sheet .iconBtn svg { stroke:var(--ink2); }
.sheetBody { padding:14px 16px; overflow-y:auto; flex:1; }
.sheetFoot {
  padding:12px 16px; border-top:1px solid var(--border);
  display:flex; gap:10px; flex-shrink:0; background:rgba(250,248,245,.95);
}
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.label { font-size:11px; font-weight:500; letter-spacing:.55px; text-transform:uppercase; color:var(--ink3); }
.optRow { display:flex; flex-wrap:wrap; gap:8px; }
.opt {
  padding:7px 14px; border-radius:999px;
  border:1.5px solid var(--border); background:var(--white);
  color:var(--ink2); font-size:12px; font-weight:500; cursor:pointer; transition:all .18s;
}
.opt:hover { background:var(--bg2); color:var(--ink); }
.opt.active { background:var(--rose); border-color:var(--rose); color:#fff; }

/* ── CART FAB ── */
.cartFab {
  position:fixed; left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:70; border-radius:var(--r20);
  background:rgba(250,248,245,.95); border:1px solid var(--border);
  backdrop-filter:blur(20px); box-shadow:var(--sh3);
  padding:12px 12px 12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transform:translateY(calc(100% + 40px)); transition:transform .3s cubic-bezier(.16,1,.3,1), visibility .3s;
  visibility:hidden; pointer-events:none;
  max-width:871px; margin:0 auto;
}
.cartFab.show { transform:translateY(0); visibility:visible; pointer-events:auto; }
.cartFabLeft { display:flex; align-items:center; gap:12px; }
.cartIco {
  width:40px; height:40px; border-radius:var(--r12);
  background:var(--rose-bg); border:1px solid var(--rose-bd);
  display:grid; place-items:center; flex-shrink:0;
}
.cartIco svg { width:18px; height:18px; stroke:var(--rose); stroke-width:1.8; fill:none; stroke-linecap:round; }
.cartFabTxt { display:flex; flex-direction:column; gap:2px; min-width:0; overflow:hidden; }
.cartFabTitle { font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cartFabSub { font-size:11px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── TOAST ── */
.toast {
  position:fixed; left:50%; top:calc(16px + env(safe-area-inset-top));
  transform:translateX(-50%) translateY(-10px); z-index:120;
  padding:10px 20px; border-radius:999px;
  background:var(--ink); color:#fff;
  font-size:12.5px; font-weight:500; letter-spacing:.2px;
  box-shadow:var(--sh2); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── ABOUT VALUE ── */
#aboutValue { padding:32px 16px 40px; position:relative; }
#aboutValueBg { display:none; }
#aboutValueWrap {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r24); padding:28px 20px 22px; box-shadow:var(--sh2); max-width:980px; margin:0 auto;
}
#aboutValueHead { text-align:center; padding-bottom:16px; }
#aboutValueTitle {
  font-family:var(--serif); font-size:clamp(22px,5vw,34px);
  font-weight:500; color:var(--ink); letter-spacing:-.01em;
}
#aboutValueTitle::after {
  content:''; display:block; margin:12px auto 0; width:28px; height:1px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent);
}
#aboutValueSub { font-family:var(--cond); font-size:15px; color:var(--ink3); margin-top:8px; }
#aboutValueText { font-size:13.5px; line-height:1.75; color:var(--ink2); text-align:center; max-width:56ch; margin:0 auto 20px; }
#aboutValueGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#aboutValueCard1,#aboutValueCard2,#aboutValueCard3,#aboutValueCard4 {
  border-radius:var(--r16); padding:16px 14px; text-align:center;
  background:var(--bg); border:1px solid var(--border); transition:transform .2s, box-shadow .2s;
}
#aboutValueCard1:hover,#aboutValueCard2:hover,#aboutValueCard3:hover,#aboutValueCard4:hover { transform:translateY(-3px); box-shadow:var(--sh); }
#aboutValueIcon1,#aboutValueIcon2,#aboutValueIcon3,#aboutValueIcon4 {
  width:40px; height:40px; border-radius:50%; margin:0 auto 10px;
  display:grid; place-items:center; background:var(--rose-bg); border:1px solid var(--rose-bd); color:var(--rose);
}
#aboutValueH1,#aboutValueH2,#aboutValueH3,#aboutValueH4 { font-family:var(--serif); font-size:15px; font-weight:500; color:var(--ink); margin-bottom:6px; }
#aboutValueP1,#aboutValueP2,#aboutValueP3,#aboutValueP4 { font-size:12px; line-height:1.55; color:var(--ink3); }

/* ── FOOTER ── */
.footer { padding:24px 16px 28px; border-top:1px solid var(--border); }
.footer-inner { max-width:980px; margin:0 auto; text-align:center; }
.footer-brand { font-family:var(--serif); font-size:13px; color:var(--ink3); margin-bottom:12px; }
.footer-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.footer-links a { font-size:11px; font-weight:500; letter-spacing:.4px; text-transform:uppercase; color:var(--ink3); transition:color .18s; }
.footer-links a:hover { color:var(--rose); }

/* ── RESPONSIVE ── */
@media (min-width:480px) { .tools { flex-direction:row; align-items:center; } }
@media (min-width:600px) { .grid { grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (max-width:380px) { #aboutValueGrid { grid-template-columns:1fr; } .miniAdd { padding:0 12px; font-size:10px; } }


/* ── TRUST STRIP ── */
.trustStrip {
  background:var(--white); border-bottom:1px solid var(--border);
}
.trustStripInner {
  display:flex; align-items:center;
  padding:10px 16px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* Центрування на широких екранах */
  max-width:980px; margin:0 auto;
}
.trustStripInner::-webkit-scrollbar { display:none; }
/* На широких екранах — по центру без скролу */
@media(min-width:700px) {
  .trustStripInner { justify-content:center; overflow-x:visible; }
}
.trustItem {
  display:flex; align-items:center; gap:6px;
  padding:0 18px; flex:0 0 auto;
  font-size:10px; font-weight:500; letter-spacing:.3px;
  text-transform:uppercase; color:var(--ink3);
  border-right:1px solid var(--border);
  white-space:nowrap;
}
.trustItem:last-child { border-right:none; }
.trustItem svg {
  width:14px; height:14px; flex-shrink:0;
  stroke:var(--rose); stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
@media(max-width:600px){
  .trustItem { padding:0 14px; }
}

/* ── RATING IN CARD ── */
.rating {
  display:flex; align-items:center; gap:4px; margin-top:4px;
  flex-wrap:wrap; /* щоб не виходило за картку */
}
.stars { color:var(--rose); font-size:11px; letter-spacing:1px; flex-shrink:0; }
.ratingVal { font-size:11px; font-weight:600; color:var(--ink2); flex-shrink:0; }
.ratingCount { font-size:11px; color:var(--ink3); white-space:nowrap; }
/* На вузьких картках — менші зірки + покупок коротше */
@media (max-width:480px){
  .stars { font-size:10px; letter-spacing:0.5px; }
  .ratingVal, .ratingCount { font-size:10.5px; }
}

/* ── STOCK BADGE ── */
.stockBadge {
  position:absolute; bottom:10px; left:10px;
  padding:4px 10px; border-radius:999px;
  background:rgba(250,248,245,.92);
  border:1px solid rgba(160,116,106,.25);
  font-size:10px; font-weight:500; letter-spacing:.3px;
  color:var(--rose);
}

/* ── HIT BADGE ── */
.badge.hit {
  background:var(--rose); color:#fff;
  border-color:var(--rose);
}

/* ── REVIEWS ── */
.reviewsTrack {
  display:flex; gap:14px;
  overflow-x:auto; padding-bottom:12px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.reviewsTrack::-webkit-scrollbar { display:none; }
.reviewCard {
  flex:0 0 280px; background:var(--white);
  border:1px solid var(--border); border-radius:var(--r20);
  padding:16px; box-shadow:var(--sh);
  display:flex; flex-direction:column; gap:10px;
}
.reviewTop {
  display:flex; align-items:center; gap:10px;
}
.reviewAvatar {
  width:40px; height:40px; border-radius:50%;
  object-fit:cover; background:var(--bg2);
  border:1.5px solid var(--border); flex-shrink:0;
}
.reviewName { font-family:var(--serif); font-size:14px; font-weight:500; color:var(--ink); }
.reviewCity { font-size:11px; color:var(--ink3); margin-top:1px; }
.reviewStars { margin-left:auto; color:var(--rose); font-size:13px; letter-spacing:1px; }
.reviewText { font-size:13px; line-height:1.6; color:var(--ink2); font-weight:300; }
.reviewPhoto {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r12); border:1px solid var(--border);
}
@media(max-width:480px){
  .reviewCard { flex:0 0 240px; }
}

/* ── INSTAGRAM SECTION ── */
.instagramSection .sectionHead {
  display:flex; flex-direction:row;
  align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.instBtn {
  flex-shrink:0; height:40px; padding:0 20px; font-size:11px;
}
.instaGrid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.instaItem {
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--r16); background:var(--bg2);
  border:1px solid var(--border); display:block;
  cursor:pointer;
}
.instaItem img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.9,.2,1);
}
.instaItem:hover img { transform:scale(1.06); }
.instaOverlay {
  position:absolute; inset:0; background:rgba(160,116,106,.35);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .22s;
}
.instaItem:hover .instaOverlay { opacity:1; }
.instaOverlay svg {
  width:28px; height:28px; fill:#fff; stroke:none;
}
/* Заглушка якщо фото немає */
.instaPlaceholder {
  background: linear-gradient(135deg, var(--bg2) 0%, var(--border) 100%);
}
.instaPlaceholder::after {
  content:'Додай фото\A assets/instagram/ig-N.jpg';
  white-space:pre; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--ink3); text-align:center;
  padding:8px;
}
@media(min-width:600px){
  .instaGrid { gap:12px; }
}

/* ── COLLECTION HEAD ── */
.collectionHead {
  display:flex; flex-direction:column; gap:14px;
  padding-bottom:16px;
}
.collectionTitle {
  display:flex; align-items:baseline; gap:10px;
}
.collectionTitle .h2 { margin:0; }
.resultNote {
  font-size:12px; font-weight:400; color:var(--ink3);
  letter-spacing:.3px;
}

/* ── SEARCH BAR ── */
.searchBar {
  display:flex; align-items:center; gap:0;
  height:50px; border-radius:999px;
  background:var(--white); border:1.5px solid var(--border);
  padding:0 6px 0 18px; box-shadow:var(--sh);
  transition:border-color .18s, box-shadow .18s;
}
.searchBar:focus-within {
  border-color:var(--rose-bd);
  box-shadow:0 0 0 3px rgba(160,116,106,.10), var(--sh);
}
.searchBar > svg {
  width:16px; height:16px; flex-shrink:0;
  stroke:var(--ink3); stroke-width:2; fill:none; stroke-linecap:round;
  margin-right:10px;
}
.searchBar input {
  flex:1; border:0; outline:0; background:transparent;
  font-size:14px; color:var(--ink); min-width:0;
}
.searchBar input::placeholder { color:var(--ink3); }

.searchClear {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--bg2); border:none; cursor:pointer;
  display:grid; place-items:center; margin-right:6px; transition:background .15s;
}
.searchClear:hover { background:var(--border); }
.searchClear svg {
  width:12px; height:12px; stroke:var(--ink2);
  stroke-width:2; fill:none; stroke-linecap:round;
}

.filterBtn {
  display:flex; align-items:center; gap:7px;
  height:38px; padding:0 16px; border-radius:999px; flex-shrink:0;
  background:var(--bg2); border:1.5px solid var(--border);
  cursor:pointer; font-size:11px; font-weight:500;
  letter-spacing:.4px; text-transform:uppercase; color:var(--ink2);
  transition:all .18s;
}
/* На мобілці залишаємо тільки іконку — щоб placeholder пошуку не обрізало */
@media (max-width:560px){
  .filterBtn { padding:0; width:38px; justify-content:center; gap:0; }
  .filterBtn span { display:none; }
}
.filterBtn:hover { background:var(--rose-bg); border-color:var(--rose-bd); color:var(--rose); }
.filterBtn.active { background:var(--rose); border-color:var(--rose); color:#fff; }
.filterBtn svg {
  width:14px; height:14px; stroke:currentColor;
  stroke-width:2; fill:none; stroke-linecap:round;
}

/* ── CHIPS updated ── */
.chips { display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex:0 0 auto; padding:9px 16px; border-radius:999px;
  font-size:12px; font-weight:500; letter-spacing:.2px;
  border:1.5px solid var(--border); background:var(--white);
  color:var(--ink2); cursor:pointer; transition:all .2s;
  box-shadow:var(--sh); white-space:nowrap;
}
.chip.active {
  background:var(--rose); border-color:var(--rose);
  color:#fff; box-shadow:var(--sh-rose);
}
.chip:hover:not(.active) { background:var(--bg2); color:var(--ink); border-color:var(--rose-bd); }


/* ── Hero Logo ── */
.heroBadge {
  display:flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:none;
}
.heroLogo {
  font-family:var(--cond);
  font-size:14px; font-weight:300;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.dot { display:none; }

/* ── Quiz chip ── */
.quizChip {
  background: var(--rose); border-color: var(--rose); color: #fff;
  display: flex; align-items: center; gap: 6px;
}
.quizChipReset {
  font-size: 14px; line-height: 1; opacity: .75;
  cursor: pointer; padding: 0 2px;
  transition: opacity .15s;
}
.quizChipReset:hover { opacity: 1; }

/* ── Active filter chip (показує що обрано в фільтрі) ── */
.filterChip {
  background: var(--rose); border-color: var(--rose); color: #fff;
  display: flex; align-items: center; gap: 6px;
  max-width: 70vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filterChipReset {
  font-size: 14px; line-height: 1; opacity: .75;
  cursor: pointer; padding: 0 2px;
  transition: opacity .15s;
}
.filterChipReset:hover { opacity: 1; }

/* ── Mobile scroll fixes — прибирає ривки ── */
* {
  -webkit-tap-highlight-color: transparent;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
/* Плавний скрол без ривків на картках */
.grid, .chips, .reviewsTrack, .sheetBody {
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}
/* Прибираємо дьоргання на hover для мобайлу */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: var(--sh); }
  .card:hover .thumb img { transform: none; }
  .btn:hover { transform: none; }
  .miniAdd:hover { background: var(--rose); }
}
/* Фіксуємо шаркування при відкритті модалок */
.sheet {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── HERO PROMO BUTTON ── */
.heroPromoBtn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.75);
  font-size: 12px; font-weight: 400;
  letter-spacing: .3px;
  cursor: pointer;
  padding: 6px 0;
  text-align: center;
  transition: color .18s;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.3);
}
.heroPromoBtn:hover { color: rgba(255,255,255,.95); }

/* ── PROMO POPUP ── */
.promoOverlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(20,12,8,.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.promoOverlay.open { opacity: 1; pointer-events: auto; }
.promoPopup {
  width: min(480px, 100%);
  background: var(--white);
  border-radius: var(--r24) var(--r24) 0 0;
  padding: 32px 24px calc(28px + env(safe-area-inset-bottom));
  position: relative;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; gap: 14px;
}
.promoOverlay.open .promoPopup { transform: translateY(0); }
.promoClose {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg2); border: none; cursor: pointer;
  display: grid; place-items: center; transition: background .15s;
}
.promoClose:hover { background: var(--border); }
.promoClose svg { width: 14px; height: 14px; stroke: var(--ink2); stroke-width: 2; fill: none; stroke-linecap: round; }
.promoEmoji { font-size: 36px; text-align: center; line-height: 1; }
.promoTitle {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--ink); text-align: center; line-height: 1.3;
}
.promoText {
  font-size: 14px; color: var(--ink2); text-align: center;
  line-height: 1.65; font-weight: 300;
}
.promoDetails {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r16); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.promoDetail {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink2);
}
.promoDetailIco { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.promoAction {
  width: 100%; height: 52px; border-radius: 999px;
  background: var(--rose); border: none; color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: .6px;
  cursor: pointer; transition: background .18s;
  box-shadow: var(--sh-rose);
}
.promoAction:hover { background: #8B5F56; }
.promoNote {
  font-size: 11px; color: var(--ink3); text-align: center;
  letter-spacing: .2px;
}

/* ── Instagram header ── */
.instaHeadLeft { display:flex; flex-direction:column; gap:4px; }
.instaHandle {
  display:flex; align-items:center; gap:8px;
  font-family:var(--serif); font-size:22px; font-weight:500; color:var(--ink);
}
.instaIcon {
  width:26px; height:26px; flex-shrink:0;
  stroke:var(--ink); color:var(--ink);
}

/* ── Compact header (для сторінок page/N/, без hero) ── */
.pageHeader{
  background:var(--bg, #faf6f2);
  border-bottom:1px solid rgba(122,62,62,0.08);
  padding:10px 16px 12px;
}
.pageHeaderInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:980px;
  margin:0 auto;
}
.pageHeaderBrand{
  text-decoration:none;
  color:inherit;
}
.pageHeaderBrand .heroLogo{
  font-family:'Playfair Display',serif;
  font-size:18px;
  letter-spacing:0.05em;
  color:#7a3e3e;
}
.breadcrumbs{
  max-width:980px;
  margin:8px auto 0;
  padding:0 4px;
  font-size:12px;
  color:#a07060;
  letter-spacing:0.04em;
}
.breadcrumbs a{
  color:#7a3e3e;
  text-decoration:none;
}
.breadcrumbs a:hover{
  text-decoration:underline;
}
.bcSep{
  margin:0 6px;
  color:#c0a890;
}

/* ── Stone Guide (як обрати свій камінь) ── */
.guide-intro {
  text-align:center;
  font-size:14px;
  color:#7a6055;
  line-height:1.65;
  max-width:560px;
  margin:0 auto 28px;
  padding:0 8px;
}
.guide-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  margin:0 0 24px;
}
.guide-card {
  display:flex;
  flex-direction:column;
  padding:24px 22px 20px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:20px;
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:0 1px 3px rgba(122,62,62,.04);
}
.guide-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, currentColor 0%, transparent 60%);
  opacity:.04;
  pointer-events:none;
  transition:opacity .25s ease;
}
.guide-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(122,62,62,.12);
  border-color:transparent;
}
.guide-card:hover::before { opacity:.10; }
.guide-icon {
  width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.85);
  margin-bottom:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.04);
}
.guide-icon svg {
  width:28px; height:28px;
  color:currentColor;
  stroke-linecap:round;
}
.guide-title {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;
  font-weight:500;
  line-height:1.2;
  margin:0 0 8px;
  color:#2a1f1a;
}
.guide-desc {
  font-size:13.5px;
  line-height:1.6;
  color:#5a4540;
  margin:0 0 14px;
}
.guide-stones {
  font-size:12px;
  line-height:1.6;
  color:#7a6055;
  letter-spacing:.01em;
  padding:10px 0 14px;
  border-top:1px solid rgba(122,62,62,.08);
  margin-top:auto;
}
.guide-stones b {
  color:#2a1f1a;
  font-weight:500;
}
.guide-link {
  display:inline-block;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:currentColor;
  margin-top:4px;
  align-self:flex-start;
  position:relative;
  padding-bottom:2px;
}
.guide-link::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:currentColor;
  opacity:.4;
  transition:opacity .2s ease;
}
.guide-card:hover .guide-link::after { opacity:1; }

/* Кольорові акценти на кожну категорію (через color, який підтягує градієнт ::before) */
.guide-love     { color:#c06080; }
.guide-calm     { color:#7080b0; }
.guide-protect  { color:#3a3a48; }
.guide-money    { color:#c89030; }
.guide-focus    { color:#5078a0; }
.guide-energy   { color:#a83838; }

.guide-help {
  text-align:center;
  font-size:13px;
  color:#7a6055;
  margin-top:8px;
  font-style:italic;
}
.guide-help a {
  color:var(--rose);
  text-decoration:none;
  border-bottom:1px solid rgba(122,62,62,.3);
  padding-bottom:1px;
  font-weight:500;
}
.guide-help a:hover { border-bottom-color:var(--rose); }

@media (max-width:560px){
  .guide-grid { grid-template-columns:1fr; gap:12px; }
  .guide-card { padding:20px 18px 18px; }
  .guide-icon { width:46px; height:46px; margin-bottom:14px; }
  .guide-icon svg { width:24px; height:24px; }
  .guide-title { font-size:20px; }
}

/* ── Відгуки покупців: більші відступи на мобільному ── */
@media (max-width:560px){
  .section#reviews { padding-top:48px; padding-bottom:64px; }
  .section#reviews .sectionHead { padding-bottom:24px; }
}

/* ── ШРИФТИ: гібрид Lora + Cormorant Garamond ──
   Lora — для заголовків, назв товарів, цін (краща кирилиця, більш читабельна)
   Cormorant Garamond — лишається через var(--cond) для decorative italic-акцентів */
.h2,
.heroTitle em,
.quizCard .qTitle,
.name,
.price,
.guide-title,
.pageBtn,
.category-intro h1 {
  font-family: 'Lora', Georgia, serif;
}