/* ============================================================
   Rocío – Produktové záložky + sekce hodnocení
   Varianta A: zlatý underline + formulář a pruhy v brand stylu
   Platí pro: detail produktu (.shp-tabs-wrapper.p-detail-tabs-wrapper)
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   Wrapper celého bloku tabs + content
────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────
   Wrapper – žádné vlastní pozadí ani obal, necháme Shoptet default
────────────────────────────────────────────────────────── */
.shp-tabs-wrapper.p-detail-tabs-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 24px 0 !important;
    scroll-margin-top: 120px !important;
}

/* Zamezí skoku stránky při kliku na záložky */
#description,
#ratingTab,
#productDiscussion {
    scroll-margin-top: 120px !important;
}

/* Diskuze – zarovnané s ostatním obsahem */
#productDiscussion {
    padding: 24px 32px 32px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.shp-tabs-wrapper.p-detail-tabs-wrapper .row {
    margin: 0 !important;
}

.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tabs-row {
    padding: 0 !important;
}

/* ──────────────────────────────────────────────────────────
   Lišta záložek – varianta A (zlatý underline)
────────────────────────────────────────────────────────── */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tabs-holder {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.shp-tabs.p-detail-tabs {
    display: flex !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    max-width: 1240px !important;
    border-bottom: none !important;
    gap: 8px !important;
    background: transparent !important;
    flex-wrap: wrap !important;
}

.shp-tabs.p-detail-tabs .shp-tab {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.shp-tabs.p-detail-tabs .shp-tab a {
    display: block !important;
    position: relative !important;
    padding: 11px 22px !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #7a8a94 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 1px solid rgba(0, 61, 91, 0.12) !important;
    border-radius: 999px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    margin: 0 !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.shp-tabs.p-detail-tabs .shp-tab a::after {
    content: none !important;
    display: none !important;
}

.shp-tabs.p-detail-tabs .shp-tab a:hover {
    color: #003D5B !important;
    border-color: rgba(0, 61, 91, 0.3) !important;
    background: rgba(255, 255, 255, 0.4) !important;
    text-decoration: none !important;
}

.shp-tabs.p-detail-tabs .shp-tab.active a {
    color: #ffffff !important;
    background: #003D5B !important;
    border-color: #003D5B !important;
    font-weight: 500 !important;
}

.shp-tabs.p-detail-tabs .shp-tab.active a:hover {
    background: #07283b !important;
    border-color: #07283b !important;
    color: #ffffff !important;
}

/* Mobilní "hamburger" knoflík – skryjeme, scroll-x stačí */
.shp-tabs-row .navigation-btn {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────
   Obsah záložky (společné) – transparent, bez bílých ploch
────────────────────────────────────────────────────────── */
.shp-tabs-wrapper.p-detail-tabs-wrapper .tab-content {
    background: transparent !important;
}

.shp-tabs-wrapper.p-detail-tabs-wrapper .tab-pane {
    padding: 0 !important;
}

/* Popis – necháme vnitřní editor jen přirozeně zabalit, žádné pozadí */
#description {
    padding: 24px 32px 32px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    color: #003D5B !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#description h4 {
    color: #003D5B !important;
    font-family: "Neulis Alt", sans-serif !important;
}

/* ──────────────────────────────────────────────────────────
   Sekce hodnocení – #ratingTab
────────────────────────────────────────────────────────── */
#ratingTab {
    padding: 36px 32px 40px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#ratingTab [data-testid="textCommentNotice"] {
    color: #003D5B !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin: 0 0 28px !important;
    letter-spacing: -0.005em !important;
}

/* ── Hlavní mřížka – průměr vlevo / pruhy vpravo ── */
#ratingTab .rate-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 48px !important;
    padding: 24px 0 32px !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Přepiš Shoptet Bootstrap grid (col-xs-12 col-sm-6 má float:left + width:50%) */
#ratingTab .rate-wrap > .rate-average-wrap,
#ratingTab .rate-wrap > .col-xs-12.col-sm-6,
#ratingTab .rate-wrap > .col-xs-12 {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
}

#ratingTab .rate-wrap > .rate-average-wrap {
    flex: 0 0 auto !important;
    min-width: 180px !important;
}

