/* ==========================================================================
   Customer accounts, saved products (heart) and header tools — every screen size.
   ========================================================================== */
[hidden] { display: none !important; }

/* Header: saved products and account */
button.icon-btn { padding: 0; font: inherit; }
.acct-btn { width: auto; min-width: 44px; padding: 0 8px; grid-auto-flow: column; gap: 8px; font-weight: 600; font-size: 14.5px; }
.acct-btn__label { display: none; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1400px) { .acct-btn__label { display: inline; } }
.mcats { display: none; }

/* Heart on product cards and product page */
.pcard__save {
  position: absolute; z-index: 4; top: 10px; right: 10px; width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.94); color: var(--text);
  box-shadow: 0 1px 3px rgba(14, 17, 14, 0.16), 0 6px 14px -8px rgba(14, 17, 14, 0.35);
  transition: transform 0.15s var(--ease), color 0.2s;
}
.pcard__save:hover { color: var(--green); }
.pcard__save:active { transform: scale(0.9); }
.pcard__badges { right: 58px; }
.pcard__stock .tn-icon { display: none; }
[data-save].is-on { color: var(--green-fill); }
[data-save].is-on .tn-icon--heart { fill: currentColor; }
.pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pdp__save {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--text);
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.pdp__save:hover { border-color: var(--green-fill); color: var(--green); }
.pdp__save.is-on { border-color: var(--green-fill); background: var(--green-soft); }

/* Login, registration, password */
.auth { padding: 40px 0 72px; background: linear-gradient(180deg, var(--bg-2), #fff 360px); }
.auth__wrap { display: grid; gap: 28px; align-items: start; }
@media (min-width: 990px) { .auth__wrap { grid-template-columns: minmax(0, 520px) minmax(0, 360px); justify-content: center; gap: 56px; } }
.auth--center .auth__wrap { grid-template-columns: minmax(0, 540px); justify-content: center; }
.auth__card { position: relative; padding: 28px 22px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
@media (min-width: 750px) { .auth__card { padding: 38px 42px; } }
.auth--center .auth__card { text-align: center; }
.auth__title { margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 38px); text-transform: uppercase; }
.auth__lead { margin: 0 0 22px; font-size: 16.5px; color: var(--muted); }
.auth__preview { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 22px; padding: 12px 14px; background: var(--green-soft); border-left: 3px solid var(--green-fill); font-size: 14.5px; line-height: 1.45; text-align: left; }
.auth__preview .tn-icon { flex-shrink: 0; margin-top: 2px; color: var(--green); }
.auth__ok, .auth__err { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; padding: 12px 14px; font-weight: 600; font-size: 15px; text-align: left; }
.auth__ok { background: var(--green-soft); color: var(--green); }
.auth__err { background: rgba(180, 35, 24, 0.08); color: var(--bad); border-left: 3px solid var(--bad); }
.auth__box { margin: 0 0 20px; padding: 16px; background: var(--bg-2); }
.auth__box p { margin: 0 0 12px; }
.auth__form { display: grid; gap: 16px; text-align: left; }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 600; font-size: 15px; }
.field input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 0; background: #fff; color: var(--text); font: inherit; font-size: 17px; }
.field input:focus { outline: none; border-color: var(--green-fill); box-shadow: 0 0 0 3px var(--green-soft); }
.field input:disabled { background: var(--bg-2); color: var(--muted); }
.field.has-error input { border-color: var(--bad); }
.field__hint { font-size: 13.5px; color: var(--muted); }
.field__err { margin: 0; font-size: 14px; font-weight: 600; color: var(--bad); }
.field__pw { position: relative; display: block; }
.field__pw input { padding-right: 54px; }
.field__eye { position: absolute; top: 0; right: 0; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.field__eye.is-on { color: var(--green); }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check--top { align-items: flex-start; }
.check input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--green-fill); }
.check a { color: var(--green); }
.check.has-error span { color: var(--bad); }
.auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; font-size: 15px; }
.auth__row a, .auth__switch a { color: var(--green); font-weight: 600; }
.auth__switch { margin: 22px 0 0; text-align: center; font-size: 15.5px; }
.auth__icon { display: inline-grid; place-items: center; width: 78px; height: 78px; margin-bottom: 16px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.auth__icon--muted { background: var(--bg-2); color: var(--muted); }
.auth__tips { display: grid; gap: 6px; margin: 0 0 20px; padding: 14px 16px; list-style: none; background: var(--bg-2); font-size: 15px; text-align: left; }
.auth--center .auth__card > .btn, .auth--center .auth__card > form { margin-top: 10px; }
.auth__more { margin-top: 20px; justify-content: center; }
.auth__side { padding: 8px 4px; }
.auth__perks { display: grid; gap: 18px; margin: 16px 0 22px; padding: 0; list-style: none; }
.auth__perks li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.auth__perks .tn-icon { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.auth__perks strong { display: block; font-family: var(--font-head); font-size: 17px; }
.auth__perks span { font-size: 15px; line-height: 1.45; color: var(--muted); }
.auth__perks span strong { color: var(--text); }
.auth__note { margin: 0 0 18px; font-weight: 600; }
.auth__help { display: grid; gap: 10px; padding: 16px; background: var(--bg-2); }
.auth__help a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--text); }
.auth__help .tn-icon { color: var(--green); }

