/* Perlada Home (perlenahome.com's look) — the warm light of a candle and the colours of the sand, on the structure of amonra.bg
   (header with the cart, cards, product page, cart drawer, cart and checkout pages). Phone first, then computer. */

/* Onest: the closest font to Candlera's Plus Jakarta Sans that has Bulgarian letters (Асан, 16.10.2026). */
@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/onest-cyrillic.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/onest-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Prata for every heading, like "Обобщение" (Асан, 16.10.2026: the labels above headings, the questions, the box and
   table titles, the steps); text, prices, buttons and fields stay in Onest. One weight only, so everything set in it
   stays at 400 — a heavier weight would be faked by the browser and smear the thin strokes. */
@font-face {
	font-family: "Prata";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/prata-cyrillic.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Prata";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/prata-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* white and caramel, as on candleracandle.eu (Асан, 16.10.2026). --accent is the caramel itself (the top bar,
	   buttons, hover, stars); --accent-2 is a deeper caramel for small caramel text, which the light one would leave
	   too faint on white. */
	--bg: #ffffff;
	--bg-2: #f5f1ec;
	--paper: #ffffff;
	--field: #ffffff;
	--ink: #222222;
	--ink-2: #737373;
	--line: #e6e6e6;
	--chip: rgba(0, 0, 0, .18);
	--accent: #c49a6c;
	--accent-2: #a77d4f;
	--accent-line: rgba(196, 154, 108, .5);
	--ok: #2e7048;
	--err: #b3261e;
	--red: #d4202c; /* the count on the bag and the saving in the packs (Асан, 16.10.2026) */
	--badge: var(--red);
	--star: #c49a6c;
	--star-off: rgba(0, 0, 0, .12);
	--star-line: rgba(0, 0, 0, .35);
	--scrim: rgba(0, 0, 0, .45);
	--r: 18px;
	--r-s: 12px;
	--wrap: 1440px; /* one width for the whole site, the scent grid's (Асан, 20.10.2026) */
	--serif: "Prata", Georgia, "Times New Roman", serif;
	--sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 26px -14px rgba(0, 0, 0, .18);
	--star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.8-4.9 4.5 1.3 6.5L12 17.1l-5.9 3.3 1.3-6.5L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E");
	--star-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.8l2.4 5 5.5.7-4 3.8 1 5.4L12 16l-4.9 2.7 1-5.4-4-3.8 5.5-.7z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
	--av-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='14' r='6.5' fill='%23fff'/%3E%3Cpath d='M5 36c1.2-7.5 6.6-11.5 13-11.5S29.8 28.5 31 36z' fill='%23fff'/%3E%3C/svg%3E");
	color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
/* a quick second tap on a button or a photo must not zoom the page on the iPhone (Асан, 21.10.2026: the gallery
   arrows did); zooming with two fingers stays */
a, button, input, label, select, summary, textarea, .g-main, .g-thumbs { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-synthesis: none; line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.45rem); }
p, dl, dd, figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 15px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.label { margin: 0; font: 400 .82rem/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

/* ---------- buttons ---------- */
/* every button has the shape of "Завърши поръчката" (Асан, 21.10.2026): soft corners, bold capitals. The same corner
   and capitals are on .card-add, .rel-btn and .rv-submit below. */
.btn, .button, a.button, button.button, #place_order, .single_add_to_cart_button, .checkout-button {
	appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 52px; padding: 0 28px; border: 0; border-radius: .625rem;
	background: var(--accent); color: #fff; font: 700 1.02rem/1.15 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
	box-shadow: 0 8px 20px -12px rgba(196, 154, 108, .8); transition: background .2s, transform .15s;
}
.btn:hover, .button:hover, #place_order:hover, .single_add_to_cart_button:hover, .checkout-button:hover { background: var(--accent-2); color: #fff; }
.btn:active, .button:active { transform: translateY(1px); }
/* two classes, so it wins over "a.button" above */
.button.loading, .single_add_to_cart_button.loading { opacity: .6; pointer-events: none; }
.button:disabled, .button.disabled, .button[disabled] { opacity: .45; cursor: not-allowed; }
.link-add { display: inline-block; padding: .3rem 0; border-bottom: 1px solid var(--accent-line); font-weight: 700; font-size: .95rem; color: var(--accent-2); text-decoration: none; }
.link-add:hover { border-bottom-color: var(--accent); }
a.added_to_cart { display: none; }

/* ---------- header: laid out as on candleracandle.eu (Асан, 16.10.2026) ----------
   A white bar: the logo on the left, the menu in the middle, the cart on the right; on the phone the burger, the logo
   in the middle and the cart (no search, Асан 21.10.2026). It slides away while scrolling down and comes back up.
   Its content stands on the same edges as every section below (Асан, 20.10.2026). */
.hdr { position: sticky; top: 0; z-index: 40; background: #fff; transition: transform .3s ease; }
.hdr.is-up { transform: translate3d(0, -100%, 0); }
.hdr-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; min-height: 75px; padding: 0 15px; }
.logo { display: inline-flex; text-decoration: none; }
.logo img { display: block; width: 160px; height: auto; }
.flame { width: .78em; height: 1.1em; color: var(--accent); flex: none; }
.hdr .logo { grid-column: 2; }
@media (max-width: 340px) { .logo img { width: 140px; } } /* the narrowest phones: room left for the icons */
.nav { display: none; }
.burger { grid-column: 1; justify-self: start; appearance: none; display: inline-flex; padding: 8px; margin-left: -8px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.burger svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.hdr-icons { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; padding-right: 4px; }
.bag { appearance: none; display: inline-flex; padding: 8px; margin: -8px; border: 0; background: none; color: var(--ink); text-decoration: none; cursor: pointer; }
.bag-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.bag-icon { position: relative; display: block; }
.bag-icon b { position: absolute; top: -10px; right: -12px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--badge); color: #fff; font: 400 10px/17px var(--sans); text-align: center; }
.bag-icon b[data-n="0"] { display: none; }
@media (min-width: 900px) {
	.hdr-in { max-width: var(--wrap); min-height: 83px; margin: 0 auto; } /* logo, menu and icons on the edges of the page (Асан, 20.10.2026) */
	.burger { display: none; }
	.hdr .logo { grid-column: 1; justify-self: start; }
	.logo img { width: 190px; }
	.nav { grid-column: 2; display: flex; gap: 34px; }
	.nav a { position: relative; padding: 5px 0; font-size: 16px; line-height: 16px; color: var(--ink); text-decoration: none; transition: color .3s; }
	.nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: currentColor; transition: width .3s; }
	.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
	.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
	.hdr-icons { gap: 19px; padding-right: 0; }
}
/* the bar above the header: caramel with white words, as on candleracandle.eu */
.strip { margin: 0; padding: 10px 16px; min-height: 41px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.6; text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 24px; }

