/* ============================================================
   HOSH — FAZE 3: Product Cards + Swatches + Size Badges
   Platnost: listing stranky (.products-page, .products-block)
   Pozn: PDP gallery visibility (#hosh-gal) take zde
   ============================================================ */


/* ── 1. CARD LAYOUT ────────────────────────────────────────── */

.products-page .product { margin-bottom: 40px !important; }

/* Image zoom */
.product .p .image img { transition: transform 0.5s ease !important; display: block !important; }
.product .p:hover .image img { transform: scale(1.03) !important; will-change: transform; }

/* Reorder: image → p-in (name + price + btn) */
/* .widget-parameter-wrapper je presunovan JS pred .p-tools */
.product .p { display: flex !important; flex-direction: column !important; }
.product .p .image { order: 0 !important; }
.product .p .p-in  { order: 1 !important; }
.product .p > .widget-parameter-wrapper { display: none !important; }

/* p-in layout */
.product .p-in {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 0 0 0 !important;
}
.product .p-in-in { order: 0 !important; }
.product .p-bottom { order: 1 !important; }


/* ── 2. NAZEV ──────────────────────────────────────────────── */

.product a.name {
    font-family: var(--hosh-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}

/* Schovat ratings/availability */
.product .ratings-wrapper { display: none !important; }


/* ── 3. CENY ───────────────────────────────────────────────── */

.product .p-bottom > [data-micro="offer"] { display: block !important; }
.product .prices { margin-bottom: 6px !important; }

.product .price-final strong {
    font-family: var(--hosh-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: #1a1a1a !important;
}

/* Sale layout */
.product .old-price-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 1px !important;
}
.product .old-price {
    font-family: var(--hosh-sans) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #999 !important;
    text-decoration: line-through !important;
}
.product .price-save {
    font-family: var(--hosh-sans) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    color: #1C3A2F !important;
    background: transparent !important;
    padding: 0 !important;
}
.product .prices:has(.old-price-line) .price-final strong { color: #1C3A2F !important; }


/* ── 4. SWATCHE ────────────────────────────────────────────── */

/* Wrapper je presunavan JS z .p > do [data-micro="offer"] pred .p-tools */
[data-micro="offer"] > .widget-parameter-wrapper {
    display: block !important;
    padding: 8px 0 10px 0 !important;
}
/* Schovat "+ dalsi" link (prilis mnoho variant) */
.widget-parameter-more { display: none !important; }

.widget-parameter-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Kulaté barevné swatche */
.widget-parameter-value a {
    display: inline-block !important;
    width: 16px !important;
    min-width: 0 !important;
    height: 16px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0,0,0,0.15) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background: #ccc !important;
    box-sizing: content-box !important;
    vertical-align: middle !important;
    transition: transform 0.15s, border-color 0.15s !important;
}
.widget-parameter-value a:hover {
    transform: scale(1.2) !important;
    border-color: #1a1a1a !important;
}


/* ── 5. CTA TLACITKO ───────────────────────────────────────── */

.product .p-tools {
    margin-top: 10px !important;
    display: block !important;
}
.product .p-tools .btn-primary,
.products-block.products .product .p-tools .btn,
.products-block.products .product .p-tools .btn-primary,
.products-block.products .product .p-tools button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 !important;
    background: var(--hosh-accent) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--hosh-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: background 0.2s !important;
}
.product .p-tools .btn-primary:hover,
.products-block.products .product .p-tools .btn:hover,
.products-block.products .product .p-tools .btn-primary:hover {
    background: #142b22 !important;
    color: #fff !important;
}
/* Shoptet injectuje SVG chevron na ::before — schovat */
.product .p-tools .btn-primary::before,
.products-block.products .product .p-tools .btn::before { display: none !important; }

/* Schovat popis produktu pod buttonem */
.product .p-desc { display: none !important; }


/* ── 6. BADGES (Novinka, Sleva) ────────────────────────────── */

.product .flag {
    font-family: var(--hosh-sans) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
}
.product .flag-new { background: #1a1a1a !important; color: #fff !important; }
.product .flag-sale,
.product .flag-discount { background: var(--hosh-accent) !important; color: #fff !important; }


/* ── 7. SIZE BADGES (produkty bez barev) ───────────────────── */
/* JS prida .hosh-size-only na wrapper kdyz nejsou barevne swatche */

.widget-parameter-wrapper.hosh-size-only {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px 0 8px 0 !important;
}
.widget-parameter-wrapper.hosh-size-only .widget-parameter-value a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 20px !important;
    min-width: 28px !important;
    padding: 0 5px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    background: transparent !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-indent: 0 !important;
    color: #333 !important;
    line-height: 1 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.widget-parameter-wrapper.hosh-size-only .widget-parameter-value a:hover {
    border-color: var(--hosh-accent) !important;
    color: var(--hosh-accent) !important;
    transform: none !important;
    background: transparent !important;
}


/* ── 8. PDP GALLERY VISIBILITY ─────────────────────────────── */
/* Skryt Opal original layout pred JS injekci #hosh-gal.         */
/* visibility:hidden = prostor zachovan, zadny layout shift.      */

.type-detail .p-image-wrapper { visibility: hidden; }
.type-detail .p-image-wrapper:has(#hosh-gal) { visibility: visible; }


/* ── MOBILE ────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .product .p-in { padding: 8px 0 0 0 !important; }
    .product a.name {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 4px !important;
        line-height: 1.35 !important;
    }
    .product .price-final strong { font-size: 13px !important; }
    .widget-parameter-value a { width: 13px !important; height: 13px !important; }
    .widget-parameter-list { gap: 4px !important; }
    .widget-parameter-wrapper { padding: 6px 0 8px 0 !important; }
    .product .p-tools .btn-primary,
    .products-block.products .product .p-tools .btn-primary,
    .products-block.products .product .p-tools .btn {
        min-height: 36px !important;
        font-size: 10px !important;
        letter-spacing: 0.12em !important;
    }
    .product .old-price-line { gap: 4px !important; }
    .product .old-price { font-size: 10px !important; }
    .widget-parameter-wrapper.hosh-size-only .widget-parameter-value a {
        height: 18px !important;
        font-size: 8px !important;
    }
}

@media (max-width: 480px) {
    .product a.name { font-size: 10px !important; }
    .product .price-final strong { font-size: 12px !important; }
}