/* ============================================================
   Czech Drinks — Shop archive styles
   Enqueued on archive-product.php
   ============================================================ */

/* ── Category header ──────────────────────────────────────── */
.shop-head { border-bottom: 1px solid var(--ink-08); background: var(--paper); }
.shop-head-inner { padding-block: clamp(16px, 2.5vw, 32px) clamp(20px, 2.5vw, 36px); }
.shop-head h1 { margin: 10px 0 0; max-width: 22ch; }
.sh-head-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.sh-head-main { flex: 1 1 420px; min-width: 0; }
.sh-sub { font-size: 16px; color: var(--ink-70); margin: 12px 0 0; max-width: 46ch; }
.sh-trust { list-style: none; margin: 0; padding: 0 0 4px 0; flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.sh-trust li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-70); white-space: nowrap; }
.sh-trust svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--amber-deep); }
.sh-trust b { color: var(--ink); font-weight: 600; }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { list-style: none; margin: 0 0 10px; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 12.5px; color: var(--ink-40); }
.breadcrumb a { color: var(--ink-55); text-decoration: none; transition: color .18s; }
.breadcrumb a:hover { color: var(--ink); }
.bc-sep { margin: 0 3px; }
.bc-current { color: var(--ink-70); font-weight: 500; }

/* ── Category sub-nav ─────────────────────────────────────── */
.cat-subnav { background: var(--paper); border-bottom: 1px solid var(--ink-08); }
.cat-subnav-inner { display: flex; align-items: center; gap: 2px; overflow-x: auto; padding: 0; scrollbar-width: none; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.cat-subnav-inner::-webkit-scrollbar { display: none; }
.csn-back { display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px 11px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-55); text-decoration: none; border-right: 1px solid var(--ink-15); margin-right: 6px; flex-shrink: 0; transition: color .18s; }
.csn-back svg { width: 14px; height: 14px; flex-shrink: 0; }
.csn-back:hover { color: var(--ink); }
.csn-link { display: inline-block; padding: 11px 13px; font-size: 13.5px; font-weight: 500; color: var(--ink-55); text-decoration: none; border-radius: var(--radius); transition: color .18s, background .18s; flex-shrink: 0; }
.csn-link:hover { color: var(--ink); background: var(--ink-04, rgba(28,26,23,.04)); }
.csn-link.is-active { color: var(--amber-deep); font-weight: 700; }

/* ── Quick chips (mobile scroll) ─────────────────────────── */
.chip-row {
  display: none; /* shown only on mobile via media query */
  gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  margin: 0 calc(var(--gutter) * -1) clamp(14px,2vw,18px);
  padding: 2px var(--gutter) 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; scroll-snap-align: start;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid var(--ink-15); background: var(--paper-card); color: var(--ink-70);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  text-decoration: none;
}
.chip:hover { border-color: var(--ink-40); color: var(--ink); }
.chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-40); flex-shrink: 0; }
.chip[data-value="lager"] .chip-dot  { background: var(--amber); }
.chip[data-value="weiss"] .chip-dot  { background: #C9B98A; }
.chip[data-value="rot"] .chip-dot    { background: var(--burgundy); }
.chip[data-value="box"] .chip-dot,
.chip[data-value="geschenke"] .chip-dot,
.chip[data-value="events"] .chip-dot { background: var(--bottle); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.on .chip-dot { background: var(--paper) !important; }

/* ── Applied filter pills ─────────────────────────────────── */
.applied-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: -2px 0 22px; }
.applied-row[hidden] { display: none; }
.applied-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); }
.fpill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 7px 6px 13px; border-radius: 999px; background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); }
.fpill a { background: none; border: 0; padding: 0; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; color: rgba(244,239,230,.65); transition: color .18s, background .18s; text-decoration: none; }
.fpill a:hover { color: #fff; background: rgba(244,239,230,.16); }
.fpill svg { width: 12px; height: 12px; }
.applied-clear { background: none; border: 0; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--burgundy); border-bottom: 1px solid transparent; padding: 2px 0; transition: border-color .2s; text-decoration: none; }
.applied-clear:hover { border-color: var(--burgundy); }