#ratingTab .rate-wrap > .col-xs-12.col-sm-6:last-child,
#ratingTab .rate-wrap > .col-xs-12:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Mobil – stacked */
@media (max-width: 768px) {
    #ratingTab .rate-wrap {
        flex-direction: column !important;
        gap: 28px !important;
        align-items: stretch !important;
    }

    #ratingTab .rate-wrap > .rate-average-wrap,
    #ratingTab .rate-wrap > .col-xs-12.col-sm-6,
    #ratingTab .rate-wrap > .col-xs-12 {
        width: 100% !important;
        flex: none !important;
    }

    #ratingTab .rate-wrap > .rate-average-wrap {
        min-width: 0 !important;
    }
}

/* ── Průměrné hodnocení (velká pětka + hvězdy) – vše vycentrované pod sebou ── */
#ratingTab .rate-average-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#ratingTab .rate-average {
    display: block !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 64px !important;
    font-weight: 700 !important;
    color: #003D5B !important;
    line-height: 1 !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
}

#ratingTab .rate-star-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

#ratingTab .rate-star-wrap .stars {
    font-size: 20px !important;
    display: inline-flex !important;
    gap: 2px !important;
    justify-content: center !important;
}

#ratingTab .rate-star-wrap .stars-label {
    display: inline-block !important;
    font-size: 13px !important;
    color: #003D5B !important;
    text-decoration: underline !important;
    text-decoration-color: #AC8B63 !important;
    text-underline-offset: 3px !important;
    margin: 0 !important;
}

#ratingTab .rate-star-wrap .stars-label:hover {
    text-decoration-color: #003D5B !important;
}

/* "Přidat hodnocení" trigger */
#ratingTab .rate-average-inner .add-comment.rate-form-trigger {
    margin-top: 18px !important;
    display: block !important;
}

#ratingTab .rate-form-trigger .link-like.rating-icon {
    display: inline-block !important;
    padding: 12px 28px !important;
    background: #003D5B !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

#ratingTab .rate-form-trigger .link-like.rating-icon:hover {
    background: #07283b !important;
    text-decoration: none !important;
}

/* ── Pruhy rozložení hodnocení (5x, 4x...) ── */
#ratingTab .rate-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
}

#ratingTab .rate-list:last-child {
    margin-bottom: 0 !important;
}

/* Číslo + hvězda – fixní šířka vlevo */
#ratingTab .rate-list .rate-star {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #003D5B !important;
    padding: 0 !important;
    margin: 0 !important;
}

#ratingTab .rate-list .rate-star .rate-value {
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 13px !important;
    color: #003D5B !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

/* Bar – flex-grow vyplní zbytek */
#ratingTab .rate-list .rate-block {
    flex: 1 1 auto !important;
    height: 8px !important;
    background: rgba(0, 61, 91, 0.08) !important;
    border-radius: 999px !important;
    overflow: visible !important;
    position: relative !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#ratingTab .rate-list .rate-bar {
    display: block !important;
    height: 100% !important;
    background: linear-gradient(90deg, #AC8B63, #D3C5AB) !important;
    border-radius: 999px !important;
    min-width: 0 !important;
    position: static !important;
    overflow: visible !important;
}

/* Count (1x, 0x) – po JS přesunu je count sourozenec .rate-block,
   ne dítě .rate-bar. Jednoduše ho stylujeme jako inline-flex položku. */
body #ratingTab .rate-list .rate-count,
body #ratingTab .rate-list > .rate-count,
body #ratingTab .rate-list .rate-bar .rate-count,
body #ratingTab .rate-list .rate-block .rate-count,
body #ratingTab .rate-list .rate-bar .rate-count.active,
body #ratingTab .rate-list span.rate-count {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 12px !important;
    color: #7a8a94 !important;
    background: transparent !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    width: auto !important;
    min-width: 28px !important;
    max-width: none !important;
    height: auto !important;
    display: inline-block !important;
    float: none !important;
    text-align: right !important;
    flex: 0 0 auto !important;
}

#ratingTab .rate-list.current .rate-bar {
    background: linear-gradient(90deg, #AC8B63, #D3C5AB) !important;
}

/* Bar maska pro hezký gradient – přesunuto na bar-wrap trik:
   použijeme masku skrze pseudo-element, ale necháme count viditelný */
#ratingTab .rate-list .rate-block {
    isolation: isolate !important;
}

/* ──────────────────────────────────────────────────────────
   Formulář hodnocení – #rate-form
────────────────────────────────────────────────────────── */
#rate-form {
    margin-top: 28px !important;
    padding-top: 28px !important;
    border-top: 1px solid rgba(0, 61, 91, 0.08) !important;
}

#rate-form .row {
    margin: 0 !important;
}

#rate-form .form-group {
    margin-bottom: 14px !important;
    padding: 0 !important;
}

/* První řádek formuláře (Jméno + E-mail) */
#rate-form > form > .row > .form-group.col-sm-6 {
    width: calc(50% - 6px) !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: top !important;
}

#rate-form > form > .row > .form-group.col-sm-6:first-child {
    margin-right: 12px !important;
}

@media (max-width: 600px) {
    #rate-form > form > .row > .form-group.col-sm-6 {
        width: 100% !important;
        display: block !important;
    }
    #rate-form > form > .row > .form-group.col-sm-6:first-child {
        margin-right: 0 !important;
    }
}

#rate-form > form > .row > .col-xs-12 {
    width: 100% !important;
    padding: 0 !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Inputy */
#rate-form input[type="text"],
#rate-form input[type="email"] {
    width: 100% !important;
    padding: 14px 20px !important;
    border: 1px solid rgba(0, 61, 91, 0.15) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #003D5B !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

#rate-form input[type="text"]:focus,
#rate-form input[type="email"]:focus {
    border-color: #AC8B63 !important;
    outline: none !important;
    box-shadow: none !important;
}

#rate-form input[type="text"]::placeholder,
#rate-form input[type="email"]::placeholder,
#rate-form textarea::placeholder {
    color: #a7b3ba !important;
}

/* Textarea */
#rate-form textarea {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 1px solid rgba(0, 61, 91, 0.15) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #003D5B !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 14px !important;
    min-height: 120px !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    transition: border-color 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

#rate-form textarea:focus {
    border-color: #AC8B63 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hvězdičky ve formuláři (výběr skóre) */
#rate-form .star-wrap {
    display: flex !important;
    gap: 6px !important;
    margin: 4px 0 18px !important;
    padding: 0 !important;
}

#rate-form .star-wrap .star {
    font-size: 26px !important;
    width: 26px !important;
    height: 26px !important;
    cursor: pointer !important;
}

/* Souhlas */
#rate-form .consents {
    margin: 0 0 18px !important;
    padding: 0 !important;
}

#rate-form .consents label,
#rate-form .consents .whole-width {
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 12px !important;
    color: #7a8a94 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#rate-form .consents a {
    color: #AC8B63 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

#rate-form .consents a:hover {
    color: #003D5B !important;
}

/* Submit tlačítko */
#rate-form input[type="submit"].btn {
    padding: 14px 32px !important;
    background: #003D5B !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: "Neulis Alt", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1 !important;
    width: auto !important;
}

#rate-form input[type="submit"].btn:hover {
    background: #07283b !important;
    color: #ffffff !important;
}

/* ──────────────────────────────────────────────────────────
   Responsivita – mobil
────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .shp-tabs-wrapper.p-detail-tabs-wrapper {
        border-radius: 12px !important;
    }

    .shp-tabs.p-detail-tabs {
        padding: 0 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .shp-tabs.p-detail-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .shp-tabs.p-detail-tabs .shp-tab a {
        padding: 16px 16px !important;
        font-size: 13px !important;
    }

    #ratingTab,
    #description {
        padding: 24px 20px 28px !important;
    }

    #ratingTab .rate-average {
        font-size: 52px !important;
    }
}