/* VIP membership — the public side (gold theme on top of style.css). Loaded only while VIP is switched on. The popup itself is in style.css. */

.vip-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #f9d56e, #e29a05); color: #3a2400; font-weight: 800; font-size: .72rem; padding: 3px 10px; border-radius: 999px; letter-spacing: .2px; white-space: nowrap; }
.vip-badge svg { width: 13px; height: 13px; fill: currentColor; }
.vip-badge.lg { font-size: .85rem; padding: 5px 14px; }

/* ── product cards (home, catalog, related) ── */
.vm-corner { position: absolute; top: 8px; left: 8px; z-index: 3; }
.vm-corner.vm-bottom { top: auto; bottom: 8px; }
.hc-vip { display: flex; align-items: center; gap: 6px; margin-top: 5px; background: linear-gradient(135deg, #fff4d0, #ffe9a8); border: 1px solid #f1cc66; color: #7a4b00; border-radius: 9px; padding: 4px 9px; font-weight: 900; font-size: .9rem; width: fit-content; white-space: nowrap; box-sizing: border-box; height: 36px; }
.hc-vip svg { width: 14px; height: 14px; fill: #e29a05; }
.hc-vip small { font-weight: 700; font-size: .66rem; color: #8a6a2a; }
.hc-vipmain { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 1.05rem; font-weight: 900; color: #8a5200; white-space: nowrap; }   /* the struck-through ordinary price goes under the VIP price when the card is too narrow for both */
.hc-vipmain svg { width: 15px; height: 15px; fill: #e29a05; flex-shrink: 0; }
.hc-std-old { font-size: .72rem; color: #8b8b95; text-decoration: line-through; margin-left: 0; font-weight: 600; }
.products-swiper .hc-vip small { display: none; }
.products-swiper .hc-vip { padding: 4px 8px; }
.products-swiper .hc-vipmain { font-size: 1.02rem; gap: 0 4px; }
.products-swiper .hc-std-old { font-size: .7rem; margin-left: 0; }
/* "only VIP" card: the gold frame is drawn INSIDE the card's own box (no ring or glow outside it), so the card is exactly as big as an ordinary one */
.vo-card { position: relative; border-color: #f1cc66 !important; }
.vo-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px #f1cc66; pointer-events: none; z-index: 4; transition: box-shadow .25s ease; }
.vo-card:hover { border-color: #e29a05 !important; box-shadow: none; }
.vo-card:hover::after { box-shadow: inset 0 0 0 1.5px #e29a05; }
.vo-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; background: #1c1400; color: #f9d56e; border-radius: 999px; padding: 4px 10px; font-size: .68rem; font-weight: 800; line-height: 1.2; }
/* under the price of a card the dark "only VIP" chip takes exactly the room of the gold VIP-price chip, so both kinds of cards in one row have the same height */
.product-info > .vo-chip { display: flex; width: fit-content; box-sizing: border-box; height: 36px; margin-top: 5px; padding: 4px 12px; }
.product-info > .vo-chip.vo-chip-used { height: auto; min-height: 36px; }
.vo-chip i { font-size: .68rem; }
.vo-chip-used { background: #f4f4f6; color: #6b7280; white-space: normal; }
.vo-card .card-add-btn.vo-btn { background: linear-gradient(135deg, #f9d56e, #e29a05); color: #3a2400; box-shadow: 0 4px 16px rgba(226,154,5,.4); }
.vip-add-btn { width: 100%; border: 0; background: linear-gradient(135deg, #f9d56e, #e29a05); color: #3a2400; border-radius: 10px; padding: 9px 6px; font-weight: 800; font-size: .82rem; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; cursor: pointer; white-space: nowrap; }
.vip-used-btn { width: 100%; border: 1px solid #e5e7eb; background: #f4f4f6; color: #6b7280; border-radius: 10px; padding: 8px 6px; font-weight: 700; font-size: .76rem; font-family: inherit; line-height: 1.3; text-align: center; }
@media (max-width: 575px) { .vip-add-btn { font-size: clamp(.6rem, 3vw, .76rem); padding: 9px 4px; } }
/* the long "Add to cart" label of a member must stay on ONE line down to 320px wide screens: the cart icon goes first, then the letters shrink with the screen */
@media (max-width: 419px) { .vip-add-btn.vip-add-long i { display: none; } }

/* ── product page ── */
.vq-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 12px 0 4px; background: linear-gradient(135deg, #f9d56e, #e29a05); border-radius: 14px; padding: 10px 10px 10px 16px; color: #3a2400; box-shadow: 0 8px 22px rgba(226,154,5,.35); }
.vq-bar .vq-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vq-bar .vq-l svg { width: 24px; height: 24px; fill: #3a2400; flex-shrink: 0; }
.vq-bar .vq-p { font-size: 1.55rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.vq-bar .vq-p small { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .4px; opacity: .75; margin-bottom: 2px; }
.vq-bar .vq-btn { margin-left: auto; padding: 14px 22px; font-size: 1.02rem; border: 1.5px solid rgba(249,213,110,.7); border-radius: 11px; background: linear-gradient(135deg, #2b1f00, #120d00); color: #f9d56e; font-weight: 800; white-space: nowrap; font-family: inherit; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 10px 22px rgba(18,13,0,.45); animation: vqPulse 2.2s ease-in-out infinite; }
.vq-bar .vq-btn svg { width: 18px; height: 18px; fill: #f9d56e; }
@keyframes vqPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 10px 22px rgba(18,13,0,.45); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.28), 0 10px 26px rgba(18,13,0,.55); } }
@media (prefers-reduced-motion: reduce) { .vq-bar .vq-btn { animation: none; } }
@media (max-width: 575px) { .vq-bar { padding: 12px; } .vq-bar .vq-btn { width: 100%; justify-content: center; } }
.vq-only { margin: 14px 0 8px; border: 2px dashed #e0b44c; background: #fffaf0; border-radius: 16px; padding: 16px; }
.vq-only .vq-ot { display: flex; align-items: center; gap: 9px; font-weight: 800; color: #5a3d00; margin-bottom: 12px; font-size: .98rem; }
.vq-only .vq-ot i { font-size: 1.2rem; color: #d98e04; }
/* the "Activate VIP — price" button of an "only VIP" product stays on ONE line on a phone: the letters follow the width of the screen (full size from about 450px up) */
.vq-only .vip-btn.big { white-space: nowrap; padding: 15px 10px; gap: 6px; font-size: clamp(.64rem, calc((100vw - 140px) / 15), 1.1rem); }
.vq-only .vip-btn.big svg { width: 15px; height: 15px; }
@media (min-width: 576px) { .vq-only .vip-btn.big { padding: 15px 20px; gap: 8px; } .vq-only .vip-btn.big svg { width: 17px; height: 17px; } }
.vq-pricerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vq-pricerow .vq-big { font-size: 2.1rem; font-weight: 900; color: #8a5200; line-height: 1; }
.vq-lock { display: inline-flex; align-items: center; gap: 6px; background: #1c1400; color: #f9d56e; font-weight: 800; font-size: .74rem; padding: 5px 11px; border-radius: 999px; }
.vip-price-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vip-price-line .vip-old { font-size: 1rem; color: #8b8b95; text-decoration: line-through; }
.vip-price-line .vip-main { font-size: 2.1rem; font-weight: 900; color: #8a5200; }
.vip-member-note { margin: 14px 0 12px; border: 1.5px solid #f3d37a; background: linear-gradient(135deg, #fff7de, #ffefbd); border-radius: 14px; padding: 10px 14px; font-size: .84rem; color: #5a3d00; display: flex; gap: 10px; align-items: flex-start; }
.vip-member-note svg { width: 20px; height: 20px; fill: #e29a05; flex-shrink: 0; margin-top: 1px; }
.vip-member-note b { color: #3a2400; }
.vip-hint { margin-top: 8px; font-size: .78rem; color: #6b7280; text-align: center; }
.pdp-add-btn.vipmode { background: linear-gradient(135deg, #fbe08a, #e29a05) !important; color: #3a2400 !important; border: 0 !important; border-radius: 13px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 10px 22px rgba(226,154,5,.38) !important; font-weight: 800; }
.pdp-buy-btn.vipmode { background: linear-gradient(135deg, #2b1f00, #120d00) !important; color: #f9d56e !important; border: 1.5px solid #c98400 !important; border-radius: 13px !important; box-shadow: inset 0 1px 0 rgba(249,213,110,.25), 0 10px 22px rgba(18,13,0,.35) !important; font-weight: 800; }

/* ── VIP page ── */
.vc-pack { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; background: #fff; border: 2px solid #f3d37a; border-radius: 16px; padding: 14px 18px; margin: 18px 0 14px; box-shadow: 0 6px 22px rgba(226,154,5,.12); }
.vc-pack .vc-name { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #1c1400; }
.vc-pack .vc-term { font-size: .8rem; color: #7a6a46; font-weight: 700; }
.vc-pack .vc-price { display: flex; align-items: baseline; gap: 9px; margin-left: auto; }
.vc-pack .vc-price s { font-size: 1.05rem; color: #8b8b95; font-weight: 700; }
.vc-pack .vc-price b { font-size: 2rem; font-weight: 900; color: #7a4b00; line-height: 1; }
.vc-pack .vc-off { background: #dc2626; color: #fff; font-weight: 900; font-size: .74rem; padding: 3px 9px; border-radius: 999px; align-self: center; }
.vc-pack .vip-btn { padding: 12px 24px; white-space: nowrap; }
/* the "see more" block under the 12 products a visitor / non-member gets to see on the VIP page: the number still waiting + a button that opens the activation window */
.vmore { margin: 16px 0 6px; padding: 16px 18px 18px; text-align: center; background: linear-gradient(180deg, #fffaf0, #fff1c9); border: 2px solid #f3d37a; border-radius: 16px; box-shadow: 0 6px 20px rgba(226,154,5,.13); }
.vmore .vm-n { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 54px; padding: 0 12px; margin-bottom: 8px; border-radius: 999px; background: linear-gradient(135deg, #f9d56e, #e29a05); color: #3a2400; font-size: 1.35rem; font-weight: 900; line-height: 1; box-shadow: 0 6px 16px rgba(226,154,5,.35), 0 0 0 4px rgba(249,213,110,.35); }
.vmore .vm-t { font-size: 1.05rem; font-weight: 900; color: #1c1400; margin-bottom: 12px; text-wrap: balance; }
.vmore .vm-btn { padding: 10px 30px; font-size: .95rem; }
@media (max-width: 575px) {
    .vmore { padding: 14px 12px 16px; }
    .vmore .vm-n { min-width: 48px; height: 48px; font-size: 1.2rem; }
    .vmore .vm-t { font-size: .95rem; margin-bottom: 10px; }
    .vmore .vm-btn { width: 100%; }
}
.vc-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.vc-info .vi { background: #fffaf0; border: 1px solid #f3dfa0; border-radius: 12px; padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; }
.vc-info .vi i { font-size: 1.15rem; color: #d98e04; margin-top: 1px; }
.vc-info .vi b { display: block; font-size: .86rem; color: #3a2400; line-height: 1.3; }
.vc-info .vi span { font-size: .76rem; color: #6b5a36; line-height: 1.4; }
.vc-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, #fff7de, #ffefbd); border: 1.5px solid #f3d37a; border-radius: 14px; padding: 10px 16px; margin: 18px 0 16px; color: #5a3d00; font-size: .88rem; }
.vc-status b { color: #3a2400; }
details.vc-d { margin-bottom: 16px; }
details.vc-d > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; background: #fffaf0; border: 1px solid #f3dfa0; border-radius: 12px; padding: 11px 14px; font-weight: 800; font-size: .9rem; color: #5a3d00; }
details.vc-d > summary::-webkit-details-marker { display: none; }
details.vc-d > summary i { transition: transform .2s; }
details.vc-d[open] > summary i { transform: rotate(180deg); }
details.vc-d .vc-info { margin: 8px 0 0; }
@media (min-width: 768px) { details.vc-d > summary { display: none; } details.vc-d .vc-info { margin: 0; } }
@media (max-width: 767px) { .vc-info { grid-template-columns: 1fr; gap: 8px; } .vc-pack { padding: 12px 14px; } .vc-pack .vc-price { margin-left: 0; } .vc-pack .vip-btn { width: 100%; } .vc-pack .vc-name { width: 100%; justify-content: space-between; } }
.vip-h2 { font-size: 1.35rem; font-weight: 900; margin: 0 0 4px; color: #1c1400; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vip-h2 small { font-size: .8rem; font-weight: 600; color: #7a6a46; }
/* on a phone the sentence under the heading stays on ONE line: the size follows the screen width (26px = page padding + a little room);
   the visitor wording is the longest (Georgian 31.8 em), the member wording is shorter (24.5 em) and keeps its normal size as long as it fits */
@media (max-width: 575px) {
    .vip-h2 small { white-space: nowrap; }
    .vip-h2 small.vh-note-g { font-size: clamp(.56rem, calc((100vw - 26px) / 32.4), .8rem); }
    .vip-h2 small.vh-note-m { font-size: clamp(.56rem, calc((100vw - 26px) / 25.2), .8rem); }
}

/* ── home strip + header + menus ── */
.vh-wrap { margin-top: 2px; margin-bottom: 4px; }
.vh-strip { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; background: linear-gradient(135deg, #f9d56e, #e29a05); border-radius: 16px; padding: 12px 14px 12px 20px; color: #3a2400; box-shadow: 0 8px 24px rgba(226,154,5,.28); }
.vh-strip .vh-l { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.05rem; }
.vh-strip .vh-l svg { width: 24px; height: 24px; fill: #3a2400; flex-shrink: 0; }
.vh-strip .vh-p { display: flex; align-items: baseline; gap: 8px; font-weight: 800; }
.vh-strip .vh-p s { opacity: .6; font-size: .9rem; }
.vh-strip .vh-p b { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.vh-strip .vh-p small { font-weight: 700; opacity: .8; font-size: .78rem; }
.vh-strip .vh-end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.vh-strip .vh-btn { background: #1c1400; color: #f9d56e; border: 0; border-radius: 11px; padding: 11px 20px; font-weight: 800; font-size: .92rem; display: flex; gap: 8px; align-items: center; white-space: nowrap; font-family: inherit; cursor: pointer; }
.vh-strip .vh-btn svg { width: 16px; height: 16px; fill: #f9d56e; }
.vh-strip .vh-all { color: #3a2400; font-weight: 800; font-size: .86rem; white-space: nowrap; text-decoration: none; }
.vh-strip .vh-all:hover { text-decoration: underline; }
.vh-strip.member { background: #fffaf0; border: 1.5px solid #f3d37a; box-shadow: none; }
.vh-strip.member .vh-l svg { fill: #e29a05; }
.vh-strip.member .vh-sub { font-weight: 700; font-size: .84rem; color: #7a6a46; }
.vh-strip.member .vh-sub b { color: #1c1400; }
.vh-strip.member .vh-all { color: #8a5200; }
.section-pill.vip-pill { background: linear-gradient(135deg, #f9d56e, #e29a05); color: #3a2400; }
.section-pill.vip-pill svg { width: 11px; height: 11px; fill: currentColor; margin-right: 3px; }
.vh-strip .vh-btnp { display: none; }
/* ONE line on a phone: "VIP membership" on the left, the button "Activate — price" on the right (a member: "VIP member" on the left, "N days left" on the right).
   The old price, the days, the "VIP products" link and the date of a member are left out there. */
@media (max-width: 575px) {
    .vh-strip { flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; }
    .vh-strip .vh-p, .vh-strip .vh-all, .vh-strip .vh-hide-m, .vh-strip.member .vh-end { display: none; }
    .vh-strip .vh-l { gap: 7px; font-size: clamp(.78rem, 3.7vw, 1rem); white-space: nowrap; min-width: 0; }
    .vh-strip .vh-l svg { width: 20px; height: 20px; }
    .vh-strip .vh-end { margin-left: auto; width: auto; flex-shrink: 0; gap: 0; }
    .vh-strip .vh-btn { padding: 10px 12px; font-size: clamp(.68rem, 3.3vw, .88rem); gap: 6px; }
    .vh-strip .vh-btn svg { display: none; }
    .vh-strip .vh-btnp { display: inline; }
    .vh-strip.member .vh-sub { margin-left: auto; font-size: clamp(.7rem, 3.3vw, .84rem); white-space: nowrap; }
}

.hdr-vip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 12px; background: linear-gradient(135deg, #f9d56e, #e29a05); color: #3a2400; font-weight: 800; font-size: .84rem; text-decoration: none; box-shadow: 0 4px 14px rgba(226,154,5,.35); white-space: nowrap; }
.hdr-vip:hover { color: #3a2400; filter: brightness(1.04); }
.hdr-vip svg { width: 15px; height: 15px; fill: currentColor; }
.hdr-vip small { font-weight: 700; opacity: .75; font-size: .72rem; }
.mbn-vip-ico { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #f9d56e, #e29a05); display: flex; align-items: center; justify-content: center; margin-top: -16px; box-shadow: 0 4px 12px rgba(226,154,5,.5); border: 3px solid #fff; }
.mbn-vip-ico svg { width: 17px; height: 17px; fill: #3a2400; }
.mbn-vip span:last-child { color: #8a5200; font-weight: 800; margin-top: -1px; }
.mobile-menu-link.mm-vip { background: linear-gradient(135deg, #fff4d0, #ffe9a8); color: #7a4b00; font-weight: 800; border-radius: 12px; margin-bottom: 6px; }
.mobile-menu-link.mm-vip svg { width: 16px; height: 16px; fill: #e29a05; margin-right: 8px; }
.udi-icon.udi-vip { background: linear-gradient(135deg, #f9d56e, #e29a05); }
.udi-icon.udi-vip svg { width: 14px; height: 14px; fill: #3a2400; }
.user-dropdown-item .udi-txt small { display: block; margin: 0; font-size: .72rem; color: #8b8b95; font-weight: 600; }

/* ── cart offer ── */
.cn-nudge { margin: 0 0 16px; background: linear-gradient(135deg, #fff7de, #ffecb3); border: 1.5px solid #f1cc66; border-radius: 14px; padding: 13px 15px; }
.cn-nudge .t1 { display: flex; gap: 8px; align-items: center; font-weight: 900; color: #5a3d00; font-size: .95rem; }
.cn-nudge .t1 svg { width: 18px; height: 18px; fill: #e29a05; flex-shrink: 0; }
.cn-nudge .t2 { font-size: .8rem; color: #6b5320; margin: 5px 0 10px; line-height: 1.5; }
.cn-nudge .t2 b { color: #7a4b00; }
.cn-nudge .t2 s { color: #8b8b95; margin-left: 4px; }

/* ── VIP page cards ── */
.vip-card { position: relative; }
.vip-card .vip-rows { margin: 8px 0 10px; }
.vip-card .vr-vip { display: flex; align-items: center; gap: 6px; font-size: 1.22rem; font-weight: 900; color: #8a5200; white-space: nowrap; flex-wrap: wrap; row-gap: 0; }
.vip-card .vr-vip svg { width: 16px; height: 16px; fill: #e29a05; }
.vip-card .vr-vip s { font-size: .78rem; color: #9a9aa5; font-weight: 600; margin-left: 2px; }
.vip-card .vr-std { font-size: .78rem; color: #7a7a85; }
@media (max-width: 575px) { .vip-card .vr-vip { font-size: 1.1rem; } .vip-card .vr-vip s { flex-basis: 100%; margin-left: 0; } }
.cn-nudge .vip-btn.big { font-size: .98rem; padding: 13px 10px; }

/* the price line of a card that shows VIP things has the same height whatever it holds (VIP price with the crown / ordinary price), so "only VIP" cards and neighbours line up */
.product-card:has(.hc-vipmain, .hc-vip, .vo-chip) .product-price { min-height: 27px; }

/* the VIP carousel on the home page: every card of a row is as tall as the tallest one (an "only VIP" card has an extra line, a long price wraps) */
#vipSwiper .swiper-wrapper { align-items: stretch; }
#vipSwiper .swiper-slide { height: auto; }
#vipSwiper .swiper-slide > .product-card { height: 100%; }

/* "variable stock" status of a VIP product: the label on the product page and the notice a VIP member gets instead of the buy buttons */
.pdp-stock.var { color: #b36b00; white-space: nowrap; }
/* the label is a button that opens a small info box (vip.js): looks like the old text, plus a small "i" */
button.pdp-stock.var { border: 0; background: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; text-align: left; }
.pdp-stock.var .pdp-var-i { font-size: .95em; opacity: .75; }
.pdp-meta { position: relative; }
.pdp-var-pop { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(330px, 100%); box-sizing: border-box; background: #fff; color: #4a3b17; border: 1.5px solid #f0b34a; border-radius: 12px; padding: 11px 14px; font-size: .8rem; font-weight: 500; line-height: 1.5; box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.pdp-var-pop::before { content: ""; position: absolute; top: -7px; left: calc(var(--ax, 24px) - 6px); width: 12px; height: 12px; background: #fff; border-left: 1.5px solid #f0b34a; border-top: 1.5px solid #f0b34a; transform: rotate(45deg); }
.pdp-var-pop[hidden] { display: none; }
.vq-only.vq-updating { border-color: #f0b34a; background: #fff6e0; }
.vq-only.vq-updating .vq-ot { margin-bottom: 4px; }
.vq-only.vq-updating .vq-sub { font-weight: 700; color: #7a5a1a; font-size: .9rem; padding-left: 2px; }

/* a product whose stock is being updated (VIP member): the buy button is a slightly grey button that only shows a notice */
.vip-add-btn.vip-paused { background: #dcdce1; color: #5d5d68; box-shadow: none; font-size: clamp(.56rem, 2.8vw, .76rem); }
.vip-add-btn.vip-paused:hover { background: #d3d3d9; }
@media (min-width: 576px) { .vip-add-btn.vip-paused { font-size: .82rem; } }
.card-add-btn.vip-paused, .vo-card .card-add-btn.vip-paused { background: #dcdce1 !important; color: #5d5d68 !important; box-shadow: none !important; }
.btn-add-cart.vip-paused { background: #dcdce1 !important; border-color: #dcdce1 !important; color: #5d5d68 !important; box-shadow: none !important; }
.vq-only.vq-updating .vq-ot { margin-bottom: 0; }

/* the member's "Add to cart" button of an "only VIP" card in the catalog: on tablets the cards are narrow (124-143px), so the letters get smaller and the icon goes */
@media (min-width: 576px) and (max-width: 991px) { .vip-add-btn.vip-add-cat { font-size: .62rem; } .vip-add-btn.vip-add-cat i { display: none; } }

/* the member's status line on the VIP page: on a phone only "N days left" (the date goes), so the block stays on one line */
@media (max-width: 575px) { .vc-status .vc-hide-m { display: none; } .vc-status { flex-wrap: nowrap; } }
@media (max-width: 575px) { .vc-status { padding: 10px 12px; gap: 8px; font-size: .84rem; } .vc-status .vip-badge.lg { padding: 5px 11px; font-size: .8rem; } .vc-status span:not(.vip-badge) { white-space: nowrap; } }

/* ── BPG ExtraSquare Mtavruli on the "activate" / "pay by card" buttons (class vip-bpg: vip.php, home strip, product page x2, cart, the pay button of the popup) ──
   The face holds Georgian, Latin, digits and common punctuation only (no Cyrillic, no ₾ - those fall back to the site font per character) and has ONE weight,
   the face is declared as 400 and the buttons ask for 800 on purpose (user): the browser synthesizes the bold. Russian keeps the site font entirely: with no Cyrillic in the face the letters and the digits would not match. */
@font-face { font-family: 'BPG ExtraSquare Mtavruli'; src: url('bpg_extrasquare_mtavruli_2009.woff2') format('woff2'), url('bpg_extrasquare_mtavruli_2009.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
html:not([lang="ru"]) .vip-btn.vip-bpg, html:not([lang="ru"]) .vq-bar .vq-btn.vip-bpg, html:not([lang="ru"]) .vh-strip .vh-btn.vip-bpg {
    font-family: 'BPG ExtraSquare Mtavruli', 'Noto Sans Georgian', 'Inter', -apple-system, sans-serif; font-weight: 800;
}
/* the wide face must not wrap the two long labels on a phone: one line, the size follows the screen width (popup: sheet padding + button padding + icon = 97px; cart: 150px) */
html:not([lang="ru"]) .va-modal .vip-btn.big.vip-bpg { white-space: nowrap; font-size: clamp(.7rem, calc((100vw - 97px) / 16.8), 1.1rem); }
@media (max-width: 575px) { html:not([lang="ru"]) .cn-nudge .vip-btn.big.vip-bpg { white-space: nowrap; font-size: clamp(.62rem, calc((100vw - 150px) / 14.8), .98rem); } }
/* the cart nudge sits in a narrow column at 992-1199px (button 222px wide): the long label stays on ONE line there (English already fits at its normal size; Georgian / Russian need ~12.5px) */
@media (min-width: 992px) and (max-width: 1199px) { html:not([lang="en"]) .cn-nudge .vip-btn.big { white-space: nowrap; font-size: .78rem; } }

/* ── BPG Arial on the title of the "VIP გააქტიურება" popup (only that h3) ──
   The face holds Georgian, Latin and Cyrillic (no ₾ - the title has none), one weight: the title keeps the weight it always had (900), so the browser synthesizes the bold. */
@font-face { font-family: 'BPG Arial'; src: url('bpg_arial_2009.woff2') format('woff2'), url('bpg_arial_2009.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
.va-modal .va-head h3 { font-family: 'BPG Arial', 'Noto Sans Georgian', 'Inter', -apple-system, sans-serif; }

/* the agreement line under the "pay by card" button of the activation popup (the link opens the terms page in a new tab) */
.va-terms { margin-top: 10px; text-align: center; font-size: .76rem; line-height: 1.4; color: #6b7280; }
.va-terms a { color: #8a5200; font-weight: 700; text-decoration: underline; }

/* a member's lower delivery fee in the cart / checkout summary: the ordinary fee crossed out in front */
.dlv-old { color: #8a93a0; font-weight: 400; font-size: .86em; text-decoration: line-through; margin-right: .15em; }

/* "only VIP" product page, visitor / already-bought view: the ordinary price crossed out between the VIP price and the lock chip (same look as .vip-old of the member view) */
.vq-pricerow .vq-old { font-size: 1rem; color: #8b8b95; text-decoration: line-through; }

/* "-X%" of the VIP price: on an "only VIP" card the badge is in line with the crown, on the right side of the picture (everywhere else it takes the ordinary sale badge's place, top-left) and the dark pill after the amount in the gold price bar;
   on the "only VIP" price line the ordinary "-X% დაზოგვა" label (.pdp-price-save) is used as it is */
.product-badge.vp-vip { background: linear-gradient(135deg, #f9d56e, #e29a05); color: #3a2400; box-shadow: 0 2px 8px rgba(226,154,5,.35); }   /* VIP gold, like the crown badge */
.product-badge.vp-under { top: 11px; left: auto; right: 8px; }   /* 11px = the middle of the crown (8px + half of its height) */
.product-img-wrap:has(.product-gift-icon) .product-badge.vp-under { right: 54px; }   /* a gift icon sits top-right: the badge goes to its left */
.vq-bar .vq-p .vq-pct { display: inline-block; vertical-align: middle; margin-left: 9px; position: relative; top: -2px; background: #1c1400; color: #f9d56e; font-size: .78rem; font-weight: 800; letter-spacing: .02em; line-height: 1; padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgba(18,13,0,.25); }

/* product page, "only VIP" product: the VIP saving ("-X%") on the picture, top-left, in VIP gold (same gold as the crown badge) */
.pdp-discount-badge.pdp-vip-badge { background: linear-gradient(135deg, #f9d56e, #e29a05); color: #3a2400; box-shadow: 0 2px 10px rgba(226,154,5,.35); }