/* ---------- home: the video over the whole width, the words on it ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; min-height: min(80svh, 660px); background: #1a1a1a; color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the video shows once it really plays (assets/js/svesht.js); until then, or when the phone will not play it, the picture */
.hero-video { opacity: 0; transition: opacity .5s; }
.hero-video.is-playing { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 42%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .18) 100%); }
.hero-in { position: relative; padding-top: 40px; padding-bottom: 40px; text-align: center; }
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.9rem); letter-spacing: -.01em; text-shadow: 0 2px 22px rgba(0, 0, 0, .35); }
.lede { margin: 14px auto 0; max-width: 30em; font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.35 var(--serif); color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hero-price { margin-top: 14px; font-size: 1rem; }
.hero-price b { margin-right: .2em; font: 400 1.7rem/1 var(--serif); }
.hero-btns { margin-top: 20px; display: grid; justify-items: center; gap: 12px; }
.hero-btns .btn { min-width: 230px; }
@media (min-width: 900px) {
	.hero { align-items: center; min-height: min(84vh, 760px); }
	.hero-media::after { background: linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, .05) 72%); }
	.hero-in { padding-top: 64px; padding-bottom: 64px; text-align: left; }
	.hero-in > * { max-width: 560px; }
	.lede { margin-left: 0; }
	.hero-btns { display: flex; justify-content: flex-start; }
	.hero-btns .btn { min-width: 0; }
}
.ticks { list-style: none; margin: 0 auto; padding: 18px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: .92rem; }
.ticks li { display: flex; gap: .6em; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(196, 154, 108, .25); }
@media (min-width: 900px) { .ticks { grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 64px; padding: 24px 15px; font-size: 1rem; } } /* two lines now, side by side in the middle */

/* ---------- the scents as cards (home and /aromati/) ---------- */
.coll { padding: 52px 0; background: var(--bg-2); }
.coll--page { background: var(--bg); padding-top: 36px; }
.sec-head { display: grid; justify-items: center; gap: .6rem; margin-bottom: 28px; text-align: center; }
.sec-sub { max-width: 36em; color: var(--ink-2); }
.pg-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 15px; }
.card { display: grid; gap: .35rem; align-content: start; min-width: 0; text-align: center; }
.card-link { display: grid; gap: .25rem; color: inherit; text-decoration: none; }
.card-img { position: relative; display: block; aspect-ratio: 1 / 1; margin-bottom: .55rem; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
/* with the mouse over a card the second photo comes in and slowly grows, as on sateno.bg (Асан, 21.10.2026) */
.card-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .5s, transform 2s cubic-bezier(0, 0, .44, 1.18); }
@media (hover: hover) { .card:hover .card-hover { opacity: 1; transform: scale(1.09); } }
.card-name { font: 400 1.08rem/1.25 var(--serif); }
.card-link .stars { justify-self: center; } /* the name, the stars, the price — as on "Другите аромати"; the colour is no longer written on the card (Асан, 27.10.2026) */
.card-price { font-weight: 700; font-size: 1.08rem; }
/* every button is the one caramel (Асан, 16.10.2026: „бутоните да са 1 цвят“) */
.card-add { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: .35rem; border-radius: .625rem; background: var(--accent); font: 700 .95rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none; cursor: pointer; transition: background .2s; }
.card-add:hover { background: var(--accent-2); color: #fff; }
.card-add.is-out { background: var(--bg-2); color: var(--ink-2); cursor: default; }
.empty-note { text-align: center; color: var(--ink-2); }
/* the grid as on candleracandle.eu/collections (Асан, 16.10.2026): 2 a row on the phone, 3 from the tablet up, square
   photos — 450 px at 1440 px and wider (the row stops at 1440 px: 15 px at the edges, 30 px between) */
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 30px; } }
@media (min-width: 900px) { .coll { padding: 80px 0; } }

/* ---------- why ---------- */
.why { padding: 56px 0; }
.why-in { display: grid; gap: 22px; }
.why-fig img { width: 100%; box-shadow: var(--shadow); }
/* the reasons as a list with green ticks, as on sateno.bg (Асан, 21.10.2026), under the words beside the photo.
   The tick is the shape Асан sent (21.10.2026): a ✔ with a short thick left arm and a long right arm that thins to a
   point, in his green #2aa65c, with sateno.bg's soft shadow */
.why-txt p { margin: 16px 0 28px; font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 32px; }
.why-list li { display: flex; align-items: center; gap: 12px; font-size: 1.08rem; line-height: 1.35; color: var(--ink); }
.why-list li::before {
	content: ""; flex: none; width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgba(47, 113, 57, .12));
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232aa65c' d='M2.4 12.7c1-1.1 2.5-1.4 3.6-.5l3.4 3.2C12.6 10.9 16.4 6.8 21.3 3.6c.4-.2.7.2.4.5-4.4 4.2-8 9-10.7 14.5-.5 1-1.9 1.2-2.6.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 720px) { .why-list { grid-template-columns: 1fr 1fr; } }
/* two equal halves, the words start level with the top of the photo (Асан, 21.10.2026: "too empty above") and the ticks
   spread down to its bottom ("fill the space below"); beside the photo they go one under another, so none breaks onto
   a second line. Where the words are taller than the photo, the ticks keep their own gap. */
@media (min-width: 900px) {
	.why { padding: 84px 0; }
	.why-in { grid-template-columns: 1fr 1fr; gap: 56px; }
	.why-fig { align-self: start; }
	.why-txt { display: flex; flex-direction: column; }
	.why-list { flex: 1; grid-template-columns: 1fr; align-content: space-between; }
}

/* ---------- delivery, payment, returns (the page "Доставка и връщане") ---------- */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
.svc div { display: grid; gap: .45rem; align-content: start; }
.svc dt { font: 400 1.15rem/1.25 var(--serif); color: var(--accent-2); }
.svc dd { font-size: .96rem; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 900px) { .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2.5rem; } .pg-sec .svc { text-align: center; } /* "Доставка и връщане": centred under the title (Асан, 22.10.2026) */ }
@media (max-width: 380px) { .svc { grid-template-columns: minmax(0, 1fr); } }

