/* ============================================================
   skinspecialist.cz / bioby.cz — ss-search-1.css — v1
   PRODUCTION CSS for Shoptet search results page (/vyhledavani/?string=)

   DETECTION (verified via curl 2026-05-25):
   - body.in-vyhledavani AND body.type-search
   - URL: /vyhledavani/?string={query}
   - Search form posts to /action/ProductSearch/prepareString/ (redirects)

   APPROACH: CSS-only re-skin Shoptet's native search DOM.
   - NO JS DOM mutation (Shoptet renders search results natively).
   - Re-skins .search-results-groups (categories suggestions),
     #products-found (product grid container), and #products (the grid).
   - Product card visual borrowed from category .ss-cat-card pattern
     but using native Shoptet .product DOM (we re-style in place, since
     search results don't need the full REPLACE pattern from category).

   NATIVE DOM (verified):
     main#content.content.narrow
       h2 — "Výsledky vyhledávání <strong class='highlight'>"query"</strong>"
       .search-results-groups
         .search-results-group#search-group-categories
           h4 — "Kategorie"
           .search-results-group-list > ul > li > a
           a.display-results-group — "Zobrazit vše (N)"
         .search-results-group#search-group-pages (if applicable)
         .search-results-group#search-group-articles (if applicable)
       #products-found.search-results
         h4#productsListHeading.search-products-heading — "Produkty"
         #products.products.products-block
           .product > .p > a.image + .p-in > .p-in-in > a.name + .availability + ...

     NO RESULTS state:
       .search-results-groups is empty (no children)
       #products-found has only h4 with text "Produkty nebyly nalezeny" (data-testid="searchMsg")

   VIBE (per user brief 2026-05-25):
   - Header "Vyhledávání: {query}" italic Rigane + count
   - Category suggestion chips (Shoptet renders these as ul, we re-skin)
   - Product grid matching category page pattern
   - Empty state similar to 404 but with context

   DEPLOY:
   1. Upload to /user/documents/upload/
   2. V Záhlaví HTML kódy:
      <link rel="stylesheet" href="/user/documents/upload/ss-search-1.css?v=1">
   3. No JS needed — native Shoptet DOM is used unmodified.
   ============================================================ */


/* ============================================================
   1) CANVAS — body bg, hide breadcrumbs
   ============================================================ */
body.in-vyhledavani {
  background: var(--ss-canvas, #F2EBDB) !important;
}
body.in-vyhledavani .breadcrumbs-wrapper {
  display: none !important;
}


/* ============================================================
   2) PAGE CONTAINER
   Override Shoptet narrow content + sidebar layout — go single-column
   centered. Match header width 1500px.
   ============================================================ */
body.in-vyhledavani #content-wrapper,
body.in-vyhledavani .content-inner {
  background: transparent !important;
}

body.in-vyhledavani #content-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}

/* Sidebar exists on search page (Shoptet adds it) — hide */
body.in-vyhledavani .sidebar,
body.in-vyhledavani aside.sidebar-left,
body.in-vyhledavani .sidebar-left {
  display: none !important;
}

body.in-vyhledavani #content.content,
body.in-vyhledavani #content.content.narrow {
  width: 100% !important;
  max-width: 100% !important;
  padding: 32px 0 80px !important;
  margin: 0 auto !important;
  float: none !important;
}


/* ============================================================
   3) PAGE HEADER — "Výsledky vyhledávání 'query'"
   Shoptet renders as h2 with <strong class="highlight"> for query.
   ============================================================ */
body.in-vyhledavani #content > h2,
body.in-vyhledavani #content.content > h2:first-of-type {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  color: var(--ss-black, #0F0F0F) !important;
  margin: 0 0 36px !important;
  padding: 0 !important;
  text-transform: none !important;
  text-wrap: balance;
}

body.in-vyhledavani #content > h2 .highlight,
body.in-vyhledavani #content.content > h2:first-of-type .highlight {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--ss-terracotta, #9A7A5F) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}


/* ============================================================
   4) SEARCH RESULTS GROUPS — categories, pages, articles
   Shoptet structure: .search-results-groups > .search-results-group
   Re-skin each group as editorial card with h4 eyebrow + chip-style links.
   ============================================================ */
body.in-vyhledavani .search-results-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 40px;
}

/* Empty .search-results-groups (no results) — hide */
body.in-vyhledavani .search-results-groups:empty {
  display: none !important;
}

body.in-vyhledavani .search-results-group {
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: 0 4px 14px rgba(15, 15, 15, .04);
}

body.in-vyhledavani .search-results-group h4 {
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--ss-sage-deep, #5A7E78) !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
}

body.in-vyhledavani .search-results-group-list ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.in-vyhledavani .search-results-group-list li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide Shoptet's "no-display" extras (cleaner UX) */
body.in-vyhledavani .search-results-group-list li.no-display {
  display: none !important;
}

body.in-vyhledavani .search-results-group-list a {
  display: inline-flex;
  align-items: center;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ss-black, #0F0F0F);
  text-decoration: none !important;
  background: var(--ss-canvas, #F2EBDB);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 999px;
  padding: 8px 16px;
  line-height: 1.2;
  transition:
    background-color .25s cubic-bezier(.4, 0, .2, 1),
    color .25s cubic-bezier(.4, 0, .2, 1),
    border-color .25s cubic-bezier(.4, 0, .2, 1);
}
body.in-vyhledavani .search-results-group-list a:hover {
  background: var(--ss-sage, #6B8B85);
  border-color: var(--ss-sage, #6B8B85);
  color: #FFFFFF;
}

/* "Zobrazit vše (N)" link */
body.in-vyhledavani .display-results-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ss-terracotta-deep, #7E6248);
  text-decoration: none !important;
  transition: gap .3s cubic-bezier(.4, 0, .2, 1);
}
body.in-vyhledavani .display-results-group::after {
  content: '→';
  font-size: 14px;
}
body.in-vyhledavani .display-results-group:hover {
  gap: 12px;
  color: var(--ss-black, #0F0F0F);
}


/* ============================================================
   5) PRODUCTS HEADING — "Produkty"
   Shoptet: h4#productsListHeading.search-products-heading
   Empty state: same h4 with text "Produkty nebyly nalezeny"
   ============================================================ */
body.in-vyhledavani .search-products-heading {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  letter-spacing: -.015em !important;
  color: var(--ss-black, #0F0F0F) !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}


/* ============================================================
   6) #products-found wrapper
   ============================================================ */
body.in-vyhledavani #products-found.search-results {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}


/* ============================================================
   7) PRODUCTS GRID — matches BASELINE card recipe (curated 5-col)
   Shoptet structure: #products.products.products-block > .product
   We restyle native .product cards in place using same visual as
   category page .ss-cat-card. NOTE: this is a re-skin not REPLACE
   pattern — Shoptet's product card already has correct DOM structure
   for cart, links, images, etc.
   ============================================================ */
body.in-vyhledavani #products.products,
body.in-vyhledavani #products.products-block {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Override Shoptet's column-based responsive structure */
body.in-vyhledavani .products .product {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
}

/* Product card — match BASELINE curated/category visual */
body.in-vyhledavani .products .product .p {
  display: flex !important;
  flex-direction: column !important;
  background: #FAF6EE !important;
  border: 1px solid rgba(15, 15, 15, .06) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  position: relative !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 18px rgba(15, 15, 15, .04) !important;
  height: 100% !important;
  text-align: left !important;
  transition:
    transform .35s cubic-bezier(.4, 0, .2, 1),
    background-color .35s cubic-bezier(.4, 0, .2, 1),
    border-color .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1) !important;
}
body.in-vyhledavani .products .product .p:hover {
  transform: translateY(-3px);
  background: #FFFFFF !important;
  border-color: rgba(15, 15, 15, .12) !important;
  box-shadow: 0 14px 36px rgba(15, 15, 15, .08) !important;
}

/* Image wrapper — first <a class="image"> */
body.in-vyhledavani .products .product .p > a.image,
body.in-vyhledavani .products .product .p .image {
  display: block !important;
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: var(--ss-cream, #E8DDC8) !important;
  margin: 0 0 12px !important;
  border-radius: 6px !important;
  border: 0 !important;
}
body.in-vyhledavani .products .product .p > a.image img,
body.in-vyhledavani .products .product .p .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1) !important;
}
body.in-vyhledavani .products .product .p:hover > a.image img,
body.in-vyhledavani .products .product .p:hover .image img {
  transform: scale(1.03);
}

/* Inner content stack */
body.in-vyhledavani .products .product .p-in {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}
body.in-vyhledavani .products .product .p-in-in {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}

/* Name link */
body.in-vyhledavani .products .product a.name {
  display: block !important;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: var(--ss-black, #0F0F0F) !important;
  text-decoration: none !important;
  margin: 0 0 10px !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid rgba(15, 15, 15, .06) !important;
  text-transform: none !important;
}
body.in-vyhledavani .products .product a.name span,
body.in-vyhledavani .products .product a.name [data-testid="productCardName"] {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  min-height: 39px !important;
  line-height: 1.35 !important;
}
body.in-vyhledavani .products .product a.name:hover,
body.in-vyhledavani .products .product a.name:hover span {
  color: var(--ss-sage-deep, #5A7E78) !important;
}

/* Availability */
body.in-vyhledavani .products .product .availability {
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
body.in-vyhledavani .products .product .availability span {
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Price */
body.in-vyhledavani .products .product .price,
body.in-vyhledavani .products .product .prices,
body.in-vyhledavani .products .product .price-final,
body.in-vyhledavani .products .product [data-testid="productCardPrice"] {
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ss-black, #0F0F0F) !important;
  margin: 0 0 10px !important;
}
body.in-vyhledavani .products .product .price strong,
body.in-vyhledavani .products .product .prices strong,
body.in-vyhledavani .products .product [data-testid="productCardPrice"] strong {
  font-family: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
body.in-vyhledavani .products .product .price-standard,
body.in-vyhledavani .products .product .price-old {
  font-size: 12.5px !important;
  color: var(--ss-hint, rgba(15, 15, 15, .46)) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}

/* Cart button — re-skin Shoptet's add-to-cart */
body.in-vyhledavani .products .product .pr-action,
body.in-vyhledavani .products .product .form-cart,
body.in-vyhledavani .products .product form.pr-action {
  margin: auto 0 0 !important;
  padding: 0 !important;
}
body.in-vyhledavani .products .product .add-to-cart button,
body.in-vyhledavani .products .product button.add-to-cart-button,
body.in-vyhledavani .products .product input[type="submit"].btn-conversion,
body.in-vyhledavani .products .product button[type="submit"][name*="cart"],
body.in-vyhledavani .products .product .pr-action button[type="submit"] {
  appearance: none !important;
  border: 0 !important;
  background: var(--ss-terracotta, #9A7A5F) !important;
  color: #FFFFFF !important;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-align: center !important;
  width: 100% !important;
  height: 36px !important;
  text-transform: none !important;
  transition: background-color .25s cubic-bezier(.4, 0, .2, 1) !important;
}
body.in-vyhledavani .products .product .add-to-cart button:hover,
body.in-vyhledavani .products .product button.add-to-cart-button:hover,
body.in-vyhledavani .products .product input[type="submit"].btn-conversion:hover,
body.in-vyhledavani .products .product button[type="submit"][name*="cart"]:hover,
body.in-vyhledavani .products .product .pr-action button[type="submit"]:hover {
  background: var(--ss-terracotta-deep, #7E6248) !important;
}

/* Flag/badge (Bestseller, Akce, Novinka) */
body.in-vyhledavani .products .product .flag,
body.in-vyhledavani .products .product .flag-bestseller,
body.in-vyhledavani .products .product .flag-sale,
body.in-vyhledavani .products .product .flag-new {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  background: var(--ss-sage, #6B8B85) !important;
  color: #FFFFFF !important;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  z-index: 2 !important;
  line-height: 1.2 !important;
}
body.in-vyhledavani .products .product .flag-sale {
  background: var(--ss-terracotta, #9A7A5F) !important;
}

/* Hide native ratings (Shoptet sometimes injects star bar) */
body.in-vyhledavani .products .product .ratings-wrapper {
  display: none !important;
}


/* ============================================================
   8) EMPTY STATE — "Produkty nebyly nalezeny"
   When no products match. Shoptet renders just the h4 inside #products-found
   without #products grid. We add helpful editorial layout via CSS.
   ============================================================ */

/* When data-testid="searchMsg" exists (no-results signal), restyle */
body.in-vyhledavani .search-products-heading[data-testid="searchMsg"] {
  text-align: center !important;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  letter-spacing: -.02em !important;
  color: var(--ss-black, #0F0F0F) !important;
  margin: 32px auto 16px !important;
  max-width: 560px !important;
  line-height: 1.2 !important;
  padding: 48px 16px 0 !important;
}

/* Add a tagline via pseudo when data-testid="searchMsg" is present */
body.in-vyhledavani .search-products-heading[data-testid="searchMsg"]::after {
  content: 'Zkus jednodušší výraz, jiný název značky, nebo projdi kategorie nahoře.';
  display: block;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-style: normal;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: 16px auto 0;
  max-width: 480px;
  text-wrap: balance;
}

/* When #products-found has data-testid="productCards" but contains
   only the searchMsg h4 (no actual product grid sibling), give the
   container editorial empty-state styling. */
body.in-vyhledavani #products-found.search-results:has(.search-products-heading[data-testid="searchMsg"]):not(:has(#products)) {
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 8px;
  padding: 0 0 48px;
  margin: 24px 0 0;
  text-align: center;
  box-shadow: 0 4px 14px rgba(15, 15, 15, .04);
}


/* ============================================================
   9) RESPONSIVE — match BASELINE breakpoint stair
   ============================================================ */
@media (max-width: 1100px) {
  body.in-vyhledavani #products.products,
  body.in-vyhledavani #products.products-block {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  body.in-vyhledavani #content-wrapper {
    padding: 0 20px;
  }
  body.in-vyhledavani #content.content {
    padding: 24px 0 60px !important;
  }
  body.in-vyhledavani .search-results-group {
    padding: 18px 20px;
  }
}

@media (max-width: 768px) {
  body.in-vyhledavani #content-wrapper {
    padding: 0 16px;
  }
  body.in-vyhledavani #products.products,
  body.in-vyhledavani #products.products-block {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px !important;
  }
  body.in-vyhledavani .search-results-group-list a {
    font-size: 13px;
    padding: 7px 14px;
  }
}

@media (max-width: 480px) {
  body.in-vyhledavani #products.products,
  body.in-vyhledavani #products.products-block {
    grid-template-columns: 1fr;
  }
  body.in-vyhledavani #content > h2,
  body.in-vyhledavani #content.content > h2:first-of-type {
    font-size: 26px !important;
    margin-bottom: 24px !important;
  }
}


/* ============================================================
   10) REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.in-vyhledavani .products .product .p,
  body.in-vyhledavani .products .product .p .image img,
  body.in-vyhledavani .products .product .p > a.image img,
  body.in-vyhledavani .search-results-group-list a,
  body.in-vyhledavani .display-results-group,
  body.in-vyhledavani .products .product .add-to-cart button,
  body.in-vyhledavani .products .product button.add-to-cart-button {
    transition: none !important;
  }
  body.in-vyhledavani .products .product .p:hover {
    transform: none !important;
  }
  body.in-vyhledavani .products .product .p:hover > a.image img,
  body.in-vyhledavani .products .product .p:hover .image img {
    transform: none !important;
  }
}