/* Public shell: top bar, header, navigation, drawer, bottom bar, footer, consent, pop-up. Colours come only from tokens (see theme-default.css). */

.ico { width: 1.25rem; height: 1.25rem; flex: none; vertical-align: middle; }
.ico--fill { fill: currentColor; }
.ico--dim { color: var(--border-strong); fill: currentColor; }
.nowrap { white-space: nowrap; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.container--narrow { max-width: 52rem; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--brand-accent); color: var(--on-accent); font-size: .7rem; font-weight: 700; line-height: 1; }
.count[hidden] { display: none; }
.count--inline { margin-inline-start: .35rem; }

/* ---- top bar ---- */
.topbar { background: var(--brand-primary); color: var(--on-primary); font-size: .85rem; }
.topbar a { color: var(--on-primary); text-decoration: none; }
.topbar a:hover { color: var(--on-primary); text-decoration: underline; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2rem; }
.topbar__msg { display: none; margin: 0; align-items: center; gap: .4rem; }
.topbar__links { display: flex; align-items: center; gap: 1rem; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
.topbar__links a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem 0; }
.topbar__links .ico { width: 1rem; height: 1rem; }
.topbar__lang { font-weight: 600; padding: .1rem .7rem !important; border: 1px solid color-mix(in srgb, var(--on-primary) 55%, transparent); border-radius: 999px; }
@media (min-width: 768px) { .topbar__msg { display: inline-flex; } }
/* a phone is too narrow for four links: one line with the phone number and the language switch (WhatsApp and order tracking are in the menu) */
@media (max-width: 575.98px) {
  .topbar__links { width: 100%; justify-content: space-between; }
  .topbar__links .topbar__opt { display: none; }
}

/* ---- header ---- */
.site-header { background: var(--surface-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.hdr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "menu brand actions" "search search search"; align-items: center; gap: .35rem .5rem; padding-block: .5rem; }
.hdr__menu { grid-area: menu; }
.hdr__brand { grid-area: brand; justify-self: start; min-width: 0; }
.hdr__search { grid-area: search; transition: max-height .2s ease, opacity .2s ease, margin .2s ease; max-height: 3.5rem; }
.hdr__actions { grid-area: actions; display: flex; align-items: center; gap: .15rem; }
.site-header.is-scrolled .hdr__search { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; margin-block: -.2rem; }
@media (min-width: 992px) {
  /* two slim rows: brand / search / buttons, then the menu; from 1200px the menu moves up into the first row (see below) */
  .hdr { grid-template-columns: auto minmax(14rem, 1fr) auto; grid-template-areas: "brand search actions" "nav nav nav"; gap: .4rem 1.25rem; padding-block: .5rem 0; }
  .hdr .hdr__menu { display: none; }   /* two classes: plain .hdr__menu would lose to .icon-btn further down and stay on screen as a stray row */
  .site-header.is-scrolled .hdr__search { max-height: 3.5rem; opacity: 1; pointer-events: auto; margin: 0; overflow: visible; }
}
@media (min-width: 1200px) {
  .hdr { grid-template-columns: auto minmax(0, max-content) minmax(10rem, 1fr) auto; grid-template-areas: "brand nav search actions"; gap: 1rem; padding-block: .5rem; }
}

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--brand-primary); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.brand:hover { color: var(--brand-primary-hover); }
.brand__mark { width: 2rem; height: 2rem; flex: none; }
.brand__logo { display: block; height: 2.5rem; width: auto; }
.brand__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hdr__brand { overflow: hidden; }

.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: transparent; color: var(--brand-ink); text-decoration: none; cursor: pointer; transition: background-color .15s; }
.icon-btn:hover { background: var(--surface-alt); color: var(--brand-ink); }
.icon-btn .count { position: absolute; top: .1rem; inset-inline-end: .05rem; }
.hdr__account { display: none; }
@media (min-width: 576px) { .hdr__account { display: inline-flex; } }

