/* vnk-storemenu.css v1 (review 01.11: dim over the sort button, panel height, VN caption plates, credit 9 px, [hidden], chevron width)
   — category tiles on /store/ (.vnk-ct), STORE panel on desktop (.vnk-sm),
   Store tiles in the phone menu (.vnk-smm). Thread «Улучшить меню и плитки каталога», variant A «Студия»,
   approved 31.10.2026. Reference: https://claude.ai/artifact/3NUKeidmAvay3CiYWmQKGd
   External file only (never inline in a chunk: Fenom). Load in <head> next to the other vnk-*.css (no CLS).
   Cormorant Garamond 600 (latin + vietnamese) must be declared on every page that shows the panel:
   copy the @font-face rules /store/ uses; a font downloads only when text using it renders. */


/* Cormorant Garamond 600, latin + vietnamese: the same files as the Google Fonts link in chunk head (wght@500;600),
   so nothing extra is downloaded; kept here so the panel has its face even where that link is missing. */
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.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 {
  --vsm-ink: #1b1512; --vsm-brown: #564530; --vsm-bronze: #7d6748; --vsm-tan: #c0a686;
  --vsm-gold2: #d9c6a6; --vsm-beige: #f7f2ec; --vsm-paper: #f3ece2; --vsm-cream: #f8f3ea; --vsm-tile: #efe6d9;
  --vsm-serif: "Cormorant Garamond", Georgia, serif; --vsm-sans: Montserrat, Arial, sans-serif;
}

/* ---------- 1. Category tiles on /store/ and /vn/store/ ---------- */
.vnk-ct { margin: 16px 0 0; }
.vnk-ct__g {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-auto-rows: min(9.44vw, 150px); /* 136 px at 1440, keeps about 2.1:1 up to the 1500 container */
  gap: 12px;
}
.vnk-ct__t {
  position: relative; display: block; overflow: hidden; grid-column: span 2; isolation: isolate;
  background: var(--vsm-tile); color: var(--vsm-ink); text-decoration: none;
  --fg: var(--vsm-ink); --ct: var(--vsm-bronze);
}
.vnk-ct__t--w { grid-column: span 3; }
.vnk-ct__t picture, .vnk-ct__t img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vnk-ct__t img { object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.vnk-ct__lb { position: absolute; left: 18px; top: 15px; z-index: 2; max-width: 62%; }
.vnk-ct__t--lng .vnk-ct__lb { max-width: 82%; }
.vnk-ct__nm { display: block; font: 600 23px/1.04 var(--vsm-serif); color: var(--fg); }
.vnk-ct__ct { display: block; margin-top: 7px; font: 600 9.5px/1 var(--vsm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ct); }
.vnk-ct__cr {
  position: absolute; right: 0; bottom: 0; z-index: 2; padding: 3px 5px;
  font: 500 9px/1.2 var(--vsm-sans); letter-spacing: .02em; color: rgba(27, 21, 18, .72); background: rgba(248, 243, 234, .62);
  max-width: 100%; text-align: right; /* review 01.11: 9 px, readable; wraps on narrow tiles */
}
.vnk-ct__t--dk { --fg: var(--vsm-cream); --ct: var(--vsm-gold2); }
.vnk-ct__t--dk .vnk-ct__nm { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.vnk-ct__t--dk .vnk-ct__cr { color: rgba(248, 243, 234, .82); background: rgba(18, 13, 10, .38); }
.vnk-ct__t--scl::before, .vnk-sm__t--scl::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 140% at 0% 0%, rgba(243, 236, 226, .96) 0%, rgba(243, 236, 226, .82) 28%, rgba(243, 236, 226, 0) 58%);
}
.vnk-ct__t--scd::before, .vnk-sm__t--scd::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(130% 150% at 0% 0%, rgba(18, 13, 10, .74) 0%, rgba(18, 13, 10, .45) 30%, rgba(18, 13, 10, 0) 60%);
}
.vnk-ct__t::after, .vnk-sm__t::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s;
}
@media (hover: hover) {
  .vnk-ct__t:hover img, .vnk-sm__t:hover img { transform: scale(1.045); }
  .vnk-ct__t:hover::after, .vnk-sm__t:hover::after { box-shadow: inset 0 0 0 1px var(--vsm-tan); }
  .vnk-ct__t:hover .vnk-ct__nm::after { content: " \2192"; font: 500 15px/1 var(--vsm-sans); }
}
.vnk-ct__t:focus-visible, .vnk-sm__t:focus-visible, .vnk-smm__t:focus-visible { outline: 2px solid var(--vsm-tan); outline-offset: 2px; }
/* review 01.11: Vietnamese names are long and run onto 2 lines over busy parts of the photos (Thân thiện môi trường, Bộ rượu vang);
   a plate under the caption keeps the contrast at 4.5:1 or more on any photo. The EN view stays as approved. */