/* ---------- questions, accordions ---------- */
.faq { padding: 56px 0; } /* the last section of the home page (no safety section under it since 21.10.2026) */
.faq h2 { margin-bottom: 14px; }
details { border-bottom: 1px solid var(--line); } /* the lines reach the edge of the page, as every section (Асан, 20.10.2026) */
summary { position: relative; padding: 16px 40px 16px 0; font: 400 1.12rem/1.3 var(--serif); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 11px; font-size: 1.5rem; color: var(--accent); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details > p { max-width: 780px; padding-bottom: 16px; color: var(--ink-2); } /* the answer keeps a reading width */

/* ---------- product page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: .3rem .6rem; padding-top: 18px; padding-bottom: 10px; font-size: .86rem; color: var(--ink-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs [aria-current] { color: var(--ink); }
.pdp { display: grid; gap: 24px; padding-bottom: 48px; }
.gallery { display: grid; gap: .75rem; min-width: 0; }
/* the big photo slides as on sateno.bg (Асан, 21.10.2026): 20 px round corners, 0.3 s slide, thin white arrows with a
   shadow that come in on hover (always there on the phone), the dots at the bottom; the thumbnails stay */
.g-main { position: relative; min-width: 0; overflow: hidden; border-radius: 20px; background: var(--bg-2); }
.g-track { display: flex; transition: transform .3s ease; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.g-track.is-drag { transition: none; cursor: grabbing; }
.g-slide { flex: 0 0 100%; min-width: 0; }
.g-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.g-main img, .g-main video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-2); -webkit-user-drag: none; }
/* the arrows stay there, small and plain (Асан, 21.10.2026): a light see-through circle, a thin arrow, a soft shadow */
.g-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .72); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .16); cursor: pointer; transition: background .2s; }
.g-arrow::before { content: ""; position: absolute; inset: -8px; } /* a bigger target for the finger */
.g-prev { left: 12px; }
.g-next { right: 12px; }
.g-arrow:hover { background: rgba(255, 255, 255, .92); }
.g-arrow svg { width: 6px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.g-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 8px; line-height: 0; }
.g-dot { position: relative; width: 10px; height: 10px; padding: 0; border: 1px solid rgba(0, 0, 0, .45); border-radius: 50%; background: rgba(255, 255, 255, .5); box-shadow: 0 1px 3px rgba(0, 0, 0, .55); cursor: pointer; transition: transform .25s, background .25s; }
.g-dot::before { content: ""; position: absolute; inset: -6px -4px; } /* a bigger target for the finger */
.g-dot[aria-current="true"] { background: #fff; border-color: rgba(0, 0, 0, .55); box-shadow: 0 1px 4px rgba(0, 0, 0, .7); transform: scale(1.25); }
@media (max-width: 899px) {
	.g-arrow { width: 28px; height: 28px; margin-top: -14px; }
	.g-prev { left: 10px; }
	.g-next { right: 10px; }
}
.g-thumbs { display: flex; gap: 15px; overflow-x: auto; padding-bottom: .25rem; }
.g-thumb { appearance: none; position: relative; flex: 0 0 80px; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--line); overflow: hidden; background: var(--bg-2); cursor: pointer; }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; }
.g-thumb[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.g-play { position: absolute; inset: 0; display: grid; place-items: center; }
.g-play::before { content: ""; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(0, 0, 0, .5); }
.g-play::after { content: ""; position: absolute; border-style: solid; border-width: .38rem 0 .38rem .6rem; border-color: transparent transparent transparent #fff; margin-left: .15rem; }
.pinfo { display: grid; gap: 1.05rem; min-width: 0; }
.pinfo h1 { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.95rem); line-height: 1.25; }
.price { font: 400 1.75rem/1 var(--serif); }
.price del { margin-right: .4rem; opacity: .55; font-size: .75em; }
.price ins { text-decoration: none; }
form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; margin: 0; }
form.cart .quantity { display: none; } /* the pack sets the quantity */
/* packs, as on candleracandle.eu (Асан, 16.10.2026): the chosen one white with a dark frame, the others light beige */
.packs { flex: 1 1 100%; display: grid; gap: 12px; min-width: 0; margin-bottom: 4px; }
.packs-h { display: flex; align-items: center; gap: 12px; margin: 0 0 2px; font: 400 1.15rem/1.3 var(--serif); color: var(--accent-2); }
.packs-h::before, .packs-h::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }
.pack { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3px 14px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); cursor: pointer; transition: border-color .2s, background .2s; }
.pack.is-on { padding: 14px 16px; border: 2px solid var(--ink); background: #fff; }
.pack input { grid-row: 1 / span 2; appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--ink-2); border-radius: 50%; background: #fff; cursor: pointer; }
.pack input:checked { border-color: var(--ink); }
.pack input:checked::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.pack input:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.pack-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.pack-name b { font-weight: 600; font-size: 1.02rem; }
.pack-name small { font-size: .86rem; color: var(--ink-2); }
.pack-save { padding: 2px 8px; border-radius: 6px; background: rgba(196, 154, 108, .2); color: var(--accent-2); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.pack-sub { grid-column: 2; font-size: .86rem; color: var(--ink-2); }
.off-pct { font-weight: 700; color: var(--red); white-space: nowrap; } /* the saving in per cent: packs, drawer, cart */
.pack-price { grid-column: 3; grid-row: 1 / span 2; font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.pack-tag { position: absolute; top: -10px; right: 14px; padding: 2px 10px; border-radius: 4px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pack.is-out { opacity: .5; cursor: not-allowed; }
form.cart .single_add_to_cart_button { flex: 1 1 12rem; }
.quantity { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 999px; background: var(--field); overflow: hidden; }
.quantity .qty { width: 2.8rem; text-align: center; border: 0; background: transparent; font: 600 1rem/1 var(--sans); -moz-appearance: textfield; appearance: textfield; }
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.q-btn { appearance: none; min-width: 2.8rem; border: 0; background: none; font: 400 1.3rem/1 var(--sans); color: var(--ink); cursor: pointer; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; color: var(--ink-2); }
.trust li { display: flex; align-items: center; gap: .6rem; }
.trust li::before { content: ""; flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
.stock { font-size: .88rem; color: var(--ink-2); }
.stock.out-of-stock { color: var(--err); }
.desc { padding-top: 36px; }
/* the description, open, as Асан's text (21.10.2026): a heading, paragraphs, "Характеристика" and "Начин на употреба".
   Over the whole width of the page, as on sateno.bg, so it stands in the middle and not to the left */
.desc-body h2 { margin-bottom: 14px; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.desc-body h3 { margin: 26px 0 10px; font: 400 1.25rem/1.3 var(--serif); }
.desc-body p, .desc-body li { color: var(--ink-2); line-height: 1.65; }
.desc-body p + p { margin-top: .8rem; }
.desc-body strong { color: var(--ink); font-weight: 600; }
.desc-body ul, .desc-body ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; }
.desc-body li::marker { color: var(--accent-2); }
/* the photo area as on candleracandle.eu (Асан, 16.10.2026): square photos, the row up to 1440 px. From 1200 px the
   thumbnails stand in a column left of the big photo (80 px, 15 px apart); the big photo takes 60 % and the text 40 % of
   what is left, 120 px apart — 715 px and 480 px at 1440 px and wider. 900–1199 px: two columns, thumbnails under it. */
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.43fr) minmax(0, 1fr); gap: 30px; align-items: start; padding-bottom: 72px; } }
@media (min-width: 1200px) {
	.pdp { grid-template-columns: calc(95px + (100% - 215px) * .6) minmax(0, 1fr); column-gap: 120px; }
	.gallery { grid-template-columns: 80px minmax(0, 1fr); gap: 15px; align-items: start; }
	.g-main { grid-column: 2; grid-row: 1; }
	.g-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; gap: 15px; overflow: visible; padding: 0; }
}

/* the photo full screen is PhotoSwipe's default skin, as on sateno.bg; like there, without the counter */
.pswp__counter { display: none; }

/* "Другите аромати": the carousel of amonra.bg */
.rel { padding-top: 24px; }
.rel-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.rel-line { flex: 1 1 0; height: 1px; background: var(--line); }
.rel-head h2 { flex: none; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); text-align: center; }
.rel-car { position: relative; }
.rel-track { list-style: none; margin: 0; padding: 5px 0; display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.rel-track::-webkit-scrollbar { display: none; }
.rel-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.rel-item { flex: 0 0 62%; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; scroll-snap-align: start; }
.rel-img { display: block; width: 100%; margin-bottom: .9rem; }
.rel-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bg-2); -webkit-user-drag: none; }
.rel-name { font: 400 1.05rem/1.3 var(--serif); color: var(--ink); text-decoration: none; }
.rel-item .stars { margin-block: .5rem .5rem; }
.rel-price { margin-bottom: .8rem; font-weight: 700; font-size: 1.1rem; }
.rel-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border-radius: .625rem; background: var(--accent); color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.rel-btn:hover { background: var(--accent-2); }
.rel-arrow { display: none; }
@media (min-width: 769px) {
	.rel-item { flex-basis: calc(20% - .9rem); }
	.rel-arrow { position: absolute; top: 32%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 2.875rem; height: 2.875rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--field); color: var(--ink); font-size: 1.5rem; box-shadow: 0 3px 10px rgba(0, 0, 0, .15); cursor: pointer; }
	.rel-prev { left: -12px; }
	.rel-next { right: -12px; }
}

