/* Crocoland. Values from docs/design/html (Main = 1440, Mobile = 390). */

/* ---------- Fonts (local, docs/design/README.md) ---------- */
@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-latin-wght-normal.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}
@font-face{font-family:Unbounded;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/unbounded-cyrillic-700-std.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/unbounded-latin-700-normal.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{
	--accent:#E30614;--accent-dark:#B8050F;--navy:#24275A;--ink:#1B1E3C;--ink-2:#3E4462;--muted:#5B6275;
	--line:#E6E9F2;--line-2:#D5D9E6;--ground:#F4F6FA;--green:#1E9E4A;--green-dark:#136B32;
	/* The design's #1E9E4A under small white text ("ЕСЕН 2026") is 3.47:1; this one is 5.42:1 (WCAG AA). */
	--green-text-ground:#157A38;
	--display:Unbounded,"Arial Black",sans-serif;--text:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
	--gutter:32px;--radius-card:18px;--radius-big:24px;--radius-control:14px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* What works only with JavaScript (the header's script adds .js): every page — until 0.14.0 only shop.css had it, so the product's „Увеличи“ and the boxes' „Всички предупреждения“ showed without it. */
html:not(.js) .js-only{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--accent-dark)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.vh,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:100;padding:12px 18px;background:#fff;border-radius:12px;font-weight:800}
/* v2 (0.10.0): 1440 px, the content 1376 (until then 1280 / 1216, as Zalando; Denis's measure of eMAG,
   Kaufland and the toy shops, 23.10.2026). Pages to read keep their own narrow column (~760 px). */
.container{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.only-mobile{display:none}
.icon{flex-shrink:0}

/* Tones: light ground + icon colour */
.tone-red{--tone-bg:#FDECEC;--tone-fg:#B8050F;--tone-img:#F8D3D3;--tone-card:#FBF0F3}
.tone-navy{--tone-bg:#EEF0FA;--tone-fg:#24275A;--tone-img:#DADDF2;--tone-card:#F3F5FA}
.tone-blue{--tone-bg:#E8F1FB;--tone-fg:#1D5BA8;--tone-img:#CFE2F6;--tone-card:#EEF4FB}
.tone-green{--tone-bg:#E6F5EB;--tone-fg:#136B32;--tone-img:#C9EBD4;--tone-card:#EEF6F0}
.tone-sand{--tone-bg:#FFF4DB;--tone-fg:#8A5A00;--tone-img:#FBE5B0;--tone-card:#F7F3EA}
.tone-text-green{color:var(--green-dark)}
.chip{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--tone-bg);color:var(--tone-fg)}
.chip--square{width:48px;height:48px;border-radius:14px}
.chip--sm{width:36px;height:36px;border-radius:10px}
/* A category's picture (crocoland_category_chip()): whole, on a light tile. */
.chip--photo{background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.chip--photo .chip__img{width:84%;height:84%;object-fit:contain}
/* The home page's "Категории" (0.8.2; until then a 68px circle, chip--round, with the picture at 70% = 48px): a white rounded square
   with the product pictures' radius, 4px inside, the picture whole and almost all of it. */
.chip--cat{width:80px;height:80px;padding:4px;border-radius:var(--radius-card)}
.chip--cat.chip--photo .chip__img{width:100%;height:100%;border-radius:calc(var(--radius-card) - 4px)}
.chip--cat.chip--svg{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
/* The icon from the menu item's title (Grogin's "Меню до банер"). */
.chip--img img{width:20px;height:20px;object-fit:contain}

/* ---------- Buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:12px;font-weight:800;font-size:15px;line-height:1.2;text-align:center;cursor:pointer}
.button--lg{height:52px;padding:0 24px;border-radius:var(--radius-control);font-size:16px;gap:10px}
.button--red,.button--add{background:var(--accent);color:#fff}
.button--red:hover,.button--add:hover{background:var(--accent-dark);color:#fff}
.button--navy{background:var(--navy);color:#fff}
.button--navy:hover{background:var(--ink);color:#fff}
.button--ghost{background:#fff;color:var(--navy);border:1px solid var(--line-2)}
.button--outline-light{border:2px solid #5B5FA3;color:#fff;padding:0 22px}
.button--outline-light:hover{border-color:#fff;color:#fff}
.button--choose{background:#fff;color:var(--accent);border:2px solid var(--accent)}
.button--choose:hover{background:var(--accent);color:#fff}
.button--see{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.button--see:hover{background:var(--navy);color:#fff}
.button--outline{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:#EEF0FA;color:var(--navy)}

/* ---------- Top bar ---------- */
/* No dark top bar since v2 (0.10.0): its links and the code are in the header's row, the benefits strip,
   the footer and the phone's menu. */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}
.header__main{display:flex;align-items:center;gap:28px;padding-top:20px;padding-bottom:20px}
.header__menu{display:none}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--navy)}
/* The mascot (assets/images/mascot-*.webp) and the word: CROCO navy, LAND green (24 px bold is large text: 3.5:1 is enough). */
.logo__mark{width:48px;height:48px;flex-shrink:0}
.logo__word,.wordmark{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.5px;line-height:1}
.wordmark{display:inline-flex;align-items:center;gap:10px}
.wordmark__mark{width:44px;height:44px;flex-shrink:0}
.logo__a{color:var(--navy)}
.logo__b{color:var(--green)}
/* The word as paths (0.20.0, crocoland_word()): 0.851em high — the old text's capitals (0.75em) and the bumps above them. */
.logo__word,.wordmark__word{display:inline-flex;align-items:flex-end;gap:.12em .13em}
.logo__word svg,.wordmark__word svg{display:block;height:.851em;width:auto;fill:currentColor}
.header__search{flex:1 1 420px;min-width:0}
form.search{display:flex}
.search__input{flex:1;min-width:0;height:52px;border:2px solid var(--navy);border-right:0;border-radius:14px 0 0 14px;padding:0 18px;font-size:16px;background:#fff;color:var(--ink)}
.search__input::placeholder{color:#6A7090}
.search__button{display:flex;align-items:center;justify-content:center;width:64px;height:52px;border:0;border-radius:0 14px 14px 0;background:var(--navy);color:#fff}
form.search{position:relative}
.search__back{display:none}
.search__clear{position:absolute;right:72px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--muted)}
.search__clear[hidden]{display:none}
.search__input::-webkit-search-cancel-button{display:none}
/* v2 (0.12.0, V2SearchDesktop): the field in use has a soft navy ring around field and button, not the red outline. */
.search__input:focus-visible{outline:none}
@media (min-width:1024px){form.search:focus-within{border-radius:16px;box-shadow:0 0 0 4px #DADDF2}}
.search__input:focus-visible{box-shadow:none}
/* Suggestions (screens SearchDesktop, SearchMobile) */
/* 0.17.1: the page under the header in shade while the suggestions are open (V2SearchDesktop). */
.site-header.has-suggest::after{content:"";position:absolute;left:0;right:0;top:100%;height:1px;background:rgba(27,30,60,.45);box-shadow:0 0 0 100vmax rgba(27,30,60,.45);clip-path:inset(0 -100vmax -100vmax -100vmax);pointer-events:none}
.suggest{position:absolute;left:0;top:calc(100% + 8px);z-index:50;width:min(960px,calc(100vw - 64px));max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);overflow:auto;background:#fff;border-radius:22px;box-shadow:0 24px 48px rgba(27,30,60,.25)}
.suggest[hidden]{display:none}
/* v2 (0.12.0, V2SearchDesktop): „Предложения“, „Категории“ and the Latin notice on the left on grey; „Продукти“ on the right. */
.suggest__cols{display:grid;grid-template-columns:384px minmax(0,1fr)}
.suggest__cols>.suggest__col:only-child{grid-column:1/-1}
.suggest__col{display:flex;flex-direction:column;gap:2px;min-width:0;padding:18px 0 20px}
.suggest__col--terms{background:#FBFCFE;border-right:1px solid var(--line)}
/* The grey and its line down to the bottom, under „Виж всички“ too, when there are products on the right. */
.suggest:has(.suggest__col--products){background:linear-gradient(90deg,#FBFCFE 383px,var(--line) 383px,var(--line) 384px,#fff 384px)}
.suggest:has(.suggest__col--products) .suggest__col--terms{background:none;border-right:0}
.suggest__col--terms>div+div .suggest__label{padding-top:16px}
.suggest__label{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:0 22px 6px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.suggest__total{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none}
.suggest__phrase{display:flex;align-items:center;gap:12px;height:46px;padding:0 22px;font-size:16px;color:var(--ink)}
.suggest__phrase>.icon{flex:none;color:var(--muted)}
.suggest__phrase--in>.icon{color:var(--accent-dark)}
.suggest__phrase .suggest__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--muted)}
.suggest__phrase .suggest__text b{font-weight:800;color:var(--ink)}
.suggest__phrase--in .suggest__text b{color:var(--accent-dark)}
.suggest__fill{display:flex;color:#8A90A6}
.suggest__phrase>.suggest__n{font-size:13px;font-weight:700;color:var(--muted)}
.suggest__term{display:flex;align-items:center;gap:12px;min-height:54px;padding:4px 22px;color:var(--ink)}
.suggest__term .suggest__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.suggest__term .suggest__name{font-size:15px;font-weight:800}
.suggest__term>.suggest__n{padding:3px 9px;border-radius:999px;background:#EEF0FA;color:var(--navy);font-size:13px;font-weight:800}
.suggest__phrase.is-active,.suggest__term.is-active,.suggest__product.is-active{background:#EEF0FA;color:var(--ink)}
.suggest__icon{display:flex;align-items:center;justify-content:center;flex:0 0 38px;height:38px;border-radius:11px;background:var(--tone-bg,#EEF0FA);color:var(--tone-fg,var(--navy))}
.suggest__name{display:block;font-weight:700;line-height:1.35}
.suggest__sub{display:block;font-size:13px;color:var(--muted)}
.suggest__translit{display:flex;align-items:flex-start;gap:10px;margin:14px 16px 0;padding:12px 14px;border-radius:14px;background:#FFF4DB;color:#6B4700;font-size:14px;line-height:1.4}
.suggest__translit .icon{flex:none;margin-top:1px}
.suggest__translit a{color:inherit;font-weight:800;text-decoration:underline}
.suggest__product{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 22px;color:var(--ink)}
.suggest__thumb{position:relative;width:76px;height:76px;border-radius:14px;overflow:hidden;background:var(--ground)}
.suggest__thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.suggest__thumb .badge{position:absolute;top:5px;left:5px;padding:2px 6px;font-size:11px}
.suggest__info{display:flex;flex-direction:column;gap:4px;min-width:0}
.suggest__product .suggest__name{font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suggest__meta{display:flex;align-items:center;gap:0 4px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.suggest__meta>span+span::before{content:"·";margin-right:4px;font-weight:400;color:var(--muted)}
.suggest__brand{font-weight:800;font-size:12px;letter-spacing:.3px;text-transform:uppercase}
.suggest__rating [aria-hidden]{color:#F2B01E}
.suggest__rating b{color:var(--ink)}
.suggest__stock{font-weight:700;color:var(--green-dark)}
.suggest__stock.is-out{color:var(--muted)}
.suggest__tbi{font-size:13px;font-weight:700;color:var(--navy)}
.suggest__price{text-align:right;font-family:var(--display);font-weight:700;font-size:17px;white-space:nowrap}
.suggest__price del{display:block;font-family:var(--text);font-size:13px;font-weight:600;color:var(--muted)}
.suggest__price ins{text-decoration:none}
.suggest__price.is-sale ins{color:var(--accent)}
.suggest__price .crocoland-b2b-prices{display:block;font-family:var(--text);font-size:12px;font-weight:700;line-height:1.4}
.suggest__all{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;margin:0 22px 20px auto;width:calc(100% - 384px - 44px);border-radius:14px;background:var(--accent);font-weight:800;font-size:16px;color:#fff}
.suggest__all:hover,.suggest__all.is-active{background:var(--accent-dark);color:#fff}
.suggest__none{padding:20px;color:var(--ink-2)}
.header__actions{display:flex;align-items:center;gap:8px}
.header__action{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:6px;font-size:13px;font-weight:700}
.header__action[aria-current="page"]{color:var(--accent-dark)} /* 0.17.1: the page's own, red (V2Account) */
/* A trader's discount under the profile icon (0.8.4): green, as the cart's "Цени за търговец". */
.header__action--trader{gap:4px}
.trader-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#E6F5EB;color:var(--green-dark);font-size:12px;font-weight:800;line-height:1.3;white-space:nowrap}
/* On a phone and a tablet the top bar says it instead of the free delivery (the header has no "Профил" there). */
/* The header's drop-downs (0.8.9, inc/header-popovers.php): on a computer, filled at the first hover (theme.js). */
.hpop{position:relative;display:flex}
.hpop__panel{position:absolute;top:calc(100% + 12px);right:0;z-index:40;width:340px;max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow-y:auto;padding:18px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(27,30,60,.2);color:var(--ink);font-weight:400;text-align:left}
.hpop--cart .hpop__panel{width:360px}
.hpop--account .hpop__panel{right:-20px;width:280px}
.hpop__panel[hidden]{display:none}
.hpop__panel.is-loading{min-height:120px;background:#fff linear-gradient(90deg,#fff,#F3F4F8,#fff) 0 0/200% 100%;animation:hpop-load 1s linear infinite}
@keyframes hpop-load{to{background-position:-200% 0}}
/* The way from the icon down to the panel keeps the hover. */
.hpop.is-open::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.hpop__head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.hpop__title{margin:0;font-family:var(--display);font-size:18px;line-height:1.25;color:var(--ink)}
.hpop__count{font-size:13px;font-weight:700;color:var(--muted)}
.hpop__lead,.hpop__mail{margin:4px 0 14px;font-size:14px;line-height:1.45;color:var(--muted)}
.hpop__mail{margin:2px 0 0;overflow-wrap:anywhere}
.hpop__wide{width:100%}
.button--soft{background:#EEF0FA;color:var(--navy)}
.button--soft:hover{background:#E1E4F4;color:var(--navy)}
.hpop__bar{margin-bottom:12px;padding:10px 12px;border-radius:14px;background:#E9F7EE}
.hpop__bar-text{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:13px;font-weight:700;color:var(--green-dark)}
.hpop__bar-text svg{flex-shrink:0}
.hpop__bar-text b{font-weight:800}
.hpop__bar .kroko-bar{--bar-h:6px;--bar-fg:#2FA552}
.hpop__lines{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.hpop__line{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.hpop__line:first-child{border-top:0}
.hpop__pic{flex-shrink:0;width:52px;height:52px;padding:3px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.hpop__pic img{width:100%;height:100%;object-fit:contain}
/* 0.9.25: a picture not on white fills the square up to its border, its blurred copy where the white margin was */
.hpop__pic img.has-bg{width:calc(100% + 6px);height:calc(100% + 6px);max-width:none;margin:-3px}
.hpop__line-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.hpop__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:700;line-height:1.35;color:var(--ink)}
.hpop__name:hover{color:var(--navy);text-decoration:underline}
.hpop__qty{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:0;font-size:13px;color:var(--muted)}
.hpop__qty b{font-weight:800;color:var(--ink)}
.hpop__qty b.is-sale{color:var(--accent)}
.hpop__qty s{font-size:12px}
.hpop__drop{display:inline-flex;align-self:flex-start;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#FDECEC;color:var(--accent-dark);font-size:12px;font-weight:800}
.hpop__remove,.hpop__cart{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:10px;background:none;color:var(--muted);cursor:pointer}
.hpop__remove:hover{background:var(--ground);color:var(--accent)}
.hpop__cart{border-color:var(--line-2);color:var(--navy)}
.hpop__cart:hover{border-color:var(--navy);color:var(--navy)}
.hpop__cart.is-loading{opacity:.5}
.hpop__more{display:flex;justify-content:space-between;gap:12px;margin:0;padding:10px 0;border-top:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.hpop__more a{font-weight:800;color:var(--navy);text-decoration:underline}
.hpop__sums{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.hpop__saved,.hpop__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 4px;font-size:14px}
.hpop__saved{font-weight:800;color:var(--green-dark)}
.hpop__total b{font-family:var(--display);font-size:26px;line-height:1.2}
.hpop__note{margin:0;font-size:12px;color:var(--muted)}
.hpop__actions{display:flex;gap:10px;margin:14px 0 0}
.hpop__actions .button{flex:1 1 0;min-height:46px;padding:0 12px;font-size:14px}
.hpop__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 4px;text-align:center}
.hpop__mascot{width:56px;height:56px}
.hpop__art{position:relative;width:96px;height:96px}
.hpop__confetti{position:absolute;inset:-6px -20px auto;width:calc(100% + 40px);height:auto;opacity:.6}
.hpop__art .hpop__mascot{position:relative;width:96px;height:96px}
.hpop__empty-title{margin:0;font-family:var(--display);font-size:17px;color:var(--ink)}
.hpop__empty-text{margin:0 0 6px;font-size:14px;line-height:1.45;color:var(--muted)}
.hpop__register{margin:10px 0 12px;font-size:14px;text-align:center;color:var(--muted)}
.hpop__register a{font-weight:800;color:var(--navy);text-decoration:underline}
.hpop__perks{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:12px;border-radius:14px;background:var(--ground);list-style:none;font-size:13px;font-weight:700;color:var(--ink-2)}
.hpop__perks li{display:flex;align-items:center;gap:8px}
.hpop__perks svg{flex-shrink:0;color:#2FA552}
.hpop__trade{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:800;color:var(--green-dark)}
.hpop__trade:hover{color:var(--green-dark);text-decoration:underline}
.hpop__who{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.hpop__who .hpop__title{font-size:16px;overflow-wrap:anywhere}
.hpop__who .trader-pill{margin-top:4px}
.hpop__avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--display);font-size:18px}
.acc-places--pop{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.acc-places--pop a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:10px;font-size:14px;font-weight:700;color:var(--ink)}
.acc-places--pop a svg{flex-shrink:0;color:var(--ink-2)}
.acc-places--pop a:hover{background:var(--ground);color:var(--ink)}
.acc-places--pop .is-active a{background:#EEF0FA;color:var(--navy);font-weight:800}
.acc-places--pop .acc-places__label{flex:1;min-width:0}
.acc-places--pop .acc-places__badge{min-width:22px;padding:1px 8px;border-radius:999px;background:#F1F2F6;color:var(--ink-2);font-size:12px;font-weight:800;text-align:center}
.acc-places--pop .acc-places__badge--red{background:#FDECEC;color:var(--accent-dark)}
.acc-places--pop .acc-places__badge--navy{background:#EEF0FA;color:var(--navy)}
.acc-places--pop .acc-places__item--customer-logout{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.acc-places--pop .acc-places__item--customer-logout a,.acc-places--pop .acc-places__item--customer-logout svg{color:var(--muted)}
.header__cart{display:flex;align-items:center;gap:12px;height:52px;padding:0 18px;border-radius:14px;background:var(--accent);color:#fff;font-weight:800}
.header__cart:hover{background:var(--accent-dark);color:#fff}
.header__cart-icon,.bottom-nav__cart{position:relative;display:flex}
.count{position:absolute;top:-8px;right:-10px;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#fff;color:var(--navy);font-size:12px;font-weight:800;line-height:1}
.count[data-count="0"]{display:none}
/* The favourites' count (0.8.0): navy, so it is not taken for the cart's. */
.header__fav-icon,.bottom-nav__fav{position:relative;display:flex}
.count.count--fav{background:var(--navy);color:#fff}
/* In the phone's menu (0.9.31): beside the word, not over an icon. */
.count.count--inline{position:static}
.header__cart-text{display:flex;flex-direction:column;line-height:1.1}
.header__cart-label{font-size:12px;font-weight:700}
.header__cart .js-cart-total{font-size:16px}
.header__nav{border-top:1px solid var(--line)}
/* One line: what does not fit goes under "Още" (theme.js); without JavaScript it is cut off. */
.header__nav-inner{display:flex;align-items:center;gap:4px}
.all-cats{display:flex;align-items:center;gap:10px;flex-shrink:0;height:48px;padding:0 18px;margin:8px 12px 8px 0;border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:800;font-size:15px;white-space:nowrap}
.all-cats[aria-expanded="true"]{background:var(--accent)} /* 0.17.1: open — red, as the canvas (V2MegaMenu) */
.nav{display:flex;align-items:center;flex:1;min-width:0}
.nav__list{display:flex;flex-wrap:wrap;gap:4px;flex:0 1 auto;min-width:0;height:48px;overflow:hidden}
.nav__list a{display:block;padding:12px 10px;font-weight:700;font-size:15px;line-height:24px;white-space:nowrap}
.nav__more{position:relative;flex-shrink:0;visibility:hidden}
.nav__more.is-on{visibility:visible}
.nav__more-button{display:flex;align-items:center;gap:6px;height:48px;padding:0 10px;border:0;background:none;color:var(--navy);font-weight:700;font-size:15px;white-space:nowrap}
.nav__more-button::after{content:"";width:7px;height:7px;margin-top:-4px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.nav__more-button[aria-expanded="true"]::after{margin-top:4px;transform:rotate(-135deg)}
.nav__more-list{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;max-height:70vh;max-height:70dvh;overflow-y:auto;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(27,30,60,.18)}
.nav__more-list a{display:block;padding:10px 12px;border-radius:10px;font-weight:700;color:var(--ink)}
.nav__more-list a:hover{background:var(--ground);color:var(--accent-dark)}
.nav__more-list .is-sale a,.nav__more-list .menu-sale a{color:var(--accent)}
.nav__list .is-sale a,.nav__list .menu-sale a{color:var(--accent)}
.nav__list .current-menu-item a{color:var(--accent-dark);box-shadow:inset 0 -3px 0 var(--accent)}

/* Mega menu */
.mega{position:absolute;left:0;right:0;top:100%;padding-bottom:24px;background:rgba(27,30,60,.45);box-shadow:0 0 0 100vmax rgba(27,30,60,.45);clip-path:inset(0 -100vmax -100vmax -100vmax)} /* 0.17.1: the shade down to the bottom of the screen (it stopped at the menu's own height) */
.mega__inner{display:grid;grid-template-columns:352px minmax(0,1fr);width:calc(100% - 2 * var(--gutter));max-width:1376px;background:#fff;border-radius:0 0 22px 22px;padding:0;overflow:hidden;box-shadow:0 24px 48px rgba(27,30,60,.25)}
/* v2 (0.10.0, V2MegaMenu): the categories with their counts and a red bar on the open one; the panel's
   subcategories in three columns with their counts, „Марки:“ and „По възраст:“ at its foot. */
.mega__cats{background:#F7F8FB;border-right:1px solid var(--line);padding:12px 0}
.mega__cat{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px 6px 18px;font-weight:700;font-size:15px;line-height:1.25;color:var(--ink)}
.mega__cat::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:transparent}
.mega__cat .chip{width:32px;height:32px;border-radius:10px}
.mega__cat>.icon:last-child{color:#9AA0B4}
.mega__cat.is-active{background:#fff;font-weight:800;color:var(--accent-dark)}
.mega__cat.is-active::before{background:var(--accent)}
.mega__cat.is-active>.icon:last-child{color:var(--accent-dark)}
.mega__name{flex:1;min-width:0;overflow-wrap:anywhere}
.mega__panels{display:flex;min-width:0}
.mega__panels>.mega__panel{flex:1;min-width:0}
.mega__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:16px}
.mega__title{font-family:var(--display);font-size:24px}
.mega__title a{color:var(--ink)}
.mega__all{display:flex;align-items:center;gap:6px;font-weight:800;font-size:15px;color:var(--accent-dark)}
.mega__subs{columns:3 160px;column-gap:28px}
.mega__subs>li{break-inside:avoid}
.mega__subs a{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #F0F2F7;font-size:15px;font-weight:700;line-height:1.3;color:var(--ink)}
.mega__subs a:hover{color:var(--accent-dark)}
.mega__subs .menu-count{font-size:14px;font-weight:600}
.mega__subs-head{break-after:avoid;padding:14px 0 2px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.mega__subs-head:first-child{padding-top:0}
.mega__panel{display:grid;grid-template-columns:minmax(0,1fr)}
.mega__panel.has-side{grid-template-columns:minmax(0,1fr) 312px}
.mega__panel[hidden]{display:none}
.mega__main{display:flex;flex-direction:column;gap:20px;min-width:0;padding:26px 30px 24px}
.mega__panel.has-side>:last-child{margin:20px 20px 20px 0}
.mega__foot{display:flex;flex-direction:column;gap:16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.mega__brands{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mega__brands-label{margin-right:4px;font-size:14px;font-weight:800;color:var(--muted)}
.mega__brands a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;background:#EEF0FA;font-size:14px;font-weight:800;color:var(--navy)}
.mega__brands a:hover{background:var(--navy);color:#fff}
.mega__brands a.mega__brands-all{padding:0 6px;background:none;text-decoration:underline}
.mega__brands a.mega__brands-all:hover{background:none;color:var(--accent-dark)}
.mega__ages{display:flex;flex-direction:column;gap:8px}
.mega__ages>ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.mega__age{display:flex;flex-direction:column;align-items:center;justify-content:center;height:56px;border-radius:14px;background:var(--tone-bg);color:var(--tone-fg);line-height:1.1}
.mega__age b{font-family:var(--display);font-size:16px}
.mega__age span{font-weight:800;font-size:12px}
.mega__age:hover{box-shadow:inset 0 0 0 2px currentColor;color:var(--tone-fg)}
.mega__products{margin:0}
.mega__products-title{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mega__products-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* A top seller under the subcategories, and the right column's card without a banner (0.8.7). */
.mega__product,.mega__pick{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
.mega__product:hover,.mega__pick:hover{border-color:var(--navy);box-shadow:0 6px 16px rgba(27,30,60,.08);color:var(--ink)}
.mega__product-img,.mega__pick-img{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#fff;color:var(--line-2)}
.mega__product-img{height:112px}
.mega__product-img img,.mega__pick-img img{width:100%;height:100%;object-fit:contain}
.mega__product-name,.mega__pick-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.7em;font-size:13px;font-weight:700;line-height:1.35}
.mega__product-price,.mega__pick-price{font-size:15px;font-weight:800;line-height:1.3;color:var(--ink)}
:is(.mega__product-price,.mega__pick-price) del{margin-right:4px;font-size:12px;font-weight:600;color:var(--muted)}
:is(.mega__product-price,.mega__pick-price) ins{text-decoration:none;color:var(--accent-dark)}
:is(.mega__product-price,.mega__pick-price) .crocoland-b2b-retail{display:none!important}
:is(.mega__product-price,.mega__pick-price) .crocoland-b2b-own strong{display:block;font-size:12px;font-weight:800;color:var(--green-dark)}
:is(.mega__product-price,.mega__pick-price) .crocoland-b2b-own strong>.amount{display:block;font-size:15px;color:var(--ink)}
.mega__pick{align-self:start;gap:8px;padding:14px}
.mega__pick-label{align-self:flex-start;padding:3px 10px;border-radius:999px;background:#EEF0FA;color:var(--navy);font-size:12px;font-weight:800}
.mega__pick-img{aspect-ratio:1}
.mega__pick-name{font-size:15px}
.mega__pick-price{font-size:18px}
.mega__pick-button{display:flex;align-items:center;justify-content:center;height:44px;margin-top:4px;border-radius:12px;background:var(--navy);color:#fff;font-size:15px;font-weight:800}
.mega__pick:hover .mega__pick-button{background:var(--ink)}
/* The category's banner from Banners → "В менюто": 3:4, 600 × 800 px uploaded. */
@media (max-width:1279px){
	.mega__inner{grid-template-columns:300px minmax(0,1fr)}
	.mega__panel.has-side{grid-template-columns:minmax(0,1fr) 240px}
	/* Three in a row: 3 of 4, 6 of 8. */
	.mega__products-list{grid-template-columns:repeat(3,minmax(0,1fr))}
	.mega__products-list>:nth-child(n+7),.mega__products-list>:nth-child(4):last-child{display:none}
}

/* ---------- Layout of the home page ---------- */
.homepage{display:flex;flex-direction:column;gap:48px;padding-top:28px;padding-bottom:56px}
.section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:18px}
.section-title{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.2}
.section-link{font-weight:800;font-size:15px;text-decoration:underline}
.label{font-weight:800;font-size:13px}

/* ---------- The top (v2, 0.11.0, V2Home; template-parts/home/top.php) ----------
   A computer: the categories (280) | the carousel, 470 high, its controls under it | the two small banners (340),
   225 each. 1024–1279: the small banners in a row under the carousel. A phone: the carousel, then the two small
   banners side by side (V2HomeMobile). Until 0.11.0 the categories and a 16:9 carousel only. */
.home-top{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.hero{min-width:0}
.hero__main{position:relative;border-radius:var(--radius-big)}
.hero__main--banners .crb-zone__track{height:470px}
.home-top__small{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-content:start}
.home-top__small-item{min-width:0}
.home-top__small-item>.crb--small,.home-top__small-item>.home-small{height:100%}
.home-cats,.home-cats__panels{display:none}
@media (min-width:1280px){
	.home-top.has-small{grid-template-columns:minmax(0,1fr) 340px}
	.home-top.has-cats{grid-template-columns:280px minmax(0,1fr)}
	.home-top.has-cats.has-small{grid-template-columns:280px minmax(0,1fr) 340px}
	.home-top__small{grid-template-columns:minmax(0,1fr);grid-template-rows:225px 225px}
}
@media (min-width:1280px) and (max-width:1439px){
	.home-top.has-cats.has-small{grid-template-columns:240px minmax(0,1fr) 300px}
	.home-top.has-small{grid-template-columns:minmax(0,1fr) 300px}
}
@media (min-width:1024px) and (max-width:1279px){
	.home-top.has-cats{grid-template-columns:240px minmax(0,1fr)}
	.home-top.has-cats .home-top__small{grid-column:2}
	.home-top.has-cats.has-small .home-cats{grid-row:1/span 2}
	.hero__main--banners .crb-zone__track{height:auto;aspect-ratio:16/9}
}
@media (min-width:1024px){
	/* The list as high as the row (the carousel and its controls, or the two small banners), its items sharing it. */
	.home-cats{display:block;position:relative;grid-row:1;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
	.home-top.has-cats .hero{grid-column:2}
	.home-cats__list{position:absolute;inset:0;display:flex;flex-direction:column;padding:8px 0;overflow-y:auto;scrollbar-width:thin}
	.home-cats__list>li{display:flex;flex:1 1 0;min-height:34px;max-height:44px}
	.home-cats__item{display:flex;flex:1;align-items:center;gap:12px;min-width:0;padding:0 14px 0 13px;border-left:3px solid transparent;font-weight:700;font-size:15px;line-height:1.25;color:var(--ink)}
	.home-cats__item .chip{width:30px;height:30px;border-radius:9px}
	.home-cats__item .chip svg{width:17px;height:17px}
	.home-cats__item>.icon:last-child{color:#B7BCD1}
	.home-cats__item:hover,.home-cats__item.is-active{background:var(--ground);color:var(--accent-dark);border-left-color:var(--accent)}
	.home-cats__name{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
	/* A category's panel, over the carousel and the small banners, as in the big menu. */
	.home-cats__panels.is-open{display:block;position:absolute;left:calc(var(--cats-w,280px) + 20px);right:0;top:0;z-index:5;min-height:470px;padding:0;background:#fff;border-radius:var(--radius-big);box-shadow:0 24px 48px rgba(27,30,60,.18)}
	.home-top.has-cats{--cats-w:280px}
}
@media (min-width:1024px) and (max-width:1439px){
	.home-top.has-cats{--cats-w:240px}
	.home-cats__item{gap:10px;font-size:14px}
	.home-cats__item .chip{width:28px;height:28px;border-radius:8px}
}
/* No banner for this visitor: the top seller as a banner „Звезда“ (sun), 470 high (V2Home's first slide). */
.hero__main--product{height:470px;background:#FFE9A8;overflow:hidden}
.hero-pick{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:center;height:100%}
.hero-pick__text{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;padding:40px 12px 40px 44px}
.hero-pick__label{display:flex;align-items:center;gap:8px;margin:0;font-weight:800;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--accent-dark)}
.hero-pick__label::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.hero-pick__title{margin:0;font-family:var(--display);font-weight:700;font-size:38px;line-height:1.1;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.hero-pick__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0;font-family:var(--display);font-weight:700;font-size:34px;color:var(--ink)}
.hero-pick__price ins{text-decoration:none}
.hero-pick__price del{order:2;font-family:var(--text);font-size:18px;font-weight:700;color:var(--muted)}
.hero-pick__price ins{order:1}
.hero-pick__pct{order:3;padding:5px 10px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--text);font-size:14px;font-weight:800}
.hero-pick__price .crocoland-b2b-retail{display:none!important} /* the plugin writes display:block inline */
.hero-pick__price .crocoland-b2b-own strong{font-family:var(--text);font-size:15px;color:var(--green-dark)}
.hero-pick__price .crocoland-b2b-own strong>.amount{display:block;font-family:var(--display);font-size:34px;color:var(--ink)}
.hero-pick__cta{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:14px;background:var(--navy);color:#fff;font-weight:800;font-size:16px}
.hero-pick__cta:hover{background:var(--ink);color:#fff}
.hero-pick__media{display:grid;place-items:center;width:250px;height:250px;margin-right:30px;border-radius:50%;background:#fff;overflow:hidden;color:#8A5A00}
.hero-pick__media img{width:78%;height:78%;object-fit:contain}
.hero-pick__media img.has-bg{width:100%;height:100%}
/* A small banner without a record (crocoland_home_small_banners()): a top seller in the shape of the banners'. */
.home-small{display:grid;grid-template-columns:minmax(0,1fr) 118px;align-items:center;gap:12px;height:100%;min-height:225px;padding:22px 22px 22px 24px;border-radius:22px;background:#FDECEC;color:var(--ink)}
.home-small--mint{background:#E6F5EB}
.home-small:hover{color:var(--ink);box-shadow:0 10px 24px rgba(27,30,60,.12)}
.home-small__body{display:flex;flex-direction:column;gap:6px;min-width:0;max-height:100%;overflow:hidden}
.home-small__label{font-weight:800;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--accent-dark)}
.home-small--mint .home-small__label{color:var(--green-dark)}
.home-small__title{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.18;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.home-small__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-family:var(--display);font-weight:700;font-size:17px}
.home-small__price ins{text-decoration:none}
.home-small__price del{order:2;font-family:var(--text);font-size:13px;font-weight:700;color:var(--muted)}
.home-small__price .crocoland-b2b-retail{display:none!important} /* the plugin writes display:block inline */
.home-small__price .crocoland-b2b-own strong{font-family:var(--text);font-size:12px;color:var(--green-dark)}
.home-small__price .crocoland-b2b-own strong>.amount{display:block;font-family:var(--display);font-size:17px;color:var(--ink)}
.home-small__cta{margin-top:6px;font-weight:800;font-size:15px;text-decoration:underline;text-underline-offset:.2em}
.home-small__pic{display:grid;place-items:center;width:118px;height:118px;border-radius:50%;background:#fff;overflow:hidden;color:var(--navy)}
.home-small__pic img{width:80%;height:80%;object-fit:contain}
.home-small__pic img.has-bg{width:100%;height:100%}

/* Benefits (v2, 0.10.0): one white card, the dark first cell (the public code; a trader's discount), then four
   with an icon on its tint (template-parts/home/benefits.php). Until 0.10.0 one thin strip of three. */
.homepage>.benefits{margin-top:-24px}
/* № 116 (0.22.1, „В. Тънка лента“): one line each, icons 34 / 18, the strip 10 px inside (18 until 0.22.1). */
.benefits{display:flex;align-items:stretch;gap:16px;padding:10px 20px 10px 10px;border:1px solid var(--line);border-radius:20px;background:#fff}
/* Each as wide as its words (equal columns until 0.22.1 wrapped „Наложен платеж · карта · TBI“ at 1440), the room
   left between them. */
.benefits__list{display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:space-between;align-items:center;gap:16px;flex:1;min-width:0}
/* A tablet or a narrow computer: the dark cell a row above the four. */
/* A computer: five equal columns, the dark cell the first (V2Home). */
@media (min-width:1200px){.benefits.has-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr)}}
@media (max-width:1199px){.benefits.has-lead{flex-direction:column}}
.benefit{display:flex;min-width:0}
.benefit__in{display:flex;align-items:center;gap:12px;min-width:0;color:inherit}
a.benefit__in:hover b{text-decoration:underline;text-underline-offset:.2em}
.benefit__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--tone-bg);color:var(--tone-fg)}
/* The small words beside the title while the line has room, under it when not — never cut. */
.benefit__text{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0;line-height:1.3}
.benefit b{font-size:14.5px;font-weight:900;color:var(--ink)}
.benefit small{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
/* A narrower computer (1024–1359): a little closer and 14 px, so the four titles stay on one line; the small words go
   under theirs. */
@media (max-width:1359px){.benefits__list{gap:12px}.benefit__in{gap:10px}.benefit b{font-size:14px}}
.benefits__lead{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:12px 12px 12px 16px;border-radius:14px;background:var(--navy);color:#fff}
.benefits__lead-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.benefits__lead-text b{font-size:15px;line-height:1.5}
.benefits__lead-text>span{font-size:13px;font-weight:700;color:#D9DCF2}
.benefits__code{display:inline-block;padding:0 6px;border:1.5px dashed #A9ADDA;border-radius:6px;letter-spacing:.04em;line-height:1.4;white-space:nowrap}
.benefits__copy{flex-shrink:0;min-height:40px;padding:0 12px;border:2px solid #fff;border-radius:10px;background:transparent;color:#fff;font-weight:800;font-size:13px}
.benefits__copy:hover{background:#fff;color:var(--navy)}
.benefits__lead--trade{background:var(--green-dark)}
.benefits__pills{display:none} /* № 106: the phone's strip (below) */
/* A word wider than its column (large text on a phone: "Проследяване" at 64px) breaks instead of widening the page.
   At the normal size no word is that wide, so nothing moves (0.8.3). */
h1,h2,h3,.page__title,.section-title,.fact__title,.fact__text,.pdp-ship__date{overflow-wrap:break-word}
.pdp__top>*,.pdp-ship,.fact{min-width:0}
.pdp-ship{max-width:100%}
/* A list that scrolls sideways holds what is placed absolutely inside it (the text of a card for screen readers):
   without it that text was placed outside the list and the page grew by every card out of view (0.8.3). 0.10.0 lost
   this comment's end, and the rule with it: the phone's home page was 890 px wide (fixed in 0.11.0). */
.save__list,.cart-more__list,.pdp-more__list,.goes__list,.cats__grid,.chips--scroll,.subcats__list,.benefits__list,.woocommerce-MyAccount-navigation,.prose table,.products--swipe,.best__tabs,.trust__list{position:relative}

/* Categories */
/* As many columns as tiles, up to eight (0.9.5: seven tiles left the eighth place empty). */
.cats__grid{display:grid;grid-template-columns:repeat(var(--cats,8),minmax(0,1fr));gap:14px}
.cats__grid li:nth-child(n+9){display:none}
.cat{display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;padding:18px 8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);text-align:center;color:var(--ink)}
.cat:hover{border-color:var(--line-2);color:var(--accent-dark)}
.cat__name{font-weight:800;font-size:14px;line-height:1.25}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--navy);font-weight:800;font-size:14px}
.tab[aria-selected="true"]{border-color:var(--navy);background:var(--navy);color:#fff}

/* ---------- The home page's sections (v2, 0.11.0, V2Home and V2HomeMobile) ---------- */
.section-head--lead{align-items:baseline}
.section-lead{margin:0;font-size:15px;color:var(--muted)}
.section-head .section-title{margin:0}
.homepage .section-title{font-size:28px}

/* „За кого купуваш?“: six ages in circles (template-parts/home/ages.php). */
.ages__grid{display:grid;grid-template-columns:repeat(var(--ages,6),minmax(0,1fr));gap:16px}
.age-tile{display:flex;flex-direction:column;align-items:center;gap:10px;height:100%;padding:22px 12px 20px;border:1px solid var(--line);border-radius:20px;background:#fff;text-align:center;color:var(--ink)}
.age-tile:hover{border-color:var(--line-2);color:var(--ink)}
.age-tile__circle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:var(--tone-bg);color:var(--tone-fg);line-height:1}
.age-tile__circle b{font-family:var(--display);font-weight:700;font-size:26px;white-space:nowrap}
.age-tile__circle span{margin-top:4px;font-weight:800;font-size:13px}
.age-tile__label{font-weight:800;font-size:16px;line-height:1.25}
.age-tile__count{font-size:13px;color:var(--muted)}

/* A promotion's row (template-parts/home/promotions.php): a box of its colour, the tag, the title, the line, „Виж всички“. */
.promo-row{display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:24px;background:#FDECEC}
.promo-row--clearance{background:#FFF4DB}
.promo-row__head{display:flex;align-items:center;flex-wrap:wrap;gap:14px 16px}
.promo-row__tag{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;border-radius:16px;background:var(--accent);color:#fff}
.promo-row--clearance .promo-row__tag{background:var(--last);color:var(--ink)}
.promo-row__text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.promo-row__title{margin:0;font-family:var(--display);font-weight:700;font-size:28px;line-height:1.2}
.promo-row .promo-row__line{margin:0;font-size:15px;font-weight:700;color:var(--accent-dark);white-space:normal}
.promo-row--clearance .promo-row__line{color:#8A5A00}
.promo-row__all{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border:1px solid #F6C5C8;border-radius:14px;background:#fff;color:var(--accent-dark);font-weight:800;font-size:15px}
.promo-row--clearance .promo-row__all{border-color:#F0D28A;color:var(--ink)}
.promo-row__all:hover{box-shadow:0 6px 16px rgba(27,30,60,.1)}
.promo-row .card{border-color:transparent}
/* The countdown's own colours (promo.php) stay as they were on the other pages. */
.promo-row .promo-end.is-soon{color:var(--accent-dark)}

/* „Най-продавани“: the tabs and „Виж всички“ on the right (template-parts/home/hits.php). */
.best__tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.best__tabs .tab{height:42px;padding:0 16px}
.best__all{display:none}

/* „Всички категории“: a picture on its colour, the name and the count (template-parts/home/all-categories.php). */
.cat-tiles__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cat-tile{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;color:var(--ink)}
.cat-tile:hover{border-color:var(--line-2);color:var(--accent-dark)}
.cat-tile__media{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden;background:var(--tone-bg);color:var(--tone-fg)}/* overflow: a tall picture does not stretch the 4:3 (0.12.0) */
.cat-tile__media img{width:78%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.cat-tile__media img.has-bg{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.cat-tile__text{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px}
.cat-tile__name{font-size:15px;line-height:1.25}
.cat-tile__count{font-size:13px;color:var(--muted)}

/* „Подаръци по бюджет“: three tiles (template-parts/home/gifts.php). */
.gifts__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gift-tile{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;padding:28px;border-radius:22px;background:var(--tone-bg);color:var(--ink)}
.gift-tile:hover{color:var(--ink);box-shadow:0 10px 24px rgba(27,30,60,.1)}
.gift-tile__text{display:flex;flex-direction:column;gap:6px}
.gift-tile__label{font-weight:800;font-size:13px;text-transform:uppercase;color:var(--tone-fg)}
.gift-tile__price{font-family:var(--display);font-weight:700;font-size:26px;white-space:nowrap}
.gift-tile__cta{font-weight:800;font-size:15px;text-decoration:underline;text-underline-offset:.2em}
.gift-tile__pic{display:grid;place-items:center;flex-shrink:0;width:110px;height:110px;border-radius:50%;background:#fff;overflow:hidden}
.gift-tile__pic img{width:80%;height:80%;object-fit:contain}
.gift-tile__pic img.has-bg{width:100%;height:100%}

/* „Марки“: eight tiles, the name until the logos (0.13.0), the count (template-parts/home/brands.php). */
.brands__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}
.brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:104px;padding:0 8px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--navy);text-align:center}
.brand:hover{border-color:var(--line-2);color:var(--accent-dark)}
.brand__name{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.15;overflow-wrap:anywhere}
.brand__count{font-size:12px;font-weight:700;color:var(--muted)}
.brand__logo{display:flex;align-items:center;justify-content:center;width:100px;height:40px}/* 0.13.0: the logo from „Марки“ */
.brand__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* „Отзиви от покупки“ and trust (template-parts/home/reviews.php). */
.trust{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px}
.trust__mark{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:24px;background:var(--navy);color:#fff}
.trust__label{margin:0;font-family:var(--text);font-weight:800;font-size:13px;text-transform:uppercase;color:#A9ADDA}
.trust__score{display:flex;flex-direction:column;gap:10px;margin:0}
.trust__score b{font-family:var(--display);font-weight:700;font-size:48px;line-height:1}
.trust__stars,.review-card__stars{color:#F2B01E;font-size:22px;letter-spacing:2px;line-height:1}
.trust__stars{align-self:flex-start;color:#4A4E8A}
.trust__stars .stars__fill{color:#F2B01E}
.trust__count{margin:0;font-size:15px;color:#D9DCF2}
.trust__since{display:flex;flex-direction:column;gap:4px;margin:auto 0 0;padding-top:16px;border-top:1px solid #3A3E78}
.trust__since b{font-family:var(--display);font-size:22px}
.trust__since span{font-size:14px;color:#D9DCF2}
/* 0.17.1: without a review — only „от 1997 г.“ and the places, the card across */
.trust--plain{grid-template-columns:minmax(0,1fr)}
.trust--plain .trust__mark{padding:24px 32px}
.trust--plain .trust__since{margin:0;padding:0;border:0}
/* The traders' banner (template-parts/home/traders.php) under „Марки“ — back as it was until 0.11.0 (№ 105 т. 4, 0.21.8) */
.trade{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:40px 48px;border-radius:var(--radius-big);background:linear-gradient(100deg,#1D5BA8 0%,#24275A 100%);color:#fff;overflow:hidden}
.trade__text{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.trade__title{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.2}
.trade__points{display:flex;flex-direction:column;gap:6px;padding-left:20px;list-style:disc;font-size:17px;line-height:1.5;color:#E6E9F8}
.trade__points b{color:#fff;font-weight:800}
.trade__button{display:inline-flex;align-items:center;min-height:50px;margin-top:6px;padding:0 28px;border-radius:999px;background:#fff;color:var(--accent-dark);font-weight:800;font-size:16px}
.trade__button:hover{background:#FDECEC;color:var(--accent-dark)}
.trade__art{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:300px;height:240px;margin:-10px -8px -10px 0}
.trade__mascot{position:relative;z-index:1;width:220px;height:220px;filter:drop-shadow(0 18px 26px rgba(0,0,0,.3))}
.trade__confetti{position:absolute;top:50%;left:50%;width:340px;height:264px;max-width:none;transform:translate(-50%,-50%)}
.homepage>.trade{margin-top:40px} /* as in the approved screenshots: more air under „Марки“ */
.trust__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.review-card{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff}
.review-card__stars{font-size:18px}
.review-card__text{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.review-card__who{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid #F0F2F7;color:var(--ink)}
.review-card__pic{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#F4F6FA;overflow:hidden}
.review-card__pic img{width:100%;height:100%;object-fit:contain}
.review-card__by{display:flex;flex-direction:column;gap:2px;min-width:0}
.review-card__by b{font-size:14px}
.review-card__by>span{font-size:12px;color:var(--muted)}
.review-card__ok{display:inline-flex;align-items:center;gap:3px;color:var(--green-dark);font-weight:800}

/* The home page's rows of cards (crocoland_home_cards()): six on a large computer, five, four; on a phone they scroll
   sideways, the next one peeking, with a bar under them („Най-продавани“: two by two). */
.homepage .products--home{grid-template-columns:repeat(6,minmax(0,1fr))}
.swipe-bar{display:none}
@media (max-width:1359px){
	.homepage .products--home{grid-template-columns:repeat(5,minmax(0,1fr))}
	.homepage .products--home .products__item:nth-child(n+6){display:none}
	/* A promotion's „2 реда“ (0.17.6, the shop panel): two whole rows at every width. */
	.homepage .products--home.products--rows2 .products__item:nth-child(n+6){display:flex}
	.homepage .products--home.products--rows2 .products__item:nth-child(n+11){display:none}
}
@media (max-width:1279px){
	.homepage .products--home{grid-template-columns:repeat(4,minmax(0,1fr))}
	.homepage .products--home .products__item:nth-child(n+5){display:none}
	.homepage .products--home.products--rows2 .products__item:nth-child(n+5){display:flex}
	.homepage .products--home.products--rows2 .products__item:nth-child(n+9){display:none}
	.cat-tiles__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
	.brands__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
	.trust{grid-template-columns:minmax(0,1fr)}
	.gift-tile{padding:22px}
	.gift-tile__pic{width:84px;height:84px}
}
@media (max-width:1023px){
	.gift-tile__pic{display:none}
	.ages__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Product grid and card ---------- */
.products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0;padding:0}
.products::before,.products::after{display:none}
.products__item{display:flex;min-width:0;margin:0;padding:0;width:auto;float:none}
.card{flex:1;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.card__media{position:relative;aspect-ratio:1/1;background:var(--tone-card)}
.card__images{position:absolute;inset:0;display:block}
.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;background:#fff}
.card__img.is-active{display:block}
.card__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6A7090}
.card__dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.card__dots span{width:5px;height:5px;border-radius:3px;background:#B7BCD1;transition:width .15s}
.card__dots span.is-active{width:18px;background:var(--navy)}
.badge{position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:13px;line-height:1.3}
.card__fav{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--navy)}
.card__fav[aria-pressed="true"]{color:var(--accent)}
.card__fav[aria-pressed="true"] path{fill:currentColor}
.card__body{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px}
.card__brand{min-height:1.3em;margin-bottom:-4px;font-size:12px;font-weight:800;line-height:1.3;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__title{font-family:var(--text);font-weight:700;font-size:15px;line-height:1.35;min-height:2.7em} /* two full lines, every card (0.9.20) */
/* The key feature (v2, crocoland_card_features()): „3–5 години“, „4 500 л“ in a small pill. */
.card__features{display:flex;flex-wrap:wrap;gap:6px}
.card__feature{padding:3px 8px;border-radius:999px;background:#EEF0FA;color:var(--navy);font-weight:800;font-size:12px;line-height:1.35}
.card__title a{color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__title a:hover{color:var(--accent-dark)}
.card__rating{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.card__rating b{color:var(--ink)}
.stars{position:relative;display:inline-block;color:#C3C8D8;letter-spacing:1px;line-height:1}
.stars__fill{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:#F5B301}
.card__colours{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.swatch{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 2px #fff;border:1px solid #B7BCD1}
.card__stock{font-size:13px;font-weight:700;color:var(--green-dark)}
.card__stock::before{content:"● "}
.card__stock.is-out{color:var(--muted)}
.card__avail{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:700;line-height:1.35}
.card__eta{font-size:13px;font-weight:700;color:var(--green-dark)}
.card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:auto;font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);line-height:1.25}
.card__price ins{order:1;text-decoration:none;color:var(--accent)}
.card__price del{order:2;font-family:var(--text);font-size:14px;font-weight:600;color:var(--muted)}
.card__price .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* B2B (crocoland-b2b's markup): "Цена на дребно: X", then "Вашата цена:" over the amount (screen B2B). */
.card__price .crocoland-b2b-prices{display:flex;flex-direction:column;gap:2px;font-family:var(--text)}
.card__price .crocoland-b2b-retail{font-size:13px;font-weight:400;color:var(--muted)}
.card__price .crocoland-b2b-retail .amount{font-weight:700}
.card__price .crocoland-b2b-own strong{display:block;font-size:13px;font-weight:800;color:var(--green-dark)}
.card__price .crocoland-b2b-own strong>.amount{display:block;margin-top:2px;font-family:var(--display);font-size:20px;font-weight:700;color:var(--ink);white-space:nowrap}
/* A range: the first amount, then "– second" on one line. */
.card__price .crocoland-b2b-own strong>.amount~.amount{display:inline}
.card__price .crocoland-b2b-own strong>span[aria-hidden]:not(.amount){font-family:var(--display);font-size:20px;color:var(--ink)}
.card__tbi{font-size:13px;font-weight:700;color:var(--navy)}
/* A trader's pack (crocoland-b2b 1.1.0): the theme writes it itself — on the card in the TBI line's place, under the product's price — so the plugin's line after every price stays out. */
.crocoland-b2b-pack{display:none!important}
.card__pack{font-size:13px;font-weight:700;color:var(--green-dark)}
.button--add,.button--choose,.button--see{height:46px;width:100%;border-radius:12px;font-size:15px}
.button--add.is-loading{opacity:.7;pointer-events:none}
.button--add.is-added{background:var(--green)}



/* The traders' banner (template-parts/home/traders.php), in place of "За нас" */


/* ---------- Social buttons (the footer, "Благодарим") and the phone menu's logo; the footer itself is footer.css (0.9.3) ---------- */
.footer__social{display:flex;gap:10px;flex-wrap:wrap}
.drawer__logo .logo__b{color:var(--green-dark)}
/* Round buttons with the logos (Denis, 16.10.2026); in the footer from 0.9.3 small, white logo on a dark tile. */
.social{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#fff;transition:transform .15s,background-color .15s,color .15s}
.social:focus-visible{outline:3px solid #fff;outline-offset:3px}
a.social--facebook{color:#0866FF}
a.social--instagram{color:#FF0069}
a.social--tiktok{color:#000}
/* Pointed at or focused: the network's colour with a white logo (Denis, 16.10.2026). */
a.social:is(:hover,:focus-visible){transform:translateY(-2px);color:#fff}
a.social.social--facebook:is(:hover,:focus-visible){background:#1877F2}
a.social.social--instagram:is(:hover,:focus-visible){background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
a.social.social--tiktok:is(:hover,:focus-visible){background:#000}

.bottom-nav{display:none}

/* ---------- Phone menu (dialog) ---------- */
.drawer{position:fixed;inset:0 auto 0 0;width:min(100vw,420px);max-width:100vw;height:100%;max-height:100%;margin:0;padding:0;border:0;background:#fff;color:var(--ink);overflow-y:auto}
.drawer::backdrop{background:rgba(27,30,60,.5)}
.drawer__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line)}
.drawer__logo{font-size:18px}
.drawer__logo .wordmark__mark{width:34px;height:34px}
.drawer__level{padding:16px 16px 20px}
/* v2 (0.10.0, V2MobileMenu): Профил and Любими, the categories with their counts, „Още“ as tiles, the help in
   a tinted card with the phone. Until 0.10.0 the sale and the clearance were dark rows and the menu's links a list. */
.drawer__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.drawer__actions .button{height:52px;border-radius:14px}
.drawer__label{margin:20px 0 4px;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.drawer__actions+.drawer__label{margin-top:0}
.drawer__item{display:flex;align-items:center;gap:12px;width:100%;min-height:45px;padding:6px 0;border:0;border-bottom:1px solid #F0F2F7;background:none;color:var(--ink);font-weight:800;font-size:15px;text-align:left}
.drawer__item>span:not(.chip):not(.menu-count):not(.drawer__sub-icon){flex:1;min-width:0}
.drawer__item>.icon:last-child{color:#8A90A6}
.drawer__item .chip{width:34px;height:34px;border-radius:10px}
.menu-count{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--muted)}
.drawer__divider{padding:18px 0 6px;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.drawer__more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.drawer__more a{display:flex;align-items:center;gap:10px;min-height:52px;height:100%;padding:6px 12px;border:1px solid var(--line);border-radius:14px;font-weight:800;font-size:15px;line-height:1.2;color:var(--ink)}
.drawer__more a>.icon:first-child{flex-shrink:0;color:var(--navy)}
.drawer__more .is-season,.drawer__more .is-promo{grid-column:1/-1}
/* 0.18.2: the season link's colour is the panel's (--season, inc/collections.php), darkened for the text, light for the ground */
.is-season{--season-ink:color-mix(in srgb,var(--season,#1E9E4A) 70%,#000);--season-bg:color-mix(in srgb,var(--season,#1E9E4A) 11%,#fff)}
.drawer__more .is-season a{gap:12px;padding:0 14px;border:0;background:var(--season-bg);color:var(--season-ink)}
.drawer__more .is-season a>.icon:first-child{color:currentColor}
.drawer__more .is-season a>span{flex:1}
.drawer__more .is-promo a{border:0;background:#FDECEC;color:var(--accent-dark)}
.drawer__more .is-promo--clearance a{background:var(--last);color:var(--ink)}
.drawer__help{display:flex;flex-direction:column;margin-top:20px;padding:4px 14px 14px;border-radius:18px;background:#EEF0FA}
.drawer__help-link,.drawer__extra a{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid #DCE0F0;font-weight:800;font-size:15px;color:var(--navy)}
.drawer__help-link>span{flex:1}
.drawer__extra{display:flex;flex-direction:column}
/* № 101 (the artifact „Пиши ни във Viber“): „Питай нас“ instead of the phone's row, its own box under the links — the crocodile, the words, the hours
   and two buttons side by side: „Звънни ни“ (green) and „Пиши ни“ (Viber's #7360F2, its own icon). */
.drawer__ask{display:grid;gap:10px;margin-top:10px;padding:12px;border-radius:16px;background:#EEF0FA}
.drawer__ask-top{display:flex;align-items:center;gap:10px}
.drawer__ask-ava{flex:none;width:42px;height:42px;border-radius:50%;background:#EAF7EE;object-fit:contain}
.drawer__ask-title{margin:0;font-family:var(--display);font-weight:700;font-size:14.5px;line-height:1.25;color:var(--navy)}
.drawer__ask-hours{margin:2px 0 0;font-size:13px;color:var(--muted)}
.drawer__ask-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.drawer__ask-btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 6px;border-radius:12px;color:#fff;font-weight:900;font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap}
.drawer__ask-btn svg{flex:none}
.drawer__ask-call{background:var(--green)}
.drawer__ask-viber{background:#7360F2}
.drawer__ask-btn:hover{color:#fff}
.drawer__back{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font-weight:800;color:var(--navy)}
.drawer__title{font-family:var(--display);font-size:24px;margin:8px 0 6px}
.drawer__all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800;font-size:15px;color:var(--accent-dark)}
.drawer__list--subs .drawer__item{font-weight:700}
/* 0.17.1 (V2MobileMenu2): each subcategory with its icon; the page's one marked in red. */
.drawer__item.drawer__sub{position:relative;min-height:47px;margin:0 -10px;padding:0 10px;width:calc(100% + 20px)}
.drawer__item>span.drawer__sub-icon{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;color:#6A7090}
.drawer__sub-icon.tint-0{background:#F7F3EA}.drawer__sub-icon.tint-1{background:#EEF6F0}.drawer__sub-icon.tint-2{background:#FBF0F3}
.drawer__sub-icon.tint-3{background:#F3F5FA}.drawer__sub-icon.tint-4{background:#F6F0FB}.drawer__sub-icon.tint-5{background:#EEF4FB}
.drawer__sub[aria-current="page"]{border-bottom-color:transparent;border-radius:12px;background:#FDECEC;color:var(--accent-dark);font-weight:800}
.drawer__sub[aria-current="page"]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--accent)}
.drawer__sub[aria-current="page"] .drawer__sub-icon{background:#fff}
.drawer__sub[aria-current="page"] .menu-count{color:var(--accent-dark)}
/* „По възраст“ (V2MobileMenu2): chips in a row that scrolls, no bar. */
.drawer__ages{display:flex;gap:8px;margin:8px -16px 0;padding:0 16px 2px;overflow-x:auto;scrollbar-width:none}
.drawer__ages::-webkit-scrollbar{display:none}
.drawer__age{display:flex;align-items:center;gap:4px;flex-shrink:0;height:44px;padding:0 16px;border-radius:999px;background:var(--tone-bg);color:var(--tone-fg);font-weight:800;font-size:14px;white-space:nowrap}
.drawer__age b{font-weight:800}
.tone-violet{--tone-bg:#F3EEFB;--tone-fg:#5B3B9A;--tone-img:#E2D8F4;--tone-card:#F7F3FC}
/* The phone's quick links under the header, on the home page (v2, 0.10.0, V2HomeMobile). */
.quick{display:none}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;box-shadow:0 8px 24px rgba(27,30,60,.25)}
.toast--line{white-space:nowrap} /* № 112 (0.22.3): „✓ Добавено · Количка (N)“ on one line, as in the sketch */

/* Checkout v2's own "Още X до безплатна доставка" (off on the live shop today; the theme has
   its own bar): hidden by the plugin's class prefix, its setting is not touched. Its
   "безплатна доставка" badge on a courier stays. */
[class*="csesm2"][class*="free-shipping"]:not(.csesm2-free-shipping-badge),[class*="csesm2"][class*="progress"],[id*="csesm2"][id*="free-shipping"],[id*="csesm2"][id*="progress"]{display:none!important}

/* ---------- Favourites (inc/favourites.php) ---------- */
.favs__note{color:var(--muted);margin:-8px 0 16px}
.favs__note a{text-decoration:underline}
/* The heart stays on a phone here (it is hidden on the home page's cards): it is how a product leaves the list. */
.favs .card__fav{display:flex}
.favs__count{font-weight:700;margin-bottom:12px}
.favs__count:empty{display:none}
.favs[aria-busy="true"] .favs__list{min-height:320px}
/* An empty list in the empty cart's look (checkout.css .cart-empty-state): the favourites, a search with nothing found. */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;background:#fff;border:1px solid var(--line);border-radius:20px;text-align:center}
.empty-state[hidden]{display:none}
.empty-state__icon{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:#EEF0FA;color:var(--navy)}
.empty-state__icon--heart{background:#FDECEC;color:var(--accent)}
.empty-state__title{margin:0;font-family:var(--display);font-size:22px;line-height:1.3;color:var(--ink)}
.empty-state__text{max-width:46ch;margin:0;color:var(--ink-2)}
.empty-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:8px 0 0}
.empty-state form.search{width:100%;max-width:560px;margin:8px 0 0;text-align:left}
.search-empty{margin-bottom:32px}

/* ---------- WPForms (the request for a trader's account, /targovski-akaunt/) ---------- */
/* WPForms "modern" reads these variables (set on :root): the theme's colours and sizes. */
.wpforms-container{--wpforms-field-border-radius:12px;--wpforms-field-border-color:#D5D9E6;--wpforms-field-text-color:#1B1E3C;--wpforms-field-size-input-height:50px;--wpforms-field-size-font-size:16px;--wpforms-field-size-padding-h:14px;--wpforms-field-size-input-spacing:16px;--wpforms-label-color:#1B1E3C;--wpforms-label-size-font-size:14px;--wpforms-label-sublabel-color:#5B6275;--wpforms-label-error-color:#B8050F;--wpforms-button-background-color:#E30614;--wpforms-button-text-color:#fff;--wpforms-button-border-radius:12px;--wpforms-button-size-height:52px;--wpforms-button-size-font-size:16px;--wpforms-button-size-padding-h:28px;--wpforms-page-break-color:#E30614}
.entry__content div.wpforms-container-full{max-width:720px;margin:24px 0;padding:28px;background:#fff;border:1px solid var(--line);border-radius:20px}
.wpforms-container .wpforms-field-label{font-weight:800}
.wpforms-container .wpforms-field input:focus,.wpforms-container .wpforms-field textarea:focus,.wpforms-container .wpforms-field select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(36,39,90,.2)}
.wpforms-container .wpforms-submit{font-family:var(--text);font-weight:800}
.wpforms-container .wpforms-submit:hover{background:var(--accent-dark)}
.wpforms-confirmation-container-full{padding:16px 18px;border:1px solid #C9EBD4;border-left:5px solid var(--green);border-radius:14px;background:#E6F5EB;color:var(--green-dark);font-weight:700}
@media (max-width:767px){
	.empty-state{padding:32px 18px;border-radius:16px}
	.empty-state__icon{width:72px;height:72px}
	.empty-state__title{font-size:20px}
	.empty-state__actions .button{flex:1 1 auto}
	.entry__content div.wpforms-container-full{padding:18px;border-radius:16px}
}

/* ---------- Pages until their screens exist ---------- */
/* main.page: WordPress also gives an article of a page the class "page". */
main.page{padding-top:32px;padding-bottom:56px}

/* ---------- Small cards with "+" ("Често купувани заедно"; inc/upsell.php) ---------- */
.together__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mini{display:flex;align-items:center;gap:14px;min-width:0;padding:12px;border:1px dashed var(--line-2);border-radius:16px;background:#fff}
.mini__img{display:flex;align-items:center;justify-content:center;flex:0 0 64px;height:64px;border-radius:12px;background:var(--ground);overflow:hidden}
.mini__img img{width:100%;height:100%;object-fit:contain}
.mini__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mini__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:15px;font-weight:700;line-height:1.3;color:var(--ink)}
:is(.mini__price,.added-card__price){display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
:is(.mini__price,.added-card__price) ins{order:1;text-decoration:none;color:var(--accent)}
:is(.mini__price,.added-card__price) del{order:2;font-family:var(--text);font-size:13px;font-weight:600;color:var(--muted)}
:is(.mini__price,.added-card__price) .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* B2B: "Цена на дребно: X" small, then "Вашата цена: Y" on one line. */
:is(.mini__price,.added-card__price) .crocoland-b2b-prices{display:flex;flex-direction:column;font-family:var(--text)}
:is(.mini__price,.added-card__price) .crocoland-b2b-retail{font-size:12px;font-weight:400;color:var(--muted)}
:is(.mini__price,.added-card__price) .crocoland-b2b-own strong{font-size:12px;font-weight:800;color:var(--green-dark);white-space:nowrap}
:is(.mini__price,.added-card__price) .crocoland-b2b-own strong>.amount{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink)}
.mini__add{display:flex;align-items:center;justify-content:center;flex:0 0 44px;height:44px;border-radius:50%;background:var(--navy);color:#fff}
.mini__add:hover{background:var(--accent);color:#fff}
.mini__add.is-loading{opacity:.6;pointer-events:none}
.mini__add.is-added{background:var(--green-dark)}
@media (max-width:1023px){
	.together__list{grid-template-columns:minmax(0,1fr)}
}

/* ---------- The bar to free delivery; for B2B, to the minimum order (crocoland_cart_bar(): the cart and the window below) ---------- */
.cart-bar{display:flex;flex-direction:column;gap:10px;padding:18px 22px;border:1px solid #C9EBD4;border-radius:18px;background:#E6F5EB}
.cart-bar__text{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;line-height:1.4;color:var(--green-dark)}
.cart-bar--b2b{background:#FFF4DB;border-color:#F3D88E}
.cart-bar--b2b .cart-bar__text{color:#6B4700}
.cart-bar--b2b .kroko-bar{--bar-fg:#E0A800}
/* The bar with Кроко at the end of the part that is done (0.9.1, crocoland_kroko_bar()). */
.kroko-bar{--done:0%;--bar-h:8px;--bar-bg:#fff;--bar-fg:var(--green);--kroko:26px;position:relative;display:block;height:var(--kroko);flex-shrink:0}
.kroko-bar__track{position:absolute;left:0;right:0;top:50%;height:var(--bar-h);margin-top:calc(var(--bar-h) / -2);overflow:hidden;border-radius:999px;background:var(--bar-bg)}
.kroko-bar__fill{position:absolute;top:0;bottom:0;left:0;width:var(--done);border-radius:inherit;background:var(--bar-fg);transition:width .4s ease}
.kroko-bar__kroko{position:absolute;top:0;left:clamp(0px,calc(var(--done) - var(--kroko) / 2),calc(100% - var(--kroko)));width:var(--kroko);height:var(--kroko);border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(36,39,90,.3);transition:left .4s ease}
@media (prefers-reduced-motion:reduce){.kroko-bar__fill,.kroko-bar__kroko{transition:none}}

/* ---------- "Добавено в количката" (inc/added.php, theme.js); on a phone a sheet at the bottom ---------- */
html.has-added{overflow:hidden}
/* v2 0.15.0 (V2Added): a panel at the right side, the page dimmed behind it (a window in the middle until then). */
.added{width:min(440px,100vw);max-width:none;height:100vh;height:100dvh;max-height:none;margin:0 0 0 auto;padding:0;border:0;border-radius:0;background:#fff;color:var(--ink);box-shadow:-16px 0 48px rgba(27,30,60,.22);overflow-y:auto;overscroll-behavior:contain}
.added::backdrop{background:rgba(27,30,60,.55)}
.added[open]{animation:added-in .22s ease-out}
@keyframes added-in{from{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.added[open]{animation:none}}
.added__box{display:flex;flex-direction:column;gap:16px;padding:0 24px 24px}
.added__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -24px;padding:20px 24px 16px;border-bottom:1px solid var(--line);background:#fff}
.added__title{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;font-weight:700;line-height:1.25;color:var(--green-dark)}
.added__title:focus{outline:0}
.added__title .icon{box-sizing:content-box;padding:7px;border-radius:50%;background:var(--green);color:#fff}
.added__x{display:flex;align-items:center;justify-content:center;flex:0 0 44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--ground);color:var(--ink)}
.added__x:hover{background:var(--line)}
/* The product: the picture with its discount, the name, the variant as a chip and the quantity, the price under them. */
.added__item{display:flex;align-items:flex-start;gap:14px}
.added__img{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 96px;height:96px;border-radius:14px;background:var(--ground);overflow:hidden}
.added__img img{width:100%;height:100%;object-fit:contain}
.added__off{position:absolute;top:6px;left:6px;padding:2px 7px;border-radius:999px;background:var(--accent);font-size:11px;font-weight:800;line-height:1.4;color:#fff}
.added__text{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.added__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16px;font-weight:800;line-height:1.35}
.added__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.added__variant{padding:3px 10px;border-radius:999px;background:var(--ground);font-size:13px;font-weight:700;line-height:1.35;color:var(--ink-2)}
.added__qty{font-size:14px;line-height:1.35;color:var(--muted)}
.added__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-family:var(--display);font-size:22px;font-weight:700;white-space:nowrap}
.added__price del,.added__price small{font-family:var(--text);font-size:14px;font-weight:600;color:var(--muted)}
.added__bar:empty{display:none}
.added__bar .cart-bar{gap:8px;padding:12px 16px;border-radius:14px}
.added__bar .cart-bar__text{font-size:15px}
/* "Още X € до безплатна доставка…": the bar's short text, as on a phone. */
.added__bar .hide-mobile{display:none}
.added__bar .only-mobile{display:revert}
.added__actions{display:flex;flex-direction:column;gap:10px}
.added__actions .button{width:100%;min-width:0;gap:10px;padding:0 12px;font-size:16px}
.added__more{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.added__more-title{font-family:var(--display);font-size:16px;font-weight:700}
/* One under the other, a row each (V2Added; three cards in a row until 0.15.0). */
.added__list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;list-style:none}
.added-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:2px 12px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:14px}
.added-card__img{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:10px;background:var(--ground);overflow:hidden}
.added-card__img img{width:100%;height:100%;object-fit:contain}
.added-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.added-card__price{grid-column:2;font-size:15px}
.added-card .added-card__add{grid-column:3;grid-row:1/3}
/* B2B: only the customer's price, its label read out but not shown (the card is narrow; the B2B plugin writes display:block inline). */
.added-card__price .crocoland-b2b-retail{display:none!important}
.added-card__price .crocoland-b2b-own strong{font-size:0}
.added-card__price .crocoland-b2b-own strong>.amount{font-size:15px}
.added-card__add{display:flex;align-items:center;justify-content:center;gap:4px;height:40px;padding:0 12px;border:2px solid var(--navy);border-radius:10px;background:#fff;color:var(--navy);font-size:14px;font-weight:800}
@media (hover:hover){.added-card__add:hover{background:var(--navy);color:#fff}}
.added-card__add.is-loading{opacity:.6;pointer-events:none}
.added-card__add.is-added{border-color:var(--green-dark);background:var(--green-dark);color:#fff;cursor:default}
.added-card__add>span:not(.button__text){display:flex}
.added-card__done,.added-card__add.is-added .added-card__plus{display:none!important}
.added-card__add.is-added .added-card__done{display:flex!important}
/* The header's cart jumps after an add. */
.is-bump{animation:cart-bump .5s ease}
@keyframes cart-bump{30%{transform:translateY(-6px) scale(1.12)}60%{transform:translateY(1px) scale(.96)}}
@media (max-width:767px){
	/* A sheet from the bottom, with its handle (V2AddedMobile). */
	.added{width:100%;height:auto;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(27,30,60,.2)}
	.added[open]{animation-name:added-up}
	@keyframes added-up{from{transform:translateY(100%)}}
	.added__box{gap:14px;padding:0 16px calc(18px + env(safe-area-inset-bottom))}
	.added__head{margin:0 -16px;padding:22px 16px 12px;border-bottom:0}
	.added__head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-2)}
	.added__title{font-size:16px}
	.added__img{flex-basis:76px;height:76px}
	.added__price{font-size:19px}
	.added-card__add{font-size:13px;padding:0 10px}
}

/* ---------- An add-on's field and choice, and an offer with „Добави“ (crocoland-options, inc/addons.php, 0.9.23) ---------- */
.addon-fields{display:flex;flex-direction:column;gap:12px}
.addon-field{display:flex;flex-direction:column;gap:6px}
.addon-field__label{padding:0;font-size:14px;font-weight:700;color:var(--ink-2)}
.addon-field__label .required{border:0;color:var(--accent-dark);text-decoration:none}
.addon-field__input{width:100%;height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:#fff;font-size:16px}
.addon-field__input:focus{border-color:var(--navy);outline:2px solid var(--navy);outline-offset:-1px}
.addon-choice{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:0;border:0}
.addon-choice>legend{float:left;width:100%;margin-bottom:6px}
.addon-chip{position:relative;display:inline-flex}
.addon-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.addon-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:15px;font-weight:700}
.addon-chip input:checked+span{border-color:var(--navy);background:var(--navy);color:#fff}
.addon-chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.addon-choice__note{flex-basis:100%;font-size:13px;color:var(--muted)}
.addon-offer{display:flex;flex-direction:column;gap:10px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.addon-offer__row{display:flex;align-items:center;gap:12px}
.addon-offer__img{flex:none;width:40px;height:40px;object-fit:contain;border-radius:8px;background:var(--ground)}
.addon-offer__name{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.addon-offer__price{flex:none;font-size:15px;font-weight:800;white-space:nowrap}
.addon-offer__price del{display:none}
.addon-offer__price ins{text-decoration:none}
.addon-offer__price small{font-size:12px;font-weight:600;color:var(--muted)}
.addon-offer__add{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:4px;height:40px;padding:0 12px;border:2px solid var(--navy);border-radius:10px;background:#fff;color:var(--navy);font-size:14px;font-weight:800}
@media (hover:hover){.addon-offer__add:not(:disabled):hover{background:var(--navy);color:#fff}}
.addon-offer__add.is-busy{opacity:.6;pointer-events:none}
.addon-offer.is-added .addon-offer__add{border-color:var(--green-dark);background:var(--green-dark);color:#fff;cursor:default}
/* № 85: opened, the button is the offer's one action, filled, with its sum („Добави · +20.00 €“; options.js). */
.addon-offer.is-open:not(.is-added) .addon-offer__add{background:var(--navy);color:#fff}
.addon-offer.is-open:not(.is-added) .addon-offer__add .icon{display:none}
[data-cro-flush].is-busy{opacity:.7;pointer-events:none}
.addon-offer:not(.is-open) .addon-fields,.addon-offer.is-added .addon-fields{display:none}
.addon-offer__msg{font-size:13px;font-weight:700;color:var(--accent-dark)}
/* In the window after an add: what went with the product, and its other add-ons. */
.added__addons{display:flex;flex-direction:column;gap:4px;margin-top:-6px;font-size:14px;font-weight:700;color:var(--green-dark)}
.added__addons li{display:flex;align-items:center;gap:6px}
.added__offers{display:flex;flex-direction:column;gap:8px}
@media (max-width:767px){
	.addon-offer{padding:8px 10px}
	.addon-offer__row{flex-wrap:wrap;gap:8px 10px}
	.addon-offer__name{flex-basis:calc(100% - 60px)}
	.addon-offer__price{margin-left:50px}
	.addon-offer__add{margin-left:auto}
	.addon-offer__img+.addon-offer__name{flex-basis:calc(100% - 60px)}
	.addon-offer__row:not(:has(.addon-offer__img)) .addon-offer__price{margin-left:0}
}

/* ---------- Breadcrumbs (category, product) ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;font-weight:700;color:var(--muted)}
.crumbs a{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
/* A phone shows only the way back. */
.crumbs-back{display:none;align-self:flex-start;align-items:center;gap:4px;min-height:32px;font-size:14px;font-weight:800;color:var(--muted)}

.page__title{font-family:var(--display);font-size:30px;line-height:1.2;margin-bottom:20px}
.entry{margin-bottom:24px}
.entry__content{line-height:1.6}
.page--shop .woocommerce-products-header__title{font-family:var(--display);font-size:30px;margin-bottom:16px}
.page--shop ul.products{margin-top:16px}

/* ---------- Up to 1279 px ---------- */
@media (max-width:1279px){
	.products{grid-template-columns:repeat(4,minmax(0,1fr))}
	/* "Категории": eight in a row do not fit under 1280px ("Радиоуправляеми" ran into "Конструктори"): a row that
	   scrolls sideways, as on a phone, with tiles wide enough for the names (0.8.3). */
	.cats__grid{display:flex;gap:12px;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scrollbar-width:none}
	.cats__grid::-webkit-scrollbar{display:none}
	.cats__grid li{flex:0 0 112px}
	.cats__grid li:nth-child(n+9){display:block}
	.cat__name{font-size:13px}
}

/* ---------- Phones and tablets: the phone header ---------- */
@media (max-width:1023px){
	:root{--gutter:16px}
	.trade{padding:32px}
	.trade__art{width:220px;height:200px;margin:0}
	.trade__mascot{width:170px;height:170px}
	.trade__confetti{width:250px;height:195px}
	.header__main{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px 8px;padding-top:12px;padding-bottom:14px}
	.header__menu{display:flex}
	/* The logo may use the column gaps (on 320px it is 193px in a 184px column, as it always was); with large
	   text CROCO and LAND go on two lines instead of pushing the page wider. */
	.header__logo{justify-self:center;gap:8px;min-width:0;margin-inline:-8px}
	.header__logo .logo__mark{width:36px;height:36px}
	/* 18 px is not large text: the darker green (6.2:1). */
	.header__logo .logo__word{display:flex;flex-wrap:wrap;font-size:18px;letter-spacing:0;min-width:0}
	.header__logo .logo__b{color:var(--green-dark)}
	.header__search{grid-column:1/-1;grid-row:2}
	.search__input{height:48px;border-radius:12px 0 0 12px;padding:0 14px}
	.search__button{width:52px;height:48px;border-radius:0 12px 12px 0}
	.search__clear{right:56px}
	/* The search over the whole screen while it is used (screen SearchMobile). */
	.is-searching{overflow:hidden}
	/* 0.17.1: the bar at the bottom stays (V2SearchMobile); until 0.17.0 the search covered it. */
	.is-searching .header__search{position:fixed;inset:0 0 calc(82px + env(safe-area-inset-bottom));z-index:60;padding:12px 16px;background:#fff;overflow:auto}
	.is-searching .bottom-nav{z-index:71}
	.is-searching form.search{flex-wrap:wrap;align-items:center;gap:8px 4px}
	.is-searching .search__back{display:flex;align-items:center;justify-content:center;width:40px;height:44px;border:0;background:none;color:var(--navy)}
	.is-searching .search__input{border-right:2px solid var(--navy);border-radius:12px;padding-right:44px}
	.is-searching .search__input:focus{box-shadow:0 0 0 4px #DADDF2}
	.is-searching .search__clear{right:4px;top:24px}
	.is-searching .site-header{z-index:70}
	.is-searching .search__button{display:none}
	/* V2SearchMobile: one column, the sections one under the other, the products as short rows. */
	.suggest{position:static;flex:1 0 100%;width:auto;max-height:none;overflow:visible;margin:4px -16px 0;border-radius:0;box-shadow:none;border-top:1px solid var(--line)}
	.suggest__cols{display:flex;flex-direction:column}
	.suggest__col,.suggest__col--terms{padding:16px 0 0;border:0;background:none}
	.suggest__label{padding:0 16px 6px}
	.suggest__phrase,.suggest__term,.suggest__product{padding-left:16px;padding-right:16px}
	.suggest__phrase{height:44px}
	.suggest__translit{margin:12px 16px 0}
	.suggest__product{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding-top:6px;padding-bottom:6px}
	.suggest__thumb{width:56px;height:56px;border-radius:12px}
	.suggest__tbi,.suggest__stock{display:none}
	/* 0.17.1: two categories and three products on a phone, as the canvas. */
	[aria-labelledby="suggest-terms"] .suggest__term:nth-of-type(n+3),.suggest__col--products .suggest__product:nth-of-type(n+4){display:none}
	.suggest__all{width:auto;margin:16px;min-height:52px}
	.header__actions{grid-column:3;grid-row:1}
	.header__action,.header__cart-text{display:none}
	/* No drop-downs on a phone or a tablet: the icons lead to their pages. */
	.hpop{display:contents}
	.hpop__panel{display:none!important}
	.header__cart{width:44px;height:44px;padding:0;border-radius:12px;justify-content:center}
	.header__cart .count{top:-12px;right:-12px;background:var(--navy);color:#fff}
	.header__nav{display:none}
	.mega{display:none}
	/* v2 (0.10.0): the header stays at the top and steps away while the page goes down, back on the way up
	   (theme.js, is-tucked). Until 0.10.0 it scrolled away with the page. */
	.site-header{position:sticky;top:0;transition:transform .25s ease}
	.site-header.is-tucked{transform:translateY(-100%)}
	.quick{display:block;background:#fff;border-bottom:1px solid var(--line)}
	.quick__list{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
	.quick__list::-webkit-scrollbar{display:none}
	.quick__list>li{flex:0 0 auto}
	.quick__list a,.quick__list button{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:999px;background:#EEF0FA;color:var(--navy);font-weight:800;font-size:14px;white-space:nowrap}
	.quick__list .is-promo--clearance a{background:var(--last);color:var(--ink)}
	.quick__list .is-promo:not(.is-promo--clearance) a{background:var(--accent);color:#fff}
	.quick__list .nav-pct{padding:0;background:none;font-size:14px;line-height:inherit}
	.quick__cats button{background:var(--navy);color:#fff}
	.quick__list .is-season a{background:var(--season-bg);color:var(--season-ink)}
	/* № 111 (0.22.0, Denis — the artifact „Долно меню на телефон“): a floating pill 12 px from the sides and the bottom
	   (+ the safe area), 58 high, white with a thin line and a shadow; the five tabs as icons only (their words are
	   aria-label), 44 × 44 at least; the search a green circle of 46 inside the bar; the chosen tab a light green pill
	   with a green icon; the counts smaller, at the icon's top right. Until 0.21.9 (v2 0.16.0, V2TabBar, variant А) a
	   bar the screen's width, 72 high, with words, the search a circle of 60 lifted over it. */
	.bottom-nav{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;height:58px;padding:0 6px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 24px rgba(36,39,90,.16)}
	.bottom-nav a,.bottom-nav button{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0;border:0;border-radius:999px;background:none;color:var(--navy)}
	.bottom-nav__ico{position:relative;display:flex;align-items:center;justify-content:center}
	.bottom-nav [aria-current="page"],.bottom-nav [aria-expanded="true"]{margin:0 4px;background:#E6F5EB;color:var(--green-dark)}
	.bottom-nav [aria-current="page"] .bottom-nav__head{fill:var(--green);stroke:var(--green-dark)}
	.bottom-nav [aria-current="page"] .bottom-nav__jaw{stroke:var(--green-dark)}
	.bottom-nav [aria-current="page"] .bottom-nav__eye{stroke:#fff}
	.bottom-nav .bottom-nav__search{justify-self:center;width:46px;height:46px;min-width:46px}
	.bottom-nav__ring{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;box-shadow:0 4px 10px rgba(30,158,74,.3)}
	.bottom-nav__search:active .bottom-nav__ring{background:var(--green-dark)}
	.bottom-nav .count{top:-7px;right:-10px;min-width:18px;height:18px;padding:0 4px;border:2px solid #fff;border-radius:999px;box-sizing:border-box;background:var(--accent);color:#fff;font-size:11px;font-weight:900}
	.bottom-nav .count.count--fav{background:var(--navy)}
	.site-footer{padding-bottom:var(--bottom-bar,calc(82px + env(safe-area-inset-bottom)))} /* № 111: the pill and its 12 px (theme.js: its top to the screen's bottom) */
	/* № 111: what appears over the bar's place — a toast, the cookie card — sits above the pill. */
	.toast{bottom:calc(var(--bottom-bar,0px) + 12px)}
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible){bottom:calc(var(--bottom-bar,0px) + 12px);max-height:calc(100dvh - var(--bottom-bar,0px) - 36px)}
	.toast{bottom:88px}
}

/* ---------- Phones ---------- */
@media (max-width:767px){
	a.crumbs-back{display:flex}
	.trade{padding:22px 20px;border-radius:20px}
	.trade__title{font-size:21px;padding-right:96px}
	.trade__points{font-size:15px}
	.trade__button{width:100%;justify-content:center}
	.trade__art{position:absolute;top:12px;right:10px;width:96px;height:96px;margin:0}
	.trade__mascot{width:96px;height:96px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
	.trade__confetti{width:176px;height:137px}
	.hide-mobile{display:none!important}
	.only-mobile{display:revert}
	.homepage{gap:28px;padding-top:16px;padding-bottom:28px}
	.section-head{margin-bottom:14px;align-items:baseline}
	.section-title{font-size:20px}
	.section-link{font-size:14px}

	/* The categories as a row to scroll. Until 0.10.0 they came first, before the banner, without their title;
	   v2 has the quick links there (crocoland_quick_links()). */
	.cats__grid{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
	.cats__grid li{flex:0 0 80px}
	.cats__grid li:nth-child(n+9){display:block}
	.cat{gap:6px;padding:0;background:none;border:0;border-radius:0}
	.cat .chip--cat{width:68px;height:68px;border-radius:16px}
	.cat .chip--cat.chip--photo .chip__img{border-radius:12px}
	.cat .chip--cat>svg{width:30px;height:30px}
	.cat__name{font-size:12px;line-height:1.2}
	/* 0.9.18: the strong promotions first in the row, with their % (yellow — the clearance, red — a campaign). */
	.cats__promo{order:-1}
	.cat__pct{display:flex;align-items:center;justify-content:center;padding:6px;font-weight:900;font-size:16px;line-height:1.05;text-align:center;letter-spacing:-.01em}
	.cat--clearance .cat__pct{background:var(--last);color:var(--ink);font-size:14px}
	.cat--sale .cat__pct{background:var(--accent);color:#fff}

	/* The top (V2HomeMobile): the carousel, the next slide peeking (crocoland-banners), then the two small banners
	   side by side; the top seller instead of a banner: its picture in a circle over the texts. */
	.home-top{gap:16px}
	.hero__main--banners .crb-zone__track{height:auto;margin:0 -16px;padding:0 16px;scroll-padding:0 16px}
	.home-top__small{gap:10px}
	.hero__main--product{height:auto;border-radius:22px}
	.hero-pick{grid-template-columns:minmax(0,1fr)}
	.hero-pick__media{order:-1;justify-self:center;width:168px;height:168px;margin:16px 0 0}
	.hero-pick__text{gap:8px;padding:16px 20px 20px}
	.hero-pick__label{font-size:12px}
	.hero-pick__title{font-size:24px;line-height:1.15}
	.hero-pick__price{font-size:28px}
	.hero-pick__price del{font-size:15px}
	.hero-pick__cta{justify-content:center;width:100%;height:50px;margin-top:4px}
	/* № 106 (the artifact „Началната на телефон“): the top seller in a small banner's place drawn as the small
	   banners are (crocoland-banners 1.4.4) — its picture on top, the width of the card; until then a circle of 56. */
	.home-small{grid-template-columns:minmax(0,1fr);align-content:start;gap:7px;min-height:0;padding:8px;border-radius:18px}
	.home-small__pic{order:-1;justify-self:stretch;width:auto;height:auto;aspect-ratio:1;border-radius:12px}
	.home-small__pic img{width:100%;height:100%}
	.home-small__body{gap:7px;padding:0 4px 4px}
	.home-small__label{overflow:hidden;font-size:10px;font-weight:900;letter-spacing:.05em;white-space:nowrap;text-overflow:ellipsis}
	.home-small__label::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:.1em}
	.home-small__title{font-size:13.5px;line-height:1.2;-webkit-line-clamp:2}
	.home-small__price{font-size:15px;color:var(--accent)}
	.home-small__cta{display:none}

	/* The code a row above the benefits (v2). № 106: the benefits one strip of pills scrolled sideways, the titles
	   only (~40 px); until then the four two by two in their card with their second lines (~260 px). */
	.homepage>.benefits{margin-top:-16px}
	.benefits{flex-direction:column;gap:10px;padding:0;border:0;background:none}
	.benefits__lead{padding:10px 10px 10px 12px}
	.benefits__copy{min-height:44px;padding:0 14px;font-size:14px}
	.benefits__list{display:none}
	.benefits__pills{display:flex;gap:8px;margin:0 -16px;padding:0 16px;overflow-x:auto;list-style:none;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
	.benefits__pills::-webkit-scrollbar{display:none}
	.benefits__pill{display:flex;flex:none;border:1px solid var(--line);border-radius:999px;background:#fff;scroll-snap-align:start}
	.benefits__pill-in{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;color:var(--ink);font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap}
	.benefits__pill small{font-size:12px;font-weight:700;color:var(--muted)}
	.benefits__pills{padding-block:3px;margin-block:-3px}
	a.benefits__pill-in{position:relative}
	a.benefits__pill-in::after{content:"";position:absolute;inset:-3px -1px}
	.benefits__pill-icon{display:grid;flex:none;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tone-bg);color:var(--tone-fg)}

	.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.card{border-radius:16px}
	/* v2 (V2HomeMobile): the heart, the dots, the stock, the date and the colours on every phone card; until
	   0.10.0 only the category page's. The stock and the date one under the other. */
	.card__fav{top:2px;right:2px;background:radial-gradient(circle,#fff 17px,transparent 17.5px)}
	.card__avail{font-size:12px}
	.card__stock,.card__eta{font-size:12px}
	.card__eta{color:var(--navy)}
	.card__brand{font-size:11px}
	.card__feature{padding:2px 7px;font-size:11px}
	.card__feature:nth-child(n+2){display:none}
	.card__colours{gap:4px;font-size:12px}
	.card__colours .swatch{width:14px;height:14px}
	.card__placeholder svg{width:40px;height:40px}
	.badge{top:8px;left:8px;padding:4px 8px;font-size:12px}
	.card__body{gap:6px;padding:10px 12px 12px}
	.card__title{font-size:14px;line-height:1.3;min-height:2.6em}
	.card__rating{gap:4px;font-size:12px}
	.card__price{font-size:16px;gap:2px 6px}
	.card__price del{font-size:12px;font-weight:400}
	.card__tbi,.card__pack{font-size:12px}
	.button--add,.button--choose,.button--see{height:44px;font-size:14px}
	.button--add .icon{display:none}

	/* The home page's sections (V2HomeMobile). */
	.homepage .section-title{font-size:21px}
	.section-head--lead{flex-direction:column;align-items:flex-start;gap:2px}
	.section-lead{font-size:14px}
	.ages__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
	.age-tile{gap:6px;padding:14px 6px 12px;border-radius:18px}
	.age-tile__circle{width:68px;height:68px}
	.age-tile__circle b{font-size:18px}
	.age-tile__circle span{margin-top:3px;font-size:11px}
	.age-tile__label{font-size:13px}
	.age-tile__count{font-size:12px}
	.promo-row{gap:14px;margin:0 -16px;padding:18px 0 16px;border-radius:0}
	.promo-row__head{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:0 12px;padding:0 16px}
	.promo-row__tag{grid-row:1/span 2;width:44px;height:44px;border-radius:14px}
	.promo-row__tag svg{width:22px;height:22px}
	.promo-row__text{gap:2px}
	.promo-row__title{font-size:20px}
	.promo-row__line{font-size:14px;line-height:1.4}
	.promo-row__all{grid-column:2;justify-self:start;gap:4px;height:44px;padding:0;border:0;background:none;font-size:14px;text-decoration:underline}
	.promo-row__all svg{width:16px;height:16px}
	.homepage .promo-row .products--swipe{margin:0;padding:0 16px}
	/* A row of cards that scrolls: 162 px each, the next one peeking; the bar under it. */
	.homepage .products--swipe{display:grid;grid-auto-flow:column;grid-auto-columns:162px;grid-template-columns:none;gap:10px;margin:0 -16px;padding:0 16px 2px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
	.homepage .products--swipe::-webkit-scrollbar{display:none}
	.homepage .products--swipe .products__item{display:flex!important;scroll-snap-align:start}
	.swipe-bar{display:block;position:relative;align-self:center;width:120px;height:5px;margin:12px auto 0;border-radius:3px;background:#E6E9F2;overflow:hidden}
	.swipe-bar[hidden]{display:none}
	.swipe-bar span{position:absolute;inset:0 auto 0 0;width:36%;border-radius:3px;background:var(--navy)}
	.promo-row .swipe-bar{margin-top:0;background:rgba(27,30,60,.12)}
	.homepage .products--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.homepage .products--grid .products__item:nth-child(n+5){display:none}
	.best .section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
	.best__tools{display:contents}
	.best__tabs{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;margin:0 -16px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
	.best__tabs::-webkit-scrollbar{display:none}
	.best__tabs .tab{flex:0 0 auto;height:40px}
	.best [data-best-more]{grid-column:2;grid-row:1}
	.best__all{display:flex;align-items:center;justify-content:center;height:50px;margin-top:14px;border:2px solid var(--navy);border-radius:14px;background:#fff;color:var(--navy);font-weight:800;font-size:16px}
	.cat-tiles__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.cat-tile{flex-direction:row;align-items:center;gap:10px;min-height:68px;padding:10px;border-radius:16px}
	.cat-tile__media{flex-shrink:0;width:44px;height:44px;aspect-ratio:auto;border-radius:12px;overflow:hidden}
	.cat-tile__media img{width:100%;height:100%}
	.cat-tile__media svg{width:24px;height:24px}
	.cat-tile__text{gap:1px;padding:0;min-width:0}
	.cat-tile__name{font-size:13px}
	.cat-tile__count{font-size:12px}
	.gifts .section-title{margin-bottom:14px}
	.gifts__grid{gap:10px}
	.gift-tile{flex-direction:column;justify-content:center;gap:4px;padding:14px 10px;border-radius:18px;text-align:center}
	.gift-tile__text{align-items:center;gap:4px}
	.gift-tile__label{font-size:11px}
	.gift-tile__price{font-size:16px}
	.gift-tile__cta{font-size:13px}
	.gift-tile__pic{display:none}
	.brands__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
	.brand{height:78px;gap:4px;padding:0 4px;border-radius:14px}
	.brand__name{font-size:12px}
	.brand__logo{width:72px;height:30px}
	.brand__count{font-size:11px}
	.trust{gap:12px}
	.trust__mark{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 16px;padding:20px;border-radius:20px}
	.trust__label{display:none}
	.trust__score{grid-row:1/span 2;gap:4px}
	.trust__score b{font-size:36px}
	.trust__stars{font-size:16px}
	.trust__count{font-size:15px;font-weight:800;color:#fff}
	.trust__since{margin:0;padding:0;border:0}
	.trust__since b{display:none}
	.trust--plain .trust__mark{display:flex}
	.trust--plain .trust__since b{display:block}
	.trust__since span{font-size:13px}
	.trust__list{display:grid;grid-auto-flow:column;grid-auto-columns:300px;grid-template-columns:none;gap:10px;margin:0 -16px;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
	.trust__list::-webkit-scrollbar{display:none}
	.review-card{scroll-snap-align:start}


}

@media (prefers-reduced-motion:reduce){
	*{transition:none!important;animation:none!important}
}

/* Our category icons (inc/categories.php, crocoland_category_svg()) and the menus' chips: a light neutral ground, not the tone (Denis, 16.10.2026). */
.chip--svg,.chip--img{background:#F4F6FA}
.chip.chip--svg>.chip__svg{width:72%;height:72%}
.home-cats__item .chip:not(.chip--photo),.mega__cat .chip:not(.chip--photo),.drawer__item .chip:not(.chip--photo){background:#F4F6FA;color:var(--navy)}

/* The header's right group: Вноски с TBI · За търговци (crocoland_primary_nav_end()) as pills with an icon, so
   they read as extras beside the categories' links (0.8.6, Denis); a trader's discount in the same shape, green. */
.nav-side{flex-shrink:0;margin-left:auto;display:flex;align-items:center;padding-left:8px}
.nav-end{display:flex;align-items:center;gap:8px}
.nav-end a,.nav-pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-weight:800;font-size:14px;line-height:20px;white-space:nowrap;color:var(--navy);transition:border-color .15s,background-color .15s}
.nav-end a svg,.nav-pill svg{flex-shrink:0;color:var(--navy)}
.nav-end a:hover,.nav-end a:focus-visible{border-color:var(--navy);background:#fff;color:var(--navy)}
.nav-end .current-menu-item a,.nav-end a[aria-current="page"]{border-color:var(--navy);background:#EEF0FA} /* 0.17.1: #EEF0FA, as V2Trader (white until then) */
.nav-pill--trade{border-color:#BFE3CB;background:#E6F5EB;color:var(--green-dark)}
.nav-pill--trade svg{color:var(--green-dark)}
.nav-pill--trade:hover,.nav-pill--trade:focus-visible{border-color:var(--green-dark);background:#fff;color:var(--green-dark)}
.nav__list .is-season a{color:var(--season-ink)}

/* ---------- The cookie banner (Complianz, inc/cookies.php; Denis, 16.10.2026) ----------
   A card at the bottom left, 390 px, 24 px from the edges, no dimming and no wall; on a phone a bar at the
   bottom, 10 px in. "Настройки" (Complianz's "View preferences") makes it a window with the categories.
   Only the look: #cmplz-cookiebanner-container wins over the banner's own CSS (Complianz → Consent Banner). */
#cmplz-cookiebanner-container .cmplz-cookiebanner{top:auto;right:auto;left:24px;bottom:24px;transform:none;width:390px;min-width:0;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;gap:0;padding:20px;border:0;border-radius:22px;background:#fff;box-shadow:0 18px 48px rgba(27,30,60,.18),0 2px 6px rgba(27,30,60,.08);font-family:var(--text);color:var(--ink);overflow:auto}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed{display:none}
/* Taller than the screen (a phone held sideways): it scrolls inside, nothing in it is squeezed (0.8.3). */
#cmplz-cookiebanner-container .cmplz-cookiebanner{overflow-y:auto;overscroll-behavior:contain}
#cmplz-cookiebanner-container .cmplz-cookiebanner>*{flex-shrink:0}
/* Under 400px of height (a phone held sideways) Complianz shrinks the whole card to 60% (zoom:.6): its buttons were
   17px high. The card keeps its size and scrolls inside instead. */
@media (max-height:400px){
	#cmplz-cookiebanner-container .cmplz-cookiebanner,#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible{zoom:1;height:auto;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:14px 16px!important}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{margin-top:8px!important}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header{max-height:none;margin-bottom:0!important}
	/* Its buttons too: height 15vh, no padding, zoom .5 — all !important in Complianz's file. */
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{gap:10px!important}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{height:auto!important;min-height:46px!important;padding:10px 14px!important;zoom:1!important;font-size:15px!important;line-height:1.2!important}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences{min-height:44px!important;padding:4px!important;font-size:14px!important}
}
#cmplz-cookiebanner-container .cmplz-header{display:flex;align-items:center;gap:12px;margin:0}
#cmplz-cookiebanner-container .cmplz-logo{display:block;flex:0 0 42px;width:42px;height:42px;background:url(../images/mascot-48.webp) center/42px 42px no-repeat;background-image:image-set(url(../images/mascot-48.webp) 1x,url(../images/mascot-96.webp) 2x,url(../images/mascot-144.webp) 3x)}
#cmplz-cookiebanner-container .cmplz-logo>*{display:none}
#cmplz-cookiebanner-container .cmplz-title{display:block;margin:0;font-family:var(--display);font-weight:700;font-size:16px;line-height:1.3;color:var(--navy);text-align:left}
#cmplz-cookiebanner-container .cmplz-title__accent{color:var(--green-text-ground)}
#cmplz-cookiebanner-container .cmplz-close,#cmplz-cookiebanner-container .cmplz-divider,#cmplz-cookiebanner-container .cmplz-links.cmplz-information,#cmplz-cookiebanner-container .cmplz-documents{display:none}
#cmplz-cookiebanner-container .cmplz-body{min-width:0;max-height:none;overflow:visible}
#cmplz-cookiebanner-container .cmplz-message,#cmplz-cookiebanner-container .cmplz-categories{width:auto}
#cmplz-cookiebanner-container .cmplz-message{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
#cmplz-cookiebanner-container .cmplz-message p{margin:0}
#cmplz-cookiebanner-container .cmplz-message a,#cmplz-cookiebanner-container .cmplz-more .cmplz-link{font-size:inherit;font-weight:700;color:var(--navy);text-decoration:underline}
#cmplz-cookiebanner-container .cmplz-more{display:inline}
#cmplz-cookiebanner-container .cmplz-buttons{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:16px}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{flex:1 1 0;width:auto;min-height:46px;margin:0;padding:10px 14px;border-radius:12px;font-family:var(--text);font-weight:800;font-size:15px;line-height:1.2;white-space:nowrap}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept,#cmplz-cookiebanner-container .cmplz-buttons .cmplz-deny{border:2px solid var(--navy);background:var(--navy);color:#fff}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept:hover,#cmplz-cookiebanner-container .cmplz-buttons .cmplz-deny:hover{border-color:var(--ink);background:var(--ink)}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-save-preferences{border:2px solid var(--navy);background:#fff;color:var(--navy)}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-save-preferences:hover{background:var(--ground)}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-view-preferences{flex:1 0 100%;min-height:0;padding:4px;border:0;background:none;color:var(--navy);font-weight:700;font-size:14px;text-decoration:underline}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:focus-visible,#cmplz-cookiebanner-container .cmplz-link:focus-visible,#cmplz-cookiebanner-container .cmplz-category-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* "Настройки": a window in the middle, the categories with switches, Отказвам · Запази избора · Приемам. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:520px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:24px;box-shadow:0 0 0 100vmax rgba(27,30,60,.35),0 24px 60px rgba(27,30,60,.25)}
#cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-message{display:none}
#cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-body{overflow:auto}
#cmplz-cookiebanner-container .cmplz-categories{margin-top:16px}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category{margin:0 0 8px;border-radius:14px;background:var(--ground)}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header{grid-template-columns:1fr auto 24px!important;gap:12px;align-items:center;padding:12px 14px}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-title{font-weight:800;font-size:15px;color:var(--ink)}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-always-active{font-size:13px;font-weight:700;color:var(--green-text-ground)}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-always-active .cmplz-banner-checkbox{display:none}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-toggle{width:24px;height:24px;color:var(--muted)}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-description{padding:0 14px 12px;font-size:13px;line-height:1.45;color:var(--muted)}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-banner-checkbox{position:relative;display:block;width:44px;height:26px}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-banner-checkbox input.cmplz-consent-checkbox{position:absolute;top:0;left:0;z-index:1;width:44px;height:26px;margin:0;opacity:0;cursor:pointer}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-banner-checkbox .cmplz-label{position:absolute;inset:0;margin:0;padding:0}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-banner-checkbox .cmplz-label::before{content:"";display:block;position:absolute;top:0;left:0;width:44px;height:26px;padding:0;border-radius:13px;background:var(--line-2);transition:background-color .2s}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-banner-checkbox .cmplz-label::after{content:"";display:block;position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(27,30,60,.25);transition:left .2s}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked+.cmplz-label::before{background:var(--navy)}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked+.cmplz-label::after{left:21px}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible+.cmplz-label::before{box-shadow:none;outline:3px solid var(--accent);outline-offset:2px}
#cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-documents{display:flex;justify-content:center;margin-top:14px}
#cmplz-cookiebanner-container .cmplz-documents .cmplz-link{font-size:14px;font-weight:700;color:var(--navy)}
#cmplz-cookiebanner-container .cmplz-documents .privacy-statement,#cmplz-cookiebanner-container .cmplz-documents .impressum{display:none}
@media (max-width:767px){
	#cmplz-cookiebanner-container .cmplz-cookiebanner,#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible{left:10px;right:10px;top:auto;bottom:10px;transform:none;width:auto;max-width:none;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:16px;border-radius:18px}
	#cmplz-cookiebanner-container .cmplz-title{font-size:15px}
	#cmplz-cookiebanner-container .cmplz-message{margin-top:10px}
	#cmplz-cookiebanner-container .cmplz-buttons{margin-top:14px}
	#cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-buttons .cmplz-btn{flex-basis:100%}
}
/* "Бисквитки" in the footer: a link that opens the settings (Complianz's floating button is gone). */
.cookie-settings-link{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* ---------- "Спести X € — вземи нещо за тях" (inc/savings.php, 0.8.0): the cart's block and the window's small one ----------
   The circle is #1E8642 and the sum #157A38, not #2FA552: white on #2FA552 is 3.2:1, #2FA552 on the light green 2.9:1. */
.save{margin-top:8px;padding:20px;border:1px solid #CBEBD4;border-radius:20px;background:linear-gradient(180deg,#F2FAF4 0%,#EAF7EE 100%)}
.save__head{display:flex;align-items:center;gap:14px}
.save__circle{display:flex;align-items:center;justify-content:center;flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:#1E8642;color:#fff;font-family:var(--display);font-weight:700;font-size:16px;white-space:nowrap}
.save__text{min-width:0}
.save__title{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.3;color:var(--ink)}
.save__sum{color:var(--green-text-ground)}
.save__lead{margin-top:4px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.save__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.save-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff}
.save-card__img{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:10px;background:var(--ground);overflow:hidden}
.save-card__img img{width:100%;height:100%;object-fit:contain}
.save-card__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.6em;font-size:13px;font-weight:700;line-height:1.3;color:var(--ink)}
.save-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.save-card__price ins{order:1;text-decoration:none;color:var(--accent)}
.save-card__price del{order:2;font-family:var(--text);font-size:12px;font-weight:600;color:var(--muted)}
.save-card__price .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.save-card__add{display:flex;align-items:center;justify-content:center;gap:4px;height:40px;margin-top:auto;padding:0 10px;border:0;border-radius:10px;background:var(--navy);color:#fff;font-size:14px;font-weight:800}
.save-card__add:hover{background:var(--ink)}
.save-card__add.is-loading{opacity:.7;pointer-events:none}
.save-card__done{display:none}
.save-card__add.is-added{background:var(--green-text-ground)}
.save-card__add.is-added .save-card__plus{display:none}
.save-card__add.is-added .save-card__done{display:inline-flex}
.save__note{margin-top:10px;font-size:12px;color:var(--muted)}
/* „от спестените пари“ by the price of a line added from the block (0.9.8): quiet — the cart and its menu, the checkout, "Благодарим", the profile. */
.save-tag{display:block;font-family:var(--text);font-size:12px;font-weight:600;line-height:1.35;color:var(--muted);white-space:nowrap}
.save--small{margin-top:0;padding:14px;border-radius:16px}
.save--small .save__circle{flex-basis:40px;width:40px;height:40px;font-size:12px}
.save--small .save__title{font-size:15px}
.save--small .save__list{gap:10px;margin-top:12px}
.save--small .save-card__img{aspect-ratio:auto;height:88px}
.save--small .save-card__add{width:40px;align-self:flex-end;padding:0}
.save--small .save__note{margin-top:8px}
/* More than three (up to 8, 0.8.3): a slider of plain scroll-snap. On a computer three in view and the arrows in the
   heading (theme.js); on a phone a row to swipe, the next card peeking, no arrows. Three or fewer: the grid above. */
.save__nav{display:flex;gap:8px;flex-shrink:0;margin-left:auto}
.save__arrow{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:#fff;color:var(--navy);cursor:pointer}
.save__arrow:hover{border-color:var(--navy)}
.save__arrow[aria-disabled=true]{opacity:.35;cursor:default;border-color:var(--line-2)}
.save--small .save__arrow{width:34px;height:34px}
.save--slider .save__list{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.save--slider .save__list::-webkit-scrollbar{display:none}
.save--slider .save-card{flex:0 0 calc((100% - 24px) / 3);scroll-snap-align:start}
.save--small.save--slider .save-card{flex-basis:calc((100% - 20px) / 3)}
.save-card.is-gone{opacity:0;transform:scale(.92);transition:opacity .25s,transform .25s}
@media (prefers-reduced-motion:reduce){.save--slider .save__list{scroll-behavior:auto}.save-card.is-gone{transition:none}}

@media (max-width:767px){
	.save{padding:16px}
	.save__title{font-size:16px}
	.save:not(.save--small) .save__list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:14px -16px 0;padding:0 16px 4px;scrollbar-width:none}
	.save:not(.save--small) .save-card{flex:0 0 44%;scroll-snap-align:start}
	.save__nav{display:none}
	.save--small.save--slider .save__list{scroll-padding:0 16px;margin:12px -16px 0;padding:0 16px 4px}
	.save--small.save--slider .save-card{flex-basis:38%}
}

/* ---------- A finger's 44px (the responsive audit of 0.8.3; touch screens only, the look stays) ---------- */
@media (pointer:coarse){
	/* Links on their own line: taller by padding, the same place by a negative margin. */
	.section-link,.cookie-settings-link,.mega__all{padding-block:12px;margin-block:-12px}
	.crumbs-back{min-height:44px;margin-block:-6px}
	.crumbs a{display:inline-block;padding-block:12px;margin-block:-12px}
	.header__logo{min-height:44px}
	/* Pills and round buttons: an invisible area around them. */
	.save__arrow,.save-card__add{position:relative}
	.save__arrow::after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px}
	.save-card__add::after{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}
	.save-card__add--small::after{right:-2px;left:-2px}
	.added-card__add{position:relative}
	.added-card__add::after{content:"";position:absolute;top:-2px;right:0;bottom:-2px;left:0}
	/* The cookie card: "Настройки" and "Повече". */
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-view-preferences{min-height:44px}
	#cmplz-cookiebanner-container a.cmplz-link{display:inline-block;padding-block:12px;margin-block:-12px}
}

/* "Тотална разпродажба" (0.8.7, inc/clearance.php): the last pieces in a look of their own — dark, a yellow-and-black
   band on top, yellow tags. The same yellow marks them on the cards, in the header and in the phone menu. */
:root{--last:#FFC629}
.card__last{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--last);font-weight:800;font-size:12px;line-height:1.3}
.card__stock.is-last{color:var(--accent-dark)}
.card__stock.is-last::before{content:"● "}
/* A promotion's % and end (0.9.18): the home rows, „Намаления“, a category's strip. */
.promo-pct{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:13px;line-height:20px;white-space:nowrap}
.promo-pct--clearance{background:var(--last);color:var(--ink)}
.promo-end{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap}
.promo-end.is-soon{color:var(--accent-dark);font-weight:800}
/* The promotions in the header's links (v2, 0.10.0, V2Home): the clearance a yellow button „⚡ Разпродажба до
   −50%“, a promotion red with its % in a red chip before the name; „Намаления (N)“ red text. 0.9.18 (Denis's
   drawing Promotions, 1) had a round yellow pill with a dark % chip and the % after the name. */
.nav__list .is-promo a,.nav__more-list .is-promo a{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--accent-dark)}
.nav__list .is-promo--clearance{display:flex;align-items:center}
.nav__list .is-promo--clearance a{height:40px;padding:0 14px;margin-right:4px;border-radius:12px;background:var(--last);font-size:14px;color:var(--ink)}
.nav__list .is-promo--clearance.current-menu-item a{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.is-promo--clearance svg path{fill:currentColor}
.nav-pct{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:12px;line-height:18px}
.nav__more-list .is-promo--clearance a{color:var(--ink)}
@media (max-width:1279px){
}
@media (max-width:767px){
	.card__stock.is-last{display:block}
	/* The cards scroll sideways: two and a bit in view. */
	.card__last{left:8px;bottom:8px;padding:3px 8px;font-size:11px}
}

/* ---------- The promotions (0.9.18, Promotions.jpg): one badge a card, its colour its kind ---------- */
.badge--clearance{background:var(--last);color:var(--ink)}
.badge--new{background:var(--green)}
/* "Свършва след 2 дни" in a promotion's last 3 days, in the delivery date's place (theme.js). */
.card__eta.is-ends{display:inline-flex;align-items:center;gap:4px;color:var(--accent-dark)}
.card__eta.is-ends .icon{flex-shrink:0}

/* 0.9.20: a picture not on white (inc/image-bg.php) — the empty part of its frame is the same picture, blurred: a 48 px copy under it */
img.has-bg.has-bg.has-bg{background-image:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat}
/* 0.9.25: a category's chip keeps a white margin around a picture on white (the tiles 84%, the home carousel 4px); a picture not on white fills it, its blurred copy where the margin was (inc/categories.php, chip--bg) */
.chip.chip--photo.chip--bg{padding:0}
.chip.chip--photo.chip--bg .chip__img{width:100%;height:100%}

/* „Върви добре с“ — a card (0.14.0 product.css; here since 0.15.0, the cart's side column has them too). */
.goes__item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff}
.goes__img{display:block;width:96px;height:96px;border-radius:14px;overflow:hidden;background:var(--ground)}
.goes__img img{width:100%;height:100%;object-fit:contain}
.goes__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.goes__name{display:-webkit-box;min-height:40px;overflow:hidden;font-weight:700;font-size:15px;line-height:1.35;color:var(--ink);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.goes__stock{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--green-dark)}
.goes__stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.goes__stock.is-backorder{color:var(--navy)}
.goes__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:0;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.goes__price ins{order:-1;text-decoration:none;color:var(--accent)}
.goes__price del{font-family:var(--text);font-size:13px;font-weight:700;color:var(--muted)}
.goes__add{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;border:2px solid var(--accent);border-radius:12px;background:#fff;color:var(--accent);font-weight:800;font-size:14px}
.goes__add:hover{background:var(--accent);color:#fff}
.goes__add.is-loading{opacity:.6;pointer-events:none}

/* „Комплекти“ (0.18.0, inc/bundles.php; the canvas V2Bundles, V2BundlesMobile, V2BundleSheetMobile): the −5% pill,
   a variant's choice, the bundle's card (/komplekti/ and the home page), the sections and the chips of /komplekti/,
   and the sheet — at the bottom of a phone, in the middle of a computer. */
.bundle-pct{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:#E6F5EB;color:var(--green-dark);font-family:var(--text);font-weight:800;font-size:13px;line-height:1.3;white-space:nowrap}
.bundle-choice{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;font-weight:800;color:var(--ink-2)}
.bundle-choice select{height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:14px;font-weight:700;color:var(--ink);max-width:100%}
.bundles-page{display:flex;flex-direction:column;gap:40px}
.bundles-page .shop__head{margin:0}
.bundles-page .shop__intro{font-size:17px}
.kchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:-12px}
.kchip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--navy);font-weight:800;font-size:15px;white-space:nowrap}
.kchip:hover{border-color:var(--navy);color:var(--navy)}
.kchip[aria-current="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.kchip__n{padding:1px 8px;border-radius:999px;background:#EEF0FA;font-size:13px}
.kchip[aria-current="true"] .kchip__n{background:rgba(255,255,255,.18)}
.kchip--product{max-width:100%}
.kchip__name{min-width:0;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.ksection{display:flex;flex-direction:column;gap:18px}
.ksection__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.ksection__titles{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.ksection__title{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.2}
.ksection__sub{font-size:16px;font-weight:700;color:var(--muted)}
.ksection__all{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:15px;text-decoration:underline}
.ksection__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ksection__more{display:none}
.home-bundles .section-head{margin-bottom:0}
/* № 126 (0.22.5, Denis — „Комплекти на началната“, А „Колаж“): tabs by kind as in „Най-продавани“, four cards a row (a
   phone swipes), each a collage of its products, „−5%“, the name on two lines, the price and a red cart. */
.kb__tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-left:auto;min-width:0}
.kb__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.kb__tabs::-webkit-scrollbar{display:none}
.kb__tabs .tab{flex:0 0 auto;height:42px;padding:0 16px}
.kcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kcol{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-width:0;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden}
.kcol__pics{position:relative;display:grid;gap:6px;height:210px;padding:14px;background:#fff}
.kcol__pics--1{grid-template-columns:minmax(0,1fr)}
.kcol__pics--2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.kcol__pics--3{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}
.kcol__pics--3 .kcol__img.is-big{grid-row:1/3}
.kcol__img{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;height:100%}
.kcol__img img{width:100%;height:100%;object-fit:contain}
.kcol__plus{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900;font-size:17px;line-height:1;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #fff}
.kcol__off{position:absolute;left:12px;top:12px;z-index:1;padding:3px 10px;border-radius:999px;background:var(--accent);color:#fff;font-weight:900;font-size:13px;line-height:1.3}
.kcol__more{position:absolute;right:10px;bottom:10px;z-index:1;padding:2px 9px;border-radius:999px;background:#EEF0FA;color:var(--navy);font-weight:900;font-size:12px}
.kcol__body{display:grid;grid-template-columns:minmax(0,1fr);align-content:space-between;gap:8px;min-width:0;padding:12px 14px 14px;border-top:1px solid var(--line)}
.kcol__name{margin:0;font-size:15.5px;line-height:1.3}
.kcol__name a{display:block;color:var(--ink)}
.kcol__name b,.kcol__name span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcol__name b{font-weight:900}
.kcol__name span{color:var(--muted);font-size:13.5px;font-weight:700;line-height:1.45}
.kcol__name.is-whole b{display:-webkit-box;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kcol__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kcol__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;min-width:0}
.kcol__price b{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);white-space:nowrap}
.kcol__price s{color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap}
.kcol__form{flex:none;margin:0}
.kcol__add{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer}
.kcol__add.is-loading{opacity:.6;pointer-events:none}
.kcol__done{display:none}
.kcol__add.is-added{background:var(--green-dark)}
.kcol__add.is-added .kcol__cart{display:none}
.kcol__add.is-added .kcol__done{display:grid}
.kcol__cart,.kcol__done{place-items:center}
.kcol__cart{display:grid}
.kcard{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:20px;background:#fff;container-type:inline-size}
.kcard__imgs{display:flex;align-items:center;gap:6px}
.kcard__plus{width:20px;flex-shrink:0;text-align:center;font-weight:800;font-size:18px;color:var(--muted)}
.kcard__img{display:flex;align-items:center;justify-content:center;flex:0 1 88px;min-width:0;height:88px;border-radius:16px;background:var(--ground);overflow:hidden}
.kcard__img img{width:100%;height:100%;object-fit:contain}
.kcard__more{display:flex;align-items:center;justify-content:center;width:56px;height:88px;flex-shrink:0;border-radius:16px;background:#EEF0FA;color:var(--navy);font-weight:800;font-size:17px}
.kcard__head{display:flex;flex-direction:column;gap:8px}
.kcard__why{align-self:flex-start;min-height:24px;padding:3px 10px;border-radius:999px;background:#E6F5EB;color:var(--green-dark);font-size:13px;font-weight:800;line-height:18px}
.kcard__why.is-empty{background:transparent}
.kcard__name{font-size:18px;font-weight:800;line-height:1.3}
.kcard__name a{color:var(--ink)}
.kcard__name a:hover{color:var(--accent-dark)}
.kcard__lines{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-2)}
.kcard__lines li{display:flex;justify-content:space-between;gap:12px}
.kcard__lines a{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2);font-weight:700}
.kcard__lines a:hover{color:var(--accent-dark)}
.kcard__lines span{flex-shrink:0;font-weight:700}
.kcard__lines .kcard__and{font-weight:700;color:var(--muted)}
.kcard__foot{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.kcard__money{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap}
.kcard__price{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;color:var(--ink)}
.kcard__sum{font-size:15px;font-weight:700;color:var(--muted)}
.kcard__save{padding:3px 10px;border-radius:999px;background:#E6F5EB;color:var(--green-dark);font-size:13px;font-weight:800;white-space:nowrap}
/* The price, the sum and „Спестяваш“ alike in every card (0.18.1, Denis): on one row in a card from 390 px inside (the
   canvas V2Bundles at 1440 — the widest row of the 71 needs 384 px), „Спестяваш“ on its own line in every
   narrower card. Until 0.18.1 each card wrapped by its own numbers: at ~1280 some did, some did not. */
@container (max-width:389px){
	.kcard__money::after{content:"";order:1;flex-basis:100%;height:0;margin-bottom:-6px}
	.kcard__save{order:2}
}
.kcard__form{display:flex}
.kcard__add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border:0;border-radius:14px;background:var(--accent);color:#fff;font-weight:800;font-size:16px}
.kcard__add:hover{background:var(--accent-dark);color:#fff}
.ksheet{width:min(520px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 12px 48px rgba(27,30,60,.3);overflow-y:auto;overscroll-behavior:contain}
.ksheet::backdrop{background:rgba(27,30,60,.55)}
.ksheet__box{display:flex;flex-direction:column;gap:14px;padding:20px 20px 22px}
.ksheet__grip{display:none}
.ksheet__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ksheet__title{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.ksheet__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border:0;border-radius:12px;background:#EEF0FA;color:var(--navy)}
.ksheet__name{margin-top:-6px;font-size:15px;font-weight:800;color:var(--ink-2)}
.ksheet__parts{display:flex;flex-direction:column}
.ksheet__part{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0}
.ksheet__part+.ksheet__part{border-top:1px solid var(--line)}
.ksheet__img{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;background:var(--ground);overflow:hidden}
.ksheet__img img{width:100%;height:100%;object-fit:contain}
.ksheet__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.ksheet__tag{font-size:12px;font-weight:800;color:var(--muted)}
.ksheet__tag:empty{display:none}
.ksheet__pname{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.ksheet__price{font-size:15px;font-weight:800;white-space:nowrap}
.ksheet__sum{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:#F7F8FB;font-size:14px;font-weight:700;color:var(--ink-2)}
.ksheet__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ksheet__row.is-off{color:var(--green-dark);font-weight:800}
.ksheet__row.is-total{padding-top:8px;border-top:1px solid var(--line);color:var(--ink);font-weight:800}
.ksheet__row.is-total b{font-family:var(--display);font-weight:700;font-size:20px}
.ksheet__add{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;border:0;border-radius:14px;background:var(--accent);color:#fff;font-weight:800;font-size:16px}
.ksheet__add:hover{background:var(--accent-dark);color:#fff}
.ksheet__more{align-self:center;display:inline-flex;align-items:center;gap:4px;min-height:36px;font-size:14px;font-weight:800;text-decoration:underline}
.mega__cat.is-link .chip{background:#E6F5EB;color:var(--green-dark)}
@media (max-width:1279px){
	.kcard__imgs{gap:4px}
	.kcard__img{flex-basis:56px;height:56px;border-radius:14px}
	.kcard__more{width:40px;height:56px;border-radius:14px;font-size:15px}
	.kcard__plus{width:14px;font-size:16px}
}
@media (max-width:1023px){
	.ksection__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ksection:not(.is-whole) .kcard.is-third{display:none}
	.kcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
	.bundles-page{gap:26px}
	.bundles-page .shop__intro{font-size:15px}
	.kchips{flex-wrap:nowrap;overflow-x:auto;margin:-8px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) 2px;scrollbar-width:none}
	.kchips::-webkit-scrollbar{display:none}
	.kchip{flex-shrink:0;padding:0 14px}
	.kchip__name{max-width:200px}
	.ksection{gap:12px}
	.ksection__titles{flex-direction:column;align-items:flex-start;gap:2px}
	.ksection__title{font-size:20px}
	.ksection__sub{font-size:14px}
	.ksection__grid{grid-template-columns:minmax(0,1fr);gap:12px}
	.ksection__more{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border:1px solid var(--line-2);border-radius:14px;background:#fff;font-weight:800;font-size:15px}
	/* № 126: the title and „Виж всички“ on a row, the tabs under them as „Най-продавани“; the cards swipe, ~1.4 in view. */
	.home-bundles .kb__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px 12px}
	.kb__tools{display:contents}
	.kb__tabs{grid-column:1/-1;grid-row:2;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
	.kb__tabs .tab{height:40px;padding:0 14px}
	.kcols{display:flex;gap:12px;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}
	.kcols::-webkit-scrollbar{display:none}
	.kcol{flex:0 0 72%;scroll-snap-align:start}
	.kcard{gap:12px;padding:14px;border-radius:18px}
	.kcard__imgs{gap:4px}
	.kcard__plus{width:16px;font-size:16px}
	.kcard__img{flex-basis:64px;height:64px;border-radius:14px}
	.kcard__more{width:44px;height:64px;border-radius:14px;font-size:15px}
	.kcard__head{gap:6px}
	.kcard__why{font-size:12px}
	.kcard__why.is-empty{display:none}
	.kcard__name{font-size:16px}
	.kcard__lines{gap:5px}
	.kcard__foot{padding-top:12px}
	.kcard__price{font-size:22px}
	.kcard__sum{font-size:14px}
	.kcard__save{font-size:12px}
	.ksheet{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(27,30,60,.3)}
	.ksheet[open]{animation:added-up .22s ease-out}
	.ksheet__box{padding:8px 16px calc(20px + env(safe-area-inset-bottom))}
	.ksheet__grip{display:block;align-self:center;width:44px;height:5px;border-radius:3px;background:#C3C8D8}
	.ksheet__head{margin-top:-6px}
}
@media (prefers-reduced-motion:reduce){.ksheet[open]{animation:none}}

/* 0.21.1 (№ 89): on a touch screen (a phone, a tablet) every button, chip and tab at least 44 px — the
   responsive test's rule (Denis). A mouse keeps the drawn sizes. */
@media (pointer:coarse){
	.quick__list a,.quick__list button,.best__tabs .tab,.added-card__add,.cart-goes .goes__add{height:44px}
	.benefits__copy,.nav-end a,.nav-pill,.pill-link,.price-range,.qf__button,.acc-addr__edit,.vo-help__link,.woocommerce-account .woocommerce-button.button{min-height:44px}
	.pill-link,.price-range,.woocommerce-account .woocommerce-button.button{display:inline-flex;align-items:center}
	.search__clear{width:44px;height:44px}
	.acc-box__links .acc-box__link,.page--wc button.acc-box__link{display:inline-flex;align-items:center;min-height:44px}
}