/* ============================================================
   HOSH — FÁZE 1: Design tokeny + fonty + globální reset
   Verze: 1.0
   Nahrát do: Shoptet Admin → Vzhled → Šablony → Vlastní CSS
   ============================================================ */


/* ── 1. GOOGLE FONTS — Cormorant Garamond ────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');


/* ── 2. HELVETICA NEUE — self-hosted (hosh.cz) ───────────── */
@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("https://www.hosh.cz/user/documents/upload/font/Helvetica%20Neue/helvetica-neue-300.woff2") format("woff2");
}
@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://www.hosh.cz/user/documents/upload/font/Helvetica%20Neue/helvetica-neue-400.woff2") format("woff2");
}
@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("https://www.hosh.cz/user/documents/upload/font/Helvetica%20Neue/helvetica-neue-500.woff2") format("woff2");
}
@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("https://www.hosh.cz/user/documents/upload/font/Helvetica%20Neue/helvetica-neue-700.woff2") format("woff2");
}
@font-face {
    font-family: "Helvetica Neue";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("https://www.hosh.cz/user/documents/upload/font/Helvetica%20Neue/helvetica-neue-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Helvetica Neue";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("https://www.hosh.cz/user/documents/upload/font/Helvetica%20Neue/helvetica-neue-700-italic.woff2") format("woff2");
}


/* ── 3. DESIGN TOKENY ────────────────────────────────────── */
:root {
    /* Fonty */
    --hosh-sans:    "Helvetica Neue", Arial, sans-serif;
    --hosh-serif:   "Cormorant Garamond", Georgia, serif;

    /* Barvy — základ */
    --hosh-black:   #0D0D0D;
    --hosh-white:   #FFFFFF;
    --hosh-bg:      #FFFFFF;
    --hosh-bg-alt:  #F7F5F2;

    /* Text */
    --hosh-text:        #111111;
    --hosh-text-muted:  #666666;
    --hosh-text-light:  #999999;

    /* Borders */
    --hosh-border:      #E5E2DC;
    --hosh-border-dark: #CCCCCC;

    /* Akcentní barva — deep forest green */
    --hosh-accent:       #1C3A2F;
    --hosh-accent-hover: #142B22;
    --hosh-accent-light: #EEF3F1;

    /* Transitions */
    --hosh-t-fast:   0.15s ease-out;
    --hosh-t-mid:    0.25s ease;
    --hosh-t-slow:   0.35s ease;

    /* Přepis Opal --color-primary */
    --color-primary: #1C3A2F;
}


/* ── 4. GLOBÁLNÍ TYPOGRAFIE ──────────────────────────────── */
html {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--hosh-sans) !important;
    background-color: var(--hosh-bg);
    color: var(--hosh-text);
}

/* Dědičnost fontů — nezlomí ikony */
button,
input,
select,
textarea {
    font-family: inherit !important;
}

/* Nadpisy — serif */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hosh-serif) !important;
    color: var(--hosh-text);
    letter-spacing: -0.01em;
}

h1 { font-weight: 400; }
h2 { font-weight: 400; }
h3 { font-weight: 400; }
h4, h5, h6 { font-weight: 500; }

p, li { font-weight: 400; }
small, .small { font-weight: 300; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* Nezasahovat do icon fontů */
.fa, .fas, .far, .fal,
.shp-icon,
[class*="icon-"],
[class^="icon-"],
[aria-hidden="true"] {
    font-family: inherit;
}


/* ── 5. GLOBÁLNÍ RESET VIZUÁLU ───────────────────────────── */

/* Zaoblení — Opal má border-radius: 10px všude, chceme 0 */
.btn,
.btn.btn-default,
.btn.btn-primary,
button:not(.decrease):not(.increase),
input[type="submit"],
input[type="button"],
input[type="reset"],
.add-to-cart-button,
.btn-cart,
.alert,
.label,
.badge,
.product .flags span,
form .form-control,
.pagination .pagination__link,
.pagination__currentPage {
    border-radius: 0 !important;
}

/* Základní barva odkazů */
a {
    color: var(--hosh-text);
    transition:
        color var(--hosh-t-mid),
        opacity var(--hosh-t-mid);
}
a:hover,
a:focus {
    color: var(--hosh-accent);
    text-decoration: none;
}

/* Outline pro přístupnost — zachovat, ale hezčí */
*:focus-visible {
    outline: 2px solid var(--hosh-accent);
    outline-offset: 2px;
}


/* ── 6. TLAČÍTKA — Globální přepis Opal ─────────────────── */

/* Nuclear border-radius reset — pokrývá všechny Opal třídy */
.btn,
.btn.btn-default,
.btn.btn-primary,
.btn.btn-lg,
.btn.btn-sm,
.btn.btn-conversion,
.btn.btn-cart,
.btn.btn-special,
.btn.add-to-cart-button,
.add-to-cart-button,
.btn-cart,
button.add-to-cart-button,
button.btn-cart,
button.btn-conversion,
.button,
.products .product .btn,
.products .product button,
.unveil-button,
form button:not(.decrease):not(.increase),
input[type="submit"],
input[type="button"],
input.btn {
    border-radius: 0 !important;
}

/* Přesné Opal selektory s vysokou specificitou — přepisujeme border-radius:10px!important */
.product-top .add-to-cart button.add-to-cart-button,
.product-top .add-to-cart button.btn-cart,
.cart-content .next-step .btn,
.cart-content .next-step button,
.pagination-wrapper .load-products,
.popup-widget.cart-widget,
body .btn.btn-lg,
body button.add-to-cart-button {
    border-radius: 0 !important;
}

/* Barva + styl — layout pro všechna tlačítka */
.btn.btn-default,
.btn.btn-primary,
.btn.btn-conversion,
.btn.btn-cart,
.btn.btn-special,
.add-to-cart-button,
.btn-cart,
button.add-to-cart-button,
button.btn-cart,
button.btn-conversion,
.button,
.products .product .btn,
form button:not(.decrease):not(.increase),
input[type="submit"],
input.btn {
    color: var(--hosh-white) !important;
    font-family: var(--hosh-sans) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 0 28px !important;
    min-height: 48px !important;
    transition:
        background var(--hosh-t-mid),
        border-color var(--hosh-t-mid),
        color var(--hosh-t-mid),
        transform var(--hosh-t-fast) !important;
}

/* Barva — ostatní tlačítka (ne cart) = černá */
.btn.btn-default,
.btn.btn-primary,
.btn.btn-special,
.button,
.products .product .btn,
form button:not(.decrease):not(.increase):not(.add-to-cart-button):not(.btn-conversion),
input[type="submit"],
input.btn {
    background: var(--hosh-black) !important;
    border: 1.5px solid var(--hosh-black) !important;
}

.btn.btn-default:hover,
.btn.btn-primary:hover,
.button:hover,
.products .product .btn:hover,
input[type="submit"]:hover,
input.btn:hover {
    background: #333333 !important;
    border-color: #333333 !important;
}

/* Outline varianta (sekundární tlačítka) */
.btn-secondary,
.btn.btn-outline {
    background: transparent !important;
    border: 1.5px solid var(--hosh-black) !important;
    color: var(--hosh-black) !important;
}

.btn-secondary:hover {
    background: var(--hosh-black) !important;
    color: var(--hosh-white) !important;
}

/* .btn-arrow-right = submit tlačítko s ikonou (sr-only text) */
.btn.btn-default.btn-arrow-right {
    background: transparent !important;
    border: 1.5px solid var(--hosh-accent) !important;
    color: var(--hosh-accent) !important;
    padding: 0 !important;
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.btn.btn-default.btn-arrow-right::before,
.btn.btn-default.btn-arrow-right::after {
    font-family: shoptet !important;
    color: var(--hosh-accent) !important;
}
.btn.btn-default.btn-arrow-right:hover {
    background: var(--hosh-accent) !important;
    border-color: var(--hosh-accent) !important;
    color: var(--hosh-white) !important;
}
.btn.btn-default.btn-arrow-right:hover::before,
.btn.btn-default.btn-arrow-right:hover::after {
    color: var(--hosh-white) !important;
}


/* ── 7. FORMULÁŘE ────────────────────────────────────────── */

/* Quantity stepper — jen border-radius reset, layout necháme Opalu */
.quantity input.amount {
    border-radius: 0 !important;
}
.quantity .increase {
    border-radius: 0 !important;
}
.quantity .decrease {
    border-radius: 0 !important;
}


form .form-control {
    border: 1.5px solid var(--hosh-border-dark) !important;
    border-radius: 0 !important;
    font-family: var(--hosh-sans) !important;
    font-size: 14px !important;
    transition: border-color var(--hosh-t-mid) !important;
}

form .form-control:focus {
    border-color: var(--hosh-black) !important;
    box-shadow: none !important;
    outline: none !important;
}


/* ── 8. TĚLO STRÁNKY — pozadí ────────────────────────────── */
body {
    background-color: var(--hosh-bg);
}

#wrapper,
#content-wrapper,
.content-wrapper {
    background-color: var(--hosh-bg);
}


/* ── 9. PŘÍZNAKY (FLAGS/BADGES) ──────────────────────────── */

/* Shoptet .flag span má border-radius: 5px z Opal screen.min.css */
.flags .flag,
.flags span,
.flags a,
.product-flags span,
.flag-new,
.flag-sale,
.flag-bestseller,
.flag-tip,
[class*="flag-"] {
    border-radius: 0 !important;
}


/* ── 10. TLAČÍTKO PŘIDAT DO KOŠÍKU — stavy ───────────────── */

/* AKTIVNÍ — zelené */
.btn.btn-conversion,
.btn-conversion,
.add-to-cart-button {
    background: var(--hosh-accent) !important;
    border-color: var(--hosh-accent) !important;
    color: var(--hosh-white) !important;
    cursor: pointer !important;
}

/* Hover — tmavší zelená, žádná animace */
.btn.btn-conversion:hover,
body .btn-conversion:hover,
body .add-to-cart-button:hover {
    background: var(--hosh-accent-hover) !important;
    border-color: var(--hosh-accent-hover) !important;
}

/* DISABLED — Opal přidává .disabled-add-to-cart na .product-top při načtení */
.disabled-add-to-cart .product-top .add-to-cart .btn.btn-conversion,
.disabled-add-to-cart .product-top .add-to-cart .btn-conversion,
.disabled-add-to-cart .product-top .add-to-cart .add-to-cart-button {
    background: #AAAAAA !important;
    border-color: #AAAAAA !important;
    cursor: not-allowed !important;
}
.disabled-add-to-cart .product-top .add-to-cart .btn.btn-conversion:hover,
.disabled-add-to-cart .product-top .add-to-cart .btn-conversion:hover,
.disabled-add-to-cart .product-top .add-to-cart .add-to-cart-button:hover {
    background: #AAAAAA !important;
    border-color: #AAAAAA !important;
}


/* ── 11. KATEGORIE — opravy ──────────────────────────────── */

/* h1.category-title dostává Source Sans 3 z Opal — explicitní přepis */
h1.category-title,
.category-top h1,
.category-title {
    font-family: var(--hosh-serif) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
}

/* Filter nadpisy — Opal renderuje jako h4 bez třídy uvnitř .sidebar */
.sidebar h4,
.sidebar .filters-wrapper h4,
.sidebar .slider-wrapper h4,
.sidebar .filter-section h4 {
    font-family: var(--hosh-sans) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--hosh-text) !important;
}