/* ============================================================
   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í — non-button elementy (tlačítka jsou v sekci 6) */
.alert,
.label,
.badge,
.product .flags span,
.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 (ne ikony) */
.btn.btn-default:not(.btn-icon),
.btn.btn-primary:not(.btn-icon),
.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:not(.btn-icon),
form button:not(.decrease):not(.increase):not(.btn-icon),
input[type="submit"],
input.btn {
    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 ikony, ne arrow-right) */
.btn.btn-default:not(.btn-icon):not(.btn-arrow-right):not([data-testid="searchBtn"]),
.btn.btn-primary:not(.btn-icon),
.btn.btn-special,
.button,
.products .product .btn:not(.btn-icon),
form button:not(.decrease):not(.increase):not(.btn-icon):not(.add-to-cart-button):not(.btn-conversion):not(.btn-arrow-right),
input[type="submit"],
input.btn {
    background: var(--hosh-accent) !important;
    border: 1.5px solid var(--hosh-accent) !important;
    color: var(--hosh-white) !important;
}

.btn.btn-default:not(.btn-icon):not(.btn-arrow-right):not([data-testid="searchBtn"]):hover,
.btn.btn-primary:not(.btn-icon):hover,
.button:hover,
.products .product .btn:not(.btn-icon):hover,
input[type="submit"]:hover,
input.btn:hover {
    background: var(--hosh-accent-hover) !important;
    border-color: var(--hosh-accent-hover) !important;
}

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

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

/* .btn-arrow-right = submit tlačítko s ikonou (newsletter, přihlášení) */
body .btn.btn-default.btn-arrow-right {
    background: transparent !important;
    border: 1.5px solid var(--hosh-accent) !important;
    color: var(--hosh-accent) !important;

}

body .btn.btn-default.btn-arrow-right::before,
body .btn.btn-default.btn-arrow-right::after {
    font-family: shoptet !important;
    color: var(--hosh-accent) !important;
}

body .btn.btn-default.btn-arrow-right:hover {
    background: var(--hosh-accent-hover) !important;
    border-color: var(--hosh-accent-hover) !important;
    color: var(--hosh-white) !important;
}

body .btn.btn-default.btn-arrow-right:hover::before,
body .btn.btn-default.btn-arrow-right:hover::after {
    color: var(--hosh-white) !important;
}


/* Tlačítko Hledat — bez font-weight, padding a min-height override */
#formSearchForm>fieldset>button {
    font-weight: 400 !important;
    padding: 6px 16px !important;
    min-height: 0 !important;
}

#formSearchForm>fieldset>button:hover {
    background: var(--hosh-accent-hover) !important;
    border-color: var(--hosh-accent-hover) !important;
}

/* Tlačítko Přihlásit se */
#formLoginIncluded>div:nth-child(4)>div>button:hover {
    background: var(--hosh-accent-hover) !important;
    border-color: var(--hosh-accent-hover) !important;
}

/* Tlačítko Hledat v košíku */
#formSearchFormContent>fieldset>button:hover {
    background: var(--hosh-accent-hover) !important;
    border-color: var(--hosh-accent-hover) !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í ────────────────────────────── */

#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. 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 uvnitř .sidebar */
.sidebar h4 {
    font-family: var(--hosh-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--hosh-text) !important;
}