.cartlink { position: relative; display: inline-flex; align-items: center; gap: .45rem; height: 2.6rem; padding: 0 .75rem; border-radius: 999px; background: var(--brand-primary); color: var(--on-primary); text-decoration: none; font-weight: 600; }
.cartlink:hover { background: var(--brand-primary-hover); color: var(--on-primary); }
.cartlink__txt { display: none; white-space: nowrap; }
.cartlink .count { position: absolute; top: -.3rem; inset-inline-end: -.2rem; }
@media (min-width: 992px) { .cartlink__txt { display: inline; } }
@media (max-width: 991.98px) { .cartlink { width: 2.6rem; padding: 0; justify-content: center; } }

/* ---- search ---- */
.search { position: relative; display: flex; align-items: stretch; }
/* the search box is the main tool of a shop: white pill, brand-coloured border with a soft glow, and a labelled button from 992px */
.search__input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 3rem 0 1.25rem; border: 2px solid var(--brand-primary); border-radius: 999px; background: var(--surface-card); color: var(--brand-ink); font-family: var(--font-body); font-size: 1rem; box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-primary) 14%, transparent), var(--shadow-sm); transition: box-shadow .2s ease, border-color .2s ease; -webkit-appearance: none; appearance: none; }
.search__input::placeholder { color: var(--brand-ink-700); opacity: .85; }
.search__input:hover { box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--brand-primary) 24%, transparent), var(--shadow-sm); }
.search__input:focus { outline: none; border-color: var(--brand-primary-active); box-shadow: 0 0 0 .3rem var(--focus-ring), var(--shadow-md); }
.search__btn { position: absolute; inset-block: .3rem; inset-inline-end: .3rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: var(--brand-primary); color: var(--on-primary); font: inherit; font-weight: 700; cursor: pointer; }
.search__btn:hover { background: var(--brand-primary-hover); }
.search__btn-txt { display: none; }
@media (min-width: 992px) {
  .search__btn { width: auto; padding: 0 1.1rem 0 .95rem; }
  .search__btn-txt { display: inline; }
  .hdr .search__input { padding-inline-end: 8rem; }
}
.suggest { position: absolute; z-index: 120; inset-inline: 0; top: calc(100% + .4rem); background: var(--surface-card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-lg); padding: .35rem; max-height: min(26rem, 70vh); overflow-y: auto; }
.suggest[hidden] { display: none; }
.suggest__item { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: .75rem; color: var(--brand-ink); text-decoration: none; }
.suggest__item:hover, .suggest__item.is-on { background: var(--brand-primary-50); color: var(--brand-ink); }
.suggest__thumb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .6rem; background: var(--brand-primary-100); color: var(--brand-primary); overflow: hidden; }
.suggest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.suggest__txt { min-width: 0; flex: 1; display: grid; line-height: 1.3; }
.suggest__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__sub { font-size: .8rem; color: var(--brand-ink-500); }
.suggest__price { font-weight: 700; color: var(--brand-primary); white-space: nowrap; }
.suggest__empty { padding: .8rem; color: var(--brand-ink-500); }