/* "Пясъчната свещ в действие": the video carousel of candleracandle.eu (Асан, 22.10.2026) — 9:16 cards, all five
   side by side on a computer, a swipe on the phone; the name on a dark fade at the bottom */
.vids { padding-top: 24px; }
.vids--home { padding-top: 56px; } /* on the home page, after the beige scents */
.vids--pdp { padding-top: 36px; } /* on the scent page, under the description, as far as .desc is from the photos */
.vids-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.vids-line { flex: 1 1 0; height: 1px; background: var(--line); }
.vids-head h2 { flex: none; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); text-align: center; }
.vids-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vids-track::-webkit-scrollbar { display: none; }
.vids-item { flex: 0 0 52%; min-width: 0; scroll-snap-align: start; }
.vids-card { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--bg-2); cursor: pointer; }
.vids-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vids-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 10px 10px; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); color: #fff; font: 400 .875rem/1.5 var(--sans); text-align: left; }
/* the phone's hints that the row goes on (Асан, 23.10.2026): arrows on its edges, a dot per film, and once, when the row
   comes into view, the cards slide a little to the left and back */
.vids-rail { position: relative; }
.vids-arrow { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; }
.vids-arrow[hidden] { display: none; }
.vids-arrow svg { width: 8px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vids-prev { left: 8px; }
.vids-next { right: 8px; }
.vids-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.vids-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.vids-dots i.is-on { background: var(--accent); transform: scale(1.25); }
.vids-track.is-hint .vids-item { animation: vids-hint 1.1s ease-in-out; }
@keyframes vids-hint { 40% { transform: translateX(-56px); } }
@media (min-width: 769px) {
	.vids-item { flex-basis: calc(20% - .8rem); }
	.vids-arrow, .vids-dots { display: none; } /* all five side by side, nothing to swipe */
}

/* the player: the whole film (sound at the viewer's tap), the bar of how far it is, the next film when one ends */
dialog.vplay { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
dialog.vplay[open] { display: flex; align-items: center; justify-content: center; }
dialog.vplay::backdrop { background: rgba(0, 0, 0, .86); }
.vplay-stage { position: relative; height: calc(100% - 4rem); aspect-ratio: 9 / 16; max-width: calc(100% - 8rem); border-radius: 12px; overflow: hidden; background: #000; }
.vplay-vid { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.vplay-bar { position: absolute; top: 10px; left: 10px; right: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; pointer-events: none; }
.vplay-bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s linear; }
.vplay-sound, .vplay-arrow, .vplay-close { display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; }
.vplay-sound svg, .vplay-arrow svg, .vplay-close svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vplay-sound { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; }
.vplay-sound svg { width: 22px; height: 22px; }
.vplay-cone { fill: currentColor; }
.vplay-cross, .vplay-sound.is-muted .vplay-waves { display: none; }
.vplay-sound.is-muted .vplay-cross { display: inline; }
.vplay-arrow { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .16); }
.vplay-arrow:hover { background: #fff; }
.vplay-arrow svg { width: 8px; height: 16px; }
.vplay-prev { left: 1.5rem; }
.vplay-next { right: 1.5rem; }
.vplay-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; }
.vplay-close svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
	/* the phone: the film over the whole screen, the arrows on its edges */
	.vplay-stage { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
	.vplay-bar { top: calc(10px + env(safe-area-inset-top)); }
	.vplay-close { top: calc(22px + env(safe-area-inset-top)); right: 10px; }
	.vplay-sound { bottom: calc(14px + env(safe-area-inset-bottom)); }
	.vplay-arrow { width: 36px; height: 36px; margin-top: -18px; background: rgba(255, 255, 255, .72); }
	.vplay-prev { left: 8px; }
	.vplay-next { right: 8px; }
}

/* reviews */
.stars { --r: 0; --s: 1.2rem; display: inline-block; flex: none; width: calc(var(--s) * 5); height: var(--s); background: linear-gradient(90deg, var(--star) calc(var(--r) * 20%), var(--star-off) 0); -webkit-mask: var(--star-shape) 0 0 / var(--s) var(--s) repeat-x; mask: var(--star-shape) 0 0 / var(--s) var(--s) repeat-x; }
.stars--card { --s: 1rem; }
.stars--rv { --s: .8125rem; }
.rating-line { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; font-size: .95rem; color: var(--ink-2); text-decoration: none; }
.rating-line:hover span { color: var(--accent-2); }
.rvs { padding-block: 36px 64px; }
.reviews { max-width: 780px; }
.rv-h { margin-bottom: 1.3rem; font: 400 1.35rem/1.3 var(--serif); }
.rv-list { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.4rem; }
.rv { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; padding: .375rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.rv-av { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent) var(--av-shape) center / 100% no-repeat; }
.rv-body { position: relative; display: grid; gap: .4rem; min-width: 0; padding-right: 5rem; }
.rv-body > .stars { position: absolute; top: .15rem; right: 0; }
.rv-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; font-size: .88rem; }
.rv-who, .rv-when { font-weight: 600; }
.rv-ok { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.rv-text { color: var(--ink-2); }
.rv-wait { font-size: .85rem; color: var(--accent-2); }
.rv-none { margin-bottom: 2.5rem; color: var(--ink-2); }
.rv-pages ul { list-style: none; display: flex; gap: .8rem; margin: -1.5rem 0 2.5rem; padding: 0; }
#respond { display: grid; gap: .8rem; }
#respond .rv-h { margin-bottom: .2rem; }
.rv-note { font-size: .86rem; color: var(--ink-2); }
.comment-form { display: grid; gap: .9rem; }
.comment-form p { margin: 0; }
#respond label, .rv-rate legend { display: block; margin-bottom: .35rem; font-size: .9rem; font-weight: 600; }
.rv-req { margin-left: .1rem; color: var(--err); }
#respond input[type="text"], #respond input[type="email"], #respond textarea { display: block; width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--field); font-size: 16px; }
#respond textarea { height: 9.5rem; resize: vertical; }
#respond input:focus, #respond textarea:focus { outline: none; border-color: var(--accent); }
.rv-rate { display: block; margin: 0; padding: 0; border: 0; }
.rv-rate legend { float: left; margin: 0 .6rem 0 0; line-height: 1.1rem; }
.rv-stars { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.rv-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#respond .rv-stars label { width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; background: var(--star-line); -webkit-mask: var(--star-outline) center / 100% no-repeat; mask: var(--star-outline) center / 100% no-repeat; }
#respond .rv-stars input:checked ~ label, #respond .rv-stars label:hover, #respond .rv-stars label:hover ~ label { background: var(--star); -webkit-mask-image: var(--star-shape); mask-image: var(--star-shape); }
.rv-stars input:focus-visible + label { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.rv-submit { min-width: 9rem; min-height: 46px; padding: 0 1.5rem; border: 0; border-radius: .625rem; background: var(--accent); color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.rv-submit:hover { background: var(--accent-2); }

/* ---------- notices and forms ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper { margin-bottom: 1.25rem; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; margin: 0 0 1.25rem; padding: 1rem 1.2rem; border: 1px solid var(--accent-line); border-radius: var(--r-s); background: var(--paper); font-size: .95rem; list-style: none; }
.woocommerce-error { display: grid; border-color: var(--err); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button, .woocommerce-info .button { min-height: 40px; padding: 0 1.1rem; order: 2; }
.wc-main > .woocommerce-notices-wrapper { max-width: var(--wrap); margin: 1.5rem auto 0; padding-inline: 15px; }
.form-row { display: grid; gap: .35rem; margin: 0 0 1rem; padding: 0; }
.form-row label { font-size: .92rem; font-weight: 600; }
.form-row .required { color: var(--accent-2); text-decoration: none; border: 0; }
.form-row .optional { font-weight: 400; color: var(--ink-2); }
#billing_email_field .optional { display: none; } /* no "(по избор)" by the e-mail (Асан, 22.10.2026) */
.input-text, .woocommerce select, .woocommerce textarea, .form-row input[type="text"], .form-row input[type="tel"], .form-row input[type="email"] { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--field); color: var(--ink); font: 400 16px/1.4 var(--sans); }
.woocommerce textarea { min-height: 90px; }
.input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 154, 108, .25); }
.woocommerce-invalid .input-text { border-color: var(--err); }
.woocommerce-input-wrapper { display: block; }
.woocommerce form .form-row input[type="checkbox"] { accent-color: var(--accent); margin-right: .5rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---------- pages: cart, checkout ---------- */
main.page { padding-top: 32px; padding-bottom: 64px; }
.page-title { margin-bottom: 24px; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); }
.page-body > * + * { margin-top: 1rem; }
.shop_table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.shop_table th, .shop_table td { padding: .9rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.shop_table thead th { font: 400 .85rem/1.3 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.shop_table .order-total td, .shop_table .order-total th { font-size: 1.05rem; font-weight: 700; }

/* the cart, as on sateno.bg (Асан, 16.10.2026): the steps across the top; the products on the left and the summary on
   the right from 1280 px (under them before that). A row: the photo, the name and the scent, the price of one bag,
   − / +, the line total, the bin. On the phone a row is a card, as in the drawer. */
.order-steps { margin-bottom: 24px; background: var(--accent); color: #fff; }
.order-steps ol { list-style: none; margin: 0; padding: 14px 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; font: 400 .8rem/1.3 var(--serif); letter-spacing: .06em; text-transform: uppercase; }
.order-steps li { white-space: nowrap; color: rgba(255, 255, 255, .8); }
.order-steps li[aria-current] { color: #fff; }
.order-steps li:not(:last-child)::after { content: "→"; margin-left: 10px; color: #fff; } /* on a narrow phone the line breaks after an arrow, not before one */
.shop_table.cart thead th { padding: 16px 12px; border: 0; background: var(--bg-2); color: var(--ink); }
.shop_table.cart td { padding: 18px 12px; }
.shop_table.cart .product-thumbnail { width: 134px; }
.shop_table.cart .product-thumbnail img { width: 110px; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-2); }
.shop_table.cart .product-name { font-size: .95rem; line-height: 1.4; }
.shop_table.cart .product-name a { font-weight: 600; text-decoration: none; }
.shop_table.cart .product-name a:hover { color: var(--accent-2); }
.ci-opt { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .82rem; color: var(--ink-2); }
.ci-opt i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.ci-l { display: block; margin-bottom: 3px; font-size: .7rem; font-weight: 600; color: var(--ink-2); }
.shop_table.cart .product-price, .shop_table.cart .product-subtotal { white-space: nowrap; }
.shop_table.cart .product-subtotal .amount { font-weight: 700; font-size: 1.05rem; }
.woocommerce-cart-form .quantity { border: 1px solid var(--chip); border-radius: 10px; }
.woocommerce-cart-form .q-btn { min-width: 2.6rem; height: 2.75rem; }
.woocommerce-cart-form .q-btn:hover { background: var(--bg-2); }
.woocommerce-cart-form .quantity .qty { width: 2.6rem; }
.shop_table.cart a.remove { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: var(--bg-2); color: var(--ink); transition: background-color .2s, color .2s; }
.shop_table.cart a.remove:hover { background: var(--ink); color: #fff; }
.shop_table.cart a.remove svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.shop_table .actions { padding-top: 1.2rem; }
.shop_table .coupon { display: none; }
.shop_table button[name="update_cart"] { min-height: 44px; box-shadow: none; }
.cart-collaterals { display: grid; margin-top: 28px; }
.cart_totals { width: min(100%, 460px); justify-self: end; padding: 4px 22px 22px; border: 1px solid var(--accent); border-radius: 16px; background: var(--paper); }
.ct-h { padding: 16px 0 14px; color: var(--accent-2); font-size: 1.35rem; }
.ct-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 15px 0; border-top: 1px solid var(--line); font-weight: 500; }
.ct-row b { font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.ct-row--off b { color: var(--ok); }
.ct-row--total { margin: 6px -14px 0; padding: 18px 14px; border-top: 0; border-radius: 12px; background: var(--bg-2); font-size: 1.15rem; }
.ct-row--total b { font-size: 1.45rem; }
.ct-hint { margin-top: 12px; font-size: .88rem; font-weight: 600; color: var(--accent-2); }
.wc-proceed-to-checkout { margin-top: 18px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; }
.ct-pay { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font: 400 1.1rem/1.3 var(--serif); color: var(--accent-2); }
.ct-cod { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: 600 .84rem/1.3 var(--sans); }
.ct-cod svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
@media (min-width: 768px) {
	.order-steps ol { padding: 24px 20px; gap: 6px 16px; font-size: 1.2rem; }
	.order-steps li:not(:last-child)::after { margin-left: 16px; }
}
@media (min-width: 1280px) {
	.woocommerce-cart .page-body > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 460px); column-gap: 32px; align-items: start; }
	.woocommerce-cart .page-body > .woocommerce > * { grid-column: 1 / -1; }
	.woocommerce-cart .page-body > .woocommerce > .woocommerce-cart-form { grid-column: 1; }
	.woocommerce-cart .page-body > .woocommerce > .cart-collaterals { grid-column: 2; margin-top: 0; }
	.cart_totals { width: 100%; }
}
/* the checkout, as on sateno.bg (Асан, 16.10.2026): the steps across the top; on the left phone, email and name,
   "Метод на доставка" as cards (the chosen one green, with the office list or the address in it) and the note; on the
   right the order as cards (as in the drawer), the sums (as in the cart), "Начин на плащане" and the button. One
   column on the phone, the order after the delivery. */
form.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; align-items: start; }
form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.co-main, .co-side, #customer_details, #order_review { min-width: 0; }
#billing_country_field { display: none !important; } /* Spain only: the one choice is sent anyway; WooCommerce's script shows it again otherwise */
.woocommerce-additional-fields h3 { display: none; } /* the note needs no heading */
/* "Dirección de envío" (inc/envio.php): the heading as "Метод на доставка" on perlenahome.com, the fields as the customer's */
#envio { clear: both; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; margin: 30px 0 28px; }
#envio > h3 { grid-column: 1 / -1; margin: 0 0 15px; color: var(--accent-2); font: 600 16px/1.4 var(--sans); text-align: left; }
#envio .form-row-wide, #envio .envio-nota { grid-column: 1 / -1; }
.envio-nota { margin: -4px 0 0; color: var(--ink-2); font-size: .85rem; }
.co-review { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
/* on the phone the order card gets the room for − / + and the sum (Асан, 22.10.2026): a thinner frame round the order and a
   slightly narrower photo, the letters as they are; on the narrowest screens the sum goes under the buttons, never cut */
@media (max-width: 480px) {
	.co-review { padding: 6px; }
	.co-review .mc-list { padding-inline: 0; } /* the drawer's side room is not needed inside the frame */
	.co-review .mc-card { grid-template-columns: 6rem minmax(0, 1fr); gap: .625rem; padding: .625rem; }
	.co-review .mc-bottom { flex-wrap: wrap; gap: .5rem; }
}
.co-items { padding: 0; }
.co-sums { margin-top: 6px; padding-inline: 8px; }
#payment { margin-top: 26px; }
.woocommerce-terms-and-conditions-wrapper { font-size: .85rem; color: var(--ink-2); }
.woocommerce-terms-and-conditions-wrapper > :not(:empty) { margin-bottom: 1rem; } /* no terms or privacy page yet: no empty gap above the button */
#payment .place-order { display: block; margin: 0; }
#payment .beam { margin-top: .5rem; }
#place_order { width: 100%; min-height: 58px; font-size: 1.08rem; }
/* "Начини за плащане" as on sateno.bg (Асан, 22.10.2026): its rules — each way in a box, the radio on the left, the card
   and wallet icons on the right, the description small and grey; the card form of Stripe opens under "Credit/Debit Cards" */
.pay-h { margin: 0 0 15px; color: var(--accent-2); font: 600 16px/1.4 var(--sans); }
#payment ul.wc_payment_methods { margin: 0 0 15px; padding: 0; border: none; list-style: none; }
/* the radio, the words and the marks stand in the middle of the box, and a click anywhere on the box chooses the way
   (Асан, 22.10.2026; assets/js/checkout.js) */
#payment ul.wc_payment_methods li.wc_payment_method { position: relative; display: grid; grid-template-columns: 13px minmax(0, 1fr); align-content: center; column-gap: 17px; min-height: 72px; margin: 0 0 10px; padding: 14px 14px 14px 16px; border: 1px solid #dcdfe4; border-radius: 0; background: #fff; color: #595959; font-size: 16px; line-height: 1.6; list-style: none; cursor: pointer; }
#payment ul.wc_payment_methods li.wc_payment_method:has(> input:checked) { border-color: #cfd6dd; background: #fbfcfd; }
#payment ul.wc_payment_methods li.wc_payment_method > input.input-radio { grid-column: 1; grid-row: 1; align-self: center; width: 13px; height: 13px; margin: 0; appearance: auto; accent-color: auto; }
#payment ul.wc_payment_methods li.wc_payment_method > label { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; color: #222; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer; }
#payment ul.wc_payment_methods li.wc_payment_method > label::after { content: none; }
#payment ul.wc_payment_methods li.wc_payment_method .payment_box { grid-column: 2; margin: 4px 0 0; padding: 0; cursor: auto; border: none; border-radius: 4px; background: transparent; box-shadow: 1px 1px 2px rgba(0, 0, 0, .05); color: #777; font-size: 13px; line-height: 1.25; }
#payment ul.wc_payment_methods li.wc_payment_method .payment_box::before { display: none; }
#payment ul.wc_payment_methods li.wc_payment_method .payment_box p { margin: 0; }
#payment .wc-stripe-card-icons-container, #payment ul.wc_payment_methods li.wc_payment_method > label img { float: none; width: auto; max-height: 24px; margin: 0 5px 0 auto; padding-left: 8px; }
#payment .wc-stripe-card-icons-container { display: flex; flex-direction: row-reverse; gap: 0 8px; } /* Mastercard, Visa, Discover, Amex, as on sateno.bg */
#payment .wc-stripe-card-icons-container img { margin: 0; padding: 0; }
#payment .wc-stripe-gateway-container { margin-top: 10px; }
#payment ul.wc_payment_methods li.wc_payment_method:is(.payment_method_stripe_applepay, .payment_method_stripe_payment_request, .payment_method_stripe_googlepay) > label img { height: 34px; max-height: 34px; } /* the Apple Pay and Google Pay marks bigger (Асан, 22.10.2026) */
/* Google Pay / Apple Pay chosen (Асан, 22.10.2026): only their black button, as tall and round as ours (plugin settings,
   58px / 10px), with no light behind; the box with the plugin's English words goes. The plugin hides "Завърши поръчката"
   by squeezing it to nothing (wc-stripe-hide), so our min-height must not hold it open. WooCommerce's script opens the box
   of the way chosen with an inline style, hence the !important */
#payment li.payment_method_stripe_payment_request .payment_box, #payment li.payment_method_stripe_applepay .payment_box, #payment li.payment_method_stripe_googlepay .payment_box { display: none !important; }
#payment #place_order.wc-stripe-hide { min-height: 0; }
.beam:has(> #place_order.wc-stripe-hide)::before, .beam:has(> #place_order.wc-stripe-hide)::after { display: none; }
/* the plugin puts the black buttons beside ours, inside the box of the light: they take ours' place and never stretch the
   light, and while ours shows they stay hidden, however fast the ways are switched (Асан, 22.10.2026) */
.beam > .StripeElement { position: absolute; top: 0; left: 0; width: 100%; }
.beam:has(> #place_order.wc-stripe-hide) { min-height: 64px; }
.beam:has(> #place_order:not(.wc-stripe-hide)) > .StripeElement { display: none !important; }

/* "Завърши поръчката" in the drawer and on the checkout (Асан, 21.10.2026): a soft light BEHIND the button that goes
   round it — a blurred colour wheel turning behind the button, seen around every edge and brightest where it has
   turned to. Two layers: a wide soft halo and a tighter rim. Without @property the light stands still. */
@property --beam-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { position: relative; isolation: isolate; display: grid; }
.beam::before, .beam::after {
	content: ""; position: absolute; z-index: -1; border-radius: 1rem; pointer-events: none;
	background: conic-gradient(from var(--beam-a), rgba(226, 160, 84, .6), rgba(226, 160, 84, .6) 35%, #f39a3a 58%, #ffd27f 72%, #f39a3a 86%, rgba(226, 160, 84, .6));
	animation: beam 3s linear infinite;
}
.beam::before { inset: -10px; filter: blur(16px); }
.beam::after { inset: -3px; filter: blur(6px); }
@keyframes beam { to { --beam-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .beam::before, .beam::after { animation: none; } }
.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { display: none; }
.blockUI.blockOverlay { background: var(--bg) !important; opacity: .55 !important; }
@media (min-width: 1000px) {
	form.checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.shop_table.cart, .shop_table.cart tbody { display: block; }
	.shop_table.cart thead { display: none; }
	.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "img name del" "img price price" "img qty sub"; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
	.shop_table.cart tr.cart_item td { padding: 0; border: 0; }
	.shop_table.cart .product-thumbnail { grid-area: img; width: auto; }
	.shop_table.cart .product-thumbnail img { width: 96px; }
	.shop_table.cart .product-name { grid-area: name; font-size: .9rem; line-height: 1.35; }
	.shop_table.cart .product-remove { grid-area: del; }
	.shop_table.cart .product-price { grid-area: price; display: flex; align-items: baseline; gap: 6px; font-size: .88rem; }
	.shop_table.cart .product-price .ci-l { display: inline; margin: 0; }
	.shop_table.cart .product-quantity { grid-area: qty; align-self: end; }
	.shop_table.cart .product-subtotal { grid-area: sub; align-self: end; text-align: right; }
	.shop_table.cart tr.cart-actions, .shop_table.cart tr.cart-actions td { display: block; border: 0; }
	.cart_totals { width: 100%; padding-inline: 18px; }
}

/* ---------- order received: sateno.bg's order of things, this shop's colours (Асан, 22.10.2026) ---------- */
.ty { max-width: 860px; margin: 0 auto; }
.ty--fail { text-align: center; }
.ty-h { margin: 6px 0 24px; font-size: 1.75rem; text-align: center; }
.ty-over { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); }
.ty-over li { min-width: 0; padding: 14px 16px; border-left: 1px solid var(--line); }
.ty-over li:first-child { border-left: 0; }
.ty-over span { display: block; margin-bottom: 4px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ty-over b { font-weight: 600; overflow-wrap: anywhere; }
.ty-table { width: 100%; margin: 0 0 28px; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.ty-table th, .ty-table td { padding: 12px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.ty-table thead th { border-top: 0; background: var(--bg-2); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.ty-table tfoot th { font-weight: 600; }
.ty-table .ty-sum { width: 1%; padding-left: 16px; white-space: nowrap; text-align: right; }
.ty-table .ty-row-shipping .ty-sum { white-space: normal; min-width: 9em; }
.ty-table small.shipped_via { display: block; color: var(--ink-2); font-size: .85rem; }
.ty-table .ty-row-order_total th, .ty-table .ty-row-order_total td { font-size: 1.1rem; }
.ty-table .ty-row-order_total td { font: 400 1.4rem/1.2 var(--serif); }
.ty-table tbody td { vertical-align: middle; }
.ty-prod { display: flex; align-items: center; gap: 14px; }
.ty-img { flex: none; width: 64px; height: 80px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; }
.ty-sub { margin: 0 0 10px; font-size: 1.25rem; color: var(--accent-2); }
.ty-addr { padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); font-style: normal; line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.ty .button { display: flex; width: max-content; margin: 28px auto 0; } /* flex, not table: the words stay in the middle */
@media (max-width: 767px) {
	/* the four facts in 2 × 2, as sateno.bg on the phone */
	.ty-over { grid-template-columns: 1fr 1fr; }
	.ty-over li:nth-child(odd) { border-left: 0; }
	.ty-over li:nth-child(n+3) { border-top: 1px solid var(--line); }
	.ty-h { font-size: 1.45rem; }
	.ty-table th, .ty-table td { padding: 11px 12px; }
	/* the sums take a fixed third, so the shipping words do not squeeze the scent's name into one word a line */
	.ty-table { table-layout: fixed; }
	.ty-table .ty-sum { width: 36%; white-space: normal; }
	.ty-table .ty-row-shipping .ty-sum { min-width: 0; }
	.ty-prod { gap: 10px; }
	.ty-img { width: 52px; height: 65px; }
}

/* ---------- inner pages ---------- */
.pg-head { display: grid; justify-items: center; gap: .7rem; padding-top: 40px; padding-bottom: 24px; text-align: center; }
.pg-sec { padding-bottom: 64px; }

/* ---------- cart drawer and phone menu ---------- */
dialog.drawer { margin: 0 0 0 auto; padding: 0; width: min(29rem, 100%); max-width: 100%; height: 100%; max-height: 100%; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--ink); overflow-y: auto; transform: translate3d(100%, 0, 0); transition: transform .5s cubic-bezier(.19, 1, .22, 1); }
dialog.drawer::backdrop { background: var(--scrim); opacity: 0; transition: opacity .5s cubic-bezier(.19, 1, .22, 1); }
dialog.drawer.is-open { transform: none; }
dialog.drawer.is-open::backdrop { opacity: 1; }
.drawer-in { display: grid; gap: 1.2rem; padding: calc(1.25rem + env(safe-area-inset-top, 0px)) clamp(1.25rem, 4vw, 2rem) calc(2rem + env(safe-area-inset-bottom, 0px)); }
.drawer-in:focus { outline: none; }
.o-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.x { appearance: none; padding: .25rem .5rem; border: 0; background: none; font: 300 2rem/1 var(--sans); color: var(--ink); cursor: pointer; }
#cart-drawer { width: min(26.25rem, 100%); background: var(--field); }
#cart-drawer .drawer-in { display: flex; flex-direction: column; gap: 0; min-height: 100%; padding: 0; }
#cart-drawer .o-head { position: sticky; top: 0; z-index: 2; min-height: 4rem; padding: calc(.75rem + env(safe-area-inset-top, 0px)) .75rem .75rem 1.125rem; background: var(--accent); }
#cart-drawer .o-head h2 { font: 400 1.35rem/1.2 var(--serif); color: #fff; }
#cart-drawer .o-head .x { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; font-size: 2.1rem; color: #fff; }
#cart-drawer .o-head .x:hover { background: rgba(255, 255, 255, .12); }
#cart-drawer .widget_shopping_cart_content { flex: 1 1 auto; display: flex; flex-direction: column; }
#cart-drawer .mc-empty { padding: 1.25rem 1.125rem; }
.mc-list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: .75rem; padding: .75rem; }
.mc-card { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto minmax(9.4rem, auto); gap: .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: .875rem; background: var(--field); box-shadow: 0 3px 14px rgba(0, 0, 0, .05); transition: border-color .2s, opacity .2s; }
.mc-card:hover { border-color: var(--accent-line); }
.mc-card.is-busy { opacity: .55; pointer-events: none; }
.mc-head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.mc-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 600 .92rem/1.35 var(--sans); color: var(--ink); text-decoration: none; }
.mc-unit { font-weight: 600; font-size: .875rem; white-space: nowrap; }
.mc-opt { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-2); }
.mc-opt i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.mc-thumb { grid-column: 1; grid-row: 3; position: relative; display: block; }
.mc-thumb-link { display: block; height: 100%; }
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; background: var(--bg-2); }
.mc-bottom { grid-column: 2; grid-row: 3; align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; min-height: 3rem; }
.mc-step { display: grid; grid-template-columns: 2.3rem 2.3rem 2.3rem; align-items: center; border: 1px solid var(--chip); border-radius: .625rem; overflow: hidden; background: var(--field); }
.mc-step button { appearance: none; width: 2.3rem; height: 2.2rem; padding: 0; border: 0; background: none; font: 400 1.3rem/1 var(--sans); color: var(--ink); cursor: pointer; }
.mc-step button:hover { background: var(--bg-2); }
.mc-step button:disabled { opacity: .45; cursor: default; background: none; }
.mc-step output { display: grid; place-items: center; height: 1.5rem; border-inline: 1px solid var(--line); font-weight: 600; font-size: .94rem; font-variant-numeric: tabular-nums; }
.mc-line { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.mc-line small { margin-bottom: 2px; font-size: .69rem; font-weight: 600; color: var(--ink-2); }
.mc-line span { font-weight: 700; font-size: 1.05rem; }
.mc-remove { position: absolute; top: 54%; right: .5rem; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .625rem; background: var(--bg-2); color: var(--ink); transition: background-color .2s, color .2s; }
.mc-remove:hover { background: var(--ink); color: var(--paper); }
.mc-remove svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.mc-foot { position: sticky; bottom: 0; margin-top: auto; padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--field); box-shadow: 0 -8px 24px rgba(0, 0, 0, .05); }
.mc-sum { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .875rem; background: var(--field); }
.mc-sum-h { margin-bottom: .3rem; font: 400 1.2rem/1.3 var(--serif); color: var(--accent-2); }
@media (max-width: 899px) { .mc-sum-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* the phone shows the sums without the heading (Асан, 16.10.2026); screen readers still hear it */
.mc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .55rem; font-size: .92rem; font-weight: 500; }
.mc-row + .mc-row { border-top: 1px solid var(--line); }
.mc-row b { font-weight: 700; font-size: 1.08rem; white-space: nowrap; }
.mc-free, .ct-free { padding: .32rem .55rem; border-radius: .3rem; background: var(--ok); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mc-row--off b { color: var(--ok); }
.mc-row--total b { font-size: 1.2rem; }
.mc-row--hint { justify-content: flex-start; font-size: .84rem; color: var(--accent-2); font-weight: 600; }
.mc-buttons { margin-top: .6rem; }
.mc-buttons .button { width: 100%; min-height: 3.4rem; padding: .4rem .6rem; font-size: 1rem; }
/* the phone: the sums at the bottom as tight as they still read well, so the products get the room (Асан, 16.10.2026);
   the buttons stay a thumb high */
@media (max-width: 899px) {
	.mc-foot { padding: .5rem .75rem max(.5rem, env(safe-area-inset-bottom, 0px)); }
	.mc-sum { padding: .1rem .85rem; }
	.mc-row { padding-block: .25rem; font-size: .88rem; line-height: 1.25; }
	.mc-row b { font-size: 1rem; }
	.mc-row--total b { font-size: 1.1rem; }
	.mc-free { padding: .2rem .45rem; }
	.mc-buttons { margin-top: .45rem; }
	.mc-buttons .button { min-height: 3.25rem; }
}
.mc-empty { display: grid; gap: 1rem; justify-items: start; color: var(--ink-2); }
dialog.drawer--left { margin: 0 auto 0 0; width: min(24rem, 88%); border-left: 0; border-right: 1px solid var(--line); background: var(--paper); transform: translate3d(-100%, 0, 0); }
.menu { display: grid; }
.menu > a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line); font: 400 1.3rem/1.2 var(--serif); text-decoration: none; }
.menu > a[aria-current="page"] { color: var(--accent-2); }
.menu-sub { list-style: none; margin: 0; display: grid; padding: .5rem 0 .8rem; border-bottom: 1px solid var(--line); }
.menu-sub a { display: grid; grid-template-columns: .9rem minmax(0, 1fr); column-gap: .8rem; align-items: center; padding: .4rem 0; text-decoration: none; }
.menu-sub a > span:not(.dot) { font-weight: 600; font-size: .95rem; }
.menu-sub small { grid-column: 2; font-size: .8rem; color: var(--ink-2); }
.menu-sub a[aria-current="page"] > span:not(.dot) { color: var(--accent-2); }
.dot { width: .9rem; height: .9rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.menu-foot { font-size: .82rem; line-height: 1.5; color: var(--ink-2); }

/* floating cart button, as on amonra.bg and sateno.bg: bottom left, hidden while a drawer is open */
.cart-fab { position: fixed; left: max(16px, calc((100% - var(--wrap)) / 2 + 15px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 30; display: grid; place-items: center; width: 4rem; height: 4rem; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 14px 32px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .2s ease, opacity .2s ease, visibility .2s ease; }
.cart-fab:hover { transform: translateY(-3px) scale(1.03); }
.cart-fab svg { width: 2.1rem; height: 2.1rem; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.cart-fab svg .thin { stroke-width: 2.4; }
.cart-fab b { position: absolute; top: -.3rem; right: -.25rem; box-sizing: content-box; display: flex; align-items: center; justify-content: center; min-width: .875rem; height: 1.25rem; padding: 0 .375rem; border: 2px solid var(--bg); border-radius: 999px; background: var(--badge); color: #fff; font: 700 .8rem/1 var(--sans); }
.cart-fab b[data-n="0"] { display: none; }
html:has(dialog.drawer[open]) .cart-fab { opacity: 0; visibility: hidden; transform: scale(.7); }
@media (min-width: 900px) { .cart-fab { width: 4.5rem; height: 4.5rem; } .cart-fab svg { width: 2.4rem; height: 2.4rem; } }

/* ---------- footer ---------- */
.foot { padding: 40px 0 120px; background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); }
.foot-in { display: grid; gap: 2rem; }
.foot-about { display: grid; gap: .8rem; max-width: 28rem; }
.foot-about p { font-size: .94rem; color: var(--ink-2); }
.foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.8rem; }
.foot-contact a { display: inline-flex; align-items: center; gap: .6rem; font-size: .94rem; color: var(--ink-2); text-decoration: none; }
.foot-contact a:hover { color: var(--accent-2); }
.foot-contact svg { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foot-pay { width: 277px; max-width: 100%; height: auto; margin-top: .4rem; }
.logo--foot img { width: 180px; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .8rem 2.5rem; align-content: start; }
.foot-links a { font-weight: 600; font-size: .95rem; text-decoration: none; }
.foot-links a:hover { color: var(--accent-2); }
.foot-bottom { display: grid; gap: .5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.foot small { font-size: .8rem; color: var(--ink-2); }
/* on the computer the footer stands at the bottom of a short page too (Асан, 22.10.2026) */
@media (min-width: 900px) {
	body { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); }
	body > #main { flex: 1 0 auto; }
	/* "Доставка и връщане": the four stand in the middle of the room between the title and the footer (Асан, 22.10.2026) */
	body > #main:has(> .pg-sec) { display: flex; flex-direction: column; }
	#main > .pg-sec { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; }
	.foot { padding-bottom: 40px; }
	.foot-in { grid-template-columns: 1fr 1fr; }
	.foot-bottom { grid-column: 1 / -1; margin-top: 3.5rem; /* room for the cart button over the line (svesht.js) */ }
}

/* Бисквитки (Асан, 21.10.2026): банерът, докато няма избор; линковете долу във футъра. */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 560px; margin: 0 auto; padding: 16px 18px;
	background: #fff; border: 1px solid var(--line); border-radius: .875rem; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .25); font-size: .92rem; line-height: 1.5; }
.consent[hidden] { display: none; }
.consent p { margin: 0 0 12px; color: var(--ink); }
.consent a { color: var(--accent-2); }
.consent-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-btns .btn { flex: 1 1 auto; min-height: 44px; padding: 0 18px; font-size: .92rem; }
.consent-min { flex: 1 1 auto; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: .625rem; background: #fff;
	color: var(--ink); font: 600 .92rem/1.15 var(--sans); cursor: pointer; }
.consent-min:hover { border-color: var(--accent); }
.foot-legal a { color: inherit; }