/* Vinoteka ideas round 3 (DRAFT, not live): home tabs in "Our highlights", category tiles, search hints, style-line links.
   Palette: gold #c0a686, bronze #7d6748, brown #564530, paper #f3ece2, cream #f8f3ea. Montserrat only (the "Title" font has no Vietnamese glyphs). */

/* 1) Tabs inside the "Our highlights" title block. The block keeps its old total height:
      desktop 56 + h2 + 32  ->  36 + h2 + 10 + 30 + 12
      phone   40 + h2 + 20  ->  16 + h2 +  6 + 30 +  8                                          */
html body:has(.bg__index) .products-index-title.vnk-has-tabs{margin-top:36px!important;margin-bottom:12px!important}
.vnk-tabs{display:flex;justify-content:center;align-items:stretch;gap:0 28px;height:30px;margin:10px 0 0;padding:0;list-style:none}
.vnk-tab{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;margin:0;padding:0 2px;
  font:600 11px/28px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7d6748;cursor:pointer;white-space:nowrap}
.vnk-tab:hover{color:#564530}
.vnk-tab[aria-selected="true"]{color:#564530;border-bottom-color:#c0a686}
.vnk-tab:focus-visible{outline:2px solid #c0a686;outline-offset:2px}
@media (max-width:767px){
  html body:has(.bg__index) .products-index-title.vnk-has-tabs{margin-top:16px!important;margin-bottom:8px!important}
  .vnk-tabs{margin-top:6px;gap:0 18px}
  .vnk-tab{font-size:10px;letter-spacing:.1em}
}
@media (max-width:359px){.vnk-tabs{gap:0 12px}.vnk-tab{letter-spacing:.06em}}

/* 2) Category tiles (own bottle photos), one row; phones scroll horizontally */
.vnk-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:24px 0 0;padding:0;list-style:none}
.vnk-cat{display:flex;align-items:center;gap:10px;height:64px;padding:0 14px 0 6px;background:#f3ece2;border:1px solid #efe6d9;border-radius:2px;
  color:#564530;text-decoration:none;font:600 12px/1.25 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,border-color .2s}
.vnk-cat:hover,.vnk-cat:focus-visible{background:#efe6d9;border-color:#c0a686;color:#564530;text-decoration:none}
.vnk-cat:focus-visible{outline:2px solid #c0a686;outline-offset:2px}
.vnk-cat__img{flex:0 0 52px;width:52px;height:60px;object-fit:cover;object-position:50% 50%;mix-blend-mode:multiply}
.vnk-cat__t{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){
  .vnk-cats{display:flex;gap:8px;margin:20px 0 0;padding:0 16px 2px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .vnk-cats::-webkit-scrollbar{display:none}
  .vnk-cat{flex:0 0 auto;height:52px;padding:0 12px 0 4px;gap:6px;font-size:11px;scroll-snap-align:start;white-space:nowrap}
  .vnk-cat__img{flex-basis:40px;width:40px;height:48px}
}

/* 3b) Wine page: words of the style line that are real catalog filter values become links */
.vnk-style a.vnk-style__a{color:inherit;text-decoration:underline;text-decoration-color:#c0a686;text-underline-offset:3px;text-decoration-thickness:1px}
.vnk-style a.vnk-style__a:hover,.vnk-style a.vnk-style__a:focus-visible{color:#564530;text-decoration-color:#564530}