.vnk-ct--vn .vnk-ct__lb { padding: 6px 9px 7px; margin: -6px 0 0 -9px; background: rgba(243, 236, 226, .88); }
.vnk-ct--vn .vnk-ct__t--dk .vnk-ct__lb { background: rgba(18, 13, 10, .75); }
.vnk-ct--vn .vnk-ct__ct { color: var(--vsm-brown); }
.vnk-ct--vn .vnk-ct__t--dk .vnk-ct__ct { color: var(--vsm-gold2); }
.vnk-ct--vn .vnk-ct__nm, .vnk-sm--vn .vnk-sm__nm { text-shadow: none; }
.vnk-ct [hidden], .vnk-sm [hidden], .vnk-sm[hidden], .vnk-sm-dim[hidden] { display: none !important; }
.vnk-ct__hint { display: none; }

@media (min-width: 992px) and (max-width: 1199px) {
  .vnk-ct__nm { font-size: 20px; }
  .vnk-ct__lb { left: 14px; top: 12px; }
}
/* phones and small tablets: two rows that scroll sideways (same breakpoint as the <picture> phone source) */
@media (max-width: 991px) {
  .vnk-ct { margin: 16px -15px 0; } /* same bleed as the old .vnk-cats--store; match the page padding */
  .vnk-ct__g {
    grid-auto-flow: column; grid-template-columns: none; grid-template-rows: 112px 112px;
    grid-auto-columns: 154px; grid-auto-rows: auto; gap: 8px;
    overflow-x: auto; padding: 0 16px 4px; scroll-padding-inline: 16px; /* keeps tile 1 on the gutter with mandatory snap */
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .vnk-ct__g::-webkit-scrollbar { display: none; }
  .vnk-ct__t, .vnk-ct__t--w { grid-column: auto; scroll-snap-align: start; }
  .vnk-ct__lb { left: 12px; top: 11px; max-width: 84%; }
  .vnk-ct__nm { font-size: 19px; }
  .vnk-ct__ct { font-size: 8.5px; margin-top: 5px; letter-spacing: .14em; }
  .vnk-ct__cr { padding: 2px 4px; }
  .vnk-ct__hint {
    display: flex; justify-content: flex-end; padding: 8px 16px 0;
    font: 500 10px/1 var(--vsm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vsm-bronze);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .vnk-ct__g { grid-template-rows: 124px 124px; grid-auto-columns: 180px; }
}

/* ---------- 2. STORE panel (desktop, static and fixed header) ---------- */
/* rev 6 (review 2): room for the chevron. The STORE link of both headers gets 22 px of right padding where the STORE row has room
   (measured 01.11 on the live site, guest and B2B, both headers: EN 34+ px to spare from 1200 px; VN only 6-10 px at 1280 and 47+ px
   from 1366), and the chevron sits in that padding about 8 px after the word and 22 px before the next item, as in the approved A.
   The padding is set on the link by its address, not by the script's class, so nothing moves when the script runs. Elsewhere
   (EN below 1200, VN below 1366) there is no chevron; the panel still opens on hover, Enter, Space, ArrowDown and the first tap. */
.vnk-sm-trg { position: relative; }
.vnk-sm-trg::after {
  content: ""; display: none; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.vnk-sm-trg[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px, -3px); }
@media (min-width: 1200px) {
  .header__iteam > a.site__link[href$="store/"]:not([href*="/vn/"]):not([href^="vn/"]):not([hreflang]):not(.dropdown-link) { padding-right: 22px; }
  .header__iteam > a.site__link.vnk-sm-trg[href$="store/"]:not([href*="/vn/"]):not([href^="vn/"])::after { display: block; }
}
@media (min-width: 1366px) {
  .header__iteam > a.site__link[href$="/vn/store/"]:not([hreflang]):not(.dropdown-link), .header__iteam > a.site__link[href="vn/store/"]:not([hreflang]):not(.dropdown-link) { padding-right: 22px; }
  .header__iteam > a.site__link.vnk-sm-trg[href$="/vn/store/"]::after, .header__iteam > a.site__link.vnk-sm-trg[href="vn/store/"]::after { display: block; }
}
.vnk-sm:focus { outline: none; } /* tabindex -1 (audit 01.11): a click on the background focuses the panel, no ring */
.vnk-sm {
  position: fixed; left: 0; right: 0; z-index: 1200; /* above the catalog (#filter, .catalog__iteam, .product__button__block are z 1000) and,
     like the dim, at the z of .sorting__container (1200) but later in the DOM, so both paint over it; below the fixed header (1201)
     and popups (.block__popap 2000). The script puts the dim before the panel at the end of body. */
  overflow-y: auto; overscroll-behavior: contain; /* review 01.11: max-height = window below the header (script); scrolling inside does not close it */
  background: var(--vsm-beige); border-top: 1px solid var(--vsm-gold2); box-shadow: 0 26px 50px rgba(27, 21, 18, .18);
  color: var(--vsm-ink); font-family: var(--vsm-sans);
}
.vnk-sm__in {
  max-width: 1368px; margin: 0 auto; padding: 24px 40px 22px; /* left edge = menu text (x 76 at 1440) */
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 22px 44px;
}
.vnk-sm__ey { margin-bottom: 13px; font: 600 10.5px/1 var(--vsm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--vsm-bronze); }
.vnk-sm__tg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vnk-sm__t { position: relative; display: block; overflow: hidden; aspect-ratio: 210 / 107; isolation: isolate; background: var(--vsm-tile); text-decoration: none; --fg: var(--vsm-ink); }
.vnk-sm__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.vnk-sm__nm { position: absolute; left: 12px; top: 10px; z-index: 2; max-width: 62%; font: 600 19px/1.04 var(--vsm-serif); color: var(--fg); }
.vnk-sm__t--lng .vnk-sm__nm { font-size: 16px; max-width: 92%; }
.vnk-sm__t--dk { --fg: var(--vsm-cream); }
.vnk-sm__t--dk .vnk-sm__nm { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.vnk-sm__cr { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 2px 4px; font: 500 9px/1.2 var(--vsm-sans); color: rgba(27, 21, 18, .72); background: rgba(248, 243, 234, .62); max-width: 100%; text-align: right; }
.vnk-sm--vn .vnk-sm__nm { padding: 3px 6px 4px; margin: -3px 0 0 -6px; background: rgba(243, 236, 226, .88); max-width: 92%; }
/* VN names get the whole tile width: at 1024 «Bộ rượu vang» in two lines ran under the 9 px photo credit */
.vnk-sm--vn .vnk-sm__t--dk .vnk-sm__nm { background: rgba(18, 13, 10, .75); }
.vnk-sm__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vnk-sm__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.vnk-sm__cols a { font: 400 14px/1.35 var(--vsm-sans); color: var(--vsm-ink); text-decoration: none; }
.vnk-sm__cols a:hover, .vnk-sm__cols a:focus-visible { color: var(--vsm-bronze); text-decoration: underline; text-underline-offset: 3px; }
.vnk-sm__cols small { margin-left: 6px; font-size: 11px; color: var(--vsm-bronze); }
.vnk-sm__all {
  grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--vsm-gold2);
  font: 600 11px/1 var(--vsm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--vsm-ink); text-decoration: none;
}
.vnk-sm-dim { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; background: rgba(27, 21, 18, .32); } /* 1200 + later in the DOM: covers .sorting__container */
@media (max-width: 991px) { .vnk-sm, .vnk-sm-dim { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .vnk-ct__t img, .vnk-sm__t img { transition: none; } }

/* ---------- 3. Store tiles in the phone menu (inside nav#menu, mmenu) ----------
   Mac 01.11, checked on the live menu: selectors start with #menu because the site's own menu rules are stronger than plain classes
   (.mm-menu.mm-offcanvas a: 16px, uppercase, .15em; #menu .mm-listview li: width 100%; .mm-listview > li: padding 0, display block).
   nav#menu is full width, but the page slides over its right part: only 80% (440 px from 550 px) is visible
   (jquery.mmenu.css translate), so the box and the chevron stay inside that part. */
#menu .mm-listview > li.vnk-smm { padding: 2px 20px 12px; border: 0; width: min(80%, 440px); box-sizing: border-box; }
#menu .mm-listview > li.vnk-smm[hidden], #menu .vnk-smm [hidden] { display: none !important; }
#menu .mm-listview > li.vnk-smm::after { display: none; } /* no mmenu divider */
#menu .vnk-smm__g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#menu .vnk-smm__t {
  position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 1; isolation: isolate; padding: 0;
  background: #4a3a2a; text-decoration: none; font-size: 16px; line-height: 1; letter-spacing: normal; text-transform: none;
}
#menu .vnk-smm__t img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
#menu .vnk-smm__t::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(18, 13, 10, .74), rgba(18, 13, 10, .28) 48%, rgba(18, 13, 10, 0) 74%);
}
#menu .vnk-smm__nm {
  position: absolute; left: 9px; bottom: 7px; z-index: 2; max-width: 90%;
  font: 600 16px/1.05 var(--vsm-serif); letter-spacing: normal; text-transform: none; color: var(--vsm-cream); text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
#menu .vnk-smm__t--lng .vnk-smm__nm { font-size: 14px; line-height: 1; max-width: 94%; }
#menu .vnk-smm__acc { margin: 10px 0 0 37px; border-top: 1px solid rgba(243, 236, 226, .16); } /* text column of the menu items */
#menu .vnk-smm__acc details { border-bottom: 1px solid rgba(243, 236, 226, .16); }
#menu .vnk-smm__acc summary {
  display: flex; justify-content: space-between; align-items: center; height: 40px; list-style: none; cursor: pointer;
  font: 500 12px/1 var(--vsm-sans); letter-spacing: .14em; text-transform: uppercase; color: #eadcc7;
}
#menu .vnk-smm__acc summary::-webkit-details-marker { display: none; }
#menu .vnk-smm__acc summary::after { content: "+"; font-size: 17px; letter-spacing: 0; color: #c9a982; }
#menu .vnk-smm__acc details[open] summary::after { content: "\2212"; }
#menu .vnk-smm__list { display: grid; padding: 0 0 10px; }
#menu.mm-menu .mm-listview > li.vnk-smm .vnk-smm__list a {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  font: 400 14px/1.3 var(--vsm-sans); letter-spacing: normal; text-transform: none; color: #f3ece2; text-decoration: none;
}
#menu.mm-menu .mm-listview > li.vnk-smm .vnk-smm__list small { font-size: 11px; letter-spacing: normal; color: #c9a982; }
.vnk-smm-tg {
  position: absolute; left: min(calc(80% - 52px), 388px); top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.vnk-smm-tg::before {
  content: ""; display: block; margin: auto; width: 8px; height: 8px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.vnk-smm-tg[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-2px, -2px); }
@media (min-width: 992px) { #menu .vnk-smm, .vnk-smm-tg { display: none !important; } }