/* =====================================================================
   mygem.ge — Bright, refined, minimalist jewelry marketplace
   Palette: pure white · cool light grays · charcoal text
   ===================================================================== */

   :root {
  --w: #ffffff;
  --bg: #ffffff;          /* pure white page */
  --cream: #F7F8FA;       /* card / light surface */
  --cream2: #E3E4E6;      /* borders / lines */
  --hov: #EDEEF0;         /* hover surface */
  --line: #E3E4E6;
  --tx: #1A1C1F;          /* near-black text */
  --mu: #5F646B;          /* muted gray (AA on white) */
  --gold: #5B6470;        /* accent: focus / hover borders, bars */
  --gold-d: #1F2933;      /* accent for text / buttons (charcoal) */
  --gold-l: #E3E4E6;      /* accent tint */
  --err: #c0453f;
  --p: var(--gold-d);
  --pd: var(--tx);
  --r: 4px;               /* control radius: square-ish */
  --ctl: 44px;            /* control height */
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
  /* typography system */
  --font-ui: "Inter", Arial, "Noto Sans Georgian", sans-serif;      /* English -> Inter (Arial fallback); Georgian glyphs -> Noto Sans Georgian */
  --font-price: "Noto Sans Georgian", "Inter", Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-h2: 24px;
  --fs-h1: clamp(26px, 3vw, 32px);
  --logo-h: 26px;
  --logo-img-h: 46px;   /* logo = height of the "დამატება" button; header height unchanged */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hh, 105px) + 24px); }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  line-height: 1.5;
  background: var(--bg);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

/* default icon sizes (svg from ui()) — never let an icon fill its container */
svg.ic { width: 20px; height: 20px; flex: none; }
svg.pi { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 5%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.logo { font-weight: 600; font-size: var(--fs-2xl); letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 12px; color: var(--tx); }
.logo img { width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.logo:hover img { transform: scale(1.05); }
.logo b { font-weight: 600; }
.logo span { color: var(--gold-d); font-weight: 500; }

.nav { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.nav > a { padding: 8px 12px; border-radius: var(--r); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0.1px; color: var(--mu); transition: color 0.2s, background 0.2s; white-space: nowrap; }
.nav > a:hover { background: var(--hov); color: var(--tx); }

/* expanding search */
.hs {
  display: flex;
  align-items: center;
  height: var(--ctl);
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hs.open { background: var(--w); border-color: var(--cream2); box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08); }
.hs:focus-within { border-color: var(--gold); }
.hs input {
  width: 0;
  opacity: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: 0;
  font-size: var(--fs-base);
  color: var(--tx);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.45s;
}
.hs.open input { width: clamp(240px, 32vw, 460px); opacity: 1; padding: 0 14px 0 4px; }
.hs input::placeholder { color: #80868E; }

.actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.ib {
  position: relative;
  width: var(--ctl);
  height: var(--ctl);
  border-radius: var(--r);
  border: 0;
  background: transparent;
  color: var(--tx);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: grid;
  place-items: center;
  overflow: visible;
  flex: none;
}
.ib svg { width: 22px; height: 22px; }
.ib:hover { background: var(--hov); color: var(--gold-d); }

.login { border: 1px solid var(--cream2); font-weight: 600; font-size: var(--fs-base); border-radius: 50%; overflow: hidden; background: var(--w); }
.login:hover { background: var(--gold-d); color: #fff; border-color: var(--gold-d); }
.login img { width: 100%; height: 100%; object-fit: cover; }

.dot { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--err); color: #fff; font-size: var(--fs-xs); font-weight: 600; display: none; place-items: center; }
.dot.fc { background: var(--gold-d); }

/* ---------- Buttons ---------- */
.btn {
  background: var(--gold-d);
  color: #fff;
  border: 1px solid var(--gold-d);
  padding: 0 22px;
  min-height: var(--ctl);
  line-height: 1.2;
  border-radius: var(--r);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: 0.2px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.btn:hover { background: #3A444F; border-color: #3A444F; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17, 24, 39, 0.18); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .ic { width: 18px; height: 18px; }
.btn.alt { background: var(--w); color: var(--tx); border-color: var(--cream2); }
.btn.alt:hover { background: var(--hov); border-color: var(--gold); box-shadow: none; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: var(--fs-md); margin-top: 6px; }
.btn.sm .ic { width: 16px; height: 16px; }
.btn.add { min-height: 42px; padding: 0 18px; }
.btn.add > span:first-child { font-size: var(--fs-2xl); font-weight: 400; line-height: 1; }

/* ---------- Panels & dropdown results ---------- */
.notes, .sres {
  position: fixed;
  top: 76px;
  right: 5%;
  width: 360px;
  max-width: 92vw;
  max-height: 70vh;
  overflow: auto;
  background: var(--w);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 14px;
  z-index: 60;
  display: none;
}
.notes.show, .sres.show { display: block; animation: fade 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.notes h4 { font-size: var(--fs-lg); margin-bottom: 10px; font-weight: 600; }
.note { padding: 12px; border-radius: var(--r); font-size: var(--fs-md); margin-bottom: 8px; background: var(--cream); border-left: 3px solid var(--cream2); }
.note.new { background: #ECEDEF; border-left-color: var(--gold); }
.note small { display: block; color: var(--mu); font-size: var(--fs-xs); margin-top: 4px; }

.sres { left: auto; right: 8%; width: 480px; }
.sr { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r); cursor: pointer; transition: background 0.15s; }
.sr:hover { background: var(--hov); }
.st { width: 52px; height: 52px; border-radius: var(--r); background: var(--cream) center/cover; display: grid; place-items: center; flex: none; border: 1px solid var(--cream2); color: var(--gold); }
.st svg.ill { width: 28px; height: 28px; }
.si { flex: 1; min-width: 0; }
.si b { display: block; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si small { color: var(--mu); font-size: var(--fs-sm); }
.sr .price { font-size: var(--fs-base); font-weight: 600; }

#app { min-height: 70vh; animation: fade 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Hero & filters ---------- */
.hero {
  background:
    radial-gradient(ellipse 55% 90% at 50% 40%, rgba(60, 70, 230, 0.55) 0%, rgba(60, 70, 230, 0) 70%),
    linear-gradient(135deg, #070b4a 0%, #141a9c 50%, #070b4a 100%);
  position: relative;
  isolation: isolate;
  padding: 64px 5% 48px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero::before, .hero::after { content: ""; position: absolute; top: 0; bottom: 0; height: 100%; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.hero::before { left: 0; aspect-ratio: 500 / 762; background-image: url("/images/hero-left.png"); }
.hero::after { right: 0; aspect-ratio: 448 / 762; background-image: url("/images/hero-right.png"); }
@media (max-width: 1100px) { .hero::before, .hero::after { opacity: 0.4; } }
@media (max-width: 700px) { .hero::before, .hero::after { display: none; } }
.hero h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 12px; color: #ffffff; }
.hero > p { color: rgba(255, 255, 255, 0.82); font-size: var(--fs-lg); max-width: 680px; margin: 0 auto 32px; }

.sbox { max-width: 1040px; margin: auto; background: var(--w); border-radius: 6px; padding: 24px; box-shadow: 0 8px 30px rgba(17, 24, 39, 0.07); border: 1px solid var(--line); }

.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; text-align: left; }
.fgrid label, .fld, .form label { font-size: var(--fs-sm); font-weight: 500; color: var(--mu); display: flex; flex-direction: column; gap: 6px; }

/* all filter / form controls share one square-ish size */
.fgrid input, .form input, .form textarea, .calc input, .dd-other {
  height: var(--ctl);
  padding: 0 14px;
  border: 1px solid var(--cream2);
  border-radius: var(--r);
  background: var(--w);
  outline: 0;
  font-size: var(--fs-base);
  color: var(--tx);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.fgrid input:focus, .form input:focus, .form textarea:focus, .dd-other:focus, .calc input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(91, 100, 112, 0.18); }
.fgrid input[type=number], .calc input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.fgrid input::-webkit-outer-spin-button, .fgrid input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sbox .btn { margin-top: 18px; width: 100%; min-height: 48px; }
.sbox .btn .ic { width: 18px; height: 18px; }

/* ---------- Custom dropdowns ---------- */
.ddw { display: flex; flex-direction: column; gap: 6px; }
.dd { position: relative; }
.dd-btn { width: 100%; height: var(--ctl); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; border: 1px solid var(--cream2); border-radius: var(--r); background: var(--w); cursor: pointer; color: var(--tx); font-size: var(--fs-base); text-align: left; transition: border-color 0.2s, box-shadow 0.2s; }
.dd-btn:hover { border-color: #C9CBCF; }
.dd.open .dd-btn, .dd-btn:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(91, 100, 112, 0.18); outline: 0; }
.dd-val { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.dd-val.ph { color: var(--tx); }
.dd-val .ti { width: 16px; height: 16px; }
.car { color: var(--mu); font-size: var(--fs-xs); transition: transform 0.25s; }
.dd.open .car { transform: rotate(180deg); }

.dd-list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--w); border: 1px solid var(--cream2); border-radius: var(--r); box-shadow: var(--shadow); max-height: 260px; overflow: auto; z-index: 30; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--cream2) transparent; }
.dd.open .dd-list { display: block; animation: ddIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dd-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 3px; cursor: pointer; color: var(--tx); font-size: var(--fs-base); transition: background 0.15s; }
.dd-opt:hover { background: var(--hov); }
.dd-opt.sel { background: #ECEDEF; color: var(--gold-d); font-weight: 600; }
.dd-opt.sel::after { content: "✓"; margin-left: auto; font-size: var(--fs-sm); }
.ti { width: 16px; height: 16px; color: var(--gold-d); flex: none; }

/* ---------- Sections & cards ---------- */
.sec { padding: 56px 5%; }
.sec h2 { font-size: var(--fs-h1); font-weight: 500; margin-bottom: 26px; letter-spacing: -0.5px; line-height: 1.2; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 20px; }

.card {
  --d: 0ms;
  background: var(--w);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #E3E4E6;
  transition: opacity 0.6s ease var(--d), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d), box-shadow 0.3s, border-color 0.3s;
  position: relative;
  cursor: pointer;
}
.card.rv { opacity: 0; transform: translateY(16px); }
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.card .img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, #EEF0F2, #E3E4E6); }
.card .imgi { position: absolute; inset: 0; display: grid; place-items: center; background-size: cover; background-position: center; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); color: var(--gold); }
.card .imgi svg.ill, .pph svg.ill { width: 38%; height: auto; opacity: 0.8; }
.card .in { padding: 12px 14px 14px; }
.card h4 { font-size: var(--fs-base); font-weight: 500; line-height: 1.35; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card small { color: var(--mu); font-size: var(--fs-sm); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prow { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.card .price { font-size: var(--fs-xl); }
.price { font-weight: 600; color: var(--tx); font-size: var(--fs-2xl); letter-spacing: -0.2px; line-height: 1.2; white-space: nowrap; display: inline-block; font-variant-numeric: lining-nums tabular-nums; }
.price.flip { animation: flip 0.4s; }
@keyframes flip { 50% { transform: rotateX(90deg); opacity: 0; } }

.csw { display: flex; background: var(--w); border: 1px solid var(--cream2); border-radius: var(--r); padding: 2px; cursor: pointer; }
.csw b { min-width: 27px; height: 24px; display: grid; place-items: center; border-radius: 3px; font-size: var(--fs-sm); color: var(--mu); transition: 0.2s; }
.csw b.on { background: var(--gold-d); color: #fff; }

.badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.6px; padding: 4px 9px; border-radius: 3px; z-index: 2; color: #fff; background: var(--gold-d); text-transform: uppercase; }
.badge.s { background: var(--gold-l); color: var(--gold-d); }
.badge .crown { width: 12px; height: 12px; margin-right: 5px; }

/* favorite + share on every card */
.cacts { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.cact {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(227, 228, 230, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: var(--tx);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cact svg.ic { width: 17px; height: 17px; transition: fill 0.2s, stroke 0.2s; }
.cact:hover { transform: scale(1.08); background: var(--w); color: var(--gold-d); border-color: var(--gold); box-shadow: 0 4px 12px rgba(17, 24, 39, 0.18); }
.cact:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cact.fav.on { color: var(--err); border-color: #efc8c4; }
.cact.fav.on svg.ic { fill: currentColor; }
.cact:active { transform: scale(0.96); }

.card.is-vip { border-color: #C9CBCF; }
.card.is-svip { border-color: var(--gold); }

.card .peek { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r); font-size: var(--fs-sm); font-weight: 500; color: var(--tx); background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 14px rgba(17, 24, 39, 0.15); opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.card .peek svg.ic { width: 16px; height: 16px; }

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); transition-delay: 0ms; box-shadow: var(--shadow); border-color: var(--gold); }
  .card:hover .imgi { transform: scale(1.05); }
  .card:hover .peek { opacity: 1; transform: translate(-50%, 0); }
}

.layout { display: grid; grid-template-columns: 290px 1fr; gap: 32px; padding: 36px 5%; align-items: start; }
.layout aside { position: sticky; top: calc(var(--hh, 105px) + 23px); }
.layout aside .fgrid { grid-template-columns: 1fr 1fr; }
.layout aside .fgrid > .fld, .layout aside .fgrid > .ddw { grid-column: 1 / -1; }
.results h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.4px; }

.empty { padding: 60px 20px; text-align: center; color: var(--mu); font-size: var(--fs-lg); }
.page { max-width: 960px; margin: 44px auto; padding: 0 5%; }
.page > h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.5px; }

.panel { background: var(--w); border: 1px solid var(--line); border-radius: 8px; padding: 32px; box-shadow: 0 8px 30px rgba(17, 24, 39, 0.05); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .full { grid-column: 1 / -1; }

.tabs { display: flex; gap: 8px; margin: 22px 0; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.tabs button { height: 40px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--cream2); background: var(--w); cursor: pointer; font-size: var(--fs-base); font-weight: 500; color: var(--tx); transition: background 0.2s, color 0.2s, border-color 0.2s; display: inline-flex; align-items: center; gap: 8px; }
.tabs button .ic { width: 18px; height: 18px; }
.tabs button.on { background: var(--gold-d); border-color: var(--gold-d); color: #fff; }
.tabs button:not(.on):hover { background: var(--hov); border-color: var(--gold); }
.tabs #logout { margin-left: auto; color: var(--err); }
.tabs #logout:hover { background: #fdf2f1; border-color: #efc8c4; }

.prof-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.prof-head h2 { font-size: var(--fs-h2); font-weight: 600; }
.ava { width: 84px; height: 84px; border-radius: 50%; background: var(--gold-d); color: #fff; display: grid; place-items: center; font-size: var(--fs-h1); overflow: hidden; flex: none; }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.ava .ic { width: 34px; height: 34px; }
.pmail { display: inline-flex; align-items: center; gap: 6px; color: var(--mu); font-size: var(--fs-base); }
.pmail .ic { width: 16px; height: 16px; }
.stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-md); color: var(--mu); margin: 8px 0 10px; }
.stats b { color: var(--tx); }
.stat { display: inline-flex; align-items: center; gap: 6px; }
.stat i { display: grid; place-items: center; color: var(--gold-d); }
.stat .ic { width: 16px; height: 16px; }

/* ---------- Validation ---------- */
.fe { font-style: normal; color: var(--err); font-size: var(--fs-sm); margin-top: 2px; }
.bad input, .bad textarea, .bad .dd-btn, .bad .drop { border-color: var(--err) !important; }
.bad { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.fsum { background: #fdf2f1; color: var(--err); border: 1px solid #f3cfcc; border-radius: var(--r); padding: 12px 14px; font-size: var(--fs-md); font-weight: 500; }
.pw { position: relative; display: flex; }
.pw input { width: 100%; padding-right: 44px; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--mu); cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.eye:hover { color: var(--gold-d); }
.eye svg { width: 19px; height: 19px; }
.eye .off { display: none; }
.eye.on .off { display: block; }
.eye.on .see { display: none; }

/* ---------- Photo upload ---------- */
.drop { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 30px 16px; border: 2px dashed var(--cream2); border-radius: 6px; background: var(--bg); cursor: pointer; transition: border-color 0.2s, background 0.2s; color: var(--mu); }
.drop:hover, .drop.drag { border-color: var(--gold); background: #ECEDEF; }
.drop .up { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-d); color: #fff; display: grid; place-items: center; margin-bottom: 4px; }
.drop .up svg { width: 20px; height: 20px; }
.drop b { color: var(--tx); font-size: var(--fs-base); }
.drop u { color: var(--gold-d); }
.drop small { font-size: var(--fs-sm); }
.pcount { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); margin-top: 8px; }
.pbar { flex: 1; height: 4px; background: var(--cream2); border-radius: 4px; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.3s; }
.pcount.ok #pcnt { color: var(--gold-d); font-weight: 600; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 8px; }
.photos .ph { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; border: 1px solid var(--cream2); }
.photos .ph img { width: 100%; height: 100%; object-fit: cover; }
.photos .ph .rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(17, 24, 39, 0.75); color: #fff; cursor: pointer; font-size: var(--fs-sm); display: grid; place-items: center; }
.cover { position: absolute; left: 4px; bottom: 4px; background: var(--gold-d); color: #fff; font-size: var(--fs-xs); font-weight: 600; padding: 2px 6px; border-radius: 3px; }

/* ---------- Calculator (light) ---------- */
.calc-wrap { background: var(--w); padding: 56px 5%; border-top: 1px solid var(--line); }
.calc-in { max-width: 860px; margin: auto; }
.calc-frame { position: relative; border-radius: 8px; }
.calc { background: var(--w); color: var(--tx); border: 1px solid var(--line); border-radius: 8px; padding: 30px 32px; box-shadow: 0 10px 34px rgba(17, 24, 39, 0.08); }
.calc h2 { margin-bottom: 22px; font-size: var(--fs-2xl); font-weight: 600; display: flex; align-items: center; gap: 12px; }
.calc-gem { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--gold-d); background: var(--gold-l); }
.calc-gem .pi { width: 20px; height: 20px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.calc label, .calc .fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--mu); }
.calc .dd-btn { background: var(--w); color: var(--tx); }
.calc-out { background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 26px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.total { font-size: var(--fs-h1); font-weight: 600; color: var(--gold-d); font-variant-numeric: tabular-nums; line-height: 1.1; }
.total.usd { font-size: var(--fs-2xl); color: var(--mu); font-weight: 600; }
.bar { width: 100%; height: 5px; background: var(--cream2); border-radius: 5px; overflow: hidden; margin: 6px 0; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 5px; transition: width 0.4s ease; }
.calc-out small { color: var(--mu); font-size: var(--fs-sm); }
.calc-trace { display: none; }

/* ---------- Popups & footer ---------- */
/* success popup (.pubpop / .pubbox): see "SUCCESS WINDOW" block at the end of this file */

footer { background: var(--w); color: var(--mu); padding: 52px 5% 24px; border-top: 1px solid var(--line); }
.foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: start; max-width: 1100px; margin: 0 auto; }
.fcol { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-base); }
.fleft { justify-self: start; }
.fmid { justify-self: center; text-align: center; }
.fright { justify-self: end; align-items: flex-start; text-align: left; }
.fname { font-weight: 600; font-size: var(--fs-2xl); color: var(--tx); }
.fleft p { font-size: var(--fs-md); }
.fh { font-weight: 600; color: var(--tx); font-size: var(--fs-lg); margin-bottom: 2px; }
.soc { display: flex; gap: 10px; margin-top: 8px; }
.soc a { width: 40px; height: 40px; border-radius: 50%; background: var(--w); border: 1px solid var(--cream2); display: grid; place-items: center; transition: background 0.2s, transform 0.2s, border-color 0.2s; }
.soc a:hover { background: var(--gold-d); border-color: var(--gold-d); transform: translateY(-2px); }
.soc svg { width: 17px; height: 17px; fill: var(--tx); }
.soc a:hover svg { fill: #fff; }
.fcol a:not(.fh) { transition: color 0.2s; }
.fcol a:hover { color: var(--gold-d); }
.copy { text-align: center; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--cream2); font-size: var(--fs-sm); }

/* ---------- Modals & auth ---------- */
.modal { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); backdrop-filter: blur(3px); display: none; place-items: center; z-index: 100; padding: 16px; }
.modal.show { display: grid; }
.box { background: var(--w); border-radius: 8px; padding: 32px; width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(17, 24, 39, 0.18); }
.box h3 { margin-bottom: 18px; font-size: var(--fs-2xl); font-weight: 600; }
.box .form { grid-template-columns: 1fr; }
.box .link { display: block; width: 100%; background: none; border: 0; color: var(--gold-d); cursor: pointer; font-size: var(--fs-md); margin-top: 14px; text-align: center; text-decoration: underline; }
.rowr { display: flex; justify-content: flex-end; margin: -6px 0; }
.linkbtn { background: none; border: 0; color: var(--mu); cursor: pointer; font-size: var(--fs-sm); }
.linkbtn:hover { color: var(--gold-d); }
.box p { font-size: var(--fs-md); color: var(--mu); margin-bottom: 12px; line-height: 1.55; }
.chk { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px !important; font-size: var(--fs-md) !important; color: var(--tx) !important; }
.chk input { width: 18px; height: 18px; accent-color: var(--gold-d); }
.tl { color: var(--gold-d); cursor: pointer; text-decoration: underline; }
.confirm { text-align: center; }
.confirm h3 { font-size: var(--fs-xl); }
.confirm .ci { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: var(--cream); color: var(--gold-d); display: grid; place-items: center; }
.confirm .ci .ic { width: 24px; height: 24px; }
.row2 { display: flex; gap: 10px; margin-top: 18px; }
.row2 .btn { flex: 1; }

.cookie { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--w); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 8px; padding: 16px 18px; display: none; flex-direction: column; gap: 12px; z-index: 120; max-width: 520px; width: 92%; }
.cookie.show { display: flex; }
.cookie p { font-size: var(--fs-sm); line-height: 1.55; color: var(--mu); }
.cookie p b { color: var(--tx); font-weight: 600; }
.ck-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ck-acts .btn { min-height: 40px; padding: 0 16px; font-size: var(--fs-md); margin: 0; flex: 1 1 auto; white-space: nowrap; }
.ck-set, .cklink { background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.ck-set { color: var(--gold-d); font-size: var(--fs-md); min-height: 40px; padding: 0 8px; }
.cklink { color: inherit; font-size: inherit; padding: 0; }
.ck-set:hover, .cklink:hover { color: var(--tx); }
.ck-set:focus-visible, .cklink:focus-visible, .cksw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.ckm { z-index: 190; }
.ckm .box { max-width: 480px; padding: 26px; }
.ckrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); cursor: default; }
label.ckrow { cursor: pointer; }
.ckrow b { font-size: var(--fs-base); font-weight: 600; color: var(--tx); }
.ckrow p { margin: 4px 0 0; font-size: var(--fs-sm); }
.ckbadge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: var(--gold-l); color: var(--gold-d); font-size: var(--fs-xs); vertical-align: 1px; }
.cksw { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 40px; height: 22px; margin-top: 2px; border-radius: 11px; background: #C9CBCF; cursor: pointer; transition: background 0.2s; }
.cksw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25); transition: transform 0.2s; }
.cksw:checked { background: var(--gold-d); }
.cksw:checked::after { transform: translateX(18px); }
.ck-acts.ckp { border-top: 1px solid var(--line); padding-top: 16px; }

.toast { position: fixed; top: calc(var(--hh, 105px) + 19px); right: 20px; background: var(--tx); color: #fff; padding: 12px 18px; border-radius: var(--r); font-size: var(--fs-md); z-index: 200; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.22); animation: fade 0.25s ease; }

/* ---------- Product page ---------- */
.pdp { max-width: 1160px !important; padding-bottom: 60px; }
.pback { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; margin-bottom: 22px; border: 1px solid var(--cream2); border-radius: var(--r); background: var(--w); color: var(--tx); font-size: var(--fs-base); font-weight: 500; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.pback .ic { width: 18px; height: 18px; }
.pback:hover { background: var(--hov); border-color: var(--gold); }

.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.pgal { position: sticky; top: calc(var(--hh, 105px) + 23px); }
.pmain { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #EEF0F2, #E3E4E6); border: 1px solid var(--line); }
.pmain img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s ease; }
.pmain img.sw { opacity: 0; }
.pph { display: grid; place-items: center; height: 100%; color: var(--gold); }
.pnav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.94); color: var(--tx); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.14); transition: background 0.2s, transform 0.2s, color 0.2s; z-index: 3; }
.pnav .ic { width: 20px; height: 20px; }
.pnav.l { left: 12px; }
.pnav.r { right: 12px; }
.pnav:hover { background: #fff; color: var(--gold-d); transform: translateY(-50%) scale(1.06); }
.pcnt { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 4px 10px; border-radius: 12px; font-size: var(--fs-xs); font-weight: 500; color: #fff; background: rgba(17, 24, 39, 0.65); }
.pthumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.pth { flex: none; width: 72px; height: 72px; padding: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--cream2); background: var(--cream); cursor: pointer; opacity: 0.65; transition: opacity 0.2s, border-color 0.2s; }
.pth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pth:hover { opacity: 1; }
.pth.on { opacity: 1; border-color: var(--gold); }

.pmeta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--mu); font-size: var(--fs-md); margin-bottom: 10px; }
.pmeta span { display: inline-flex; align-items: center; gap: 6px; }
.pmeta .ic { width: 16px; height: 16px; }
.ptitle { font-size: var(--fs-h1); font-weight: 500; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.4px; }
.pprice { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.pprice .price { font-size: var(--fs-h1); color: var(--gold-d); }

.pact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; }
.pa.pic { height: 44px; padding: 0 13px; gap: 8px; border-radius: var(--r); border: 1px solid var(--cream2); background: var(--w); color: var(--tx); font-size: var(--fs-md); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.pa.pic .ic { width: 18px; height: 18px; }
.pa.pic:hover { background: var(--hov); border-color: var(--gold); }
.pa.pic.on { color: var(--err); border-color: #efc8c4; background: #fdf4f3; }
.pa.pic.on .ic { fill: currentColor; }
.pa.pic.ai { border-color: var(--gold-d); background: var(--gold-d); color: #fff; }
.pa.pic.ai:hover { background: #3A444F; border-color: #3A444F; }

.pattrs { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 24px; background: var(--w); }
.pr2 { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; font-size: var(--fs-base); border-bottom: 1px solid var(--line); }
.pr2:last-child { border-bottom: 0; }
.pr2 span { color: var(--mu); }
.pr2 b { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.pdesc h3 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 8px; }
.pdesc p { line-height: 1.65; color: var(--mu); font-size: var(--fs-base); white-space: pre-line; }

.pseller { margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); display: flex; flex-direction: column; gap: 14px; }
.sh { display: flex; align-items: center; gap: 12px; }
.sav { width: 46px; height: 46px; border-radius: 50%; background: var(--gold-d); color: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.sav .ic { width: 22px; height: 22px; }
.sav img { width: 100%; height: 100%; object-fit: cover; }
.sn { display: flex; flex-direction: column; }
.sn small { color: var(--mu); font-size: var(--fs-xs); }
.sn b { font-size: var(--fs-lg); font-weight: 600; }
.sn em { font-style: normal; color: var(--mu); font-size: var(--fs-sm); }
.sph { font-size: var(--fs-xl); font-weight: 600; color: var(--tx); letter-spacing: 0.3px; }

/* Call + Message: same size, same row, small icons */
.sbtns { display: flex; flex-wrap: nowrap; gap: 10px; }
.btn.sb { flex: 1 1 0; min-width: 0; min-height: 44px; height: 44px; padding: 0 12px; font-size: var(--fs-base); gap: 8px; white-space: nowrap; }
.btn.sb .ic { width: 16px; height: 16px; }
.btn.sb.call { background: var(--w); color: var(--tx); border-color: var(--cream2); }
.btn.sb.call:hover { background: var(--bg); border-color: var(--gold); box-shadow: none; }
.simsec { margin-top: 56px; }
.simsec h2 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.4px; margin-bottom: 22px; }

/* ---------- AI try-on ---------- */
.try-dlg { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 16px; background: rgba(17, 24, 39, 0.5); backdrop-filter: blur(4px); }
.try-box { position: relative; width: 100%; max-width: 900px; max-height: 92vh; overflow: auto; border-radius: 8px; background: var(--w); padding: 28px; box-shadow: 0 20px 50px rgba(17, 24, 39, 0.2); container-type: inline-size; }
.try-close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--hov); color: var(--tx); font-size: var(--fs-2xl); cursor: pointer; transition: background 0.2s; display: grid; place-items: center; }
.try-close:hover { background: var(--cream2); }
.tico { width: 42px; height: 42px; border-radius: var(--r); background: var(--gold-d); color: #fff; display: grid; place-items: center; flex: none; }
.tico .ic { width: 22px; height: 22px; }
.try-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-right: 40px; }
.try-head h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; }
.try-head p { color: var(--mu); font-size: var(--fs-md); margin-top: 2px; }
.try-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 3px; background: var(--gold-l); color: var(--gold-d); font-size: var(--fs-xs); font-weight: 600; vertical-align: middle; }
.try-grid { display: grid; gap: 20px; }
@container (min-width: 640px) { .try-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.try-ctl, .try-step { display: flex; flex-direction: column; gap: 12px; }
.try-st { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-base); }
.try-st i { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-d); color: #fff; font-style: normal; font-size: var(--fs-xs); display: grid; place-items: center; }
.try-st small { margin-left: auto; color: var(--mu); font-weight: 400; font-size: var(--fs-sm); }
.try-item, .try-photo { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--w); }
.try-item .th { width: 52px; height: 52px; border-radius: var(--r); flex: none; display: grid; place-items: center; font-size: var(--fs-h2); background: var(--cream) center/cover; }
.try-item b, .try-photo b { display: block; font-size: var(--fs-md); }
.try-item small { color: var(--mu); font-size: var(--fs-xs); }
.try-picks { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.try-pick { flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--cream2); border-radius: var(--r); overflow: hidden; background: var(--w); cursor: pointer; opacity: 0.65; transition: opacity 0.2s, border-color 0.2s; }
.try-pick.on { opacity: 1; border-color: var(--gold); }
.try-pick .pt { display: block; width: 100%; height: 100%; background: center/cover; }
.try-photo img { width: 48px; height: 48px; border-radius: var(--r); object-fit: cover; flex: none; }
.try-photo > div { flex: 1; min-width: 0; }
.try-photo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.try-photo small { color: #2e7d32; font-size: var(--fs-xs); font-weight: 500; }
.try-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--hov); color: var(--mu); font-size: var(--fs-lg); cursor: pointer; display: grid; place-items: center; }
.try-x:hover { background: var(--err); color: #fff; }
.try-lp { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--cream); color: var(--mu); font-size: var(--fs-sm); }
.try-lp .ic { width: 18px; height: 18px; }
.try-lp.err { background: #fdf2f1; color: var(--err); }
.try-spin { width: 18px; height: 18px; border: 2px solid var(--cream2); border-top-color: var(--gold-d); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.try-go { width: 100%; min-height: 48px; }
.try-hint { text-align: center; font-size: var(--fs-sm); color: var(--mu); }
.try-stage { display: flex; flex-direction: column; gap: 10px; }
.try-view { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--cream); border: 1px solid var(--line); }
.try-view > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s ease; }
.try-view > img.show { opacity: 1; }
.try-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; color: var(--mu); font-size: var(--fs-md); }
.try-empty img { position: static !important; width: 80px !important; height: 80px !important; object-fit: contain; opacity: 0.85 !important; mix-blend-mode: multiply; }
.try-empty b { color: var(--tx); font-size: var(--fs-base); }
.try-selchip { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 12px rgba(17, 24, 39, 0.1); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; }
.try-selchip i { width: 26px; height: 26px; border-radius: 50%; background: var(--cream) center/cover; flex: none; }
.try-tog { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; padding: 3px; border-radius: var(--r); background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 12px rgba(17, 24, 39, 0.1); }
.try-tog button { padding: 6px 12px; border: 0; border-radius: 3px; background: none; color: var(--mu); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: 0.2s; }
.try-tog button.on { background: var(--gold-d); color: #fff; }
.try-scan { position: absolute; left: 0; right: 0; top: -70px; height: 70px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.9)); border-bottom: 2px solid #fff; animation: tryscan 2s linear infinite; }
@keyframes tryscan { to { top: 100%; } }
.try-sp { position: absolute; z-index: 3; color: #fff; font-size: var(--fs-lg); pointer-events: none; animation: tw 1.8s ease-in-out infinite; text-shadow: 0 0 8px rgba(17, 24, 39, 0.6); }
.try-sp.s1 { left: 18%; top: 24%; }
.try-sp.s2 { left: 70%; top: 40%; animation-delay: 0.6s; }
.try-sp.s3 { left: 40%; top: 68%; animation-delay: 1.2s; }
@keyframes tw { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } }
.try-load { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(17, 24, 39, 0.25); }
.try-lcard { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 14px; border-radius: 6px; background: #fff; box-shadow: 0 10px 25px rgba(17, 24, 39, 0.18); }
.try-gem { color: var(--gold-d); display: grid; }
.try-lcard b { font-size: var(--fs-md); }
.try-lcard small { color: var(--mu); font-size: var(--fs-xs); display: block; }
#tryMsg.sw { animation: fade 0.4s ease; }
.try-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.try-acts .btn { margin: 0; }
.try-note { font-size: var(--fs-xs); color: var(--mu); line-height: 1.45; }
.try-lb { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 14px; background: rgba(17, 24, 39, 0.85); backdrop-filter: blur(4px); cursor: zoom-out; }
.try-lb img { max-width: 100%; max-height: 90vh; border-radius: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pd-grid { gap: 32px; }
  .layout { grid-template-columns: 250px 1fr; gap: 24px; }
}

@media (max-width: 800px) {
  body { font-size: var(--fs-lg); }
  .layout { grid-template-columns: 1fr; padding: 24px 5%; }
  .layout aside { position: static; }
  .fgrid, .layout aside .fgrid { grid-template-columns: 1fr 1fr; }
  .fgrid > .fld { grid-column: 1 / -1; }
  .calc-grid, .form { grid-template-columns: 1fr; }
  .calc { padding: 22px 18px; }
  .top { flex-wrap: wrap; gap: 8px 12px; padding: 12px 5%; }
  .logo { font-size: var(--fs-xl); gap: 8px; }
  .logo img { width: 36px; height: 36px; }
  .actions { gap: 2px; }
  .ib { width: 40px; height: 40px; }
  .btn.add { min-height: 40px; min-width: 40px; padding: 0 10px; margin-right: 4px; }
  .nav { order: 3; width: 100%; flex: 1 1 100%; }
  .nav .hs { margin-left: auto; }
  .hs input { flex: 1; width: auto; max-width: 0; transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.45s; }
  .hs.open { flex: 1; }
  .hs.open input { width: auto; max-width: 100%; }
  .nav:has(.hs.open) > a { display: none; }
  .btn.add .t { display: none; }
  .sres { top: 120px; right: 5%; left: 5%; width: auto; }
  .notes { top: 76px; right: 5%; left: 5%; width: auto; }
  .hero { padding: 44px 5% 32px; }
  .sbox { padding: 18px; }
  .sec { padding: 40px 5%; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card .in { padding: 10px 10px 12px; }
  .card h4 { font-size: var(--fs-md); }
  .card small { font-size: var(--fs-xs); }
  .price { font-size: var(--fs-lg); }
  .card .price { font-size: var(--fs-base); }
  .csw b { min-width: 24px; height: 22px; font-size: var(--fs-xs); }
  .cact { width: 30px; height: 30px; }
  .cact svg.ic { width: 15px; height: 15px; }
  .cacts { top: 6px; right: 6px; gap: 5px; }
  .badge { top: 8px; left: 8px; font-size: var(--fs-xs); padding: 4px 7px; }
  .panel { padding: 22px 18px; }
  .box { padding: 24px 20px; }
}

@media (max-width: 700px) {
  .foot { grid-template-columns: 1fr; gap: 24px; }
  .fleft, .fmid, .fright { justify-self: start; text-align: left; align-items: flex-start; }
  .pd-grid { grid-template-columns: 1fr; gap: 24px; }
  .pgal { position: static; }
  .try-box { padding: 20px 16px; }
}

@media (max-width: 420px) {
  .grid { gap: 8px; }
  .card .in { padding: 9px 9px 11px; }
  .prow { margin-top: 8px; }
  .pa.pic .lb { font-size: var(--fs-md); }
  .sbtns { gap: 8px; }
  .ck-acts .btn { flex: 1 1 100%; }
  .ck-set { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* category fields */
.dyn { display: contents; }
.form .dyn > .fld, .form .dyn > label { min-width: 0; }
.more { text-align: center; margin-top: 28px; }
/* blog */
.blog { max-width: 1040px; }
.bh { font-size: var(--fs-h1); font-weight: 500; color: var(--pd); margin-bottom: 6px; }
.bsub { color: var(--mu); margin-bottom: 28px; }
.blist { border-top: 1px solid var(--line); }
.bitem { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--line); color: var(--tx); text-decoration: none; transition: padding 0.25s, background 0.25s; }
.bitem:hover { padding-left: 14px; background: rgba(17, 24, 39, 0.04); }
.bn { color: var(--gold); font-weight: 600; font-size: var(--fs-md); letter-spacing: 1px; }
.bt b { display: block; font-size: var(--fs-xl); font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.bt small { color: var(--mu); font-size: var(--fs-md); line-height: 1.5; }
.bm { color: var(--mu); font-size: var(--fs-sm); white-space: nowrap; }
.art { max-width: 760px; }
.art h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.25; color: var(--pd); margin: 8px 0 24px; }
.aback { display: inline-flex; align-items: center; gap: 6px; color: var(--mu); text-decoration: none; font-size: var(--fs-md); margin-bottom: 18px; }
.aback .ic { width: 16px; height: 16px; }
.aback:hover { color: var(--gold); }
.ameta { display: block; color: var(--gold); font-size: var(--fs-sm); letter-spacing: 0.5px; }
.abody p { font-size: var(--fs-lg); line-height: 1.85; margin-bottom: 18px; }
.abody h3 { font-size: var(--fs-2xl); font-weight: 600; margin: 30px 0 10px; color: var(--pd); }
.abody h3::before { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); margin-bottom: 12px; }
.anext { display: block; margin-top: 40px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; color: var(--tx); text-decoration: none; transition: border-color 0.2s; }
.anext:hover { border-color: var(--gold); }
.anext small { display: block; color: var(--mu); font-size: var(--fs-xs); margin-bottom: 4px; }
.acta { text-align: center; margin-top: 32px; }
@media (max-width: 560px) { .bitem { grid-template-columns: 32px 1fr; } .bm { display: none; } }

/* blog cards + article cover */
.bgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.bcard { display: flex; flex-direction: column; color: var(--tx); text-decoration: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s; }
.bcard:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08); }
.bimg { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--line); }
.bimg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.bcard:hover .bimg img { transform: scale(1.03); }
.bbody { display: block; padding: 16px 18px 20px; }
.bbody .bm { display: block; color: var(--gold); font-size: var(--fs-xs); letter-spacing: 0.5px; margin-bottom: 6px; }
.bbody b { display: block; font-size: var(--fs-xl); font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.bex { display: block; color: var(--mu); font-size: var(--fs-md); line-height: 1.55; }
.ahero { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; margin: 0 0 28px; background: var(--line); }
.abody ul { margin: 0 0 18px; padding-left: 22px; }
.abody li { font-size: var(--fs-lg); line-height: 1.8; margin-bottom: 8px; }
@media (max-width: 700px) { .bgrid { grid-template-columns: 1fr; } .bbody .bm { display: block; } }
@media (prefers-reduced-motion: reduce) { .bcard, .bimg img { transition: none; } .bcard:hover { transform: none; } }

/* ---------- Continue with Google ---------- */
.gblock { margin: 14px 0 4px; }
.gwrap { min-height: 44px; display: flex; justify-content: center; align-items: center; color-scheme: light; }
.gnote { color: var(--err); font-size: var(--fs-sm); text-align: center; margin-top: 8px; }
.gnote.mu { color: var(--mu); }
.gsep { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--mu); font-size: var(--fs-sm); }
.gsep::before, .gsep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ===== Compact marketplace cards (override of the card styles above) ===== */
.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; border: 1px solid #EEF0F2; border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05); }
.card .img { aspect-ratio: 4 / 3; border-radius: 0; }
.card .in { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.card .loc { font-size: var(--fs-xs); color: #9AA0A6; line-height: 1.3; min-height: 16px; margin-bottom: 4px; }
.card .trow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .trow h4 { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 500; line-height: 1.35; margin: 0; }
.card .cact { flex: none; width: 28px; height: 28px; margin-right: -4px; border: 0; border-radius: 50%; background: transparent; backdrop-filter: none; box-shadow: none; color: var(--tx); }
.card .cact svg.ic { width: 20px; height: 20px; }
.card .cact:hover { transform: scale(1.1); background: transparent; box-shadow: none; color: var(--err); }
.card .price { margin-top: 10px; padding-bottom: 12px; border-bottom: 1px solid #ECEDEF; font-size: var(--fs-lg); font-weight: 600; display: block; }
.card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.card .tg { font-size: var(--fs-xs); line-height: 1; padding: 7px 11px; border-radius: 10px; background: #F3F4F6; color: var(--tx); white-space: nowrap; }
.card .pstat { margin-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); border-color: #E3E4E6; box-shadow: 0 8px 22px rgba(17, 24, 39, 0.10); }
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { border-radius: 14px; }
  .card .in { padding: 10px 11px 12px; }
  .card .trow h4 { font-size: var(--fs-md); }
  .card .price { font-size: var(--fs-base); margin-top: 8px; padding-bottom: 10px; }
  .card .tg { font-size: var(--fs-xs); padding: 6px 9px; border-radius: 9px; }
  .card .cact { width: 26px; height: 26px; }
  .card .cact svg.ic { width: 18px; height: 18px; }
}

/* ===== Home: section anchors + Blogs block ===== */
.hblog h2 { margin-bottom: 26px; }
.hbg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hbs { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
.hbc { display: flex; min-width: 0; color: var(--tx); text-decoration: none; background: #fff; border: 1px solid #EEF0F2; border-radius: 16px; box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05); overflow: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s; }
.hbc:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hbi { position: relative; display: block; overflow: hidden; background: var(--line); }
.hbi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hbb { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 14px 16px 16px; }
.hbb small { color: var(--mu); font-size: var(--fs-xs); margin-bottom: 6px; }
.hbb b { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hbe { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; color: var(--mu); font-size: var(--fs-md); line-height: 1.55; }
/* left: big block (image on top, text below) */
.hbc.big { flex-direction: column; }
.hbc.big .hbi { flex: 1; min-height: 240px; }
.hbc.big .hbb { flex: none; justify-content: flex-start; padding: 18px 20px 20px; }
.hbc.big .hbb b { font-size: var(--fs-2xl); }
/* right: two compact horizontal cards */
.hbs .hbc { flex-direction: row; min-height: 170px; }
.hbs .hbi { flex: 0 0 40%; }
@media (hover: hover) and (pointer: fine) {
  .hbc:hover { transform: translateY(-3px); border-color: #E3E4E6; box-shadow: 0 8px 22px rgba(17, 24, 39, 0.10); }
}
@media (max-width: 700px) {
  .hbg { grid-template-columns: 1fr; gap: 10px; }
  .hbs { grid-template-rows: none; gap: 10px; }
  .hbc { border-radius: 14px; }
  .hbc.big .hbi { flex: none; min-height: 0; aspect-ratio: 3 / 2; }
  .hbc.big .hbb { padding: 14px 14px 16px; }
  .hbc.big .hbb b { font-size: var(--fs-lg); }
  .hbs .hbc { min-height: 0; }
  .hbs .hbi { flex: 0 0 38%; min-height: 120px; }
  .hbb { padding: 12px 12px 14px; }
  .hbb b { font-size: var(--fs-base); }
}
@media (prefers-reduced-motion: reduce) { .hbc { transition: none; } .hbc:hover { transform: none; } }

/* header wordmark (replaces the old icon + text logo) */
.logo img.wm { width: auto; height: 36px; max-width: none; mix-blend-mode: normal; }
/* ---- per-listing currency switch (OFF = ₾ GEL, ON = $ USD), bottom of each card / product page ---- */
.cur { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border: 1px solid var(--cream2); border-radius: 999px; background: var(--w); color: var(--mu); cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; transition: border-color 0.2s, background 0.2s; }
.cur:hover { background: var(--hov); }
.cur:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 2px; }
.cur .cl { transition: color 0.2s; line-height: 1; }
.cur .cl:first-child { color: var(--gold-d); }
.cur .cl:last-child { color: var(--mu); }
.cur.on .cl:first-child { color: var(--mu); }
.cur.on .cl:last-child { color: var(--gold-d); }
.cur .trk { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--cream2); transition: background 0.2s; flex: none; }
.cur .trk i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.3); transition: transform 0.2s; }
.cur.on .trk { background: var(--gold-d); }
.cur.on .trk i { transform: translateX(14px); }
.card .cbot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cream2); }
.cur.sm { height: 28px; padding: 0 8px; gap: 6px; font-size: var(--fs-xs); }
.cur.sm .trk { width: 30px; height: 18px; }
.cur.sm .trk i { width: 14px; height: 14px; }
.cur.sm.on .trk i { transform: translateX(12px); }
@media (prefers-reduced-motion: reduce) { .cur .trk, .cur .trk i, .cur .cl { transition: none; } }
/* ---- price range filter ---- */
.fgrid .pwrow { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pwrow.one { grid-template-columns: 1fr; }
.pwrow .prng { min-width: 0; }
.pwrow .prow { gap: 6px; }
.pwrow .prow input { padding: 0 8px; font-size: var(--fs-md); }
@media (max-width: 340px) { .pwrow { grid-template-columns: 1fr; } }
/* add-listing form: weight and price on one row, package selector below */
.form .trio { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .trio > :nth-child(3) { grid-column: 1 / -1; }
.form .trio > * { min-width: 0; }
.prng .prow { display: flex; align-items: center; gap: 8px; }
.prng .prow input { flex: 1; min-width: 0; }
.prng .prow i { font-style: normal; color: var(--mu); }

/* ---- "other" item-name input: keep the whole placeholder visible ---- */
.dd-other { padding: 0 10px; font-size: var(--fs-md); text-overflow: ellipsis; }
.dd-other::placeholder { font-size: var(--fs-sm); }
/* ---- bank transfer payment box ---- */
.paybox { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--cream2); border-radius: 8px; background: var(--cream); }
.paybox h4 { margin: 0; font-size: var(--fs-lg); color: var(--gold-d); }
.payamt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--w); border: 1px solid var(--cream2); }
.payamt span, .payrecv span, .payln span, .bacc span { font-size: var(--fs-sm); color: var(--mu); font-weight: 500; }
.payamt b { font-size: var(--fs-2xl); color: var(--gold-d); font-variant-numeric: tabular-nums; }
.payrecv { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 0 2px; flex-wrap: nowrap; }
.payrecv b, .payln b { color: var(--tx); font-weight: 600; font-size: var(--fs-base); }
.banks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bank { padding: 14px; border: 1px solid var(--cream2); border-radius: var(--r); background: var(--w); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bank .bn { font-weight: 600; color: var(--gold-d); font-size: var(--fs-base); }
.bacc { display: flex; flex-direction: column; gap: 6px; }
.brow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brow b { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-md); letter-spacing: 0.3px; color: var(--tx); word-break: break-all; user-select: all; }
.copybtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--cream2); border-radius: var(--r); background: var(--w); color: var(--tx); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.copybtn:hover { background: var(--hov); }
.copybtn.ok { background: var(--gold-d); border-color: var(--gold-d); color: #fff; }
.payln { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: var(--r); background: var(--w); border: 1px solid var(--cream2); }
.payln b { word-break: break-word; }
.paybox .addon { flex-direction: row; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--tx); }
.rcprev { display: flex; align-items: center; gap: 10px; }
.rcprev img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--cream2); }
.paynote { margin: 0; font-size: var(--fs-sm); color: var(--mu); line-height: 1.5; }
@media (max-width: 700px) { .banks { grid-template-columns: 1fr; } }
.card .in > .price + .cbot { margin-top: auto; }