/* ---- category navigation (desktop) ---- */
.nav { display: none; grid-area: nav; min-width: 0; }
@media (min-width: 992px) { .nav { display: block; border-top: 1px solid var(--border); } }
.nav__inner { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; }
.nav__all { position: relative; }
.nav__allbtn { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .9rem; border: 0; border-radius: 999px; background: var(--brand-primary-100); color: var(--brand-primary-active); font-weight: 600; cursor: pointer; }
.nav__allbtn:hover { background: var(--brand-primary-200); }
.nav__chev { width: 1rem; height: 1rem; transition: transform .2s; }
.nav__allbtn[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.mega { position: absolute; z-index: 110; top: calc(100% + .5rem); inset-inline-start: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem 1.5rem; width: min(46rem, 90vw); padding: 1.25rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 1.25rem; box-shadow: var(--shadow-lg); }
.mega[hidden] { display: none; }
.mega__col { display: grid; align-content: start; gap: .15rem; }
.mega__top { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--brand-primary); text-decoration: none; padding: .25rem 0; }
.mega__top .ico { width: 1.15rem; height: 1.15rem; }
.mega__sub { color: var(--brand-ink-700); text-decoration: none; padding: .2rem 0 .2rem 1.65rem; }
.mega__sub:hover, .mega__top:hover { color: var(--brand-primary-hover); text-decoration: underline; }
.nav__list { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.nav__link { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 999px; color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.nav__link:hover { background: var(--surface-alt); color: var(--brand-primary); }
.nav__badge { display: inline-block; padding: .05rem .4rem; border-radius: .4rem; background: var(--danger); color: var(--surface-card); font-size: .65rem; font-weight: 800; letter-spacing: .04em; line-height: 1.4; }
/* one row from 1200px: the quick category links are left to the "all categories" menu so the search box gets the room;
   below 1400px that button keeps just its icon */
@media (min-width: 1200px) {
  .nav { border-top: 0; }
  .nav__inner { gap: .5rem; min-height: 0; }
  .nav__cat { display: none; }
  .mega { top: calc(100% + .9rem); }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- mobile drawer ---- */
.drawer { position: fixed; inset: 0; z-index: 2000; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgb(var(--brand-ink-rgb) / .5); }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(21rem, 88vw); display: flex; flex-direction: column; background: var(--surface-card); box-shadow: var(--shadow-lg); animation: drawer-in .22s ease; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--brand-primary); }
.drawer__nav { flex: 1; overflow-y: auto; padding: .5rem; display: grid; align-content: start; gap: .1rem; }
.drawer__link { display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem; border-radius: .85rem; color: var(--brand-ink); text-decoration: none; font-weight: 600; cursor: pointer; list-style: none; }
.drawer__link::-webkit-details-marker { display: none; }
.drawer__link:hover { background: var(--surface-alt); color: var(--brand-ink); }
.drawer__link .ico { color: var(--brand-primary); }
.drawer__chev { margin-inline-start: auto; transition: transform .2s; }
.drawer__group[open] > summary .drawer__chev { transform: rotate(180deg); }
.drawer__sub { display: block; padding: .55rem .85rem .55rem 3.1rem; color: var(--brand-ink-700); text-decoration: none; border-radius: .75rem; }
.drawer__sub:hover { background: var(--surface-alt); color: var(--brand-primary); }
.drawer__foot { display: flex; flex-wrap: wrap; gap: .5rem; padding: .85rem 1rem; border-top: 1px solid var(--border); }
body.has-drawer { overflow: hidden; }

/* ---- mobile bottom bar ---- */
.bottom-nav { position: fixed; z-index: 90; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-card); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgb(var(--brand-ink-rgb) / .08); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.4rem; border: 0; background: transparent; color: var(--brand-ink-500); text-decoration: none; font-size: .72rem; font-weight: 600; cursor: pointer; }
.bottom-nav__item:hover, .bottom-nav__item.is-on { color: var(--brand-primary); }
.bottom-nav__item .count { position: absolute; top: .3rem; left: calc(50% + .45rem); }
@media (min-width: 992px) { .bottom-nav { display: none; } }
@media (max-width: 991.98px) { body { padding-bottom: 3.6rem; } .to-top { bottom: 4.6rem; } .wa-float { bottom: 4.6rem; } }

/* ---- error / not found / coming soon ---- */
.notice { padding: clamp(3rem, 9vw, 6rem) 0; }
.notice__inner { max-width: 36rem; text-align: center; }
.notice__code { font-family: var(--font-display); font-weight: 700; font-size: 4.5rem; line-height: 1; margin: 0 0 .5rem; color: var(--brand-accent); }
.notice__ref { margin: 1.2rem 0 0; color: var(--brand-ink-500); font-size: .85rem; word-break: break-all; }

