/* V2ASHCHUK — Figma home/catalog alignment (1920/360 reference frames).
   Author: Эмиль. No force-overrides, absolute positioning, or layout-transform hacks. */

/* The hero is split 50/50 like Figma node 48:171. */
.v2-home .v2-hero-copy h1 { letter-spacing: 0; }
.v2-home .v2-hero-categories > a:not(.v2-hero-all) { border-color: rgba(0,0,0,.12); }
.v2-home .v2-hero-categories > a:not(.v2-hero-all):focus-visible,
.v2-home .v2-hero-categories > a:not(.v2-hero-all):hover { background: #000; color: #fff; }

/* Product listing sections: 80px outer margins + 120px vertical rhythm at 1920px. */
.v2-home .v2-popular-section,
.v2-home .v2-home-catalog { padding-block: 120px; }
.v2-home .v2-popular-section .v2-section-heading,
.v2-home .v2-home-catalog .v2-section-heading { margin-bottom: 40px; }
.v2-home .v2-popular-section .v2-product-grid,
.v2-home .v2-home-catalog .v2-product-grid { row-gap: 24px; column-gap: 16px; }
.v2-home .v2-popular-section .v2-product-name,
.v2-home .v2-home-catalog .v2-product-name { color: rgba(0,0,0,.6); }
.v2-home .v2-popular-section .v2-product-price,
.v2-home .v2-home-catalog .v2-product-price { color: #000; }
.v2-home .v2-popular-section .v2-home-popular-more {
  width: 100%; margin-top: 32px; min-height: 72px;
  border: 1px solid #000; background: #000; color: #fff;
}
.v2-home .v2-popular-section .v2-home-popular-more:hover { background: #1d1d1d; color: #fff; }
.v2-home .v2-home-catalog .v2-category-tabs {
  width: min(1100px,100%); margin: 0 auto 32px;
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
}
.v2-home .v2-home-catalog .v2-category-tabs a { min-width:0; font-size: 16px; }
.v2-home .v2-home-catalog [data-home-show-more] { display: flex; width:100%; }
.v2-home .v2-home-catalog [data-home-show-more][hidden],
.v2-home .v2-home-catalog [data-home-catalog-link][hidden] { display:none; }

/* A 5-option row in the desktop archive as in the Figma catalog page. */
.v2-catalog-page .v2-category-tabs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.v2-catalog-page .v2-category-tabs a { min-width:0; }

/* Match single-source card geometry: square photo, two-line name, price. */
.v2-popular-section .v2-product-card,
.v2-home-catalog .v2-product-card { display: flex; flex-direction: column; }
.v2-home-catalog .v2-product-card[hidden] { display:none; }
.v2-popular-section .v2-product-image,
.v2-home-catalog .v2-product-image { width: 100%; flex: none; }
.v2-popular-section .v2-product-name,
.v2-home-catalog .v2-product-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

@media (min-width: 768px) and (max-width: 1199px) {
  .v2-home .v2-popular-section,
  .v2-home .v2-home-catalog { padding-block: 80px; }
  .v2-home .v2-home-catalog .v2-category-tabs a { font-size: 13px; }
}

@media (max-width: 767px) {
  .v2-home .v2-popular-section,
  .v2-home .v2-home-catalog { padding-block: 40px; }
  .v2-home .v2-popular-section .v2-section-heading,
  .v2-home .v2-home-catalog .v2-section-heading { margin-bottom: 32px; justify-content:center; }
  .v2-home .v2-popular-section .v2-section-heading span,
  .v2-home .v2-home-catalog .v2-section-heading span { display: none; }
  .v2-home .v2-popular-section .v2-section-heading h2,
  .v2-home .v2-home-catalog .v2-section-heading h2 { font-size: 32px; line-height:40px; }
  .v2-home .v2-popular-section .v2-product-grid,
  .v2-home .v2-home-catalog .v2-product-grid { gap: 24px 12px; }
  .v2-home .v2-popular-section .v2-product-name,
  .v2-home .v2-home-catalog .v2-product-name { font-size:14px; line-height:20px; min-height:40px; margin-top:8px; }
  .v2-home .v2-popular-section .v2-product-price,
  .v2-home .v2-home-catalog .v2-product-price { font-size:16px; line-height:22px; margin-top:8px; }
  .v2-home .v2-popular-section .v2-home-popular-more { min-height:60px; margin-top:40px; font-size:14px; }
  .v2-home .v2-home-catalog .v2-category-tabs,
  .v2-catalog-page .v2-category-tabs {
    display:grid; overflow:visible; width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,44px);
    margin:0 0 24px; min-height:0; gap:0; border-right:0; border-bottom:0;
  }
  .v2-home .v2-home-catalog .v2-category-tabs a,
  .v2-catalog-page .v2-category-tabs a {
    display:grid; min-width:0; width:100%; font-size:12px; padding:8px;
    border-right:1px solid rgba(0,0,0,.12);
    border-bottom:1px solid rgba(0,0,0,.12);
  }
  .v2-home .v2-home-catalog .v2-category-tabs a:first-child,
  .v2-catalog-page .v2-category-tabs a:first-child { grid-column:1 / -1; min-width:0; }
  .v2-home .v2-home-catalog .v2-category-tabs a:last-child,
  .v2-catalog-page .v2-category-tabs a:last-child { border-right:1px solid rgba(0,0,0,.12); }
  .v2-home .v2-home-catalog .v2-full-outline { margin-top:32px; }
}

/* Desktop Figma uses the horizontal categories; 360px mobile uses a 260/400/180 rhythm.
   At short viewport heights, content expands instead of clipping the heading or product image. */
@media (max-width: 480px) {
  .v2-home .v2-hero {
    height: max(calc(100svh - var(--header-height) - var(--wp-bar, 0px)), 840px);
    min-height:840px;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows: minmax(0,13fr) minmax(0,20fr) 180px;
    overflow:visible;
  }
  .v2-home .v2-hero-copy {
    padding:20px; gap:20px;
    align-items:center; justify-content:center; text-align:center;
  }
  .v2-home .v2-hero-copy h1 { font:700 36px/44px var(--font-display); max-width:320px; }
  .v2-home .v2-hero-copy p { font:400 14px/20px var(--font-main); max-width:320px; }
  .v2-home .v2-hero-image img { object-position:center center; }
  .v2-home .v2-hero-categories { grid-template-rows:repeat(3,60px); }
  .v2-home .v2-hero-categories > a { font-size:14px; }
  .v2-home .v2-hero-categories .v2-hero-all { min-height:60px; }
}
@media (max-width: 345px) {
  .v2-home .v2-hero-copy h1 { font-size:32px; line-height:40px; }
  .v2-home .v2-hero-copy p { font-size:12px; line-height:18px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-home .v2-product-card img,
  .v2-home .v2-hero-categories a { transition:none; }
}


/* V2ASHCHUK 0.10 — canonical Figma responsive home refinements.
 * Author: Эмиль. Keep layout in grid/flex, avoid !important and absolute positioning. */
.v2-home-catalog-empty {
  padding: 28px 0; border-top: 1px solid rgba(0,0,0,.12);
  color: rgba(0,0,0,.6); text-align: center; font-size: 14px;
}
.v2-home .v2-home-catalog .v2-category-tabs a.active { color: #fff; background: #000; }
.v2-home .v2-home-catalog .v2-category-tabs a:not(.active):hover { color: #fff; background: #000; }
.v2-home .v2-home-catalog .v2-product-card[hidden] { display: none; }
.v2-home .v2-home-catalog .v2-full-outline[hidden] { display: none; }
@media (max-width:480px) {
  /* At Figma's 360×911 frame: 71px header + 260px copy + 400px photo + 180px categories.
     On shorter mobile screens, the sections adapt without cropping text. */
  .v2-home .v2-hero {
    height: calc(100svh - var(--header-height) - var(--wp-bar, 0px));
    min-height: 720px;
    grid-template-rows: minmax(230px,13fr) minmax(310px,20fr) 180px;
  }
  .v2-home .v2-hero-copy { padding: 20px; gap: 20px; }
  .v2-home .v2-hero-categories { grid-template-rows:repeat(3,60px); }
}
@media (max-width:340px) {
  .v2-home .v2-hero-copy h1 { font-size: 32px; line-height:40px; }
  .v2-home .v2-hero-copy p { font-size: 12px; line-height:18px; }
}

/* v0.12: WooCommerce-driven category tabs. More than four categories wrap
   into additional rows without compressing the Figma sizing. */
.v2-home .v2-home-catalog .v2-category-tabs,
.v2-catalog-page .v2-category-tabs {
  grid-auto-rows: minmax(48px, auto);
}
.v2-home .v2-home-catalog .v2-category-tabs a,
.v2-catalog-page .v2-category-tabs a {
  overflow-wrap: anywhere;
  padding-inline: 8px;
}
.v2-catalog-status {
  margin: 18px 0;
  color: rgba(0,0,0,.6);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.v2-catalog-status[hidden],
.v2-home-catalog-empty[hidden] { display: none; }
[data-home-show-more][aria-disabled="true"] { opacity: .55; pointer-events: none; }
@media (min-width: 768px) and (max-width: 1150px) {
  .v2-home .v2-home-catalog .v2-category-tabs,
  .v2-catalog-page .v2-category-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .v2-home .v2-home-catalog .v2-category-tabs,
  .v2-catalog-page .v2-category-tabs {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(44px,auto);
  }
}