/* ── Shop layout: sidebar + main ─────────────────────────── */
.shop-layout { display: grid; grid-template-columns: 252px 1fr; gap: clamp(28px, 3.5vw, 52px); align-items: start; }
.shop-layout > * { min-width: 0; }

/* ── Sidebar filters ──────────────────────────────────────── */
.filters { position: sticky; top: 92px; }
.filters-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.filters-head h2 { font-size: 19px; }
.reset-btn { margin-left: auto; background: none; border: 0; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-55); padding: 2px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; text-decoration: none; }
.reset-btn:hover { color: var(--burgundy); border-color: var(--burgundy); }
.fgroup { border-top: 1px solid var(--ink-15); padding: 18px 0 16px; margin: 0; }
.fgroup-title, .fgroup legend { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 12px; padding: 18px 0 0; display: block; }
.fgroup-sub { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); margin: 14px 0 9px; }
.fopt { display: flex; align-items: center; gap: 11px; padding: 5px 0; cursor: pointer; font-size: 14.5px; color: var(--ink-70); transition: color .18s; white-space: nowrap; }
.fopt input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.fopt a { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; width: 100%; }
.fopt:hover { color: var(--ink); }
.fopt .box { width: 18px; height: 18px; border: 1.5px solid var(--ink-40); border-radius: 4px; flex-shrink: 0; display: grid; place-items: center; transition: border-color .18s, background .18s; }
.fopt .box svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; color: #fff; }
.fopt input:checked ~ .box { background: var(--ink); border-color: var(--ink); }
.fopt input:checked ~ .box svg { opacity: 1; transform: scale(1); }
.fopt a[aria-checked="true"] .box { background: var(--ink); border-color: var(--ink); }
.fopt a[aria-checked="true"] .box svg { opacity: 1; transform: scale(1); }
.fcount { margin-left: auto; font-size: 12.5px; color: var(--ink-40); }

/* ── Toolbar ──────────────────────────────────────────────── */
.shop-toolbar { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ink-15); }
.woocommerce-result-count { font-size: 14.5px; color: var(--ink-55); margin-right: auto; }
.orderby-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.orderby-wrap select, .woocommerce-ordering select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--paper-card); border: 1.5px solid var(--ink-15); border-radius: var(--radius);
  padding: 10px 38px 10px 14px; cursor: pointer; transition: border-color .2s;
}
.orderby-wrap select:hover { border-color: var(--ink-40); }
.orderby-wrap select:focus { outline: none; border-color: var(--ink); }
.orderby-wrap svg { position: absolute; right: 13px; width: 14px; height: 14px; pointer-events: none; color: var(--ink-55); }

/* ── Product grid ─────────────────────────────────────────── */
ul.products, #productGrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1180px) { ul.products, #productGrid { grid-template-columns: repeat(2, 1fr); } }

/* ── Product card ─────────────────────────────────────────── */
.product-card, li.product {
  display: flex; flex-direction: column;
  background: var(--paper-card); border: 1px solid var(--ink-15); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product-card:hover, li.product:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -30px rgba(28,26,23,.45); }