/* ---- footer ---- */
.site-footer { margin-top: 3rem; background: var(--brand-ink); color: var(--surface-card); border-top: 6px solid var(--brand-primary); }
.site-footer a { color: var(--surface-card); text-decoration: none; text-decoration-color: var(--brand-accent); text-underline-offset: 3px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--brand-accent-100); text-decoration: underline; }
.site-footer__news { background: var(--brand-primary); color: var(--on-primary); }
.news { display: grid; gap: 1rem; padding-block: 1.5rem; align-items: center; }
.news__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.news__sub { margin: .15rem 0 0; opacity: .9; }
.news__form { display: flex; gap: .5rem; flex-wrap: wrap; }
.news__form .form-control { flex: 1 1 14rem; border-radius: 999px; }
@media (min-width: 768px) { .news { grid-template-columns: 1fr minmax(20rem, 28rem); } }
.site-footer__grid { display: grid; gap: 2rem; padding: 2.5rem 0 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin: 0 0 .25rem; }
.site-footer__tag { margin: 0 0 .75rem; opacity: .85; }
.site-footer__title { font-weight: 700; margin: 0 0 .6rem; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.site-footer__list a, .site-footer__addr { display: inline-flex; align-items: flex-start; gap: .5rem; padding: .15rem 0; }
.site-footer__list .ico { width: 1.05rem; height: 1.05rem; margin-top: .25rem; color: var(--brand-accent); }
.social { display: flex; gap: .5rem; margin-top: 1rem; }
.social__link { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--surface-card) 35%, transparent); }
.social__link:hover { background: var(--brand-primary); border-color: var(--brand-primary); }
.site-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding: 1rem 56px 1.25rem 0; border-top: 1px solid color-mix(in srgb, var(--surface-card) 18%, transparent); font-size: .9rem; opacity: .9; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-footer__link { background: none; border: 0; padding: 0; font: inherit; color: var(--surface-card); cursor: pointer; text-decoration: none; text-decoration-color: var(--brand-accent); text-underline-offset: 3px; }
.site-footer__link:hover, .site-footer__link:focus-visible { color: var(--brand-accent-100); text-decoration: underline; }
@media (max-width: 991.98px) { .site-footer__bar { padding-right: 0; } }

/* ---- floating buttons ---- */
.to-top { position: fixed; right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: var(--brand-ink); color: var(--surface-card); box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 90; }
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-primary); }
.to-top__ico { transform: rotate(180deg); }
.wa-float { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--brand-primary); color: var(--on-primary); box-shadow: var(--shadow-md); text-decoration: none; transition: transform .2s, background-color .2s; }
.wa-float:hover { background: var(--brand-primary-hover); color: var(--on-primary); transform: scale(1.06); }
.wa-float .ico { width: 1.6rem; height: 1.6rem; }

/* ---- cookie notice ---- */
.cc { position: fixed; z-index: 1500; inset-inline: .75rem; bottom: .75rem; display: grid; gap: .75rem; padding: 1rem 1.15rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 1.25rem; box-shadow: var(--shadow-lg); max-width: 46rem; margin-inline: auto; }
.cc[hidden] { display: none; }
.cc__text { margin: 0; font-size: .92rem; }
.cc__btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
@media (max-width: 991.98px) { .cc { bottom: 4.4rem; } }

/* ---- newsletter pop-up ---- */
.pop { border: 0; border-radius: 1.5rem; padding: 2rem 1.5rem 1.25rem; width: min(26rem, 92vw); background: var(--surface-card); color: var(--brand-ink); box-shadow: var(--shadow-lg); text-align: center; }
.pop::backdrop { background: rgb(var(--brand-ink-rgb) / .55); }
.pop__x { position: absolute; top: .5rem; inset-inline-end: .5rem; }
.pop__ico { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--brand-accent-100); color: var(--brand-accent-hover); }
.pop__ico .ico { width: 1.75rem; height: 1.75rem; }
.pop__title { font-size: 1.35rem; margin: .75rem 0 .35rem; }
.pop__text { margin: 0 0 1rem; color: var(--brand-ink-700); }
.pop__form { display: grid; gap: .6rem; }
.pop__form .form-control { text-align: center; border-radius: 999px; }
.pop__skip { margin-top: .6rem; border: 0; background: transparent; color: var(--brand-ink-500); text-decoration: underline; cursor: pointer; }