/* ---- colored listing: owner-chosen border color; listings without the feature keep the default border ---- */
.card.is-color { background: var(--bc, #C9A227); border-color: var(--bc, #C9A227); box-shadow: 0 0 0 1px var(--bc, #C9A227); }
.card.is-white { background: #fff; }
.card.is-color .loc { color: rgba(17, 24, 39, 0.65); }
.card.is-color .price { border-bottom-color: rgba(17, 24, 39, 0.15); }
.card.is-color .cbot { border-top-color: rgba(17, 24, 39, 0.15); }
.card.is-color .tg { background: rgba(255, 255, 255, 0.55); }
.card.is-dark, .card.is-dark h4, .card.is-dark .price, .card.is-dark .cact { color: #fff; }
.card.is-dark .loc, .card.is-dark small { color: rgba(255, 255, 255, 0.78); }
.card.is-dark .price { border-bottom-color: rgba(255, 255, 255, 0.28); }
.card.is-dark .cbot { border-top-color: rgba(255, 255, 255, 0.28); }
.card.is-dark .tg { background: rgba(255, 255, 255, 0.2); color: #fff; }
.card.is-dark .cact:hover, .card.is-dark .cact.fav.on { color: #ff9d94; }
/* stickers on listing cards (max 3, top-right of the photo) */
.paybox .addon { flex-wrap: wrap; }
.paybox .addon .fe { flex-basis: 100%; }
.cpbox { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--cream2); border-radius: var(--r); background: var(--w); font-size: var(--fs-sm); color: var(--mu); font-weight: 500; }
.cpbox.own { margin-bottom: 18px; background: var(--cream); }

/* ---- delete listing ---- */
.card .cbot { justify-content: space-between; align-items: center; gap: 8px; }
.cdel { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #F1C9C5; border-radius: 999px; background: #fff; color: #B42318; font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; }
.cdel .ic { width: 14px; height: 14px; }
.cdel:hover { background: #B42318; color: #fff; border-color: #B42318; }
.pa.pic.del { color: #B42318; border-color: #F1C9C5; }
.pa.pic.del:hover { background: #B42318; color: #fff; border-color: #B42318; }
.btn.danger { background: #B42318; border-color: #B42318; color: #fff; }
.btn.danger:hover { background: #912018; border-color: #912018; }
.confirm p { margin: 0 0 16px; color: var(--mu); font-size: var(--fs-md); line-height: 1.5; }
/* ---- view count on cards ---- */
.card .cmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.card .cmeta .loc { flex: 1; min-width: 0; margin-bottom: 0; }
.card .vw { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: #9AA0A6; line-height: 1.3; }
.card .vw .ic { width: 14px; height: 14px; }
.card.is-color .vw { color: rgba(17, 24, 39, 0.65); }
.card.is-dark .vw { color: rgba(255, 255, 255, 0.78); }

/* =====================================================================
   v3 additions
   ===================================================================== */

/* ---- sticker picker: every sticker explains what it means ---- */
.spick { display: flex; flex-direction: column; gap: 10px; }
.slist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.sq { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 44px 10px 10px; border: 1px solid var(--cream2); border-radius: 12px; background: #fff; color: var(--tx); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.sq:hover { border-color: var(--gold); background: #FCFCFD; }
.sq:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sq .se { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sb, #F6F4EF); color: var(--sc, var(--mu)); transition: background 0.15s; }
.sq .se svg { width: 20px; height: 20px; }
.sq .stx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sq .stx b { font-size: var(--fs-md); font-weight: 600; line-height: 1.25; color: var(--tx); }
.sq .stx small { font-size: var(--fs-xs); font-weight: 400; color: var(--mu); line-height: 1.35; }
.sq .sck { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 1.5px solid var(--cream2); background: #fff; transition: background 0.15s, border-color 0.15s; }
.sq.on { border-color: var(--gold-d); background: var(--cream); box-shadow: 0 0 0 1px var(--gold-d); }
.sq.on .se { background: var(--sb, #EFEBE3); }
.sq.on .sck { background: var(--gold-d); border-color: var(--gold-d); }
.sq.on .sck::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.scnt { color: var(--mu); font-size: var(--fs-xs); font-weight: 500; }
.scnt b { color: var(--tx); }

/* ---- card colour picker: soft pastel swatches with names ---- */
.cpick { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.csq { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 4px 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--mu); font: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.csq .cdot { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.14); }
.csq .cn { font-size: var(--fs-xs); font-weight: 500; line-height: 1.2; text-align: center; }
.csq:hover { background: var(--hov); }
.csq:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.csq.on { border-color: var(--gold-d); background: var(--cream); color: var(--tx); }
.csq.on .cdot::after { content: ""; position: absolute; left: 11px; top: 7px; width: 6px; height: 12px; border: solid rgba(17, 24, 39, 0.72); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cname { display: flex; align-items: center; gap: 8px; color: var(--mu); font-size: var(--fs-xs); }
.cname i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.18); }
.cname b { color: var(--tx); font-weight: 600; }
.chint { color: var(--mu); font-size: var(--fs-xs); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .sq, .sq .sck, .csq { transition: none; } }

/* coloured listing: soft, light cards need a hairline edge instead of a same-colour border */
.card.is-color { border-color: rgba(17, 24, 39, 0.1); box-shadow: 0 2px 12px rgba(17, 24, 39, 0.06); }
@media (hover: hover) and (pointer: fine) { .card.is-color:hover { border-color: rgba(17, 24, 39, 0.18); box-shadow: 0 8px 22px rgba(17, 24, 39, 0.12); } }

/* profile settings: username + phone share one row */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duo > label { min-width: 0; }
@media (max-width: 340px) { .duo { grid-template-columns: 1fr; } }

/* photo editor (owner) */
.pedit .ph .rm { width: 26px; height: 26px; font-size: var(--fs-lg); }
.pedit .ph.padd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed var(--cream2); background: var(--bg); color: var(--mu); font-size: var(--fs-h2); line-height: 1; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.pedit .ph.padd small { font-size: var(--fs-xs); }
.pedit .ph.padd:hover { border-color: var(--gold); background: var(--cream); color: var(--tx); }
.box .pcount { margin: 10px 0 4px; }
.box .fe { display: block; margin: 6px 0 0; }
.card .cbot { flex-wrap: wrap; row-gap: 8px; }
.card .cbl { display: flex; align-items: center; gap: 6px; }
.cdel.cedit { width: 28px; padding: 0; justify-content: center; border-color: var(--cream2); color: var(--tx); }
.cdel.cedit:hover { background: var(--gold-d); border-color: var(--gold-d); color: #fff; }
.cdel.cedit .ic { width: 15px; height: 15px; }

/* payment status chip + admin payment list (these classes had no styles) */
.pstat { display: inline-block; align-self: flex-start; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: #FFF6DD; color: #7A5B00; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
.pstat.rejected { background: #FDECEA; color: #B42318; }
.paylist { display: flex; flex-direction: column; gap: 10px; }
.psub { margin: 14px 0 4px; font-size: var(--fs-lg); font-weight: 600; }
.payrow { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--w); flex-wrap: wrap; }
.pthm { flex: none; width: 56px; height: 56px; border-radius: var(--r); background: var(--cream) center/cover; border: 1px solid var(--cream2); display: grid; place-items: center; color: var(--gold); }
.pthm svg.ill { width: 60%; height: auto; }
.pinf { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.pinf small { color: var(--mu); font-size: var(--fs-sm); }
.pacts { display: flex; gap: 8px; flex-wrap: wrap; }
.pacts .btn { margin: 0; }
.rcprev .rcn { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcprev .pdfi { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r); background: var(--cream); border: 1px solid var(--cream2); font-weight: 600; font-size: var(--fs-sm); color: var(--gold-d); }
.rcprev .rm2 { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--hov); color: var(--mu); cursor: pointer; }
.rcprev .rm2:hover { background: var(--err); color: #fff; }
/* ---- sticker count + live price breakdown ---- */
.scnt .sp { color: var(--gold-d); font-weight: 600; }
.paysum:empty { display: none; }
.paysum { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--cream2); border-radius: var(--r); background: var(--w); }
.paysum .psr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-sm); color: var(--mu); }
.paysum .psr b { color: var(--tx); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paysum .psr.tot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--cream2); font-size: var(--fs-base); color: var(--tx); font-weight: 600; }
.paysum .psr.tot b { font-size: var(--fs-xl); color: var(--gold-d); }

/* =====================================================================
   v4: sticker chips ("icon — label"), clearer picker, larger logo
   ===================================================================== */
/* ---- sticker chips: emoji + Georgian label, in the footer of the card (below price and tags), max 3 ---- */
.card .cfoot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card .cfoot .tags { margin-top: 0; padding-top: 0; }
.card .cfoot .cbot { margin-top: 2px; }
.card .stks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.card .stk { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 4px 9px; border: 1px solid rgba(17, 24, 39, 0.08); border-radius: 999px; background: var(--sb, #F3F4F6); color: #2B3138; font-size: var(--fs-xs); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.card .stk .se { flex: none; font-size: 13px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.card .stk b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
@media (max-width: 700px) {
  .card .cfoot { padding-top: 10px; gap: 6px; }
  .card .stks { gap: 4px; }
  .card .stk { gap: 4px; padding: 3px 7px; }
  .card .stk .se { font-size: 12px; }
}

/* ---- sticker picker: separated, spaced, each selected one takes its own colour ---- */
.slist { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sq { gap: 10px; padding: 12px 46px 12px 12px; border: 1px solid #DADCE0; border-radius: 14px; }
.sq:hover { border-color: var(--sc, var(--gold)); background: #fff; }
.sq .se { width: 42px; height: 42px; }
.sq .sdash { flex: none; color: #9AA0A6; line-height: 1; }
.sq .stx { flex: 1; min-width: 0; gap: 3px; }
.sq .stx b { overflow-wrap: anywhere; }
.sq .stx small { overflow-wrap: anywhere; }
.sq.on { border-color: var(--sc, var(--gold-d)); background: var(--sb, var(--cream)); box-shadow: 0 0 0 1px var(--sc, var(--gold-d)); }
.sq.on .se { background: #fff; }
.sq.on .sck { background: var(--sc, var(--gold-d)); border-color: var(--sc, var(--gold-d)); }
@media (max-width: 420px) { .slist { grid-template-columns: 1fr; } }

/* ---- colour swatches: clearer separation between neighbours ---- */
.cgrid { gap: 8px; }
.csq { padding: 10px 4px 9px; border-color: #ECEDEF; background: #fff; }
.csq .cdot { box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.18); }

/* ---- compact header: 44px logo on desktop (single row >=1100px), 40px two-row header on tablets, 36px / 32px on phones; never wraps or overflows ---- */
.top { gap: 28px; padding-top: 10px; padding-bottom: 10px; }
.logo { flex: 0 1 auto; align-self: center; min-width: 0; line-height: 0; }
.logo img.wm { display: block; width: calc(var(--logo-img-h) * 4.611); max-width: 100%; height: auto; mix-blend-mode: normal; }
.notes, .sres { top: calc(var(--logo-h) + 32px); }
@media (max-width: 900px) {
  :root { --logo-h: 24px; }
  .top { flex-wrap: wrap; gap: 6px 12px; padding: 10px 5%; }
  .nav { order: 3; width: 100%; flex: 1 1 100%; }
  .nav .hs { margin-left: auto; }
  .hs input { flex: 1; width: auto; max-width: 0; transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.45s; }
  .hs.open { flex: 1; }
  .hs.open input { width: auto; max-width: 100%; }
  .nav:has(.hs.open) > a { display: none; }
  .notes { top: calc(var(--logo-h) + 36px); }
  .sres { top: calc(var(--hh, calc(var(--logo-h) + 77px)) + 5px); }
}
@media (max-width: 800px) { :root { --logo-h: 24px; } .logo img.wm { width: min(calc(var(--logo-img-h) * 4.611), calc(90vw - 190px)); } }
@media (max-width: 420px) { :root { --logo-h: 22px; } .logo img.wm { width: min(calc(var(--logo-img-h) * 4.611), calc(90vw - 176px)); } .actions { flex: none; gap: 0; } .ib { width: 36px; height: 36px; } .btn.add { min-height: 36px; min-width: 36px; padding: 0 8px; margin-right: 2px; } }

/* ---- v5: compact sticker picker (icon + short label only) ---- */
.slist { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.sq { gap: 12px; padding: 9px 42px 9px 10px; min-height: 54px; }
.sq .se { width: 36px; height: 36px; }
.sq .se svg { width: 19px; height: 19px; }
.sq .stx b { font-size: var(--fs-md); font-weight: 600; line-height: 1.25; }
.sq .sck { right: 12px; }
@media (max-width: 420px) { .slist { grid-template-columns: 1fr 1fr; gap: 6px; } .sq { padding: 8px 34px 8px 8px; gap: 8px; } .sq .se { width: 32px; height: 32px; } .sq .stx b { font-size: var(--fs-sm); } .sq .sck { right: 8px; width: 18px; height: 18px; margin-top: -9px; } .sq.on .sck::after { left: 5px; top: 1.5px; } }
@media (max-width: 300px) { .slist { grid-template-columns: 1fr; } }

/* ---- v5: colour names always fit inside their swatch ---- */
.cgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.csq { min-width: 0; padding: 10px 6px 9px; }
.csq .cn { display: block; max-width: 100%; font-size: var(--fs-xs); line-height: 1.25; text-align: center; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 420px) { .cgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; } .csq .cn { font-size: var(--fs-xs); } }

/* ---- v5b: sticker labels never break inside a word ---- */
.sq .stx b, .sq .stx small { overflow-wrap: normal; word-break: normal; hyphens: none; }
.sq .stx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slist { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 420px) { .slist { grid-template-columns: 1fr; gap: 6px; } .sq { padding: 9px 40px 9px 10px; gap: 12px; } .sq .se { width: 36px; height: 36px; } .sq .stx b { font-size: var(--fs-md); } .sq .sck { right: 12px; width: 20px; height: 20px; margin-top: -10px; } .sq.on .sck::after { left: 6px; top: 2px; } }

/* =====================================================================
   TYPOGRAPHY SYSTEM  (Georgian: Noto Sans Georgian · English: Inter, Arial fallback)
   page headings 24-32px / 400-500 · navigation 14px · product names 15px / 500
   prices 16-20px · buttons 14-15px / 500 · weights used everywhere: 400, 500, 600
   ===================================================================== */
body, button, input, select, textarea { font-family: var(--font-ui); }
b, strong { font-weight: 600; }
/* page headings */
.hero h1, .page > h1, .art h1, .bh, .ptitle { font-size: var(--fs-h1); font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.sec h2, .results h2, .simsec h2, .prof-head h2, .calc h2, .try-head h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
/* sub-headings */
.box h3, .pubbox h3, .confirm h3, .pdesc h3, .abody h3 { font-size: var(--fs-2xl); font-weight: 500; letter-spacing: 0; }
.psub, .notes h4, .paybox h4 { font-size: var(--fs-lg); font-weight: 500; }
.bt b, .bbody b, .hbb b { font-weight: 500; }
.hbc.big .hbb b { font-size: var(--fs-2xl); }
.total { font-size: var(--fs-h1); font-weight: 500; }
/* navigation */
.nav > a, .tabs button, .pback, .aback { font-size: var(--fs-md); font-weight: 500; letter-spacing: 0; }
.fcol, .fcol a, .fh { font-size: var(--fs-md); }
.fh { font-weight: 500; }
/* product names */
.card h4, .card .trow h4, .sr .si b { font-size: var(--fs-base); font-weight: 500; line-height: 1.35; }
/* product prices */
.price, .card .price, .sr .price, .pprice .price { font-family: var(--font-price); font-weight: 600; letter-spacing: 0; font-variant-numeric: lining-nums; }
.price { font-size: var(--fs-2xl); }
.card .price { font-size: var(--fs-xl); }
.sr .price { font-size: var(--fs-lg); }
.pprice .price { font-size: var(--fs-2xl); }
@media (max-width: 700px) { .card .price { font-size: var(--fs-lg); } }
/* buttons */
.btn, .btn.sb { font-size: var(--fs-base); font-weight: 500; letter-spacing: 0; }
.btn.sm, .ck-acts .btn { font-size: var(--fs-md); }

/* ---- listing card: price + GEL/USD switch share one line ---- */
.card .pline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; padding-bottom: 12px; border-bottom: 1px solid #ECEDEF; }
.card .pline .price { margin: 0; padding: 0; border: 0; min-width: 0; }
.card .pline .cur { flex: none; }
.card.is-color .pline { border-bottom-color: rgba(17, 24, 39, 0.15); }
.card.is-dark .pline { border-bottom-color: rgba(255, 255, 255, 0.28); }
@media (max-width: 420px) { .card .pline .cur.sm { gap: 4px; padding: 0 6px; } .card .pline .cur.sm .trk { width: 26px; height: 16px; } .card .pline .cur.sm .trk i { width: 12px; height: 12px; } .card .pline .cur.sm.on .trk i { transform: translateX(10px); } }

/* ---- compact header: ~48px single row, slim controls, tight spacing ---- */
.top { gap: 16px; padding: 4px 5%; }
.top .ib { width: 32px; height: 32px; }
.top .ib svg { width: 18px; height: 18px; }
.top .hs { height: 32px; }
.top .btn.add { min-height: 32px; padding: 0 12px; font-size: var(--fs-md); }
.top .nav { gap: 2px; }
.top .nav > a { padding: 4px 8px; }
.top .actions { gap: 4px; }
.notes, .sres { top: calc(var(--hh, 50px) + 6px); }
@media (max-width: 900px) { .top { gap: 2px 10px; padding: 4px 5%; } .top .btn.add { padding: 0 10px; } }
@media (max-width: 420px) { .top .ib { width: 32px; height: 32px; } .top .btn.add { min-height: 32px; min-width: 32px; padding: 0 8px; } }
/* sticker picker (add form): emoji + label */
.sq .se { font-size: 20px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* ---- compact card body: price, switch, tags and stickers sit close together ---- */
.card .in { padding: 10px 14px 12px; }
.card .cmeta { margin-bottom: 2px; }
.card .pline { margin-top: 6px; padding-bottom: 8px; }
.card .cfoot { margin-top: 0; padding-top: 8px; gap: 6px; }
.card .cfoot .cbot { margin-top: 0; padding-top: 8px; }
@media (max-width: 900px) { .card .in { padding: 9px 11px 11px; } .card .pline { margin-top: 5px; padding-bottom: 7px; } .card .cfoot { padding-top: 7px; gap: 5px; } }

/* card tags: small emoji before the text, always grayscale */
.card .tg { display: inline-flex; align-items: center; gap: 4px; }
.card .tg .te { font-style: normal; font-size: 11px; line-height: 1; filter: grayscale(1); opacity: 0.8; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif; }

/* ---- sticker look: white rounded chip, thin grey border, emoji + label (like the "სასწრაფოდ" example) ---- */
.spick .slist { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.spick .sq { gap: 10px; min-height: 46px; padding: 8px 42px 8px 14px; border: 1px solid #E3E4E6; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08); transition: border-color 0.15s, box-shadow 0.15s; }
.spick .sq .se, .spick .sq.on .se { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; font-size: 22px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.spick .sq .stx b { font-size: var(--fs-base); font-weight: 500; color: var(--tx); }
.spick .sq:hover { border-color: #C9CBCF; box-shadow: 0 3px 10px rgba(17, 24, 39, 0.10); background: #fff; }
.spick .sq.on { background: #fff; border-color: var(--gold-d); box-shadow: 0 0 0 1px var(--gold-d); }
.spick .sq .sck { right: 12px; width: 20px; height: 20px; margin-top: -10px; border-color: #C9CBCF; }
.spick .sq.on .sck { background: var(--gold-d); border-color: var(--gold-d); }

/* same look on the listing cards */
.card .stk { padding: 4px 10px; gap: 6px; border: 1px solid #E3E4E6; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08); font-weight: 500; color: #2B3138; }
.card .stk .se { display: inline; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; font-size: 14px; line-height: 1; }
.card .stk b { font-weight: 500; }
@media (max-width: 700px) { .card .stk { padding: 3px 8px; gap: 5px; } .card .stk .se { font-size: 13px; } }

/* header action buttons (დამატება, favourites, notifications, profile): more space between them */
.top .actions { gap: 24px; }
@media (max-width: 800px) { .top .actions { gap: 16px; } }
@media (max-width: 420px) { .top .actions { gap: 9px; } }

/* ---- profile dropdown ---- */
.pmenu { position: fixed; z-index: 70; width: 300px; max-width: calc(100vw - 16px); background: var(--w); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; display: none; }
.pmenu.show { display: block; animation: fade 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.pm-ava { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-d); color: #fff; display: grid; place-items: center; font-size: var(--fs-xl); font-weight: 600; overflow: hidden; }
.pm-ava img { width: 100%; height: 100%; object-fit: cover; }
.pm-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-id b { font-size: var(--fs-base); font-weight: 600; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-id small { font-size: var(--fs-md); color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-sep { height: 1px; background: var(--line); }
.pm-list { padding: 6px 0; }
.pm-list a, .pm-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 20px; border: 0; background: none; color: var(--tx); font: inherit; font-size: var(--fs-base); font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s; }
.pm-list a:hover, .pm-list button:hover { background: var(--hov); }
.pm-list a:focus-visible, .pm-list button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pm-bdg { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--err); color: #fff; font-size: var(--fs-xs); font-weight: 600; display: grid; place-items: center; }

/* ---- compact profile header: avatar | name + details | add button on one row ---- */
.panel:has(.prof-head) { padding: 24px 28px; }
.prof-head { flex-wrap: nowrap; align-items: flex-start; gap: 16px; }
.prof-head .ava { width: 64px; height: 64px; font-size: var(--fs-2xl); }
.prof-head .ava .ic { width: 28px; height: 28px; }
.ph-info { flex: 1 1 0; min-width: 0; }
.prof-head h2 { font-size: var(--fs-xl); line-height: 1.25; }
.prof-head .pmail { font-size: var(--fs-md); }
.prof-head .stats { gap: 4px 18px; margin: 6px 0 8px; font-size: var(--fs-sm); }
.prof-head .btn.alt.sm { min-height: 32px; padding: 0 12px; margin-top: 0; font-size: var(--fs-sm); }
.prof-head .btn.alt.sm .ic { width: 15px; height: 15px; }
.prof-head > a.btn { flex: none; margin-left: auto; min-height: 40px; padding: 0 18px; }
.tabs { gap: 8px; margin: 14px 0 18px; padding-bottom: 14px; }
.tabs button { height: 36px; padding: 0 14px; font-size: var(--fs-md); }
@media (max-width: 640px) {
  .panel:has(.prof-head) { padding: 18px 16px; }
  .prof-head { flex-wrap: wrap; gap: 12px; }
  .ph-info { flex: 1 1 calc(100% - 80px); }
  .prof-head > a.btn { margin-left: 0; width: 100%; }
}

/* ---- buttons: no lift / no shadow on hover (colour change only) ---- */
.btn:hover, .btn.alt:hover, .btn.sb.call:hover { transform: none; box-shadow: none; }
.btn:active { transform: none; }

/* ---- profile: photo actions as quiet text links (no boxes) ---- */
.prof-head .btn.alt.sm { padding: 0; min-height: 28px; border: 0; background: none; color: var(--mu); font-size: var(--fs-md); font-weight: 500; border-radius: 0; margin-left: 0 !important; }
.prof-head .btn.alt.sm + .btn.alt.sm { margin-left: 18px !important; }
.prof-head .btn.alt.sm:hover { background: none; border: 0; color: var(--tx); }
.prof-head .btn.alt.sm .ic { width: 16px; height: 16px; }
#avDel:hover { color: var(--err); }

/* ---- profile tabs: clean underline navigation instead of boxed buttons ---- */
.tabs { gap: 26px; margin: 14px 0 20px; padding-bottom: 0; border-bottom: 1px solid var(--line); }
.tabs button { height: 42px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--mu); font-size: var(--fs-base); font-weight: 500; margin-bottom: -1px; }
.tabs button .ic { width: 18px; height: 18px; }
.tabs button.on { background: none; border-bottom-color: var(--tx); color: var(--tx); }
.tabs button:not(.on):hover { background: none; border-color: transparent; border-bottom-color: var(--cream2); color: var(--tx); }
.tabs #logout, .tabs #logout:hover { background: none; border-color: transparent; color: var(--err); margin-left: auto; }
.tabs #logout:hover { border-bottom-color: #efc8c4; }
@media (max-width: 640px) { .tabs { gap: 18px; } }

/* ---- hero: no blue background; page background carries a faint jewelry-icon pattern ---- */
.hero { background: none; border-bottom: 0; padding: 56px 5% 36px; }
.hero::before, .hero::after { display: none; }
.hero h1 { color: var(--tx); }
.hero > p { color: var(--mu); }
:root { --pat-op: 0.07; }   /* pattern strength: raise for more visible icons, lower for fainter */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--pat-op); background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22360%22 height=%22360%22 viewBox=%220 0 360 360%22 fill=%22none%22 stroke=%22%232B3138%22 stroke-width=%221.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate%2816 18%29 scale%281.2%29 rotate%28-10 24 24%29%22%3E%3Cpath d=%22M12 6h24l8 10-20 26L4 16z%22/%3E%3Cpath d=%22M4 16h40M18 6l-6 10 12 26M30 6l6 10-12 26M18 6l6 10 6-10%22/%3E%3C/g%3E%3Cg transform=%22translate%28136 14%29 scale%281.2%29 rotate%288 24 24%29%22%3E%3Ccircle cx=%2224%22 cy=%2231%22 r=%2212%22/%3E%3Ccircle cx=%2224%22 cy=%2231%22 r=%229%22/%3E%3Cpath d=%22M18 6h12l4 6-10 10-10-10z%22/%3E%3Cpath d=%22M14 12h20M21 6l-2 6 5 10M27 6l2 6-5 10%22/%3E%3C/g%3E%3Cg transform=%22translate%28252 20%29 scale%281.2%29 rotate%28-6 24 24%29%22%3E%3Cpath d=%22M6 36L4 14l12 10 8-14 8 14 12-10-2 22z%22/%3E%3Cpath d=%22M6 36h36v5H6z%22/%3E%3Ccircle cx=%224%22 cy=%2212%22 r=%221.6%22/%3E%3Ccircle cx=%2224%22 cy=%228%22 r=%221.6%22/%3E%3Ccircle cx=%2244%22 cy=%2212%22 r=%221.6%22/%3E%3C/g%3E%3Cg transform=%22translate%2876 138%29 scale%281.2%29 rotate%286 24 24%29%22%3E%3Ccircle cx=%2224%22 cy=%227%22 r=%223%22/%3E%3Cpath d=%22M24 10v7%22/%3E%3Cpath d=%22M24 17c-5 6-8 10-8 15a8 8 0 0016 0c0-5-3-9-8-15z%22/%3E%3Cpath d=%22M20 31a4 4 0 003 3.5%22/%3E%3C/g%3E%3Cg transform=%22translate%28196 134%29 scale%281.2%29 rotate%28-8 24 24%29%22%3E%3Cellipse cx=%2224%22 cy=%2226%22 rx=%2218%22 ry=%2211%22/%3E%3Cellipse cx=%2224%22 cy=%2226%22 rx=%2213%22 ry=%227%22/%3E%3Cpath d=%22M24 8l4 4-4 4-4-4z%22/%3E%3C/g%3E%3Cg transform=%22translate%28312 150%29 scale%280.7%29 rotate%280 24 24%29%22%3E%3Cpath d=%22M24 10c1.5 9 4.500 12 14 14-9.500 2-12.500 5-14 14-1.500-9-4.500-12-14-14 9.500-2 12.500-5 14-14z%22/%3E%3C/g%3E%3Cg transform=%22translate%2814 160%29 scale%280.6%29 rotate%280 24 24%29%22%3E%3Cpath d=%22M24 10c1.5 9 4.500 12 14 14-9.500 2-12.500 5-14 14-1.500-9-4.500-12-14-14 9.500-2 12.500-5 14-14z%22/%3E%3C/g%3E%3Cg transform=%22translate%28136 254%29 scale%281.2%29 rotate%284 24 24%29%22%3E%3Cpath d=%22M5 7c0 19 8 29 19 29s19-10 19-29%22/%3E%3Cpath d=%22M24 36l-5 5 5 6 5-6z%22/%3E%3Cpath d=%22M19 41h10%22/%3E%3C/g%3E%3Cg transform=%22translate%28252 258%29 scale%281.2%29 rotate%28-10 24 24%29%22%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%2211%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%228%22/%3E%3Cpath d=%22M24 18v6l4 3%22/%3E%3Cpath d=%22M19 13l2-9h6l2 9M19 35l2 9h6l2-9%22/%3E%3Cpath d=%22M35 22h2.5v4H35z%22/%3E%3C/g%3E%3Cg transform=%22translate%2816 262%29 scale%281.0%29 rotate%2812 24 24%29%22%3E%3Cpath d=%22M12 6h24l8 10-20 26L4 16z%22/%3E%3Cpath d=%22M4 16h40M18 6l-6 10 12 26M30 6l6 10-12 26M18 6l6 10 6-10%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 360px 360px repeat; }
@media (max-width: 700px) { body::before { background-size: 260px 260px; } }

/* =====================================================================
   v6: everyday-marketplace look · bigger header actions · one shared card style
   ===================================================================== */

/* ---- palette: friendly blue on a soft grey page (replaces the charcoal "boutique" look) ---- */
:root {
  --bg: #F5F7FA;
  --gold: #2563EB;        /* accent: focus, hover borders, links */
  --gold-d: #2563EB;      /* primary: buttons, active states, avatar */
  --gold-h: #1D4ED8;      /* primary hover */
  --gold-l: #E3EDFF;      /* soft tint */
  --r: 10px;              /* friendlier control radius */
  --pat-op: 0;            /* jewelry-icon wallpaper off (set back to 0.07 to restore) */

  /* ONE card style: used by listing cards (.card) AND the filter card (.sbox) */
  --card-bg: #fff;
  --card-bd: #EEF0F2;
  --card-r: 16px;
  --card-sh: 0 2px 10px rgba(17, 24, 39, 0.05);
  --card-pad: 10px 14px 12px;
}
@media (max-width: 900px) { :root { --card-r: 14px; --card-pad: 9px 11px 11px; } }

/* ---- shared card style ---- */
.card, .sbox { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); }
.card .in, .sbox { padding: var(--card-pad); }   /* .sbox stays overflow:visible so dropdown lists are not clipped */

/* ---- buttons / focus / selected states in the new palette ---- */
.btn { font-weight: 600; }
.btn:hover { background: var(--gold-h); border-color: var(--gold-h); }
.pa.pic.ai:hover { background: var(--gold-h); border-color: var(--gold-h); }
.fgrid input:focus, .form input:focus, .form textarea:focus, .dd-other:focus, .calc input:focus,
.dd.open .dd-btn, .dd-btn:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.dd-opt.sel, .drop:hover, .drop.drag { background: #EAF1FF; }
.badge { text-transform: none; letter-spacing: 0; }

/* ---- plainer, friendlier headings and hero ---- */
.hero { background: linear-gradient(180deg, #E6EEFD 0%, var(--bg) 100%); padding: 48px 5% 32px; }
.hero h1, .page > h1, .art h1, .bh, .ptitle,
.sec h2, .results h2, .simsec h2, .prof-head h2, .calc h2, .try-head h2 { font-weight: 600; }

/* ---- header: larger actions with more room between them ---- */
.top { gap: 20px; padding: 8px 5%; }
.top .nav > a { padding: 10px 12px; font-size: var(--fs-base); }
.top .hs { height: 46px; }
.top .actions { gap: 32px; }

.top .ib { width: 46px; height: 46px; }
.top .ib svg { width: 28px; height: 28px; }            /* heart + bell */
.top .login { border: 2px solid var(--line); font-size: 19px; }
.top .login svg { width: 26px; height: 26px; }          /* default profile icon */
.top .login:hover { border-color: var(--gold-d); }
.top .dot { top: 3px; right: 1px; min-width: 18px; height: 18px; }

/* "+ დამატება": solid pill with a circled plus */
.top .actions .btn.add {
  gap: 10px;
  min-height: 46px;
  padding: 0 22px 0 8px;
  border-radius: 999px;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30);
}
.top .actions .btn.add .pl { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); font-size: 0; }
.top .actions .btn.add .pl svg { width: 18px; height: 18px; }
.top .actions .btn.add:hover { background: var(--gold-h); border-color: var(--gold-h); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30); }
.top .actions .btn.add:active { background: #1E40AF; border-color: #1E40AF; }
.top .actions .btn.add:focus-visible, .top .ib:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }

@media (max-width: 900px) { .top { gap: 4px 10px; padding: 8px 5%; } }

@media (max-width: 800px) {
  .top .actions { gap: 18px; }
  .top .ib { width: 42px; height: 42px; }
  .top .ib svg { width: 26px; height: 26px; }
  .top .login svg { width: 24px; height: 24px; }
  /* text hides on tablets/phones: the button becomes a round "+" */
  .top .actions .btn.add { width: 44px; min-width: 44px; min-height: 44px; padding: 0; gap: 0; margin-right: 0; justify-content: center; }
  .top .actions .btn.add .pl { width: 100%; height: 100%; background: none; }
  .top .actions .btn.add .pl svg { width: 22px; height: 22px; }
  .logo img.wm { width: min(calc(var(--logo-img-h) * 4.611), calc(90vw - 240px)); }
}

@media (max-width: 420px) {
  .top .actions { gap: 10px; }
  .top .ib { width: 40px; height: 40px; }
  .top .ib svg { width: 24px; height: 24px; }
  .top .login { font-size: 17px; }
  .top .login svg { width: 22px; height: 22px; }
  .top .actions .btn.add { width: 40px; min-width: 40px; min-height: 40px; }
  .top .actions .btn.add .pl svg { width: 20px; height: 20px; }
  .logo img.wm { width: min(calc(var(--logo-img-h) * 4.611), calc(90vw - 206px)); }
}

/* =====================================================================
   FIX: header search field never overlaps the "+ დამატება" button
   The field is now flexible: it shrinks (with an ellipsis for long text)
   instead of pushing under the action buttons, and the nav links step aside
   while the field is open when there is not enough room for both.
   ===================================================================== */
.top .actions { flex: none; }
.top .nav { min-width: 0; }
.top .hs { min-width: 0; max-width: 100%; }
.top .hs .ib { flex: none; }
.top .hs input { min-width: 0; text-overflow: ellipsis; }

/* desktop: field grows to a comfortable width, but only into free space */
@media (min-width: 1001px) {
  .top .hs { flex: 0 1 auto; }
  .top .hs.open { flex: 0 1 460px; }
  .top .hs.open input { flex: 1 1 auto; width: clamp(120px, 32vw, 460px); }
}
@media (min-width: 1001px) and (max-width: 1279px) {
  .nav:has(.hs.open) > a { display: none; }
}

/* narrow desktop / tablet landscape: same stacked header as on tablets,
   so the nav links and the search never run under the action buttons */
@media (min-width: 901px) and (max-width: 1000px) {
  .top { flex-wrap: wrap; gap: 4px 10px; }
  .nav { order: 3; width: 100%; flex: 1 1 100%; }
  .nav .hs { margin-left: auto; }
  .hs input { flex: 1; width: auto; max-width: 0; transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.45s; }
  .hs.open { flex: 1; }
  .hs.open input { width: auto; max-width: 100%; }
  .nav:has(.hs.open) > a { display: none; }
}

/* very small phones: keep the search icon inside the screen */
@media (max-width: 400px) {
  .top .nav { gap: 0; }
  .top .nav > a { padding-left: 6px; padding-right: 6px; }
  .top .hs { flex: none; }
  .top .hs.open { flex: 1 1 auto; }
}
@media (max-width: 340px) {
  .top .nav > a { padding-left: 4px; padding-right: 4px; font-size: var(--fs-sm); }
}

/* =====================================================================
   BACKGROUND: light, elegant jewelry illustration (necklace, pendant, rings,
   earrings, pearls, watch, bracelet). Two fixed layers sit in the left and
   right margins and fade out toward the middle, so text, cards and buttons
   stay fully readable. Cards, forms and the header are opaque and always
   sit on top of the art.
   Files: images/bg-jewelry-left.svg + images/bg-jewelry-right.svg
   (replace them to change the artwork; --bg-art-op controls strength)
   ===================================================================== */
:root { --bg-art-op: 0.65; }

/* bright page wash: soft champagne glow top-left, pale blue glow bottom-right */
body {
  background:
    radial-gradient(ellipse 55% 45% at 0% 0%, rgba(246, 233, 210, 0.60), rgba(246, 233, 210, 0) 70%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(214, 228, 250, 0.65), rgba(214, 228, 250, 0) 70%),
    var(--bg);
  background-attachment: fixed;
}

body::before, body::after {
  content: "";
  position: fixed;
  inset: auto;
  top: 0;
  bottom: 0;
  width: 28vw;
  z-index: -1;
  pointer-events: none;
  opacity: var(--bg-art-op);
  background-repeat: no-repeat;
  background-size: auto 100%;
}
body::before {
  left: 0;
  right: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 470 1000%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cdefs%3E %3ClinearGradient id=%22gold%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23E9D3A3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23BE9456%22/%3E%3C/linearGradient%3E %3ClinearGradient id=%22gem%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23CFE0F8%22/%3E%3C/linearGradient%3E %3ClinearGradient id=%22mint%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23F2FBF6%22/%3E%3Cstop offset=%221%22 stop-color=%22%23BDE3D0%22/%3E%3C/linearGradient%3E %3ClinearGradient id=%22rose%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFF4F1%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F3CFC6%22/%3E%3C/linearGradient%3E %3CradialGradient id=%22pearl%22 cx=%22.35%22 cy=%22.3%22 r=%22.8%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23F4ECE2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23D9C9B3%22/%3E%3C/radialGradient%3E %3CradialGradient id=%22dial%22 cx=%22.5%22 cy=%22.5%22 r=%22.6%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F3EBDD%22/%3E%3C/radialGradient%3E %3C/defs%3E %3Cg stroke=%22%23C4A06A%22 stroke-width=%222.4%22 stroke-dasharray=%220.1 6.2%22%3E%3Cpath d=%22M-10 10 C 40 180 100 290 165 320%22/%3E%3Cpath d=%22M300 -10 C 290 120 230 250 165 320%22/%3E%3C/g%3E %3Cg stroke=%22%23DCC594%22 stroke-width=%221%22 opacity=%22.8%22%3E%3Cpath d=%22M-10 10 C 40 180 100 290 165 320%22/%3E%3Cpath d=%22M300 -10 C 290 120 230 250 165 320%22/%3E%3C/g%3E %3Ccircle cx=%22165%22 cy=%22328%22 r=%226%22 stroke=%22%23C4A06A%22 stroke-width=%221.6%22 fill=%22%23FFFFFF%22/%3E %3Cpath d=%22M165 338 C 196 376 206 408 186 432 C 175 445 155 445 144 432 C 124 408 134 376 165 338Z%22 fill=%22url(%23gem)%22 stroke=%22%23C4A06A%22 stroke-width=%221.8%22/%3E %3Cg stroke=%22%23C4A06A%22 stroke-width=%221%22 opacity=%22.85%22%3E%3Cpath d=%22M165 338 L165 441 M144 432 L186 432 M165 338 L140 395 M165 338 L190 395 M148 380 L182 380 M150 410 L180 410%22/%3E%3C/g%3E %3Cg stroke=%22%23C4A06A%22 stroke-width=%221.8%22%3E%3Ccircle cx=%2270%22 cy=%22488%22 r=%227%22 fill=%22url(%23gold)%22/%3E%3Cpath d=%22M70 495 L70 520%22 stroke-dasharray=%220.1 5%22 stroke-width=%222.4%22/%3E%3Ccircle cx=%2270%22 cy=%22540%22 r=%2219%22 fill=%22url(%23rose)%22/%3E%3Ccircle cx=%2270%22 cy=%22540%22 r=%2211%22 fill=%22%23FFFFFF%22 opacity=%22.7%22/%3E%3Cpath d=%22M70 521 L70 559 M51 540 L89 540 M57 527 L83 553 M83 527 L57 553%22 stroke-width=%22.9%22 opacity=%22.7%22/%3E%3Ccircle cx=%2270%22 cy=%22582%22 r=%2210%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%221%22/%3E%3C/g%3E %3Cg stroke=%22%23C4A06A%22%3E%3Ccircle cx=%22210%22 cy=%22612%22 r=%2258%22 stroke-width=%223.4%22/%3E%3Ccircle cx=%22210%22 cy=%22612%22 r=%2251%22 stroke-width=%221%22 opacity=%22.7%22/%3E%3Cpath d=%22M184 530 L197 508 L223 508 L236 530 L210 560Z%22 fill=%22url(%23gem)%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M184 530 L236 530 M197 508 L210 560 M223 508 L210 560 M197 508 L210 530 L223 508%22 stroke-width=%221%22 opacity=%22.85%22/%3E%3C/g%3E %3Cpath d=%22M262 511 Q262 520 271 520 Q262 520 262 529 Q262 520 253 520 Q262 520 262 511Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M160 474 Q160 480 166 480 Q160 480 160 486 Q160 480 154 480 Q160 480 160 474Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M52 372 Q52 380 60 380 Q52 380 52 388 Q52 380 44 380 Q52 380 52 372Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M240 143 Q240 150 247 150 Q240 150 240 157 Q240 150 233 150 Q240 150 240 143Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M34 245 Q34 250 39 250 Q34 250 34 255 Q34 250 29 250 Q34 250 34 245Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M285 694 Q285 700 291 700 Q285 700 285 706 Q285 700 279 700 Q285 700 285 694Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cg stroke=%22%23C4A06A%22 stroke-width=%221.6%22%3E%3Cpolygon points=%2270,656 88,662 100,678 100,698 88,714 70,720 52,714 40,698 40,678 52,662%22 fill=%22url(%23gem)%22/%3E%3Cpolygon points=%2270,670 84,676 90,688 84,702 70,708 56,702 50,688 56,676%22 stroke-width=%22.9%22 opacity=%22.8%22/%3E%3Cpath d=%22M70 656 L70 670 M88 662 L84 676 M100 678 L90 688 M100 698 L90 688 M88 714 L84 702 M70 720 L70 708 M52 714 L56 702 M40 698 L50 688 M40 678 L50 688 M52 662 L56 676%22 stroke-width=%22.8%22 opacity=%22.8%22/%3E%3C/g%3E %3Cpath d=%22M-10 740 C 80 800 180 890 320 965%22 stroke=%22%23DCC594%22 stroke-width=%221%22 opacity=%22.7%22/%3E %3Ccircle cx=%22-6.0%22 cy=%22742.0%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%2212.7%22 cy=%22754.9%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%2231.8%22 cy=%22768.7%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%2251.5%22 cy=%22783.2%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%2271.7%22 cy=%22798.5%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%2292.7%22 cy=%22814.2%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22114.3%22 cy=%22830.5%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22136.8%22 cy=%22847.1%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22160.0%22 cy=%22864.0%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22184.1%22 cy=%22881.0%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22209.2%22 cy=%22898.1%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22235.3%22 cy=%22915.2%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22262.4%22 cy=%22932.1%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22290.6%22 cy=%22948.7%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%22320.0%22 cy=%22965.0%22 r=%2212%22 fill=%22url(%23pearl)%22 stroke=%22%23D4C3AA%22 stroke-width=%220.8%22/%3E %3Cpath d=%22M150 923 Q150 930 157 930 Q150 930 150 937 Q150 930 143 930 Q150 930 150 923Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M30 875 Q30 880 35 880 Q30 880 30 885 Q30 880 25 880 Q30 880 30 875Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3C/svg%3E");
  background-position: left top;
  -webkit-mask-image: linear-gradient(to right, #000 25%, transparent 100%);
  mask-image: linear-gradient(to right, #000 25%, transparent 100%);
}
body::after {
  right: 0;
  left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 470 1000%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cdefs%3E %3ClinearGradient id=%22gold%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23E9D3A3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23BE9456%22/%3E%3C/linearGradient%3E %3ClinearGradient id=%22gem%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23CFE0F8%22/%3E%3C/linearGradient%3E %3ClinearGradient id=%22mint%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23F2FBF6%22/%3E%3Cstop offset=%221%22 stop-color=%22%23BDE3D0%22/%3E%3C/linearGradient%3E %3ClinearGradient id=%22rose%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFF4F1%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F3CFC6%22/%3E%3C/linearGradient%3E %3CradialGradient id=%22pearl%22 cx=%22.35%22 cy=%22.3%22 r=%22.8%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23F4ECE2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23D9C9B3%22/%3E%3C/radialGradient%3E %3CradialGradient id=%22dial%22 cx=%22.5%22 cy=%22.5%22 r=%22.6%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F3EBDD%22/%3E%3C/radialGradient%3E %3C/defs%3E %3Cg stroke=%22%23C4A06A%22 stroke-width=%221.8%22 fill=%22%23FFFFFF%22 fill-opacity=%22.55%22%3E%3Cpath d=%22M268 270 L272 130 Q300 116 328 130 L332 270%22/%3E%3Cpath d=%22M268 392 L272 535 Q300 549 328 535 L332 392%22/%3E%3C/g%3E %3Cg stroke=%22%23DCC594%22 stroke-width=%221%22 stroke-dasharray=%223 4%22%3E%3Cpath d=%22M277 262 L280 138 M323 262 L320 138 M277 400 L280 528 M323 400 L320 528%22/%3E%3C/g%3E %3Cg stroke=%22%23C4A06A%22 stroke-width=%221.2%22%3E%3Ccircle cx=%22300%22 cy=%22440%22 r=%222.4%22/%3E%3Ccircle cx=%22300%22 cy=%22462%22 r=%222.4%22/%3E%3Ccircle cx=%22300%22 cy=%22484%22 r=%222.4%22/%3E%3Ccircle cx=%22300%22 cy=%22506%22 r=%222.4%22/%3E%3C/g%3E %3Crect x=%22361%22 y=%22322%22 width=%2211%22 height=%2218%22 rx=%223%22 fill=%22url(%23gold)%22 stroke=%22%23C4A06A%22 stroke-width=%221.4%22/%3E %3Ccircle cx=%22300%22 cy=%22331%22 r=%2266%22 fill=%22url(%23gold)%22 fill-opacity=%22.35%22 stroke=%22%23C4A06A%22 stroke-width=%223%22/%3E %3Ccircle cx=%22300%22 cy=%22331%22 r=%2255%22 fill=%22url(%23dial)%22 stroke=%22%23C4A06A%22 stroke-width=%221.4%22/%3E %3Cpath d=%22M300.0 285.0 L300.0 279.0 M324.5 288.6 L326.0 286.0 M342.4 306.5 L345.0 305.0 M346.0 331.0 L352.0 331.0 M342.4 355.5 L345.0 357.0 M324.5 373.4 L326.0 376.0 M300.0 377.0 L300.0 383.0 M275.5 373.4 L274.0 376.0 M257.6 355.5 L255.0 357.0 M254.0 331.0 L248.0 331.0 M257.6 306.5 L255.0 305.0 M275.5 288.6 L274.0 286.0 %22 stroke=%22%23C4A06A%22 stroke-width=%221.6%22/%3E %3Cpath d=%22M300 331 L300 297 M300 331 L322 344%22 stroke=%22%23C4A06A%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%22300%22 cy=%22331%22 r=%223.5%22 fill=%22%23C4A06A%22 stroke=%22none%22/%3E %3Cg stroke=%22%23C4A06A%22 stroke-width=%223%22%3E%3Ccircle cx=%22350%22 cy=%22670%22 r=%2246%22/%3E%3Ccircle cx=%22296%22 cy=%22716%22 r=%2230%22 stroke-width=%222.4%22/%3E%3C/g%3E %3Cg stroke=%22%23C4A06A%22 stroke-width=%221.4%22%3E%3Ccircle cx=%22350%22 cy=%22624%22 r=%227%22 fill=%22url(%23gem)%22/%3E%3Ccircle cx=%22296%22 cy=%22686%22 r=%225.5%22 fill=%22url(%23rose)%22/%3E%3C/g%3E %3Cg stroke=%22%23C4A06A%22%3E%3Ccircle cx=%22340%22 cy=%22905%22 r=%2244%22 stroke-width=%223.4%22/%3E%3Ccircle cx=%22340%22 cy=%22905%22 r=%2237%22 stroke-width=%221%22 opacity=%22.7%22/%3E%3Cpolygon points=%22316,826 364,826 376,838 376,852 364,864 316,864 304,852 304,838%22 fill=%22url(%23mint)%22 stroke-width=%221.8%22/%3E%3Cpolygon points=%22322,832 358,832 368,840 368,850 358,858 322,858 312,850 312,840%22 stroke-width=%221%22 opacity=%22.8%22/%3E%3Cpath d=%22M316 826 L322 832 M364 826 L358 832 M376 852 L368 850 M304 852 L312 850 M316 864 L322 858 M364 864 L358 858%22 stroke-width=%221%22 opacity=%22.7%22/%3E%3C/g%3E %3Cpath d=%22M150 760 C 230 810 300 800 480 760%22 stroke=%22%23C4A06A%22 stroke-width=%222.4%22 stroke-dasharray=%220.1 6.2%22/%3E %3Ccircle cx=%22222%22 cy=%22792%22 r=%229%22 fill=%22url(%23gem)%22 stroke=%22%23C4A06A%22 stroke-width=%221.6%22/%3E %3Ccircle cx=%22300%22 cy=%22800%22 r=%229%22 fill=%22url(%23rose)%22 stroke=%22%23C4A06A%22 stroke-width=%221.6%22/%3E %3Ccircle cx=%22380%22 cy=%22790%22 r=%229%22 fill=%22url(%23gem)%22 stroke=%22%23C4A06A%22 stroke-width=%221.6%22/%3E %3Cpath d=%22M200 82 Q200 90 208 90 Q200 90 200 98 Q200 90 192 90 Q200 90 200 82Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M420 224 Q420 230 426 230 Q420 230 420 236 Q420 230 414 230 Q420 230 420 224Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M400 462 Q400 470 408 470 Q400 470 400 478 Q400 470 392 470 Q400 470 400 462Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M210 594 Q210 600 216 600 Q210 600 210 606 Q210 600 204 600 Q210 600 210 594Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M430 555 Q430 560 435 560 Q430 560 430 565 Q430 560 425 560 Q430 560 430 555Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M250 954 Q250 960 256 960 Q250 960 250 966 Q250 960 244 960 Q250 960 250 954Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3Cpath d=%22M440 963 Q440 970 447 970 Q440 970 440 977 Q440 970 433 970 Q440 970 440 963Z%22 fill=%22%23FFFFFF%22 stroke=%22%23C4A06A%22 stroke-width=%221%22/%3E %3C/svg%3E");
  background-position: right top;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 100%);
  mask-image: linear-gradient(to left, #000 25%, transparent 100%);
}

/* the hero used a solid gradient that would hide the art: make it translucent */
.hero { background: linear-gradient(180deg, rgba(230, 238, 253, 0.55) 0%, rgba(245, 247, 250, 0) 100%); }

/* tablets and phones: no free margins, so the art becomes two small corner accents */
@media (max-width: 1000px) {
  :root { --bgh: min(85vw, 100vh); --bg-art-op: 0.45; }
  body::before, body::after { height: var(--bgh); width: calc(var(--bgh) * 0.47); }
  body::before { top: 0; bottom: auto; }
  body::after { top: auto; bottom: 0; background-position: right bottom; }
}
@media (max-width: 700px) {
  :root { --bgh: min(110vw, 62vh); --bg-art-op: 0.35; }
}
@media print { body::before, body::after { display: none; } }

/* =====================================================================
   HEADER ACTIONS: tight, consistent spacing between
   "+ დამატება", heart, bell and profile (sizes/colors unchanged).
   Placed last so it overrides every earlier gap value at all widths.
   ===================================================================== */
.top .actions { gap: 6px; }
/* =====================================================================
   CALCULATOR: same card style as the filter card (.sbox)
   Reuses the shared card tokens: background, border, radius, shadow, padding.
   ===================================================================== */
.calc-frame { border-radius: var(--card-r); }
.calc { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); padding: var(--card-pad); }

/* =====================================================================
   CALCULATOR SECTION: soft jewelry-icon background (ring, necklace, earring,
   bracelet, watch). Sits behind the card; very low opacity so nothing
   loses readability. --calc-art-op controls the strength.
   ===================================================================== */
.calc-wrap { position: relative; isolation: isolate; --calc-art-op: 0.10; }
.calc-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--calc-art-op);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none' stroke='%235B6470' stroke-width='.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(18 20) scale(2.4) rotate(-10 12 12)'%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M9 6l3-3 3 3-3 3z'/%3E%3C/g%3E%3Cg transform='translate(178 22) scale(2.4) rotate(6 12 12)'%3E%3Cpath d='M4 4c0 8 3 12 8 12s8-4 8-12'/%3E%3Cpath d='M12 16l-2.5 3 2.5 3 2.5-3z'/%3E%3C/g%3E%3Cg transform='translate(86 118) scale(2.4) rotate(8 12 12)'%3E%3Ccircle cx='12' cy='4.5' r='1.8'/%3E%3Cpath d='M12 6.5v4'/%3E%3Cpath d='M12 10.5l4 4-4 6-4-6z'/%3E%3C/g%3E%3Cg transform='translate(218 140) scale(2.4) rotate(-8 12 12)'%3E%3Cellipse cx='12' cy='12' rx='9' ry='6'/%3E%3Cellipse cx='12' cy='12' rx='5.5' ry='3'/%3E%3C/g%3E%3Cg transform='translate(14 196) scale(2.4) rotate(6 12 12)'%3E%3Crect x='7' y='6' width='10' height='12' rx='3'/%3E%3Cpath d='M9 6l1-4h4l1 4M9 18l1 4h4l1-4M12 10v3l2 1'/%3E%3C/g%3E%3Cg transform='translate(150 244) scale(2) rotate(10 12 12)'%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M9 6l3-3 3 3-3 3z'/%3E%3C/g%3E%3Cg transform='translate(262 244) scale(2) rotate(-6 12 12)'%3E%3Ccircle cx='12' cy='4.5' r='1.8'/%3E%3Cpath d='M12 6.5v4'/%3E%3Cpath d='M12 10.5l4 4-4 6-4-6z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 320px 320px repeat;
}
@media (max-width: 700px) { .calc-wrap::before { background-size: 240px 240px; } }
@media print { .calc-wrap::before { display: none; } }

/* =====================================================================
   OVERRIDES: navy buttons (#000080) + jewelry-icon pattern background
   Change --btn / --btn-h to recolor buttons; --pat-op sets icon strength.
   ===================================================================== */
:root { --btn: #000080; --btn-h: #1A1AA3; --btn-a: #00005C; --pat-op: 0.10; }

.btn, .pa.pic.ai { background: var(--btn); border-color: var(--btn); color: #fff; }
.btn:hover, .pa.pic.ai:hover { background: var(--btn-h); border-color: var(--btn-h); }
.btn:active { background: var(--btn-a); border-color: var(--btn-a); }
.top .actions .btn.add { background: var(--btn); border-color: var(--btn); box-shadow: 0 2px 8px rgba(0, 0, 128, 0.30); }
.top .actions .btn.add:hover { background: var(--btn-h); border-color: var(--btn-h); box-shadow: 0 2px 8px rgba(0, 0, 128, 0.30); }
.top .actions .btn.add:active { background: var(--btn-a); border-color: var(--btn-a); }
.btn:focus-visible { outline: 3px solid rgba(0, 0, 128, 0.35); outline-offset: 2px; }

/* background: remove the big side illustrations, tile small jewelry icons over the whole page */
body::after { display: none; }
body::before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto;
  z-index: -1; pointer-events: none; opacity: var(--pat-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%23000080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Cpolygon points='28,34 52,34 60,46 40,68 20,46'/%3E%3Cpath d='M20 46H60M34 34L30 46L40 68M46 34L50 46L40 68'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='160' cy='64' r='14'/%3E%3Cpolygon points='154,40 166,40 171,47 160,57 149,47'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='60' cy='138' r='3'/%3E%3Cpath d='M60 141V150M60 150C52 160 52 172 60 178C68 172 68 160 60 150Z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M126 150Q170 208 214 150'/%3E%3Cpolygon points='170,180 177,189 170,201 163,189'/%3E%3C/g%3E%3Cpath d='M112 100l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M214 108l1.600 4.400 4.400 1.600-4.400 1.600-1.600 4.400-1.600-4.400-4.400-1.600 4.400-1.600z'/%3E%3Cpath d='M24 214l1.600 4.400 4.400 1.600-4.400 1.600-1.600 4.400-1.600-4.400-4.400-1.600 4.400-1.600z'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 240px 240px; background-position: 0 0;
  -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 700px) { body::before { background-size: 200px 200px; } }
@media print { body::before { display: none; } }

/* =====================================================================
   SUCCESS WINDOW (shown after a listing is added / published)
   Full-screen jewelry backdrop = images/bg-jewelry.svg (art on both edges,
   clear middle) with a centered card. Ring + gem badge draws itself once;
   a thin gold bar shows the auto-close countdown (6s, keep in sync with JS).
   ===================================================================== */
.pubpop {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px;
  background:
    url("../images/bg-jewelry.svg") center / cover no-repeat,
    linear-gradient(180deg, #FFFEFC 0%, #F7F8FC 100%);
  animation: pubFade .35s ease both;
}
.pubpop .pubbox {
  position: relative; overflow: hidden; width: 100%; max-width: 420px;
  padding: 30px 28px 38px; text-align: center;
  background: #fff; border: 1px solid #EFE8D8; border-radius: 24px;
  box-shadow: 0 28px 70px rgba(126, 98, 40, .16), 0 2px 10px rgba(17, 24, 39, .05);
  animation: pubRise .5s cubic-bezier(.2, .8, .2, 1) both;
}
.pubpop .pubmark { display: block; width: 172px; height: auto; margin: 0 auto 8px; overflow: visible; }
.pubpop .pubbox h3 {
  margin: 0 0 8px; font-family: "Noto Serif Georgian", "Noto Sans Georgian", Georgia, serif;
  font-size: 23px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--tx);
}
.pubpop .pubbox p { margin: 0 0 24px; font-size: var(--fs-base); line-height: 1.55; color: var(--mu); }
.pubpop .pubbox { outline: none; }
.pubpop .pubbox .btn { min-width: 150px; }
.pubpop .pubbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #F6E8C3, #DDBE7E 55%, #BE9650);
  transform-origin: left center; animation: pubBar 6s linear forwards;
}
/* base state = finished state; the animations only define where they start from */
.pubpop .pubring, .pubpop .pubtick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pubpop .pubring { animation: pubDraw .75s ease-out .2s both; }
.pubpop .pubtick { animation: pubDraw .4s ease-out .8s both; }
.pubpop .pubgem  { transform-box: fill-box; transform-origin: 50% 100%; animation: pubPop .5s cubic-bezier(.3, 1.5, .5, 1) .55s both; }
.pubpop .pubsp   { transform-box: fill-box; transform-origin: center; animation: pubPop .5s ease-out var(--d, 0s) both, pubTw 2.8s ease-in-out calc(var(--d, 0s) + 1s) infinite; }
@keyframes pubFade { from { opacity: 0; } }
@keyframes pubRise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes pubDraw { from { stroke-dashoffset: 1; } }
@keyframes pubPop  { from { opacity: 0; transform: scale(0); } }
@keyframes pubBar  { to { transform: scaleX(0); } }

/* phones / tablets: a single wide crop would only show the empty middle, so show the art halves as two faded corner crops */
@media (max-width: 900px) {
  .pubpop { background: linear-gradient(180deg, #FFFEFC 0%, #F7F8FC 100%); }
  .pubpop::before, .pubpop::after {
    content: ""; position: absolute; width: 62%; height: 58%; z-index: 0; pointer-events: none;
    background: url("../images/bg-jewelry.svg") no-repeat; background-size: auto 100%;
  }
  .pubpop::before { top: 0; left: 0; background-position: left top;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent), linear-gradient(to right, #000 45%, transparent);
    mask-image: linear-gradient(to bottom, #000 50%, transparent), linear-gradient(to right, #000 45%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .pubpop::after { bottom: 0; right: 0; background-position: right bottom;
    -webkit-mask-image: linear-gradient(to top, #000 50%, transparent), linear-gradient(to left, #000 45%, transparent);
    mask-image: linear-gradient(to top, #000 50%, transparent), linear-gradient(to left, #000 45%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .pubpop .pubbox { z-index: 1; max-width: 360px; padding: 24px 20px 32px; }
  .pubpop .pubbox h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .pubpop, .pubpop .pubbox, .pubpop .pubring, .pubpop .pubtick, .pubpop .pubgem, .pubpop .pubsp { animation: none; }
  .pubpop .pubbar { display: none; }
}

/* ring polish: light sweep over band + gem, twinkling sparkles, soft breathing glow, one small "beat" when the check lands */
.pubpop .pubshine { transform: translateX(-40px); animation: pubSweep 5s ease-in-out 1.5s infinite; }
.pubpop .pubshine.g { animation-delay: 1.65s; }
.pubpop .pubglow { transform-box: fill-box; transform-origin: center; animation: pubGlow 3.2s ease-in-out 1s infinite alternate; }
.pubpop .pubbeat { transform-box: fill-box; transform-origin: center; animation: pubBeat .6s cubic-bezier(.3, 1.4, .5, 1) 1.2s both; }
.pubpop .pubtw { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pubStar 3.2s ease-in-out 1.6s infinite; }
@keyframes pubSweep { 0% { transform: translateX(-40px); } 38%, 100% { transform: translateX(225px); } }
@keyframes pubGlow { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1.06); } }
@keyframes pubBeat { 50% { transform: scale(1.045); } }
@keyframes pubStar { 0%, 55%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 72% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes pubTw { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) {
  .pubpop .pubshine, .pubpop .pubglow, .pubpop .pubbeat, .pubpop .pubtw, .pubpop .pubsp { animation: none; }
  .pubpop .pubtw { opacity: 1; }
}

/* ===== add listing: "Listing Preview Card" step panel ===== */
.page.addpg { max-width: 1160px; }
.addwrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; scroll-margin-top: 84px; }
.lpc { position: sticky; top: 88px; background: var(--w); border: 1px solid var(--line); border-radius: 8px; padding: 20px 12px 12px; box-shadow: 0 8px 30px rgba(17, 24, 39, 0.05); }
.lpc-t { margin: 0 10px 14px; font-size: var(--fs-lg); font-weight: 600; color: var(--pd); }
.lpc-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lpc-i { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid transparent; border-radius: var(--r); background: transparent; cursor: pointer; text-align: left; font: inherit; color: var(--mu); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.lpc-i:hover { background: var(--cream); color: var(--tx); }
.lpc-i:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.lpc-i.on { background: var(--cream); border-color: var(--cream2); color: var(--tx); }
.lpc-n { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--cream2); background: var(--w); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--mu); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.lpc-i.on .lpc-n { background: var(--gold-d); border-color: var(--gold-d); color: #fff; }
.lpc-i.done:not(.on) .lpc-n { border-color: var(--gold-d); color: var(--gold-d); font-size: 0; }
.lpc-i.done:not(.on) .lpc-n::after { content: "\2713"; font-size: var(--fs-sm); }
.lpc-l { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lpc-l small { font-size: var(--fs-xs); color: var(--mu); }
.lpc-l b { font-size: var(--fs-md); font-weight: 500; line-height: 1.3; }

.astep { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0; }
.astep[hidden] { display: none; }
.astep-h { margin: 0; font-size: var(--fs-xl); font-weight: 500; color: var(--pd); }
.astep-s { margin: -8px 0 0; font-size: var(--fs-md); color: var(--mu); }
.anav { display: flex; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.anav .btn[hidden] { display: none !important; }
.anav #aNext, .anav #aPub { margin-left: auto; }

.vprev:empty { display: none; }
.vp { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--w); margin-top: 10px; }
.vp video { width: 160px; max-width: 40%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; flex: none; }
.vpi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vpi b { font-size: var(--fs-md); font-weight: 500; overflow-wrap: anywhere; }
.vpi small { color: var(--mu); }
.vp .rm { position: static; margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cream2); background: var(--w); color: var(--tx); cursor: pointer; font-size: 18px; line-height: 1; }
.pvid { display: block; width: 100%; max-height: 420px; margin-top: 12px; border-radius: 8px; background: #000; }

.areview { border: 1px solid var(--line); border-radius: 8px; background: var(--cream); padding: 4px 18px 8px; }
.rv-g { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 4px; }
.rv-g h4 { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--pd); }
.rv-e { border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--gold-d); text-decoration: underline; cursor: pointer; }
.rv-r { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--cream2); font-size: var(--fs-md); }
.rv-r span { color: var(--mu); }
.rv-r b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.rv-r.tot b { font-weight: 600; }
.rv-r .miss { color: var(--err); font-style: normal; font-weight: 400; }

@media (max-width: 900px) {
  .addwrap { grid-template-columns: 1fr; gap: 16px; }
  .lpc { position: static; padding: 12px; }
  .lpc-t { margin: 0 4px 10px; }
  .lpc-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .lpc-nav li { flex: 1 0 auto; }
  .lpc-i { padding: 8px 10px; }
  .lpc-l small { display: none; }
  .lpc-l b { white-space: nowrap; font-size: var(--fs-sm); }
}
@media (max-width: 800px) { .astep { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .addwrap .panel { padding: 20px 16px; } .vp video { width: 110px; } }

/* ===== Listing Preview Card: timeline design (matches reference) ===== */
.lpc { background: none; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lpc .lpc-t { margin: 0; padding: 15px 16px; background: #2F2B4D; color: #fff; border-radius: 12px; font-size: var(--fs-md); font-weight: 500; text-align: center; }
.lpc .lpc-nav { background: var(--w); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; gap: 0; box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04); }
.lpc .lpc-nav li { position: relative; }
.lpc .lpc-nav li + li::before { content: ""; position: absolute; left: 9px; top: -10px; width: 1px; height: 20px; background: #D9DBE0; }
.lpc .lpc-i { padding: 0; min-height: 46px; gap: 12px; border: 0; background: none; color: #9A9EA6; }
.lpc .lpc-i:hover { background: none; color: var(--tx); }
.lpc .lpc-i.on { background: none; color: var(--tx); font-weight: 600; }
.lpc .lpc-l small { display: none; }
.lpc .lpc-l b { font-size: var(--fs-md); font-weight: inherit; }
.lpc .lpc-i .lpc-n { width: 18px; height: 18px; font-size: 0; border: 1.5px solid #D3D5DA; background: #fff; color: transparent; }
.lpc .lpc-i.on .lpc-n { border: 2px solid #34343C; background: #A9ADB5; box-shadow: inset 0 0 0 3px #fff; }
.lpc .lpc-i.done .lpc-n { border-color: #2DBE60; background: #2DBE60; box-shadow: none; }
.lpc .lpc-i.done .lpc-n::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); font-size: 0; }
@media (max-width: 900px) {
  .lpc { padding: 0; }
  .lpc .lpc-nav { padding: 8px 10px; gap: 14px; }
  .lpc .lpc-nav li + li::before { display: none; }
  .lpc .lpc-i { min-height: 36px; }
  .lpc .lpc-l b { white-space: nowrap; font-size: var(--fs-sm); }
}

/* ---- logo matches the "დამატება" button height at every breakpoint (button is 46px / 44px / 40px) ---- */
@media (max-width: 800px) { :root { --logo-img-h: 44px; } }
@media (max-width: 420px) { :root { --logo-img-h: 40px; } }

/* ---- slimmer header: less padding, bigger logo only (header stays shorter than before) ---- */
:root { --logo-img-h: 50px; }
.top { padding-top: 3px; padding-bottom: 3px; }
@media (max-width: 900px) { .top { padding-top: 4px; padding-bottom: 4px; gap: 2px 10px; } }
@media (max-width: 800px) { :root { --logo-img-h: 46px; } }
@media (max-width: 420px) { :root { --logo-img-h: 42px; } }

/* ---- VIP / VIP+ listings: refined tints, distinct from regular cards ---- */
.card.is-vip:not(.is-color) { background: linear-gradient(180deg, #F4F7FF 0%, #fff 55%); border-color: #C7D3F2; box-shadow: 0 2px 12px rgba(37, 99, 235, 0.10); }
.card.is-svip:not(.is-color) { background: linear-gradient(180deg, #FBF6EA 0%, #fff 55%); border-color: #DCC48A; box-shadow: 0 2px 14px rgba(176, 138, 52, 0.16); }
.card.is-vip:not(.is-color):hover { border-color: #8FA8E8; }
.card.is-svip:not(.is-color):hover { border-color: #C9A64F; }
.card.is-vip .badge, .card.is-vip .badge.s { background: #E6EDFD; color: #2A4BA0; box-shadow: inset 0 0 0 1px #C7D3F2; }
.card.is-svip .badge { background: linear-gradient(135deg, #C9A64F, #E2CB8E); color: #4A3A12; box-shadow: none; }

/* ---- compact header v3: smaller bar, everything slimmer EXCEPT the logo ---- */
:root { --logo-img-h: 46px; }
.top { padding-top: 2px; padding-bottom: 2px; gap: 16px; }
.top .ib { width: 38px; height: 38px; }
.top .ib svg { width: 22px; height: 22px; }
.top .login svg { width: 20px; height: 20px; }
.top .hs { height: 38px; }
.top .nav > a { padding: 5px 12px; }
.top .actions { gap: 18px; }
.top .actions .btn.add { min-height: 38px; padding: 0 18px 0 6px; font-size: var(--fs-md); }
.top .actions .btn.add .pl { width: 26px; height: 26px; }
@media (max-width: 900px) { .top { padding-top: 2px; padding-bottom: 2px; gap: 0 10px; } }
@media (max-width: 800px) {
  :root { --logo-img-h: 42px; }
  .top .actions { gap: 12px; }
  .top .ib { width: 38px; height: 38px; }
  .top .actions .btn.add { width: 38px; min-width: 38px; min-height: 38px; padding: 0; }
}
@media (max-width: 420px) { :root { --logo-img-h: 40px; } .top .actions { gap: 6px; } .top .ib { width: 34px; height: 34px; } .top .actions .btn.add { width: 34px; min-width: 34px; min-height: 34px; } }
@media (max-width: 380px) { .top .actions { gap: 2px; } .top .ib { width: 32px; height: 32px; } .top .actions .btn.add { width: 32px; min-width: 32px; min-height: 32px; } .top { gap: 0 6px; } }
@media (max-width: 380px) { .top .nav > a { padding: 5px 4px; font-size: var(--fs-sm); } .top .hs .ib { width: 32px; } }

/* ===== FORCE HEADER + LOGO SIZE ===== */
/* ===== FORCE HEADER + LOGO SIZE ===== */
.top .logo { flex: none !important; }

.top .logo img {
  height: 100px !important;       /* ლოგოს სიმაღლე: აქ შეცვალე */
  width: auto !important;
  max-width: none !important;
  margin: -20px 0 !important;    /* = (ლოგო − 50) ÷ 2 */
}

.top {
  padding-top: 8px !important;   /* ჰედერის სიმაღლე: აქ შეცვალე */
  padding-bottom: 8px !important;
}

@media (max-width: 800px) {
  .top .logo img.wm { height: 44px !important; }
}
/* ===== live listing preview (add page) ===== */
.lpv:empty { display: none; }
.lpv-d { background: var(--w); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(17, 24, 39, .04); }
.lpv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.lpv-h::-webkit-details-marker { display: none; }
.lpv-h b { font-size: var(--fs-md); font-weight: 600; color: var(--tx); }
.lpv-h small { font-size: var(--fs-xs); color: var(--mu); white-space: nowrap; }
.lpv-h::after { content: "▾"; color: var(--mu); font-size: var(--fs-xs); transition: transform .2s; margin-left: 4px; }
.lpv-d[open] .lpv-h::after { transform: rotate(180deg); }
.lpv-bar { height: 4px; margin: 10px 0 12px; border-radius: 4px; background: var(--cream2); overflow: hidden; }
.lpv-bar i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width .3s ease; }
.lpv-card { pointer-events: none; user-select: none; }
.lpv-card .card { opacity: 1 !important; transform: none !important; cursor: default; }
.lpv-n { margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--mu); }

/* the left column can now be taller than the screen: let it scroll while sticky */
@media (min-width: 901px) {
  .lpc { max-height: calc(100vh - var(--hh, 60px) - 32px); overflow-y: auto; scrollbar-width: thin; }
}

/* admin blog editor + calculator source note */
.bacts { display: flex; gap: 8px; flex-wrap: wrap; }
.bnote, .bhelp { color: var(--mu); font-size: var(--fs-sm); line-height: 1.6; font-weight: 400; }
.bnote { margin: 6px 0 2px; }
.bhelp { display: block; margin-top: 4px; }
.bcov { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bprev { width: 180px; aspect-ratio: 3 / 2; border-radius: var(--r); background: var(--cream) center / cover no-repeat; border: 1px solid var(--cream2); }
.badm { margin: -10px 0 22px; }
#bForm textarea { min-height: 52px; }
#bForm #bB { min-height: 260px; }
.calc-out #metalNote { font-size: var(--fs-xs, 12px); line-height: 1.5; max-width: 34ch; }
/* clear search (header) + clear filters */
.hs .hsx { flex: none; width: 26px; height: 26px; margin-right: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--hov); color: var(--mu); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.hs .hsx:hover { background: var(--cream2); color: var(--tx); }
.hs:not(.open) .hsx { display: none; }
.hs .hsx[hidden] { display: none; }
.sbox #clrF { margin-top: 10px; min-height: 44px; }

/* search + clear buttons side by side */
.sbox .frow { display: flex; flex-direction: row; gap: 10px; margin-top: 18px; }
.sbox .frow .btn { margin-top: 0; width: auto; flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 12px; white-space: nowrap; }
/* header search: clear (x) button, always visible while there is text */
.top .hs .hsx { width: 28px; height: 28px; margin-right: 6px; background: #E3E4E6; color: var(--tx); font-size: 20px; z-index: 2; }
.top .hs .hsx:hover { background: #C9CBCF; }

/* "price by agreement" */
.price.nego { font-size: var(--fs-base); color: var(--mu); }
.pprice .price.nego { font-size: var(--fs-xl); }
.form .chk.nego { margin-top: 6px; }
.form input:disabled { background: var(--cream); cursor: not-allowed; }

/* add form: currency switch sits next to the "ფასი (₾)" label */
.fld .plab { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.fld .plab .cur { margin: 0; }
.prow2 input { width: 100%; }
/* Search (orange, wide) + clear (square icon) buttons */
.sbox .frow { display: flex; flex-direction: row; gap: 10px; align-items: stretch; }
.sbox .frow #goS { flex: 1 1 0; min-width: 0; min-height: 48px; border-radius: 10px; }
.sbox .frow #clrF { flex: 0 0 48px; width: 48px; min-width: 48px; min-height: 48px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--tx); border: 1px solid #6B7280; border-radius: 10px; }
.sbox .frow #clrF:hover { background: var(--hov); border-color: var(--tx); }
.sbox .frow #clrF .ic { width: 22px; height: 22px; }

/* Home: VIP / Super VIP as horizontal scroll rows */
.shead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.shead h2 { margin-bottom: 0; }
.harr { display: flex; gap: 10px; flex: none; }
.harr .ib { width: 36px; height: 36px; border: 1.5px solid var(--tx); border-radius: 50%; background: transparent; color: var(--tx); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.harr .ib:hover { background: var(--hov); }
.hsec .grid.hscroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
.hsec .grid.hscroll::-webkit-scrollbar { display: none; }
.hsec .grid.hscroll > .card { flex: 0 0 calc((100% - 100px) / 5); min-width: 215px; scroll-snap-align: start; }
@media (max-width: 700px) { .hsec .grid.hscroll { gap: 14px; } .hsec .grid.hscroll > .card { flex-basis: 70%; min-width: 0; } .harr { display: none; } }

/* refined carousel arrows */
.harr { gap: 8px; }
.harr .ib { width: 40px; height: 40px; border: 1px solid #E3E6EA; background: #fff; color: var(--tx); border-radius: 50%; box-shadow: 0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.06); transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s, opacity .2s; }
.harr .ib svg { width: 17px; height: 17px; stroke-width: 1.8; transition: transform .2s; }
.harr .ib:hover:not(:disabled) { background: var(--tx); border-color: var(--tx); color: #fff; box-shadow: 0 6px 16px rgba(17,24,39,.18); }
.harr .ib[data-hs="1"]:hover:not(:disabled) svg { transform: translateX(2px); }
.harr .ib[data-hs="-1"]:hover:not(:disabled) svg { transform: translateX(-2px); }
.harr .ib:active:not(:disabled) { transform: scale(.94); }
.harr .ib:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.harr .ib:disabled { opacity: .38; cursor: default; box-shadow: none; }

/* =====================================================================
   BACKGROUND v2: scattered accessory icons (rings, gems, necklaces, earrings, watches,
   crowns, pearls, bows, bags, glasses, perfume...) placed irregularly, random rotation and
   size, navy + gold. The tile is large (760px) so the repetition is not noticeable.
   Strength: --pat-op.
   ===================================================================== */
:root { --pat-op: 0.13; }
body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(348 421) rotate(-22) scale(1.82) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.93'%3E%3Ccircle cx='7' cy='14' r='4'/%3E%3Ccircle cx='17' cy='14' r='4'/%3E%3Cpath d='M11 14h2M3 13L5 8M21 13l-2-5'/%3E%3C/g%3E%3Cg transform='translate(668 357) rotate(20) scale(2.17) translate(-12 -12)' stroke='%23000080' stroke-width='0.78'%3E%3Crect x='7' y='6' width='10' height='12' rx='3'/%3E%3Cpath d='M9 6l1-4h4l1 4M9 18l1 4h4l1-4M12 10v3l2 1'/%3E%3C/g%3E%3Cg transform='translate(166 388) rotate(29) scale(1.90) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.89'%3E%3Cpath d='M4 4c0 8 3 12 8 12s8-4 8-12'/%3E%3Cpath d='M12 16l-2.5 3 2.5 3 2.5-3z'/%3E%3C/g%3E%3Cg transform='translate(468 579) rotate(-12) scale(2.06) translate(-12 -12)' stroke='%23000080' stroke-width='0.83'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3C/g%3E%3Cg transform='translate(104 246) rotate(30) scale(2.28) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.75'%3E%3Cpath d='M10 3h4v6h6v4h-6v8h-4v-8H4V9h6z'/%3E%3C/g%3E%3Cg transform='translate(102 591) rotate(21) scale(2.10) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.81'%3E%3Crect x='4' y='9' width='16' height='12' rx='2'/%3E%3Cpath d='M8 9V7a4 4 0 018 0v2'/%3E%3C/g%3E%3Cg transform='translate(512 68) rotate(-19) scale(2.06) translate(-12 -12)' stroke='%23000080' stroke-width='0.82'%3E%3Cpath d='M3 7l4.5 4L12 4l4.5 7L21 7l-2 11H5z'/%3E%3Cpath d='M5 20.5h14'/%3E%3C/g%3E%3Cg transform='translate(708 696) rotate(37) scale(1.85) translate(-12 -12)' stroke='%23000080' stroke-width='0.92'%3E%3Crect x='3' y='8' width='11' height='8' rx='4'/%3E%3Crect x='10' y='8' width='11' height='8' rx='4'/%3E%3C/g%3E%3Cg transform='translate(485 459) rotate(28) scale(1.78) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.95'%3E%3Cpath d='M3 7c2 9 16 9 18 0'/%3E%3Ccircle cx='5.2' cy='12.6' r='1.7'/%3E%3Ccircle cx='9' cy='15.4' r='1.7'/%3E%3Ccircle cx='13.6' cy='15.9' r='1.7'/%3E%3Ccircle cx='18' cy='13' r='1.7'/%3E%3C/g%3E%3Cg transform='translate(147 50) rotate(30) scale(1.71) translate(-12 -12)' stroke='%23000080' stroke-width='0.99'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M9 3l-1 6 4 12M15 3l1 6-4 12'/%3E%3C/g%3E%3Cg transform='translate(399 80) rotate(37) scale(1.79) translate(-12 -12)' stroke='%23000080' stroke-width='0.95'%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M9 6l3-3 3 3-3 3z'/%3E%3C/g%3E%3Cg transform='translate(60 355) rotate(-1) scale(2.48) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.68'%3E%3Crect x='6' y='10' width='12' height='11' rx='2'/%3E%3Cpath d='M10 10V7h4v3M9 5h6'/%3E%3C/g%3E%3Cg transform='translate(340 613) rotate(-21) scale(2.32) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.73'%3E%3Ccircle cx='12' cy='4.5' r='1.8'/%3E%3Cpath d='M12 6.5v4'/%3E%3Cpath d='M12 10.5l4 4-4 6-4-6z'/%3E%3C/g%3E%3Cg transform='translate(351 229) rotate(-6) scale(2.10) translate(-12 -12)' stroke='%23000080' stroke-width='0.81'%3E%3Cellipse cx='12' cy='12' rx='9' ry='6'/%3E%3Cellipse cx='12' cy='12' rx='5.5' ry='3'/%3E%3C/g%3E%3Cg transform='translate(611 521) rotate(14) scale(2.28) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.75'%3E%3Cpath d='M12 12C8 5 2 6 3 12s6 6 9 0c3 6 9 5 9-1s-5-7-9 1z'/%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3C/g%3E%3Cg transform='translate(561 312) rotate(-37) scale(1.99) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.86'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3C/g%3E%3Cg transform='translate(90 468) rotate(8) scale(2.28) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.75'%3E%3Crect x='7' y='6' width='10' height='12' rx='3'/%3E%3Cpath d='M9 6l1-4h4l1 4M9 18l1 4h4l1-4M12 10v3l2 1'/%3E%3C/g%3E%3Cg transform='translate(582 161) rotate(-19) scale(1.86) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.91'%3E%3Cpath d='M10 3h4v6h6v4h-6v8h-4v-8H4V9h6z'/%3E%3C/g%3E%3Cg transform='translate(420 344) rotate(30) scale(2.11) translate(-12 -12)' stroke='%23000080' stroke-width='0.81'%3E%3Crect x='6' y='10' width='12' height='11' rx='2'/%3E%3Cpath d='M10 10V7h4v3M9 5h6'/%3E%3C/g%3E%3Cg transform='translate(700 586) rotate(15) scale(2.11) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.80'%3E%3Cpath d='M12 12C8 5 2 6 3 12s6 6 9 0c3 6 9 5 9-1s-5-7-9 1z'/%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3C/g%3E%3Cg transform='translate(108 713) rotate(17) scale(2.46) translate(-12 -12)' stroke='%23000080' stroke-width='0.69'%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M9 6l3-3 3 3-3 3z'/%3E%3C/g%3E%3Cg transform='translate(210 169) rotate(-17) scale(2.36) translate(-12 -12)' stroke='%23000080' stroke-width='0.72'%3E%3Ccircle cx='12' cy='4.5' r='1.8'/%3E%3Cpath d='M12 6.5v4'/%3E%3Cpath d='M12 10.5l4 4-4 6-4-6z'/%3E%3C/g%3E%3Cg transform='translate(543 679) rotate(8) scale(2.03) translate(-12 -12)' stroke='%23000080' stroke-width='0.84'%3E%3Cpath d='M3 7l4.5 4L12 4l4.5 7L21 7l-2 11H5z'/%3E%3Cpath d='M5 20.5h14'/%3E%3C/g%3E%3Cg transform='translate(202 519) rotate(-18) scale(1.92) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.89'%3E%3Cellipse cx='12' cy='12' rx='9' ry='6'/%3E%3Cellipse cx='12' cy='12' rx='5.5' ry='3'/%3E%3C/g%3E%3Cg transform='translate(458 231) rotate(1) scale(1.98) translate(-12 -12)' stroke='%23000080' stroke-width='0.86'%3E%3Crect x='3' y='8' width='11' height='8' rx='4'/%3E%3Crect x='10' y='8' width='11' height='8' rx='4'/%3E%3C/g%3E%3Cg transform='translate(257 720) rotate(21) scale(2.38) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.71'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M9 3l-1 6 4 12M15 3l1 6-4 12'/%3E%3C/g%3E%3Cg transform='translate(634 68) rotate(-40) scale(2.21) translate(-12 -12)' stroke='%23000080' stroke-width='0.77'%3E%3Ccircle cx='7' cy='14' r='4'/%3E%3Ccircle cx='17' cy='14' r='4'/%3E%3Cpath d='M11 14h2M3 13L5 8M21 13l-2-5'/%3E%3C/g%3E%3Cg transform='translate(53 132) rotate(10) scale(2.46) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.69'%3E%3Crect x='4' y='9' width='16' height='12' rx='2'/%3E%3Cpath d='M8 9V7a4 4 0 018 0v2'/%3E%3C/g%3E%3Cg transform='translate(225 275) rotate(7) scale(2.19) translate(-12 -12)' stroke='%23000080' stroke-width='0.77'%3E%3Cpath d='M3 7c2 9 16 9 18 0'/%3E%3Ccircle cx='5.2' cy='12.6' r='1.7'/%3E%3Ccircle cx='9' cy='15.4' r='1.7'/%3E%3Ccircle cx='13.6' cy='15.9' r='1.7'/%3E%3Ccircle cx='18' cy='13' r='1.7'/%3E%3C/g%3E%3Cg transform='translate(720 477) rotate(21) scale(2.28) translate(-12 -12)' stroke='%23000080' stroke-width='0.75'%3E%3Cpath d='M4 4c0 8 3 12 8 12s8-4 8-12'/%3E%3Cpath d='M12 16l-2.5 3 2.5 3 2.5-3z'/%3E%3C/g%3E%3Cg transform='translate(295 107) rotate(6) scale(1.92) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.89'%3E%3Cpath d='M3 7c2 9 16 9 18 0'/%3E%3Ccircle cx='5.2' cy='12.6' r='1.7'/%3E%3Ccircle cx='9' cy='15.4' r='1.7'/%3E%3Ccircle cx='13.6' cy='15.9' r='1.7'/%3E%3Ccircle cx='18' cy='13' r='1.7'/%3E%3C/g%3E%3Cg transform='translate(702 206) rotate(-11) scale(1.74) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.98'%3E%3Ccircle cx='7' cy='14' r='4'/%3E%3Ccircle cx='17' cy='14' r='4'/%3E%3Cpath d='M11 14h2M3 13L5 8M21 13l-2-5'/%3E%3C/g%3E%3Cg transform='translate(412 691) rotate(-27) scale(2.07) translate(-12 -12)' stroke='%23B8914B' stroke-width='0.82'%3E%3Cellipse cx='12' cy='12' rx='9' ry='6'/%3E%3Cellipse cx='12' cy='12' rx='5.5' ry='3'/%3E%3C/g%3E%3Cg transform='translate(328 309) rotate(12) scale(0.86) translate(-12 -12)' stroke='%23B8914B' stroke-width='1.97'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(395 570) rotate(14) scale(0.87) translate(-12 -12)' stroke='%23000080' stroke-width='1.95'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(206 105) rotate(12) scale(0.68) translate(-12 -12)' stroke='%23B8914B' stroke-width='2.51'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(538 380) rotate(18) scale(0.85) translate(-12 -12)' stroke='%23000080' stroke-width='2.01'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(622 273) rotate(18) scale(0.65) translate(-12 -12)' stroke='%23000080' stroke-width='2.62'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(690 280) rotate(30) scale(0.60) translate(-12 -12)' stroke='%23B8914B' stroke-width='2.83'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(229 630) rotate(39) scale(0.78) translate(-12 -12)' stroke='%23000080' stroke-width='2.18'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(65 526) rotate(42) scale(0.54) translate(-12 -12)' stroke='%23000080' stroke-width='3.12'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(303 180) rotate(28) scale(0.88) translate(-12 -12)' stroke='%23B8914B' stroke-width='1.93'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(479 313) rotate(22) scale(0.62) translate(-12 -12)' stroke='%23000080' stroke-width='2.74'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(477 677) rotate(22) scale(0.52) translate(-12 -12)' stroke='%23000080' stroke-width='3.28'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(37 687) rotate(20) scale(0.55) translate(-12 -12)' stroke='%23B8914B' stroke-width='3.07'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(622 621) rotate(38) scale(0.79) translate(-12 -12)' stroke='%23000080' stroke-width='2.14'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(401 182) rotate(26) scale(0.71) translate(-12 -12)' stroke='%23000080' stroke-width='2.39'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(649 138) rotate(36) scale(0.64) translate(-12 -12)' stroke='%23000080' stroke-width='2.64'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(172 223) rotate(25) scale(0.52) translate(-12 -12)' stroke='%23000080' stroke-width='3.26'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(384 487) rotate(45) scale(0.83) translate(-12 -12)' stroke='%23000080' stroke-width='2.05'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3Cg transform='translate(36 610) rotate(5) scale(0.56) translate(-12 -12)' stroke='%23000080' stroke-width='3.02'%3E%3Cpath d='M12 2c.8 6 4 9.200 10 10-6 .8-9.200 4-10 10-.8-6-4-9.200-10-10 6-.8 9.200-4 10-10z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 760px 760px; background-repeat: repeat; background-position: 0 0; }
@media (max-width: 900px) { body::before { background-size: 560px 560px; } }
@media (max-width: 500px) { body::before { background-size: 460px 460px; } }
/* =====================================================================
   FINAL OVERRIDES: plain white background (no icon pattern) + bigger logo
   ===================================================================== */
:root { --bg: #ffffff; }
html, body { background: #ffffff; }
body::before, body::after { display: none !important; content: none !important; }   /* jewelry-icon pattern on the page */
.hero { background: #ffffff; }                                                       /* blue gradient -> white */
.calc-wrap::before { display: none !important; }                                     /* icon art behind the calculator */

/* logo: bigger, but the header keeps its current height (extra size overflows via negative margin) */
/* ლოგო: დიდი ეკრანები */
@media (min-width: 1400px) {
  :root { --logo-img-h: 100px; }
  .top .logo { margin: 0; }
  .top { padding-top: 8px; padding-bottom: 8px; }
}

/* ლოგო: საშუალო ეკრანები */
@media (min-width: 1100px) and (max-width: 1399px) {
  :root { --logo-img-h: 80px; }
  .top .logo { margin-block: -8px; }
}
.top { padding-top: 22px; padding-bottom: 10px; }
/* ---- voice description: same card language as .sbox / .card (white, soft border, 16px radius, navy accent) ---- */
#audioFld { padding: 18px; border: 1px solid var(--card-bd); border-radius: var(--card-r); background: var(--card-bg); box-shadow: var(--card-sh); gap: 12px; }
.aud-h { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); font-weight: 600; color: var(--tx); }
.aud-h i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E8E8F7; color: var(--btn); }
.aud-h i .ic { width: 18px; height: 18px; }
#audioFld .bhelp { margin-top: 0; }
.aud-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aud-acts .btn.sm { margin-top: 0; min-height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer; gap: 8px; flex-direction: row; white-space: nowrap; }
.aud-acts .btn.alt.sm { background: #fff; border-color: var(--cream2); }
.aud-acts .btn.alt.sm:hover { background: #F0F0FA; border-color: var(--btn); color: var(--btn); }
.aud-tm { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-md); color: var(--err); }
#aRec.rec { background: #FDECEA; border-color: var(--err); color: var(--err); }
#aRec.rec .ic { animation: arec 1s ease-in-out infinite; }
@keyframes arec { 50% { opacity: .3; transform: scale(1.15); } }
.aud-bar { height: 4px; border-radius: 4px; background: var(--cream2); overflow: hidden; }
.aud-bar i { display: block; height: 100%; width: 0; background: var(--err); transition: width .25s linear; }
.aprev:empty { display: none; }
#audioFld .vp { margin-top: 0; padding: 10px 12px; border-radius: 12px; background: var(--cream); border-color: var(--cream2); gap: 12px; }
#audioFld .vp .vpi { flex: 0 1 auto; max-width: 28%; }

/* custom player (replaces the browser's default audio bar) */
.aplay { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.aplay audio { display: none; }
.ap-b { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--btn); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .15s; }
.ap-b:hover { background: var(--btn-h); }
.ap-b:active { background: var(--btn-a); transform: scale(.95); }
.ap-b:focus-visible { outline: 3px solid rgba(0, 0, 128, .35); outline-offset: 2px; }
.ap-b svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.ap-b .pl { margin-left: 2px; }
.ap-b .ps { display: none; }
.aplay.on .ap-b .pl { display: none; }
.aplay.on .ap-b .ps { display: block; }
.ap-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-bar { position: relative; height: 6px; border-radius: 6px; background: #DDDDF0; cursor: pointer; }
.ap-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.ap-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--btn); position: relative; }
.ap-bar i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--btn); box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0, 0, 128, .35); opacity: 0; transition: opacity .15s; }
.aplay:hover .ap-bar i::after, .aplay.on .ap-bar i::after { opacity: 1; }
.ap-n { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--mu); font-variant-numeric: tabular-nums; }

/* product page */
.pvoice { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--card-bd); border-radius: var(--card-r); background: var(--card-bg); box-shadow: var(--card-sh); }
.pvoice h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; margin-bottom: 12px; }
.pvoice h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--btn); }
.pvoice .aplay { flex-basis: auto; }

@media (max-width: 560px) {
  #audioFld { padding: 14px 12px; }
  .aud-acts .btn.sm { flex: 1 1 auto; justify-content: center; }
  .aud-tm { margin-left: 0; width: 100%; text-align: center; }
  #audioFld .vp { flex-wrap: wrap; }
  #audioFld .vp .vpi { max-width: 70%; }
}
@media (prefers-reduced-motion: reduce) { #aRec.rec .ic { animation: none; } .aud-bar i, .ap-b, .ap-bar i::after { transition: none; } }

/* ---- product gallery: video lives next to the photos ---- */
.pmain .pmv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; z-index: 1; }
.pmain .pmv[hidden] { display: none; }
.pmain:has(.pmv:not([hidden])) .pcnt { bottom: 56px; }
.pmain .pnav { z-index: 3; }
.pth.vth { position: relative; background: #000; }
.pth.vth video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pth .vplay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(17, 24, 39, .28); }
.pth .vplay svg { width: 26px; height: 26px; padding: 6px 6px 6px 8px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--btn); box-sizing: content-box; width: 14px; height: 14px; }

/* ---- photo zoom: button on the main photo + full-screen viewer ---- */
.pmain #pgImg { cursor: zoom-in; }
.pzoom { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--tx); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(17, 24, 39, .14); transition: background .2s, color .2s, transform .2s; }
.pzoom svg { width: 20px; height: 20px; }
.pzoom:hover { background: #fff; color: var(--btn); transform: scale(1.06); }
.pzoom:focus-visible { outline: 3px solid rgba(0, 0, 128, .35); outline-offset: 2px; }
.pmain:has(.pmv:not([hidden])) .pzoom { display: none; }
.pmain .badge { z-index: 3; }
.lbx { position: fixed; inset: 0; z-index: 180; background: rgba(10, 12, 20, .92); display: flex; flex-direction: column; animation: fade .2s ease; }
.lbx-s { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 56px 64px 44px; }
.lbx-s img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-in; user-select: none; -webkit-user-drag: none; transition: opacity .2s; }
.lbx.z .lbx-s { display: block; overflow: auto; padding: 0; cursor: grab; }
.lbx.z .lbx-s img { max-width: none; max-height: none; width: 220%; height: auto; border-radius: 0; cursor: zoom-out; display: block; }
.lbx-x, .lbx-n { position: absolute; z-index: 2; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; font-family: inherit; line-height: 1; }
.lbx-x:hover, .lbx-n:hover { background: rgba(255, 255, 255, .28); }
.lbx-x:focus-visible, .lbx-n:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lbx-x { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 28px; }
.lbx-n { top: 50%; width: 48px; height: 48px; margin-top: -24px; font-size: 32px; padding-bottom: 4px; }
.lbx-n.l { left: 14px; }
.lbx-n.r { right: 14px; }
.lbx-c { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; padding: 4px 12px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: #fff; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.lbx-h { position: absolute; left: 16px; bottom: 16px; z-index: 2; color: rgba(255, 255, 255, .6); font-size: var(--fs-xs); }
.lbx.z .lbx-h { display: none; }
@media (max-width: 700px) {
  .lbx-s { padding: 56px 8px 48px; }
  .lbx-n { width: 40px; height: 40px; margin-top: -20px; font-size: 26px; }
  .lbx-n.l { left: 6px; } .lbx-n.r { right: 6px; }
  .lbx-h { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lbx { animation: none; } }

/* ---- "see all listings" link in the seller box + seller page ---- */
.sall { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--cream2); border-radius: var(--r); background: #fff; color: var(--tx); font-size: var(--fs-base); font-weight: 500; transition: background .2s, border-color .2s, color .2s; }
.sall .ic { width: 18px; height: 18px; flex: none; color: var(--btn); }
.sall span { flex: 1; }
.sall b { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px; background: #E8E8F7; color: var(--btn); font-size: var(--fs-sm); font-weight: 600; display: grid; place-items: center; }
.sall:hover { border-color: var(--btn); color: var(--btn); background: #F5F5FC; }
.sall:focus-visible { outline: 3px solid rgba(0, 0, 128, .35); outline-offset: 2px; }
.sellhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px; margin-bottom: 26px; background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); }
.sellhead .sav { width: 60px; height: 60px; }
.sellhead .sn { flex: 1; min-width: 160px; }
.sellhead .sn b { font-size: var(--fs-xl); }
.sellhead .btn.sb { flex: none; width: auto; padding: 0 18px; }
.sellh { font-size: var(--fs-h2); font-weight: 600; margin-bottom: 18px; }
.sellh span { color: var(--mu); font-weight: 500; }
@media (max-width: 560px) { .sellhead .btn.sb { width: 100%; } }

/* seller name is a link; total listings under it */
a.sh { color: inherit; border-radius: var(--r); transition: opacity .2s; }
a.sh:hover .sn b { color: var(--btn); text-decoration: underline; text-underline-offset: 3px; }
a.sh:focus-visible { outline: 3px solid rgba(0, 0, 128, .35); outline-offset: 4px; }
.sn .stot { margin-top: 4px; color: var(--btn); font-size: var(--fs-sm); font-weight: 600; }

/* ===== LOGO SIZE (final): was ~539x106px, now ~285x56px; header height follows the logo ===== */
.top .logo img, .top .logo img.wm { height: 29px !important; width: 250px !important; max-width: none !important; margin: 0 !important; object-fit: contain; }
.top { padding-top: 8px !important; padding-bottom: 8px !important; }
@media (max-width: 900px) { .top .logo img, .top .logo img.wm { height: 48px !important; } }
@media (max-width: 800px) { .top .logo img.wm { max-width: calc(100vw - 230px) !important; height: 42px !important; } }
@media (max-width: 420px) { .top .logo img.wm { max-width: calc(100vw - 190px) !important; height: 38px !important; } }
.top { gap: 0 !important; }
.top .logo img.wm { margin-right: -12px !important; }
.top .nav > a:first-child { padding-left: 4px !important; }

/* =====================================================================
   FIX (phones): header logo no longer touches / covers the "+" button
   The wordmark now scales down to the free space left of the action buttons
   (width/height auto + max-width/max-height keep the aspect ratio).
   FIX: the floating chat bubble no longer covers an opened dropdown list.
   ===================================================================== */
@media (max-width: 480px) {
  .top .logo img, .top .logo img.wm { width: auto !important; height: auto !important; max-height: 36px !important; max-width: calc(90vw - 176px) !important; margin-right: 0 !important; }
}
@media (max-width: 380px) {
  .top .logo img, .top .logo img.wm { max-width: calc(90vw - 150px) !important; }
}
body:has(.dd.open) .fw { opacity: 0; pointer-events: none; transition: opacity .15s; }

/* =====================================================================
   FIX: a long selected value (e.g. "ვარდისფერი ოქრო") no longer stretches the
   filter panel. Grid columns were "1fr" (= minmax(auto, 1fr)), so the nowrap
   dropdown text widened the column and the fields spilled out of the card
   over the results. Columns are now minmax(0, 1fr) and long text gets "...".
   ===================================================================== */
.layout aside, .layout aside .sbox { min-width: 0; }
.fgrid, .layout aside .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid > *, .fgrid .fld, .fgrid .ddw, .fgrid .dd, .fgrid .prng, .fgrid .pwrow { min-width: 0; }
.fgrid .pwrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid .pwrow.one { grid-template-columns: minmax(0, 1fr); }
.dd-btn { min-width: 0; }
.dd-val { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-val .ti { display: inline-block; vertical-align: -3px; margin-right: 8px; }
/* ===== სურათი მთლიანად ჩანს (contain) ===== */

/* კოლექცია: ბადის ბარათი */
.card .imgi { background-size: contain; background-repeat: no-repeat; background-position: center; }
@media (hover: hover) and (pointer: fine) { .card:hover .imgi { transform: none; } }

/* ბლოგი: სიის ბარათი */
.bimg img { object-fit: contain; }
.bcard:hover .bimg img { transform: none; }

/* ბლოგი: მთავარი გვერდის ბლოკი */
.hbi img { object-fit: contain; }

/* ბლოგი: სტატიის დიდი სურათი, ბუნებრივი პროპორციით, ჩაუჭრელად */
.ahero { aspect-ratio: auto; height: auto; object-fit: contain; }
/* ===== პროდუქტის გვერდი: ფოტო მთლიანად ჩანს ===== */
.pmain img { object-fit: contain; }
.pth img { object-fit: contain; background: #fff; }
.pth.vth video { object-fit: contain; }
.pm-list #pmOut .pm-ic { display: inline-flex; align-items: center; gap: 10px; }
.pm-list #pmOut .ic { width: 18px; height: 18px; }
/* გასვლა: წითელი */
.pm-list #pmOut { color: var(--err); }
.pm-list #pmOut:hover { background: #FDF2F1; color: #B42318; }
.pm-list #pmOut:focus-visible { outline-color: var(--err); }
/* პროდუქტის გვერდი: სტიკერები გალერეის ქვემოთ (იგივე სტილი, რაც კოლექციის ბარათზე) */
.pgal .stks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.pgal .stk { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #E3E4E6; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08); color: #2B3138; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.pgal .stk .se { flex: none; font-size: 15px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.pgal .stk b { font-weight: 500; }
.modal { background: rgba(17, 24, 39, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* პლეისჰოლდერები: ნაზი, ფორმატის მინიშნებისთვის */
.form input::placeholder, .fgrid input::placeholder { color: #A3A8AF; letter-spacing: 1px; }
.form input:placeholder-shown { letter-spacing: 1px; }
#modalBody:has(#lgYes) .ci { background: #FDECEA; color: #B42318; }

/* გადამრთველი ფასის ქვემოთ */
.card .pline { flex-direction: column; align-items: flex-start; gap: 6px; }
.pprice { flex-direction: column; align-items: flex-start; gap: 10px; }
.rq{color:#e11d2e;font-weight:700;margin-left:3px;font-style:normal}
.lt{display:inline}


/* =====================================================================
   RESPONSIVE v7 — ჩასვი style.css-ის ბოლოში (არსებულ კოდს არ ცვლის, მხოლოდ ავსებს)
   ეკრანები: ≥1400 დიდი · ≤1100 პატარა ლეპტოპი · ≤900 ტაბლეტი · ≤700 / ≤560 / ≤480 / ≤359 ტელეფონი
   ===================================================================== */

/* ---------- 0. საერთო დაცვა ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; }
.card h4, .si b, .pr2 b, .rv-r b, .vpi b { overflow-wrap: anywhere; }
.layout > *, .pd-grid > *, .foot > *, .calc-grid > *, .addwrap > * { min-width: 0; }

/* ---------- 1. ძალიან დიდი ეკრანები: კონტენტი არ იჭიმება ბოლომდე ---------- */
:root { --pad-x: max(5%, calc((100% - 1440px) / 2)); }
.top, .hero, .sec, .layout, .calc-wrap, footer {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
@media (min-width: 1400px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ---------- 2. პატარა ლეპტოპი / დიდი ტაბლეტი (≤1100) ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 24px; }
  .hsec .grid.hscroll > .card { flex-basis: calc((100% - 40px) / 3); min-width: 200px; }
  .pd-grid { gap: 32px; }
}

/* ---------- 3. ტაბლეტი (≤900) ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding-top: 24px; padding-bottom: 24px; }
  .layout aside { position: static; }
  .layout aside .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsec .grid.hscroll > .card { flex-basis: calc((100% - 20px) / 2.4); min-width: 190px; }
  .hbg { grid-template-columns: 1fr; }
  .hbs { grid-template-rows: none; }
  .foot { gap: 20px; }
  .pd-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pgal { position: static; }
  .sec { padding-top: 40px; padding-bottom: 40px; }
  .sres, .notes { max-height: 60vh; max-height: 60dvh; }
}

/* ---------- 4. ტელეფონი (≤700) ---------- */
@media (max-width: 700px) {
  .hsec .grid.hscroll > .card { flex-basis: 70%; min-width: 0; }
  .foot { grid-template-columns: 1fr; }
  .banks { grid-template-columns: 1fr; }
  .payrow { align-items: flex-start; }
  .pacts { width: 100%; }
  .pacts .btn { flex: 1 1 auto; }
}

/* ---------- 5. ტელეფონი (≤560) ---------- */
@media (max-width: 560px) {
  .sec { padding-left: 5%; padding-right: 5%; }
  .page { margin: 24px auto; }
  .panel { padding: 18px 14px; }
  .fgrid, .layout aside .fgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sbox { padding: 14px; }
  .sbox .frow { gap: 8px; }
  .pmeta { gap: 6px 14px; }
  .pr2 { flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; }
  .pact .pa.pic { flex: 1 1 calc(50% - 10px); justify-content: center; }
  .pseller { padding: 16px; }
  .try-head { align-items: flex-start; }
  .calc { padding: 18px 14px; }
  .calc h2 { font-size: var(--fs-xl); }

  /* პროფილის ჩანართები: ჰორიზონტალური გადახვევა, არ იჭრება */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; white-space: nowrap; }

  /* შეტყობინება (toast) მთელ სიგანეზე */
  .toast { left: 12px; right: 12px; text-align: center; }

  /* ქუქი-ბანერი */
  .cookie { width: calc(100% - 16px); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 14px; }
}

/* ---------- 6. ტელეფონი (≤480): მოდალები ქვემოდან ამოსული ფანჯრებივით ---------- */
@media (max-width: 480px) {
  :root { --fs-h2: 21px; --fs-2xl: 18px; --fs-xl: 17px; }

  .modal { padding: 0; place-items: end center; }
  .modal .box {
    max-width: 100%;
    max-height: 92vh; max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .try-dlg { padding: 0; }
  .try-box { max-width: 100%; max-height: 100vh; max-height: 100dvh; min-height: 100%; border-radius: 0; padding: 18px 14px; }

  .form .trio, .duo { grid-template-columns: 1fr; }
  .form .trio > :nth-child(3) { grid-column: auto; }
  .row2 { flex-direction: column-reverse; }
  .anav { flex-wrap: wrap; }
  .anav .btn { flex: 1 1 auto; }
  .sbtns { flex-wrap: wrap; }
  .btn.sb { flex: 1 1 100%; }
  .pnav { width: 36px; height: 36px; }
  .pth { width: 60px; height: 60px; }
  .cgrid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .dd-list { max-height: min(260px, 40vh); }
}

/* ---------- 7. ძალიან პატარა ტელეფონი (≤359): ბარათები ერთ სვეტში ---------- */
@media (max-width: 359px) {
  .grid { grid-template-columns: 1fr; }
  .fgrid, .layout aside .fgrid { grid-template-columns: 1fr; }
  .hsec .grid.hscroll > .card { flex-basis: 84%; }
}

/* ---------- 8. შეხებითი ეკრანები: უფრო მოხერხებული დაჭერის არეები ---------- */
@media (pointer: coarse) {
  .dd-opt { min-height: 44px; }
  .card .cact, .cur, .cdel { position: relative; }
  .card .cact::after, .cur::after, .cdel::after { content: ""; position: absolute; inset: -8px; }
  .pm-list a, .pm-list button { min-height: 48px; }
  .btn.sm { min-height: 40px; }
}

/* ---------- 9. დაბალი ლანდშაფტი (ტელეფონი გვერდზე) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .top { position: static; }
  .modal .box, .try-box { max-height: 96vh; max-height: 96dvh; }
  .hero { padding-top: 24px; padding-bottom: 20px; }
  .lbx-s { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- 10. iPhone-ის "notch" / ქვედა ზოლი ---------- */
footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.cookie { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* =====================================================================
   საძიებო გვერდის გვერდითი ფილტრი: ფასი და წონა ცალ-ცალკე ხაზზე.
   მხოლოდ .layout aside-ში მოქმედებს, მთავარი გვერდი (.hero .sbox) არ იცვლება.
   ===================================================================== */
.layout aside .fgrid .pwrow,
.layout aside .fgrid .pwrow.one {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
/* სათაური ("ფასი (₾)") და ₾/$ გადამრთველი ერთ ხაზზე, არ იმტვრევა */
.layout aside .prng > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-height: 32px;
}
.layout aside .prng .plab b { display: inline; }
/* "დან – მდე" ველები სრულ სიგანეზე */
.layout aside .prng .prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.layout aside .prng .prow input { min-width: 0; width: 100%; padding: 0 12px; }

/* ბარათის სათაური: სრულად ჩანს, საჭიროების შემთხვევაში გადადის ახალ ხაზზე */
.card h4,
.card .trow h4 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.card .trow { align-items: flex-start; }
/* ===== ფილტრი: ფასის / წონის სათაურების გასწორება ===== */

/* საერთო: სათაური ჩვეულებრივი ხაზია, ზედმეტი სიმაღლე და სივრცე აღარ აქვს */
.layout aside .prng > span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
  white-space: nowrap;
}

/* "ფასი (₾)" ერთიანად ჩანს, გადამრთველი მარჯვენა კიდეზეა */
.layout aside .prng > .plab { min-height: 32px; }
.layout aside .prng > .plab .cur { margin-left: auto; }
.layout aside .prng .plab b {
  font-family: var(--font-price);
  font-weight: 600;
  color: var(--tx);
}

/* ბოლო უწყვილო ველი (მაგ. "სქესი") სრულ სიგანეზე */
.layout aside .fgrid .dyn > .fld:last-child:nth-child(even),
.layout aside .fgrid .dyn > label:last-child:nth-child(even) {
  grid-column: 1 / -1;
}
/* =====================================================================
   MOBILE FIX: ჰედერი + ფუტერი (≤800px)
   ===================================================================== */
@media (max-width: 800px) {

  /* ჰედერი: 2 რიგი. 1) ლოგო + ღილაკები  2) ნავიგაცია/ძებნა */
  .top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo actions" "nav nav";
    align-items: center;
    gap: 4px 8px !important;
    padding: 6px max(4%, env(safe-area-inset-right)) 6px max(4%, env(safe-area-inset-left)) !important;
  }

  /* ლოგო: ვიწრდება თავისუფალ ადგილამდე, ღილაკებს აღარ ეჯახება */
  .top .logo { grid-area: logo; min-width: 0; }
  .top .logo img, .top .logo img.wm {
    width: auto !important;
    height: auto !important;
    max-height: 34px !important;
    max-width: 100% !important;
    margin: 0 !important;
    object-fit: contain;
  }

  /* მარჯვენა ღილაკები (+, ♡, 🔔, პროფილი) */
  .top .actions { grid-area: actions; margin-left: 0; gap: 4px !important; flex: none; }
  .top .ib { width: 38px; height: 38px; }
  .top .actions .btn.add { width: 38px; min-width: 38px; min-height: 38px; }

  /* ნავიგაცია + ძებნა: ერთ ხაზზე, საჭიროებისას გვერდზე იწევა */
  .top .nav {
    grid-area: nav;
    order: 0;
    width: 100%;
    flex-wrap: nowrap;
    gap: 2px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .top .nav::-webkit-scrollbar { display: none; }
  .top .nav > a { flex: none; padding: 8px 10px !important; font-size: var(--fs-md); }
  .top .hs { flex: none; margin-left: auto; }
  .top .hs.open { flex: 1 1 auto; margin-left: 0; }
}

@media (max-width: 380px) {
  .top .actions { gap: 0 !important; }
  .top .ib, .top .actions .btn.add { width: 34px; min-width: 34px; min-height: 34px; }
  .top .logo img, .top .logo img.wm { max-height: 30px !important; }
}

/* ფუტერი (≤700px): ცენტრში, მოხერხებული ბმულები */
@media (max-width: 700px) {
  footer {
    padding: 32px max(5%, env(safe-area-inset-left)) calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .foot { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .foot .fleft, .foot .fmid, .foot .fright {
    justify-self: stretch;
    align-items: center;
    text-align: center;
  }
  .foot .fcol { gap: 4px; }
  .foot .fcol a:not(.fh) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }
  .foot .soc { justify-content: center; margin-top: 4px; }
  .foot .soc a { width: 44px; height: 44px; }
  .copy { margin-top: 24px; padding-top: 16px; font-size: var(--fs-xs); line-height: 1.6; }
}


/* mygem.ge — responsive listing-card refinements.
   Append AFTER existing stylesheet rules. */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.grid > .card { min-width: 0; height: 100%; }
.card { overflow: hidden; }
.card .img { flex-shrink: 0; }
.card .imgi { background-position: center; background-repeat: no-repeat; }
.card .in { min-width: 0; gap: 0; }
.card .trow { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.card .trow h4, .card h4 { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.card .pline { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; min-width: 0; }
.card .pline .price { flex: 0 1 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.card .pline .cur { flex: 0 0 auto; margin: 0; }
.card .cfoot { min-width: 0; margin-top: auto; gap: 8px; }
.card .cfoot .tags, .card .cfoot .cbot, .card .stks { min-width: 0; flex-wrap: wrap; gap: 6px; }
.card .loc, .card .cmeta { min-width: 0; overflow-wrap: anywhere; }
.card .cact { flex-shrink: 0; }
@media (min-width: 701px) and (max-width: 1100px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
}
@media (max-width: 700px) {
  .grid:not(.hscroll) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card .in { padding: 11px; }
  .card .trow h4 { font-size: 14px; }
  .card .pline { margin-top: 8px; padding-bottom: 9px; gap: 7px; }
  .card .pline .price { font-size: 17px; }
  .card .cfoot { padding-top: 8px; }
  .card .tg { white-space: normal; line-height: 1.3; }
}
@media (max-width: 480px) {
  .grid:not(.hscroll) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grid:not(.hscroll) > .card { display: grid; grid-template-columns: minmax(100px, 34%) minmax(0, 1fr); align-items: stretch; }
  .grid:not(.hscroll) > .card > .img { width: 100%; height: 100%; min-height: 160px; aspect-ratio: auto; border-radius: 0; }
  .grid:not(.hscroll) > .card > .in { padding: 12px; }
  .grid:not(.hscroll) > .card .pline { flex-direction: row; }
  .grid:not(.hscroll) > .card .cfoot { margin-top: 8px; }
  .grid:not(.hscroll) > .card .badge { font-size: 10px; padding: 4px 6px; }
}
@media (max-width: 360px) {
  .grid:not(.hscroll) > .card { grid-template-columns: minmax(88px, 31%) minmax(0, 1fr); }
  .grid:not(.hscroll) > .card > .in { padding: 9px; }
  .card .pline .price { font-size: 15px; }
}
/* mygem.ge — Header and footer responsive improvements.
   Paste at the very end of your existing stylesheet. */
.top { min-width: 0; }
.top .logo, .top .nav, .top .actions { min-width: 0; }
.top .actions { flex-shrink: 0; }
.top .nav > a { white-space: nowrap; }
.foot { width: 100%; }
.foot > * { min-width: 0; }
.foot a, .foot p { overflow-wrap: anywhere; }

@media (min-width: 801px) and (max-width: 1150px) {
  .top { gap: 12px !important; padding-left: 3% !important; padding-right: 3% !important; }
  .top .nav { gap: 0; }
  .top .nav > a { padding-inline: 7px; font-size: 13px; }
  .top .logo img, .top .logo img.wm { max-width: 190px !important; width: 100% !important; object-fit: contain; }
  .foot { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 18px; }
}
@media (max-width: 800px) {
  .top {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas: 'logo actions' 'nav nav' !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-items: center !important;
    padding: 8px 4% !important;
  }
  .top .logo { grid-area: logo; display: flex; width: 100%; overflow: hidden; }
  .top .logo img, .top .logo img.wm {
    display: block; width: auto !important; height: auto !important;
    max-width: 100% !important; max-height: 36px !important;
    margin: 0 !important; object-fit: contain; object-position: left center;
  }
  .top .actions { grid-area: actions; display: flex; align-items: center; gap: 3px !important; margin: 0 !important; }
  .top .actions .ib, .top .actions .btn.add { flex: none; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; }
  .top .actions svg { max-width: 20px; max-height: 20px; }
  .top .nav {
    grid-area: nav; display: flex; align-items: center; width: 100%; min-width: 0;
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
    gap: 4px; padding: 3px 0 5px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .top .nav::-webkit-scrollbar { display: none; }
  .top .nav > a { flex: 0 0 auto; padding: 7px 10px !important; font-size: 13px; }
  .top .hs { flex: 0 0 auto; margin-left: auto; }
  .top .hs.open { flex: 1 0 180px; }
  .top .hs.open input { width: min(230px, 55vw); }
  footer { padding: 34px 5% calc(40px + env(safe-area-inset-bottom, 0px)); }
  .foot { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 20px; align-items: start; }
  .foot .fleft, .foot .fmid, .foot .fright { justify-self: stretch; text-align: left; align-items: flex-start; }
  .foot .fleft { grid-column: 1 / -1; }
  .foot .fcol { gap: 7px; }
  .foot .fcol a:not(.fh) { display: inline-flex; align-items: center; min-height: 36px; }
  .foot .soc { justify-content: flex-start; flex-wrap: wrap; }
  .copy { margin-top: 26px; padding-top: 16px; line-height: 1.6; }
}
@media (max-width: 480px) {
  .top { padding: 7px 3% !important; column-gap: 4px !important; }
  .top .logo img, .top .logo img.wm { max-height: 32px !important; }
  .top .actions { gap: 0 !important; }
  .top .actions .ib, .top .actions .btn.add { width: 34px; min-width: 34px; height: 36px; min-height: 36px; }
  .top .nav > a { padding: 7px 9px !important; font-size: 12px; }
  .foot { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .foot .fleft, .foot .fmid, .foot .fright { grid-column: 1; justify-self: stretch; text-align: center; align-items: center; }
  .foot .fcol { gap: 4px; }
  .foot .fcol a:not(.fh) { justify-content: center; min-height: 40px; }
  .foot .soc { justify-content: center; }
  .foot .soc a { width: 44px; height: 44px; }
  .copy { text-align: center; }
}
@media (max-width: 360px) {
  .top .logo img, .top .logo img.wm { max-height: 28px !important; }
  .top .actions .ib, .top .actions .btn.add { width: 32px; min-width: 32px; }
}

/* mygem.ge — Header and footer responsive improvements.
   Paste at the very end of your existing stylesheet. */
.top { min-width: 0; }
.top .logo, .top .nav, .top .actions { min-width: 0; }
.top .actions { flex-shrink: 0; }
.top .nav > a { white-space: nowrap; }
.foot { width: 100%; }
.foot > * { min-width: 0; }
.foot a, .foot p { overflow-wrap: anywhere; }

@media (min-width: 801px) and (max-width: 1150px) {
  .top { gap: 12px !important; padding-left: 3% !important; padding-right: 3% !important; }
  .top .nav { gap: 0; }
  .top .nav > a { padding-inline: 7px; font-size: 13px; }
  .top .logo img, .top .logo img.wm { max-width: 190px !important; width: 100% !important; object-fit: contain; }
  .foot { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 18px; }
}
@media (max-width: 800px) {
  .top {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas: 'logo actions' 'nav nav' !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-items: center !important;
    padding: 8px 4% !important;
  }
  .top .logo { grid-area: logo; display: flex; width: 100%; overflow: hidden; }
  .top .logo img, .top .logo img.wm {
    display: block; width: auto !important; height: auto !important;
    max-width: 100% !important; max-height: 36px !important;
    margin: 0 !important; object-fit: contain; object-position: left center;
  }
  .top .actions { grid-area: actions; display: flex; align-items: center; gap: 3px !important; margin: 0 !important; }
  .top .actions .ib, .top .actions .btn.add { flex: none; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; }
  .top .actions svg { max-width: 20px; max-height: 20px; }
  .top .nav {
    grid-area: nav; display: flex; align-items: center; width: 100%; min-width: 0;
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
    gap: 4px; padding: 3px 0 5px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .top .nav::-webkit-scrollbar { display: none; }
  .top .nav > a { flex: 0 0 auto; padding: 7px 10px !important; font-size: 13px; }
  .top .hs { flex: 0 0 auto; margin-left: auto; }
  .top .hs.open { flex: 1 0 180px; }
  .top .hs.open input { width: min(230px, 55vw); }
  footer { padding: 34px 5% calc(40px + env(safe-area-inset-bottom, 0px)); }
  .foot { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 20px; align-items: start; }
  .foot .fleft, .foot .fmid, .foot .fright { justify-self: stretch; text-align: left; align-items: flex-start; }
  .foot .fleft { grid-column: 1 / -1; }
  .foot .fcol { gap: 7px; }
  .foot .fcol a:not(.fh) { display: inline-flex; align-items: center; min-height: 36px; }
  .foot .soc { justify-content: flex-start; flex-wrap: wrap; }
  .copy { margin-top: 26px; padding-top: 16px; line-height: 1.6; }
}
@media (max-width: 480px) {
  .top { padding: 7px 3% !important; column-gap: 4px !important; }
  .top .logo img, .top .logo img.wm { max-height: 32px !important; }
  .top .actions { gap: 0 !important; }
  .top .actions .ib, .top .actions .btn.add { width: 34px; min-width: 34px; height: 36px; min-height: 36px; }
  .top .nav > a { padding: 7px 9px !important; font-size: 12px; }
  .foot { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .foot .fleft, .foot .fmid, .foot .fright { grid-column: 1; justify-self: stretch; text-align: center; align-items: center; }
  .foot .fcol { gap: 4px; }
  .foot .fcol a:not(.fh) { justify-content: center; min-height: 40px; }
  .foot .soc { justify-content: center; }
  .foot .soc a { width: 44px; height: 44px; }
  .copy { text-align: center; }
}
@media (max-width: 360px) {
  .top .logo img, .top .logo img.wm { max-height: 28px !important; }
  .top .actions .ib, .top .actions .btn.add { width: 32px; min-width: 32px; }
}

/* mygem.ge — MOBILE CARD CORRECTION
   Paste at the VERY END of your CSS, after earlier responsive patches.
   Removes the cramped side-by-side image/content layout. */
@media (max-width: 600px) {
  .grid:not(.hscroll) { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
  .grid:not(.hscroll) > .card {
    display:flex; flex-direction:column; min-width:0; width:100%; height:auto;
    overflow:hidden; border-radius:18px; box-shadow:0 4px 18px rgba(17,24,39,.07);
  }
  .grid:not(.hscroll) > .card > .img {
    display:block; width:100%; height:auto; min-height:0;
    aspect-ratio:16/10; flex:none; border-radius:0;
  }
  .grid:not(.hscroll) > .card > .img .imgi { inset:0; background-size:cover; background-position:center; }
  .grid:not(.hscroll) > .card > .in {
    display:flex; flex-direction:column; width:100%; min-width:0; padding:16px;
  }
  .card .cmeta { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; }
  .card .cmeta .loc { flex:1 1 auto; min-width:0; }
  .card .trow { display:flex; align-items:flex-start; gap:10px; }
  .card .trow h4, .card h4 { font-size:16px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
  .card .pline { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:10px; padding:10px 0 12px; }
  .card .pline .price { font-size:21px; white-space:normal; overflow-wrap:anywhere; }
  .card .cfoot { margin-top:0; padding-top:10px; gap:10px; }
  .card .tags, .card .stks { display:flex; flex-wrap:wrap; gap:7px; min-width:0; }
  .card .tg, .card .stk { max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
  .card .stk b { white-space:normal; overflow:visible; text-overflow:clip; }
  .card .cbot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; margin-top:8px; }
  .card .cbl { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
  .card .cdel { min-height:36px; height:auto; padding:7px 12px; font-size:12px; white-space:normal; }
  .card .cdel.cedit { width:36px; height:36px; min-height:36px; padding:0; flex:none; }
  .card .pstat { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  .card .cacts { top:10px; right:10px; }
  .card .cact { width:38px; height:38px; }
}
@media (max-width:360px) {
  .grid:not(.hscroll) > .card > .img { aspect-ratio:4/3; }
  .grid:not(.hscroll) > .card > .in { padding:12px; }
  .card .pline .price { font-size:19px; }
}


/* FIX: Price and weight on separate rows */
@media (max-width: 800px) {

  .fgrid .pwrow,
  .layout aside .fgrid .pwrow,
  .fgrid .pwrow.one {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    width: 100%;
    grid-column: 1 / -1;
  }

  .pwrow .prng {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pwrow .prng > span,
  .layout aside .prng > span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    white-space: normal;
    width: 100%;
  }

  .pwrow .prng .prow,
  .layout aside .prng .prow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 0;
  }

  .pwrow .prng .prow input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    font-size: 15px;
  }

  .pwrow .prng .prow i {
    text-align: center;
  }

  .pwrow .cur {
    flex-shrink: 0;
  }
}


/* MYGEM.GE — RESPONSIVE HEADER */

@media (max-width: 800px) {

  .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #e9e9ef;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
  }

  /* Smaller logo */
  .top .logo {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    gap: 5px;
    font-size: 16px;
  }

  .top .logo img {
    width: auto !important;
    height: 30px !important;
    max-width: 135px !important;
    object-fit: contain;
  }

  /* Header actions */
  .top .actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }

  .top .ib {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .top .ib svg {
    width: 19px;
    height: 19px;
  }

  .top .btn.add {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  /* Navigation on its own row */
  .top .nav {
    order: 3;
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top .nav::-webkit-scrollbar {
    display: none;
  }

  .top .nav > a {
    flex-shrink: 0;
    font-size: 13px;
    padding: 7px 10px;
  }

  /* Search field */
  .top .hs.open {
    max-width: 100%;
    min-width: 0;
  }

  .top .hs.open input {
    width: 100%;
    min-width: 0;
    font-size: 14px;
  }
}

/* Small phones */
@media (max-width: 420px) {

  .top {
    padding: 9px 12px;
    gap: 8px;
  }

  .top .logo img {
    height: 25px !important;
    max-width: 112px !important;
  }

  .top .actions {
    gap: 3px;
  }

  .top .ib {
    width: 33px;
    height: 33px;
  }

  .top .btn.add {
    padding: 0 8px;
    font-size: 11px;
  }
}

/* SMALL MYGEM.GE LOGO ON MOBILE */

@media (max-width: 800px) {
  .top .logo img {
    width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
    max-height: 28px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 480px) {
  .top .logo img {
    width: 90px !important;
    max-width: 90px !important;
    height: auto !important;
    max-height: 23px !important;
  }
}

/* ფოტოების რედაქტირება: ბარათის პრევიუ */
.pe-prev { max-width: 280px; margin: 0 auto 18px; pointer-events: none; user-select: none; }
.pe-prev .card { margin: 0; opacity: 1 !important; transform: none !important; cursor: default; }
.pe-prev .cbot { display: none; }
.pe-pt { display: block; margin: 0 0 8px; font-size: var(--fs-md); font-weight: 600; color: var(--tx); text-align: center; }

/* ტელეფონზე ბარათი სრულ სიგანეზე, ოღონდ არა ძალიან დიდი */
@media (max-width: 600px) {
  .pe-prev { max-width: 100%; }
  .pe-prev .card { display: flex; flex-direction: column; }
  .pe-prev .card > .img { aspect-ratio: 16 / 10; width: 100%; height: auto; min-height: 0; }
}
/* ფოტოების რედაქტირება: პრევიუ მარცხნივ, ფოტოები მარჯვნივ */
.box.wide { max-width: 820px; }
.pe-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 4px; }
.pe-side { position: sticky; top: 0; min-width: 0; }
.pe-main { min-width: 0; }
.pe-side .lpv-card .card { max-width: none; margin: 0; }
.pe-side .cbot { display: none; }
@media (max-width: 700px) {
  .pe-wrap { grid-template-columns: minmax(0, 1fr); }
  .pe-side { position: static; }
}
.rg-w{position:relative}
.rg-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;padding:0 14px;border:1px solid #e3e5ea;border-radius:12px;background:#fff;font:inherit;cursor:pointer;text-align:left}
.rg-val.ph{color:#8a8f99}
.rg-btn .car{transition:transform .2s}
.rg.open .rg-btn .car{transform:rotate(180deg)}
.rg-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);width:max(100%,280px);z-index:60;background:#fff;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:14px}
.rg.open .rg-pop{display:block}
.pwrow .fld:last-child .rg-pop{left:auto;right:0}
.rg-top{display:flex;justify-content:flex-end;margin-bottom:10px}
.rg-pop .prow{display:flex;align-items:center;gap:8px}
.rg-pop .prow input{flex:1;min-width:0}
.rg-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin:10px 0 12px}
.rg-p{display:block;width:100%;padding:8px 0;border:0;background:none;font:inherit;cursor:pointer;border-radius:8px;text-align:center}
.rg-p:hover{background:#f1f3f7}
.rg-ok{width:100%}
/* =====================================================================
   კომპაქტური ფილტრი: ველები რამდენიმე სვეტად
   (ფასი და წონა ჩვეულებრივი ველებივით ჩაჯდება ბადეში)
   ===================================================================== */

/* ფასი/წონის გარსი "გამჭვირვალეა", .prng უშუალოდ ბადის უჯრა ხდება */
.hero .fgrid .pwrow,
.hero .fgrid .pwrow.one,
.layout aside .fgrid .pwrow,
.layout aside .fgrid .pwrow.one { display: contents !important; }

/* ---------- მთავარი გვერდი: 4 სვეტი ---------- */
.hero .sbox { padding: 18px 20px; }
.hero .fgrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}
.hero .fgrid > .fld { grid-column: auto; }

/* ---------- ველების სიმაღლე და ზომა (ორივე ადგილას) ---------- */
.hero .fgrid .fld, .hero .fgrid label,
.layout aside .fgrid .fld, .layout aside .fgrid label { gap: 4px; font-size: 12px; }
.hero .fgrid input, .hero .fgrid .dd-btn, .hero .fgrid .rg-btn,
.layout aside .fgrid input, .layout aside .fgrid .dd-btn, .layout aside .fgrid .rg-btn {
  height: 40px; min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 10px;
}
.hero .sbox .frow { margin-top: 14px; }
.hero .sbox .frow .btn, .hero .sbox .frow #clrF { min-height: 44px; }
.hero .sbox .frow #clrF { flex-basis: 44px; width: 44px; min-width: 44px; }

/* ---------- საძიებო გვერდის გვერდითი ფილტრი: ფასი და წონა გვერდიგვერდ ---------- */
.layout aside .fgrid { gap: 10px; }
.layout aside .prng > span { min-height: 0; }

/* ჩამოსაშლელი პანელი არ გასცდეს ეკრანს */
.rg-pop { max-width: calc(100vw - 24px); }

/* ---------- პატარა ეკრანები ---------- */
@media (max-width: 1000px) {
  .hero .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .sbox { padding: 14px; }
}
@media (max-width: 359px) {
  .hero .fgrid, .layout aside .fgrid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   FIX: ფასის/წონის ჩამოსაშლელი პანელი (.rg-pop)
   ===================================================================== */

/* 1) ფილტრის ბლოკი ბარათებზე მაღლა დგას */
.hero { z-index: 20; }
.layout aside { z-index: 20; }

/* ღია ველი ყველაფერზე წინ გამოდის */
.fgrid .fld:has(.rg.open),
.fgrid .prng:has(.rg.open) { position: relative; z-index: 90; }
.rg.open { position: relative; z-index: 90; }

/* 2) პანელის ვიზუალი: ზედმეტად არ გაიწელოს, საჭიროებისას სქროლდეს */
.rg-pop {
  z-index: 95;
  width: max(100%, 280px);
  max-width: calc(100vw - 24px);
  max-height: min(420px, 70vh);
  overflow-y: auto;
  border: 1px solid var(--cream2);
  box-shadow: 0 16px 40px rgba(17, 24, 39, .18);
  scrollbar-width: thin;
}
.rg-top { align-items: center; }
.rg-p { padding: 10px 0; font-size: 14px; font-weight: 500; }
.rg-ok { min-height: 44px; position: sticky; bottom: 0; }

/* 3) მობილური: პანელი ქვემოდან ამოსული ფანჯარაა და ვერასდროს გასცდება ეკრანს */
@media (max-width: 640px) {
  .rg-pop,
  .pwrow .fld:last-child .rg-pop {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    max-height: 75vh;
    max-height: 75dvh;
    border-radius: 16px;
    z-index: 200;
  }
  .rg-p { padding: 12px 0; }
}

/* ჩატის ბუშტი არ დაფაროს პანელი */
body:has(.rg.open) .fw { opacity: 0; pointer-events: none; }
/* =====================================================================
   FIX: ფასის/წონის ველში არჩეული მნიშვნელობა ერთ ხაზზე ჩანს
   ===================================================================== */
.rg-btn { min-width: 0; gap: 6px; }

.rg-val {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.rg-btn .car { flex: none; }

/* ვიწრო ველში ტექსტი ცოტა პატარაა, რომ "500 – 1000 ₾" მთლიანად ჩაეტიოს */
.fgrid .rg-btn { padding: 0 10px; }
.fgrid .rg-val { font-size: 13px; letter-spacing: 0; }
.fgrid .rg-val.ph { font-size: 14px; }

@media (max-width: 640px) {
  .fgrid .rg-val { font-size: 14px; }
}
/* =====================================================================
   FIX: მთავარი გვერდი — ფასის/წონის პანელი ბარათებზე მაღლა
   ===================================================================== */
.hero {
  position: relative;
  z-index: 30;
  isolation: auto;      /* ახალ stacking context-ს აღარ ქმნის */
  overflow: visible;
}
.hero .sbox { position: relative; z-index: 31; overflow: visible; }

/* ბარათების სექციები ფილტრის ქვეშ დგას */
.hsec, .sec, .calc-wrap { position: relative; z-index: 1; }
.hsec .grid.hscroll { position: relative; z-index: 0; }
.card { z-index: 0; }

/* ღია პანელი ყველაფერზე წინ */
.rg.open, .fgrid .fld:has(.rg.open) { position: relative; z-index: 100; }
.rg-pop { z-index: 110; }
/* =====================================================================
   FIX: ფილტრსა და კოლექციას შორის მანძილი
   ===================================================================== */
.hero { padding-bottom: 48px; transition: padding-bottom .25s ease; }

/* პანელის გახსნისას ადგილი ჩნდება, რომ ბარათებმა არ დაფაროს */


/* მუდმივი დამატებითი დაშორება კოლექციამდე */
.hero + .sec { margin-top: 24px; }

/* ფილტრი ბარათებზე მაღლა */
.hero { position: relative; z-index: 30; }
.hero .sbox { position: relative; z-index: 31; overflow: visible; }
.rg.open { position: relative; z-index: 100; }
.rg-pop { z-index: 110; max-height: min(420px, 70vh); overflow-y: auto; }



/* Price and weight dropdown — responsive fix */

.hero {
  padding-bottom: 48px !important;
  margin-bottom: 0 !important;
  overflow: visible;
}

.hero .sbox {
  position: relative;
  overflow: visible;
}

.fgrid,
.fgrid > *,
.pwrow,
.prng,
.rg-w {
  min-width: 0;
}

.rg-w {
  position: relative;
}

.rg.open {
  z-index: 100;
}

.rg-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: min(350px, calc(100vw - 32px));
  max-height: min(420px, 65vh);
  overflow-y: auto;
  z-index: 200;
  background: white;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
}

.rg-pop .prow input {
  min-width: 0;
  width: 100%;
}

@media (max-width: 640px) {
  .hero {
    padding: 30px 12px 32px !important;
  }

  .hero h1 {
    font-size: clamp(22px, 6vw, 30px);
    overflow-wrap: anywhere;
  }

  .hero .sbox {
    width: 100%;
    padding: 12px;
  }

  .hero .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .rg-pop,
  .pwrow .fld:last-child .rg-pop {
    position: fixed;
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: min(440px, 75dvh);
    overflow-y: auto;
    z-index: 200;
  }

  .rg-cols {
    gap: 4px 12px;
  }

  .rg-p {
    padding: 8px;
  }

  .rg-ok {
    position: sticky;
    bottom: 0;
    width: 100%;
  }
}

@media (max-width: 359px) {
  .hero .fgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Dropdown-ის გახსნისას ქვედა სექციების ჩამოწევა */
.hero:has(.rg.open) {
  padding-bottom: 470px !important;
  transition: padding-bottom 0.25s ease;
}

.hero {
  transition: padding-bottom 0.25s ease;
}

@media (max-width: 640px) {
  .hero:has(.rg.open) {
    padding-bottom: 470px !important;
  }
}