.pc-media { position: relative; display: block; text-decoration: none; }
.pc-img-wrap {
  aspect-ratio: 3/4; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--amber-tint);
}
.pc-img-wrap.tone-burgundy { background: var(--burgundy-tint); }
.pc-img-wrap.tone-bottle   { background: var(--bottle-tint); }
.pc-img {
  width: 100%; height: 100%; display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 15% 5%; box-sizing: border-box;
}
.pc-media .ph { aspect-ratio: 3/4; width: 100%; }
.pc-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.pc-badge.sale { background: var(--burgundy); }
.pc-badge.new  { background: var(--bottle); }
.pc-badge.bestseller { background: var(--amber-deep); }
.pc-fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--paper-card) 78%, transparent); backdrop-filter: blur(4px); border: 1px solid var(--ink-08); display: grid; place-items: center; color: var(--ink-55); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s, color .2s, background .2s; cursor: pointer; }
.pc-fav svg { width: 17px; height: 17px; }
.product-card:hover .pc-fav, li.product:hover .pc-fav { opacity: 1; transform: translateY(0); }
.pc-fav:hover { color: var(--burgundy); }
.pc-scarcity { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--paper); background: color-mix(in srgb, var(--burgundy) 92%, transparent); }
.pc-scarcity svg { width: 13px; height: 13px; flex-shrink: 0; }
.pc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pc-origin { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); margin: 0; }
.pc-name, .woocommerce-loop-product__title { font-family: var(--display); font-size: 21px; line-height: 1.08; letter-spacing: -0.01em; margin: 7px 0 0; }
.pc-name a { text-decoration: none; color: inherit; }
.pc-rating { display: flex; align-items: center; gap: 6px; margin: 8px 0 11px; font-size: 12.5px; color: var(--ink-55); }
.pc-rating .stars { color: var(--amber); letter-spacing: 1px; font-size: 12px; }
.pc-style { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ink-15); color: var(--ink-70); }
.pc-style::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-40); }
.pc-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.pc-price, .price { font-family: var(--display); font-size: 23px; line-height: 1.15; }
.pc-price .unit { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--ink-40); margin-left: 4px; letter-spacing: .02em; white-space: nowrap; }
.pc-price .was  { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-40); text-decoration: line-through; margin-right: 7px; }
.button.pc-add, .add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-family: var(--sans); font-size: 14px; font-weight: 600; white-space: nowrap; padding: 12px 15px; border-radius: var(--radius); background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); transition: background .22s var(--ease), transform .22s var(--ease); text-decoration: none; cursor: pointer; }
.button.pc-add:hover, .add_to_cart_button:hover { background: #000; transform: translateY(-1px); }
.button.pc-add.added, .add_to_cart_button.added { background: var(--bottle); border-color: var(--bottle); }

/* ── Hidden cards (JS filter) ────────────────────────────── */
.product-card.is-hidden, li.product.is-hidden { display: none !important; }

/* ── No-results state ────────────────────────────────────── */
.no-results { display: none; padding: 60px 0; text-align: center; color: var(--ink-55); }
.no-results.show { display: block; }
.no-results h3 { font-size: 24px; color: var(--ink); margin-bottom: 10px; }

/* ── Pagination ───────────────────────────────────────────── */
.woocommerce-pagination { margin-top: 48px; display: flex; justify-content: center; }
.woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.woocommerce-pagination li a, .woocommerce-pagination li span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius); font-size: 14px; font-weight: 600; border: 1.5px solid var(--ink-15); color: var(--ink); text-decoration: none; transition: background .2s, border-color .2s; }
.woocommerce-pagination li .current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── Sheet-only elements: hidden on desktop ──────────────── */
.filter-close, .sheet-foot, .sheet-backdrop, .filter-toggle, .cart-bar { display: none; }

/* ── Desktop: hide chips ─────────────────────────────────── */
@media (min-width: 881px) {
  .chip-row { display: none; }
}