/* Customer area */
.acct { display: grid; gap: 18px; max-width: 880px; }
.acct__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acct__nav a { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; background: var(--bg-2); text-decoration: none; text-align: center; font-weight: 600; font-size: 15px; }
.acct__nav a:hover { color: var(--green); }
.acct__nav .tn-icon { color: var(--green); }
.acct__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: var(--green-fill); color: #fff; font-size: 12px; }
.acct__box { padding: 22px; border: 1px solid var(--line-2); background: #fff; scroll-margin-top: 96px; }
.acct__h { margin: 0 0 16px; font-size: 22px; text-transform: uppercase; }
.acct__box .auth__form { max-width: 460px; }
.acct__box .auth__form .btn { justify-self: start; }
.acct__empty { display: grid; gap: 14px; justify-items: start; color: var(--muted); }
.acct__empty p { margin: 0; }
.acct__logout { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.acct__danger { padding: 16px 22px; border: 1px dashed var(--line-2); color: var(--muted); }
.acct__danger summary { font-weight: 600; color: var(--text); cursor: pointer; }
.acct__danger p { margin: 12px 0; }
.orders { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.order { padding: 16px; background: var(--bg-2); }
.order__top, .order__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.order__top span { font-size: 14.5px; color: var(--muted); }
.order__items { display: grid; gap: 4px; margin: 10px 0; padding: 0; list-style: none; font-size: 15px; }
.order__ship { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--muted); }
.order__ship .tn-icon { color: var(--green); }

/* Promotions: big, whole product photos. Two per row; with three promos the first one is a tall feature. */
.promo { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: center; gap: 22px; padding: 24px; }
.promo__img {
  align-self: center; width: 100%; height: auto; min-height: 0; aspect-ratio: 1; object-fit: cover; background: #fff;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

@media (min-width: 750px) {
  .promos__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo:only-child { grid-column: 1 / -1; }
  .promo:first-child:nth-last-child(3) { grid-row: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 54%); padding: 32px; }
  .promo:first-child:nth-last-child(3) .promo__title { font-size: clamp(26px, 2.6vw, 36px); }
  .promo:first-child:nth-last-child(3) .promo__text { font-size: 16px; }
}

/* Shop map: OpenStreetMap shown straight away (no profiling cookies), Google Maps one tap away */
.map iframe { filter: grayscale(0.15); }
.map__open {
  position: absolute; z-index: 4; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; background: #fff; color: var(--text); text-decoration: none;
  font-weight: 700; font-size: 14.5px; box-shadow: 0 2px 6px rgba(14, 17, 14, 0.2), 0 10px 24px -14px rgba(14, 17, 14, 0.5);
}
.map__open .tn-icon { color: var(--green); }
.map__open:hover { color: var(--green); }

/* Company data on the contact page */
.legalbox { padding: 24px; border: 1px solid var(--line-2); background: #fff; }
.legalbox__h { margin: 0 0 12px; font-size: 22px; text-transform: uppercase; }
.legalbox__dl { margin: 0; }
.legalbox__dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.legalbox__dl dt { font-weight: 600; color: var(--muted); }
.legalbox__dl dd { margin: 0; overflow-wrap: anywhere; }
.legalbox__dl a { color: var(--green); }
@media (max-width: 749px) { .legalbox__dl > div { grid-template-columns: 1fr; gap: 2px; } .legalbox__h { text-transform: none; } }

/* Latest Google reviews (shown when the Google key is set) */
.greviews { display: grid; gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
@media (min-width: 750px) { .greviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.greview { display: grid; gap: 10px; align-content: start; padding: 20px; background: #fff; border: 1px solid var(--line); }
.greview__text { margin: 0; font-size: 15.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.greview__by { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.greview__by a { color: inherit; }
.greviews__src { margin: 12px 0 0; font-size: 12.5px; color: var(--faint); }
.stars .is-off { opacity: 0.25; }


/* Colour choices on product cards and in the home hero (dots are SVG: the CSP forbids inline styles) */
.pcard__colors, .hfeat__colors { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.hfeat__colors { margin-top: 10px; font-size: 13.5px; }
.pcard__dot { width: 14px; height: 14px; flex: none; }
.hfeat__colors .pcard__dot { width: 18px; height: 18px; }
.pcard__dot circle { stroke: rgba(14, 17, 14, 0.24); stroke-width: 1; }
.pcard__colors > span, .hfeat__colors > span { margin-left: 4px; }
.pcard__from, .hfeat__from { align-self: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.hfeat__from { font-size: 15px; }
a.pcard__add, a.hfeat__add { text-decoration: none; }
.btn[disabled]:not(.is-loading) { cursor: not-allowed; opacity: 0.45; }

/* Colour and storage picker on the product page */
.vpick { display: grid; gap: 18px; margin: 6px 0 22px; }
.vpick__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.vpick__label { margin-bottom: 10px; padding: 0; font-size: 14.5px; color: var(--muted); }
.vpick__label strong { color: var(--text); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; box-shadow: 0 0 0 1px var(--line-2); transition: box-shadow 0.15s var(--ease);
}
.swatch svg { width: 38px; height: 38px; }
.swatch circle { stroke: rgba(14, 17, 14, 0.2); stroke-width: 1; }
.swatch:hover { box-shadow: 0 0 0 1px var(--text); }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--green-fill); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.swatch.is-out::after { content: ''; position: absolute; width: 2px; height: 40px; background: rgba(14, 17, 14, 0.5); transform: rotate(45deg); }
.vpills { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.vpill {
  display: grid; gap: 2px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 12px;
  background: #fff; cursor: pointer; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.vpill:hover { border-color: var(--text); }
.vpill:has(input:checked) { border-color: var(--green-fill); box-shadow: inset 0 0 0 1px var(--green-fill); background: #f6fbf6; }
.vpill:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.vpills--long { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.vpill__name { font-family: var(--font-head); font-size: 16px; font-weight: 700; white-space: nowrap; }
.vpill__price { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.vpill.is-out .vpill__name { color: var(--faint); text-decoration: line-through; }
.vpill.is-out .vpill__price::after { content: ' · esaurito'; }


/* Product gallery: official photos side by side (swipe on phones), thumbnails on larger screens */
.pdp__gallery { min-width: 0; }
.pdp__track { display: flex; width: 100%; height: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pdp__track::-webkit-scrollbar { display: none; }
.pdp__track:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
.pdp__track > img { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; object-fit: cover; }
.pdp__count { position: absolute; z-index: 4; right: 14px; bottom: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(14, 17, 14, 0.62); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb {
  flex: 0 0 76px; width: 76px; height: 76px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 12px; background: #f4f7f3; opacity: 0.7;
  transition: opacity 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb:hover { opacity: 1; }
.pdp__thumb.is-on { opacity: 1; border-color: var(--green-fill); box-shadow: 0 0 0 1px var(--green-fill); }
.pdp__thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 749px) { .pdp__thumbs { display: none; } }

/* Cards: the second official photo appears on hover (mouse only; never downloaded on touch screens) */
.pcard__media .pcard__alt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s var(--ease), transform 0.4s var(--ease); }
@media (hover: hover) { .pcard:hover .pcard__media .pcard__alt { opacity: 1; } }
@media (hover: none) { .pcard__media .pcard__alt { display: none; } }


/* Colours sold out on the cards */
.pcard__dot.is-out { opacity: 0.28; }

/* Photo viewer: full screen over the page, zoom with click, wheel or two fingers */
.pdp__track img { cursor: zoom-in; }
.pdp__zoom {
  position: absolute; z-index: 4; top: 14px; right: 14px; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--text); box-shadow: 0 2px 10px -4px rgba(14, 17, 14, 0.35);
}
.pdp__zoom:hover { color: var(--green); }
.zoom {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; background: #fff; color: var(--text);
}
.zoom::backdrop { background: rgba(14, 17, 14, 0.55); }
.zoom__stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.zoom.is-zoomed .zoom__stage { cursor: zoom-out; }
.zoom__img {
  width: min(100vw, 100vh); width: min(100vw, 100dvh); height: auto; max-height: 100dvh; object-fit: contain;
  transform-origin: center; transition: transform 0.22s var(--ease); user-select: none; -webkit-user-drag: none;
}
.zoom.is-dragging .zoom__img { transition: none; }
.zoom__close, .zoom__nav {
  position: absolute; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(14, 17, 14, 0.07); color: var(--text); cursor: pointer; line-height: 1;
}
.zoom__close { top: 14px; right: 14px; width: 48px; height: 48px; font-size: 32px; }
.zoom__nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; font-size: 36px; }
.zoom__nav--prev { left: 14px; }
.zoom__nav--next { right: 14px; }
.zoom__close:hover, .zoom__nav:hover { background: rgba(14, 17, 14, 0.14); }
.zoom__close:focus-visible, .zoom__nav:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.zoom__count { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(14, 17, 14, 0.62); color: #fff; font-size: 13px; font-weight: 600; }
.zoom__hint { position: absolute; z-index: 2; top: 26px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 13px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.zoom.is-zoomed .zoom__hint { visibility: hidden; }
@media (max-width: 749px) { .zoom__nav { display: none; } .zoom__hint { top: auto; bottom: 58px; } }

/* ---------- Departments and brands: desktop menus ---------- */
.dnav { align-items: center; }
.dmenu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 2px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.dmenu > summary::-webkit-details-marker { display: none; }
.dmenu > summary::after {
  content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease);
}
.dmenu > summary:hover, .dmenu[open] > summary { color: var(--text); }
.dmenu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.dmenu > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.dmenu__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40; padding: 28px 0 20px;
  max-height: calc(100vh - 140px); overflow: auto; background: #fff;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 40px 60px -40px rgba(14, 17, 14, 0.45);
}
.dmenu__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.dnav .dmenu__panel a { position: static; padding: 0; font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.dnav .dmenu__panel a::after, .dnav .dmenu__panel a:hover::after { content: none; }
.dnav .dmenu__panel a:hover { color: var(--green); }
.dnav .dmenu__panel .dmenu__head { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--text); }
.dmenu__head .tn-icon { flex-shrink: 0; color: var(--green); }
.dmenu__col ul { list-style: none; display: grid; gap: 8px; margin: 12px 0 0; padding: 0 0 0 32px; }
.dmenu__foot { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.dnav .dmenu__panel .dmenu__foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green); }
/* Department menus split by brand: a column per brand, with its photo and products */
.dmenu__bcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 26px 28px; }
.dnav .dmenu__panel .dmenu__bhead {
  display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
  font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text);
}
.dnav .dmenu__panel .dmenu__bhead:hover { color: var(--green); }
.dmenu__bhead img { width: 56px; height: 56px; flex-shrink: 0; background: var(--bg-2); }
.dmenu__bhead span { display: grid; gap: 2px; }
.dmenu__bhead small { font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--faint); }
.dmenu__bcol ul { list-style: none; display: grid; gap: 9px; margin: 12px 0 0; padding: 0; }
.dnav .dmenu__panel .dmenu__bcol li a { display: block; font-size: 14.5px; line-height: 1.3; }
.dnav .dmenu__panel .dmenu__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--green); }

/* Tablet menu: every department with its brands right under it */
.mnav__panel { max-height: calc(100vh - 96px); overflow: auto; }
.mnav__panel a:has(+ .mnav__brands) { border-bottom: 0; padding-bottom: 6px; }
.mnav__brands { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 14px 32px; border-bottom: 1px solid var(--line); }
.mnav__panel .mnav__brands a { padding: 8px 12px; border: 1px solid var(--line-2); font-size: 15px; background: #fff; }

/* Mobile "Reparti" sheet: every department with its brands and types */
.sheet__depts { display: grid; gap: 10px; }
.sheet__dept { padding: 14px; background: var(--bg-2); }
.sheet__dhead { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text); }
.sheet__dhead span { flex: 1; }
.sheet__dhead .tn-icon { flex-shrink: 0; color: var(--green); }
.sheet__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sheet__chips .chip { font-size: 15px; text-transform: none; background: #fff; }
.sheet__types { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 15px; }
.sheet__types a { color: var(--muted); }

/* ---------- Catalog: department, type and brand rows ---------- */
.filters { align-items: flex-end; }
.filters__rows { display: grid; gap: 14px; flex: 1 1 620px; min-width: 0; }
.frow { display: grid; gap: 8px; min-width: 0; }
.frow[hidden] { display: none; }
.frow__label { font-family: var(--font-tech); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.chip[hidden] { display: none; }
@media (min-width: 990px) {
  .frow { grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
  .frow__label { padding-top: 12px; }
}

/* ---------- Brands: tiles (home and /marche) and list by department ---------- */
.btiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
@media (min-width: 750px) { .btiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .btiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.btile {
  display: grid; gap: 2px; height: 100%; padding: 12px 12px 14px; text-decoration: none; color: var(--text);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color 0.2s, transform 0.2s var(--ease);
}
.btile:hover { border-color: rgba(31, 138, 51, 0.45); transform: translateY(-2px); }
.btile__img { display: block; aspect-ratio: 1; margin-bottom: 8px; overflow: hidden; background: var(--bg-2); }
.btile__img img { width: 100%; height: 100%; object-fit: cover; }
.btile__name { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.2; }
.btile__count { font-size: 13px; color: var(--muted); }
.bydept { display: grid; gap: 14px; }
.bydept__row { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bydept__cat { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--text); }
.bydept__cat .tn-icon { color: var(--green); }
.bydept__brands { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 990px) { .bydept__row { grid-template-columns: 300px minmax(0, 1fr); align-items: center; } }

/* ---------- Home: one section per department, four products ---------- */
.mbrands { display: none; }
@media (min-width: 750px) and (max-width: 1099px) { .pgrid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Header bar with the department menus: one line at every desktop width; search and account behind their icons */
.dmenu > summary, .dnav > a { white-space: nowrap; }
@media (min-width: 1100px) {
  .dnav { gap: 16px; }
  .dmenu > summary, .dnav > a { font-size: 14px; letter-spacing: 0.02em; }
  .hsearch { display: none !important; }
  .hsearch-btn { display: inline-grid; }
  .acct-btn__label { display: none !important; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .dnav { gap: 12px; }
  .dmenu > summary, .dnav > a { font-size: 13px; letter-spacing: 0.01em; }
  .logo { margin-right: 8px; }
  .logo img { height: 40px; }
}
@media (min-width: 1100px) and (max-width: 1199px) { .dnav__hot { display: none; } }

/* ---------- Installments at zero interest and bank transfer ---------- */
/* Product page */
.rateinfo { display: flex; align-items: flex-start; gap: 12px; margin: -8px 0 22px; padding: 14px 16px; background: var(--green-soft); border-left: 3px solid var(--green-fill); }
.rateinfo[hidden] { display: none; }
.rateinfo > .tn-icon { flex-shrink: 0; margin-top: 2px; color: var(--green); }
.rateinfo__main { margin: 0; font-size: 15.5px; line-height: 1.45; }
.rateinfo__main strong { color: var(--green); }
.rateinfo__fine { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.rateinfo__fine a { color: var(--green); font-weight: 600; }

/* Product cards */
/* Room on the right for the card's round add button, which sits on these last lines */
.pcard__rate { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; padding-right: 46px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.pcard__rate .tn-icon { flex-shrink: 0; color: var(--green); }

/* Home: the hero product's installments, under its price */
.hfeat__rate { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; background: var(--green-soft); font-size: 14.5px; line-height: 1.4; }
.hfeat__rate .tn-icon { flex-shrink: 0; margin-top: 1px; color: var(--green); }
.hfeat__rate strong { color: var(--green); }

/* Home section and "A rate" page: products to pay in installments */
.section--rate { background: linear-gradient(180deg, #eef6ee, #f7faf6); }
.sechead__lead { max-width: 56ch; margin: 10px 0 0; font-size: 16px; color: var(--muted); }
.arate__jump { margin-top: 18px; }
.arate__n { margin-left: 4px; color: var(--faint); font-weight: 500; }
.arate { scroll-margin-top: 90px; }

/* Header: the installments link, next to the offers */
.dnav__rate { color: var(--green) !important; font-weight: 700 !important; }

/* Cart: how to pay (card, bank transfer, installments); nothing chosen in advance */
.pay { display: grid; gap: 16px; margin-top: 8px; }
.pay__set { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pay__set[hidden], [data-pay-card][hidden], .bank[hidden], .ratebox[hidden] { display: none; }
.pay__label { margin: 0 0 4px; padding: 0; font-family: var(--font-tech); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.pay__opt { position: relative; display: block; cursor: pointer; }
.pay__opt[hidden] { display: none; }
.pay__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pay__opt > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--line-2); background: #fff; }
.pay__opt strong { font-size: 15px; }
.pay__opt small { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.pay__opt .tn-icon { color: var(--green); }
.pay__opt input:checked + span { border-color: var(--green-fill); box-shadow: inset 0 0 0 1px var(--green-fill); background: #f6fbf6; }
.pay__opt input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.pay__hint { margin: 0; font-size: 13px; color: var(--muted); }

/* Installments: explained once chosen */
.ratebox { display: grid; gap: 12px; padding: 14px 16px; background: var(--green-soft); border-left: 3px solid var(--green-fill); }
.ratebox__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 700; }
.ratebox__title .tn-icon { color: var(--green); }
.ratebox__list { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 14px; }
.ratebox__list strong { color: var(--green); }

/* Bank transfer: the order first, then how to pay it */
.bank { display: grid; gap: 14px; }
.bank__form { display: grid; gap: 10px; }
.bank__form label:not(.pay__opt) { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.bank__form label small { font-weight: 400; color: var(--faint); }
.bank__form input:not([type="radio"]), .bank__form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); background: #fff; color: var(--text); font: inherit; font-size: 16px; }
.bank__form input:focus, .bank__form textarea:focus { outline: none; border-color: var(--green-fill); box-shadow: 0 0 0 3px var(--green-soft); }
.bank__ship { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.bank__ship legend { margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.bank__error { margin: 0; font-size: 14px; font-weight: 600; color: var(--bad); }
.bank__error[hidden], [data-ship-address][hidden], .bank__tutorial[hidden], .bank__steps li[hidden] { display: none; }
.bank__note { margin: 0; font-size: 12.5px; color: var(--faint); }
.bank__tutorial { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--green-fill); background: #f6fbf6; outline: none; }
.bank__done { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--green); }
.bank__steps { display: grid; gap: 12px; margin: 0; padding-left: 20px; font-size: 14px; }
.bank__steps > li > strong { display: block; margin-bottom: 6px; font-size: 15px; }
.bank__data { display: grid; margin: 0; border: 1px solid var(--line-2); background: #fff; }
.bank__data > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bank__data > div:last-child { border-bottom: 0; }
.bank__data dt { font-size: 12.5px; color: var(--faint); }
.bank__data dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.bank__iban { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; }
.bank__copy { padding: 4px 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bank__copy:hover { border-color: var(--green-fill); color: var(--green); }
.bank__actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.bank__again { padding: 0; border: 0; background: none; color: var(--green); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }