/*
 * design-tokens.css — DS Design System
 * Sprint 1: P0 + P1 items from UX brief
 */

/* ────────────────────────────────────────
   0.1 SPACING SCALE (4-point)
   ──────────────────────────────────────── */
:root {
    --sp-4:  4px;
    --sp-8:  8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-48: 48px;
    --sp-64: 64px;

    /* ─ Typography ─ */
    --fs-h1-d: 32px; --fs-h1-m: 24px;
    --fs-h2-d: 24px; --fs-h2-m: 20px;
    --fs-h3-d: 18px; --fs-h3-m: 16px;
    --fs-body: 16px; --fs-body-m: 15px;
    --fs-caption: 13px;
    --fs-price: 32px;
    --fs-price-del: 16px;
    --lh-body: 1.6;

    /* ─ Colors ─ */
    --c-primary:   #F65F0A;  /* orange — TYLKO główna akcja */
    --c-primary-h: #d4530a;
    --c-green:     #00813a;  /* dostawa, in-stock */
    --c-text:      #111111;
    --c-text-muted:#767676;
    --c-border:    #E5E5E5;
    --c-bg-light:  #F8F9FA;
    --c-white:     #FFFFFF;

    /* ─ Touch targets ─ */
    --touch-min: 44px;
}

/* ────────────────────────────────────────
   0.2 TYPOGRAFIA (globalna)
   ──────────────────────────────────────── */
.ds-sp-longdesc h2, .woocommerce-product-details__short-description h2 {
    font-size: var(--fs-h2-d) !important;
    font-weight: 700 !important;
    margin-top: var(--sp-32) !important;
    margin-bottom: var(--sp-12) !important;
    color: var(--c-text) !important;
}
.ds-sp-longdesc h3 {
    font-size: var(--fs-h3-d) !important;
    font-weight: 600 !important;
    margin-top: var(--sp-24) !important;
    margin-bottom: var(--sp-8) !important;
}
.ds-sp-longdesc p, .ds-sp-longdesc li {
    font-size: var(--fs-body) !important;
    line-height: var(--lh-body) !important;
    max-width: 72ch;
}
.ds-sp-longdesc ul, .ds-sp-longdesc ol { padding-left: var(--sp-24) !important; }
.ds-sp-longdesc li { margin-bottom: var(--sp-8) !important; }

/* Callout BOX "UWAGA / WAŻNE" (PD-08) */
.ds-sp-longdesc p strong:first-child { /* detect bold-start paragraphs as callout */
}
.ds-callout, .ds-sp-longdesc .callout {
    background: #FFF8E1;
    border-left: 4px solid #F65F0A;
    padding: var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-24);
    border-radius: 0 6px 6px 0;
    margin: var(--sp-16) 0;
}

/* ────────────────────────────────────────
   0.3 KOLORY — role (PD-01 główna akcja)
   ──────────────────────────────────────── */

/* Główna akcja: DODAJ DO KOSZYKA — pełny pomarańcz */
.ds-btn-sp--cart {
    background: var(--c-primary) !important;
    color: #fff !important;
    border: 2px solid var(--c-primary) !important;
    font-size: 15px !important;
    padding: 15px !important;
}
.ds-btn-sp--cart:hover { background: var(--c-primary-h) !important; border-color: var(--c-primary-h) !important; }

/* Drugorzędna akcja: KUP TERAZ — outline */
.ds-btn-sp--buy {
    background: var(--c-white) !important;
    color: var(--c-primary) !important;
    border: 2px solid var(--c-primary) !important;
    font-size: 15px !important;
    padding: 15px !important;
}
.ds-btn-sp--buy:hover { background: var(--c-primary) !important; color: #fff !important; }

/* Cena główna */
.ds-sp-panel__price-sale .woocommerce-Price-amount {
    font-size: var(--fs-price) !important;
    font-weight: 700 !important;
    color: var(--c-green) !important;
    line-height: 1.1 !important;
}
.ds-sp-panel__price-reg .woocommerce-Price-amount {
    font-size: var(--fs-price-del) !important;
    color: var(--c-text-muted) !important;
    font-weight: 400 !important;
}
.ds-sp-price-30d {
    font-size: var(--fs-caption) !important;
    color: var(--c-text-muted) !important;
}

/* ────────────────────────────────────────
   0.4 POLA DOTYKOWE ≥44px (mobile)
   ──────────────────────────────────────── */
@media (max-width: 767px) {
    .ds-btn-sp, .ds-btn, .ds-qty-btn,
    .ds-sp-tab-btn, .ds-carousel__btn,
    .ds-btn-sp--cart, .ds-btn-sp--buy {
        min-height: var(--touch-min) !important;
    }
    a, button { min-height: 0; } /* don't force on inline links */
}

/* ────────────────────────────────────────
   PD-01: STREFA ZAKUPU — hierarchia
   ──────────────────────────────────────── */
.ds-sp-panel__price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: var(--sp-8) !important;
    margin-bottom: var(--sp-8) !important;
}
.ds-sp-panel__qty { gap: var(--sp-12) !important; margin: var(--sp-12) 0 !important; }
.ds-sp-panel__cta { gap: var(--sp-12) !important; }
.ds-sp-trust-row { gap: var(--sp-12) 0 !important; }
.ds-sp-trust__item { gap: var(--sp-8) !important; font-size: 13px !important; }

/* ────────────────────────────────────────
   PD-02: BLOK ZAUFANIA — ujednolicone ikony
   ──────────────────────────────────────── */
.ds-sp-trust__item svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    stroke: var(--c-green) !important;
}

/* ────────────────────────────────────────
   PD-04: CECHY — padding + line-height
   ──────────────────────────────────────── */
.ds-sp-features { padding: var(--sp-24) !important; }
.ds-sp-features__list { gap: var(--sp-8) !important; }
.ds-sp-features__list li { line-height: var(--lh-body) !important; font-size: 14px !important; }

/* ────────────────────────────────────────
   PD-05: ZESTAW — ceny wyrównane + oszczędność
   ──────────────────────────────────────── */
.ds-sp-bundle-item { gap: var(--sp-8) !important; }
.ds-sp-bundle-item__info { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.ds-sp-bundle-item__info span, .ds-sp-bundle-item__info a { flex: 1; font-size: 12px; }
.ds-sp-bundle-item__info strong { text-align: right !important; flex-shrink: 0 !important; margin-left: var(--sp-8) !important; }
.ds-sp-bundle-total { font-size: 16px !important; font-weight: 700 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.ds-sp-bundle-save { font-size: 12px; color: var(--c-green); font-weight: 600; }

/* ────────────────────────────────────────
   PM-02: AKORDEON na MOBILE (zakładki)
   ──────────────────────────────────────── */
@media (max-width: 767px) {
    .ds-sp-tabs-nav { display: none !important; }
    .ds-sp-tabs-block { padding: 0 !important; background: none !important; border: none !important; }
    .ds-sp-tab-content {
        display: block !important;
        border: 1px solid var(--c-border) !important;
        border-radius: 8px !important;
        margin-bottom: var(--sp-8) !important;
        overflow: hidden !important;
        position: relative !important;
    }
    .ds-sp-tab-content .ds-sp-tab-inner {
        padding: var(--sp-16) !important;
        display: none !important;
    }
    .ds-sp-tab-content.ds-accordion-open .ds-sp-tab-inner {
        display: block !important;
    }
}

/* ────────────────────────────────────────
   HM-02: SPÓJNY KOMPONENT KARTY
   ──────────────────────────────────────── */
.ds-product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border-radius: 8px !important;
    border: 1px solid var(--c-border) !important;
    overflow: hidden !important;
    background: var(--c-white) !important;
}
.ds-product-card__image {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: var(--c-white) !important;
}
.ds-product-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}
.ds-product-card__body {
    flex: 1 !important;
    padding: var(--sp-8) var(--sp-12) var(--sp-4) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-4) !important;
}
.ds-product-card__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: var(--c-text) !important;
    margin: 0 !important;
}
.ds-product-card__price { margin-top: auto !important; }
.ds-product-card__price ins { text-decoration: none !important; }
.ds-product-card__price .woocommerce-Price-amount { font-size: 16px !important; font-weight: 700 !important; }
.ds-product-card__price ins .woocommerce-Price-amount { color: var(--c-green) !important; }
.ds-product-card__price del .woocommerce-Price-amount { font-size: 12px !important; color: var(--c-text-muted) !important; font-weight: 400 !important; }
.ds-product-card__delivery { font-size: 11px !important; color: var(--c-text-muted) !important; margin-top: var(--sp-4) !important; }
.ds-product-card__delivery strong { color: var(--c-green) !important; }
.ds-product-card__footer {
    padding: var(--sp-8) var(--sp-12) var(--sp-12) !important;
    border-top: 1px solid var(--c-border) !important;
}
.ds-btn--cart {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: var(--sp-8) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    background: var(--c-white) !important;
    color: var(--c-primary) !important;
    border: 1.5px solid var(--c-primary) !important;
    transition: all .15s !important;
    cursor: pointer !important;
}
.ds-btn--cart:hover { background: var(--c-primary) !important; color: var(--c-white) !important; }

/* ────────────────────────────────────────
   HM-03: NAGŁÓWKI SEKCJI
   ──────────────────────────────────────── */
.ds-section__header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: var(--sp-16) !important; }
.ds-section__title { font-size: var(--fs-h2-d) !important; font-weight: 700 !important; color: var(--c-text) !important; margin: 0 !important; }
.ds-section__more { font-size: 13px !important; color: var(--c-primary) !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; }
.ds-section__more:hover { text-decoration: underline !important; }
@media (max-width: 767px) {
    .ds-section__title { font-size: var(--fs-h2-m) !important; }
}

/* ────────────────────────────────────────
   SEKCJE — gap i rhythm
   ──────────────────────────────────────── */
.ds-hp-wrap { gap: var(--sp-48) !important; }
@media (max-width: 767px) { .ds-hp-wrap { gap: var(--sp-32) !important; } }