/* ── Mobile / Tablet (≤ 880px) ───────────────────────────── */
@media (max-width: 880px) {
  /* compact header */
  .shop-head-inner { padding-block: 12px 12px; }
  .shop-head h1 { font-size: clamp(24px, 6vw, 30px); max-width: none; text-align: left; }
  .sh-head-grid { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; }
  .sh-head-main { flex: none; width: 100%; }
  .sh-sub { font-size: 14.5px; margin-top: 8px; max-width: none; }
  .sh-trust { display: none; }

  /* collapse grid to single column; filters become a fixed sheet */
  .shop-layout { grid-template-columns: 1fr; gap: 0; }

  /* chip row visible on mobile */
  .chip-row { display: flex; }

  /* sticky filter + sort toolbar */
  .shop-toolbar {
    position: sticky; top: 75px; z-index: 90;
    margin: 0 calc(var(--gutter) * -1) 14px; padding: 11px var(--gutter);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ink-08); border-bottom: 1px solid var(--ink-15);
  }

  /* filter toggle button */
  .filter-toggle {
    display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
    font-family: var(--sans); font-size: 14px; font-weight: 600;
    padding: 9px 15px; border: 1.5px solid var(--ink); border-radius: var(--radius);
    background: var(--paper-card); color: var(--ink); cursor: pointer;
  }
  .filter-toggle svg { width: 17px; height: 17px; }
  .filter-toggle .ft-count { background: var(--amber); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 5px; }
  .filter-toggle .ft-count[hidden] { display: none; }

  /* backdrop */
  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 205;
    background: rgba(28,26,23,.45); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .sheet-backdrop.open { opacity: 1; visibility: visible; }

  /* filter sidebar → fixed bottom-sheet */
  .filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 210;
    max-height: 88vh; display: flex; flex-direction: column;
    background: var(--paper); border-radius: 18px 18px 0 0;
    box-shadow: 0 -22px 60px -24px rgba(0,0,0,.5);
    transform: translateY(101%); transition: transform .38s var(--ease);
    padding: 0; overflow: hidden;
  }
  .filters.open { transform: none; }

  /* filter-close header (mobile-only top bar of sheet) */
  .filter-close {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 12px; border-bottom: 1px solid var(--ink-08); flex-shrink: 0;
  }
  .filter-close h2 { font-size: 19px; }
  .filter-close > button { background: none; border: 0; padding: 8px; color: var(--ink-55); cursor: pointer; }
  .filter-close > button svg { width: 22px; height: 22px; display: block; }

  /* scrollable filters inner */
  .filters-inner { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 22px; }

  /* sheet header (inside filters-inner) */
  .filters-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
  .filters-head h2 { font-size: 22px; }
  .filters-head .reset-btn { margin-left: auto; font-size: 14px; }

  /* scrollable filters body */
  .filters-inner .fgroup { padding: 18px 0 16px; }
  .filters-inner .fgroup-sub { margin: 16px 0 4px; }
  .fgroup:first-child { border-top: 0; }
  .filters-inner .fopt { padding: 11px 0; font-size: 16px; }
  .filters-inner .fopt .box { width: 22px; height: 22px; border-radius: 5px; }
  .filters-inner .fopt .box svg { width: 14px; height: 14px; }

  /* apply button footer */
  .sheet-foot {
    display: block;
    padding: 13px var(--gutter) calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ink-08); background: var(--paper);
  }
  .sheet-foot .filter-apply { width: 100%; justify-content: center; }

  /* 2-column product grid on tablet */
  ul.products, #productGrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pc-body { padding: 14px 15px 16px; }
  .pc-name, .woocommerce-loop-product__title { font-size: 18px; }
  .pc-price, .price { font-size: 20px; }

  /* sticky cart bar */
  .cart-bar {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
    background: var(--ink); color: var(--paper);
    transform: translateY(140%); transition: transform .35s var(--ease);
    box-shadow: 0 -16px 40px -20px rgba(0,0,0,.6);
  }
  .cart-bar.show { transform: none; }
  .cart-bar .cb-sum { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
  .cart-bar .cb-top { display: flex; align-items: baseline; gap: 6px; }
  .cart-bar .cb-top #cbCount { font-size: 13px; color: rgba(244,239,230,.6); }
  .cart-bar .cb-top #cbSum { font-size: 17px; font-weight: 700; color: #fff; }
  .cart-bar .cb-label { font-size: 11px; color: rgba(244,239,230,.4); }
  .cart-bar .cb-go {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: var(--amber); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 600;
    padding: 11px 18px; border-radius: var(--radius); border: 0;
  }
  .cart-bar .cb-go svg { width: 16px; height: 16px; }
}

@media (max-width: 400px) {
  ul.products, #productGrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pc-name, .woocommerce-loop-product__title { font-size: 15px; }
  .pc-price, .price { font-size: 17px; }
}

/* ── SEO text (under product grid, inside .wrap) ── */
.seo-text { margin-top: clamp(40px,5vw,64px); padding-top: clamp(28px,4vw,48px); border-top: 1px solid var(--ink-08); max-width: 68ch; }
.seo-text h2 { font-size: clamp(17px,2vw,21px); font-weight: 600; margin-bottom: 14px; color: var(--ink); }
.seo-text p  { font-size: 15px; color: var(--ink-55); line-height: 1.7; margin-bottom: 14px; }
.seo-text p:last-child { margin-bottom: 0; }

/* ── Internal SEO links (under SEO text) ── */
.seo-cat-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.seo-cat-links a { display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--ink-55); border: 1px solid var(--ink-12); border-radius: 999px; text-decoration: none; transition: color .15s, border-color .15s; }
.seo-cat-links a:hover { color: var(--ink); border-color: var(--ink-30); }