/* =========================================================
   89CARDS.S — SHOPTET STEP CUSTOM THEME
   Version: 1.6.8.5
   Dark / gold collector concept
   ========================================================= */

:root,
html,
body {
    --cards-bg: #090b0d;
    --cards-bg-soft: #0d1014;
    --cards-panel: #0f1216;
    --cards-panel-2: #14181d;
    --cards-gold: #e3b341;
    --cards-gold-hover: #f2c654;
    --cards-white: #f5f2ea;
    --cards-text: #d2cec6;
    --cards-muted: #918c84;
    --cards-border: rgba(255,255,255,.09);
    --cards-gold-border: rgba(227,179,65,.28);

    /* Shoptet STEP surface variables */
    --colors-surface-primary: #090b0d !important;
    --colors-surface-secondary: #0f1216 !important;
    --colors-surface-tertiary: #14181d !important;
    --colors-foregrounds-content-primary-dark: #d2cec6 !important;
    --colors-foregrounds-content-primary-light: #f5f2ea !important;
    --colors-foregrounds-borders-primary: rgba(255,255,255,.12) !important;
    --colors-foregrounds-borders-secondary: rgba(255,255,255,.08) !important;
}

/* =========================================================
   GLOBAL / PAGE SURFACES
   ========================================================= */

html,
body,
.overall-wrapper,
#content-wrapper,
.content-wrapper,
.content-wrapper-in,
.content-inner,
.content-inner-in,
main#content,
#content,
.wide,
.container_resetted {
    background: var(--cards-bg) !important;
    background-color: var(--cards-bg) !important;
    color: var(--cards-text) !important;
}

body {
    margin: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Remove accidental debug styling from older version */
body { outline: 0 !important; }

.container {
    max-width: 1440px !important;
}

a {
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

a:hover { text-decoration: none !important; }

h1,h2,h3,h4,h5,h6,
#content h1,#content h2,#content h3,#content h4,#content h5,#content h6 {
    color: var(--cards-white) !important;
}

#content p,
#content li,
#content label,
p {
    color: var(--cards-text);
}

#content a { color: var(--cards-white); }
#content a:hover { color: var(--cards-gold); }

/* =========================================================
   HEADER
   ========================================================= */

#header,
.navigation-wrapper,
.navigation-in,
.navigation-in > ul,
.header-top,
.header-bottom {
    background: var(--cards-bg) !important;
    background-color: var(--cards-bg) !important;
}

#header {
    border-bottom: 1px solid rgba(227,179,65,.18) !important;
    box-shadow: none !important;
}

.navigation-wrapper { border: 0 !important; }

#header .site-name {
    display: flex !important;
    align-items: center !important;
    min-width: 240px !important;
}

#header .site-name a {
    display: flex !important;
    align-items: center !important;
    height: 80px !important;
}

#header .site-name img {
    width: auto !important;
    height: auto !important;
    max-width: 240px !important;
    max-height: 72px !important;
    object-fit: contain !important;
}

#header a,
#header button { color: var(--cards-text) !important; }
#header a:hover,
#header button:hover { color: var(--cards-gold) !important; }

.navigation-in > ul > li { background: transparent !important; }

.navigation-in > ul > li > a {
    background: transparent !important;
    color: #aaa69f !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .15em !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.navigation-in > ul > li > a:hover,
.navigation-in > ul > li.exp > a,
.navigation-in > ul > li.active > a {
    color: var(--cards-gold) !important;
    background: transparent !important;
}

.navigation-in ul.menu-level-2 {
    background: var(--cards-panel) !important;
    border: 1px solid var(--cards-gold-border) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.55) !important;
}

.navigation-in ul.menu-level-2 li a {
    background: var(--cards-panel) !important;
    color: var(--cards-text) !important;
}

.navigation-in ul.menu-level-2 li a:hover {
    background: var(--cards-panel-2) !important;
    color: var(--cards-gold) !important;
}

/* Header action cells */
.navigation-buttons,
.navigation-buttons > a,
.navigation-buttons > button,
.top-nav-button {
    background: transparent !important;
}

.navigation-buttons > a,
.navigation-buttons > button {
    border-color: rgba(255,255,255,.12) !important;
}

/* Gold cart */
#header .navigation-buttons a[data-target="cart"],
#header .navigation-buttons .cart-count {
    color: var(--cards-gold) !important;
    border-left-color: rgba(227,179,65,.35) !important;
    border-right-color: rgba(227,179,65,.35) !important;
}

#header .navigation-buttons a[data-target="cart"]::before,
#header .navigation-buttons a[data-target="cart"]::after {
    color: var(--cards-gold) !important;
}

#header .navigation-buttons a[data-target="cart"] svg,
#header .navigation-buttons a[data-target="cart"] svg path {
    color: var(--cards-gold) !important;
    fill: var(--cards-gold) !important;
    stroke: var(--cards-gold) !important;
}

#header .navigation-buttons a[data-target="cart"]:hover {
    background: rgba(227,179,65,.08) !important;
    color: var(--cards-gold-hover) !important;
}

/* =========================================================
   HOMEPAGE HERO / CAROUSEL
   ========================================================= */

.carousel,
.carousel-inner,
.carousel-inner > .item,
.row.banners-row,
.wide-carousel {
    background: var(--cards-bg) !important;
}

.carousel-control { color: var(--cards-gold) !important; }

/* =========================================================
   HOMEPAGE ABOUT
   ========================================================= */

.homepage-texts-wrapper,
.welcome-wrapper,
.welcome,
.welcome > div {
    background: var(--cards-bg) !important;
}

.cards-about {
    display: grid;
    grid-template-columns: 36% 64%;
    gap: 70px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 110px 40px 80px;
    background: var(--cards-bg) !important;
}

.cards-about__left { padding-top: 4px; }

.cards-about__eyebrow {
    color: var(--cards-gold) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.cards-about__title {
    margin: 0 !important;
    color: var(--cards-white) !important;
    font-size: 46px !important;
    line-height: .96 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -.035em !important;
}

.cards-about__right { max-width: 670px; }
.cards-about__lead { margin-bottom: 27px; }
.cards-about__text { margin-bottom: 42px; }

.cards-about__lead p {
    margin: 0;
    color: #f0ede6 !important;
    font-size: 18px;
    line-height: 1.75;
}

.cards-about__text p {
    margin: 0;
    color: #b5a994 !important;
    font-size: 16px;
    line-height: 1.75;
}

.cards-about__stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid rgba(227,179,65,.16);
    border-bottom: 1px solid rgba(227,179,65,.16);
    padding: 28px 0 26px;
}

.cards-about__stat {
    display: flex;
    flex-direction: column;
}

.cards-about__stat strong {
    color: var(--cards-gold) !important;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

.cards-about__stat span {
    margin-top: 10px;
    color: #9a9081 !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* =========================================================
   BENEFITS — moved by 89cards.js after .cards-about
   Actual STEP class: .container--bannersBenefit
   ========================================================= */

.container--bannersBenefit {
    background: var(--cards-bg) !important;
}

body .benefitBanner {
    background: var(--cards-bg) !important;
    border-top: 1px solid var(--cards-border) !important;
    border-bottom: 1px solid var(--cards-border) !important;
}

.benefitBanner__item { background: transparent !important; }
.benefitBanner__title { color: var(--cards-white) !important; font-weight: 800 !important; }
.benefitBanner__data { color: var(--cards-muted) !important; }

.cards-about + .container--bannersBenefit {
    max-width: 1320px !important;
    width: calc(100% - 80px) !important;
    margin: 0 auto 90px !important;
    padding: 0 !important;
}

.cards-about + .container--bannersBenefit .benefitBanner {
    width: 100% !important;
    margin: 0 !important;
}

/* =========================================================
   HOMEPAGE PRODUCT TABS / GRID
   ========================================================= */

.shp-tabs-wrapper,
.homepage-tabs-wrapper,
#tab-content,
.tab-content,
.tab-pane {
    background: var(--cards-bg) !important;
}

.shp-tabs-row { border-color: rgba(255,255,255,.12) !important; }

.shp-tab-link {
    background: var(--cards-panel) !important;
    color: var(--cards-text) !important;
    border-color: rgba(255,255,255,.10) !important;
}

.shp-tab.active .shp-tab-link,
.shp-tab-link:hover {
    background: var(--cards-gold) !important;
    color: #090b0d !important;
    border-color: var(--cards-gold) !important;
}

.products-block .product {
    background: var(--cards-panel) !important;
    border: 1px solid rgba(227,179,65,.16) !important;
    box-shadow: none !important;
    transition: transform .25s ease, border-color .25s ease;
}

.products-block .product:hover {
    transform: translateY(-4px);
    border-color: rgba(227,179,65,.52) !important;
}

.products-block .product .image { background: #0b0d10 !important; }
.products-block .product .p-in { background: var(--cards-panel) !important; padding: 18px 18px 20px !important; }
.products-block .product .p-in-in { background: transparent !important; }

.products-block .product .name,
.products-block .product .name a {
    color: var(--cards-white) !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

.products-block .product .name a:hover { color: var(--cards-gold) !important; }
.products-block .product .price { color: var(--cards-gold) !important; font-size: 21px !important; font-weight: 900 !important; }
.products-block .product .availability,
.products-block .product .p-desc { color: var(--cards-muted) !important; }

.flag {
    background: var(--cards-gold) !important;
    color: #08090a !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* =========================================================
   INNER PAGES / CATEGORIES / EMPTY STATES
   ========================================================= */

body:not(.type-index) #content-wrapper,
body:not(.type-index) .content-wrapper,
body:not(.type-index) .content-wrapper-in,
body:not(.type-index) main#content,
body:not(.type-index) #content,
body:not(.type-index) .content-inner,
body:not(.type-index) .content-inner-in,
body:not(.type-index) .category-content-wrapper,
body:not(.type-index) .category-content-wrapper-in,
body:not(.type-index) .empty-content,
body:not(.type-index) .category-empty,
body:not(.type-index) .no-products,
body:not(.type-index) .welcome-wrapper {
    background: var(--cards-bg) !important;
    color: var(--cards-text) !important;
}

body:not(.type-index) #content {
    min-height: 420px;
}

body:not(.type-index) h1 {
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
}

.category-header,
.category-perex,
.category-top,
.subcategories,
.subcategories li,
.category-appendix,
.category-empty,
.empty-content {
    background: transparent !important;
    color: var(--cards-text) !important;
}

/* Sidebar */
.sidebar,
.sidebar-inner,
.categories,
.categories ul,
.categories li { background: transparent !important; }
.sidebar h3,.sidebar h4 { color: var(--cards-white) !important; }
.sidebar a { color: var(--cards-text) !important; }
.sidebar a:hover,.sidebar .active > a { color: var(--cards-gold) !important; }

/* Generic boxes */
.box,
.box-bg-variant,
.content-box,
.box-sm {
    background: var(--cards-panel) !important;
    color: var(--cards-text) !important;
    border-color: var(--cards-border) !important;
    box-shadow: none !important;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span {
    color: var(--cards-muted) !important;
}
.breadcrumbs a:hover { color: var(--cards-gold) !important; }

/* =========================================================
   FORMS
   ========================================================= */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: var(--cards-panel) !important;
    color: var(--cards-white) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background: var(--cards-panel-2) !important;
    border-color: var(--cards-gold) !important;
    outline: none !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder { color: #777 !important; }

label,
.form-group label,
.smart-label-wrapper label { color: var(--cards-text) !important; }

.required-asterisk::after,
.required-asterisk { color: var(--cards-text) !important; }

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button,
input[type="submit"] {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.btn-primary,
.btn-conversion,
#content .btn-primary,
#content .btn-conversion,
#content input[type="submit"] {
    background: var(--cards-gold) !important;
    border-color: var(--cards-gold) !important;
    color: #090b0d !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

.btn-primary:hover,
.btn-conversion:hover,
#content .btn-primary:hover,
#content .btn-conversion:hover,
#content input[type="submit"]:hover {
    background: var(--cards-gold-hover) !important;
    border-color: var(--cards-gold-hover) !important;
    color: #090b0d !important;
}

.btn-default,
#content .btn-default {
    background: transparent !important;
    border-color: rgba(255,255,255,.22) !important;
    color: var(--cards-white) !important;
}

.btn-default:hover,
#content .btn-default:hover {
    border-color: var(--cards-gold) !important;
    color: var(--cards-gold) !important;
}

/* =========================================================
   DISCUSSION
   ========================================================= */

.discussion,
.discussion-form,
.discussion-wrapper,
.rate-wrapper,
.votes-wrap {
    background: transparent !important;
    color: var(--cards-text) !important;
}

/* =========================================================
   FOOTER / NEWSLETTER
   ========================================================= */

#footer,
.footer,
.footer-newsletter,
.footer-rows,
.custom-footer,
.footer-bottom {
    background: #060708 !important;
    background-color: #060708 !important;
    color: var(--cards-text) !important;
    border-color: rgba(255,255,255,.08) !important;
}

#footer {
    border-top: 1px solid rgba(227,179,65,.20) !important;
}

#footer h2,#footer h3,#footer h4,#footer strong { color: var(--cards-white) !important; }
#footer p,#footer label { color: var(--cards-text) !important; }
#footer a { color: var(--cards-muted) !important; }
#footer a:hover { color: var(--cards-gold) !important; }

#footer input[type="email"],
#footer input[type="text"] {
    background: var(--cards-panel) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: var(--cards-white) !important;
}

#footer .btn,
#footer button,
#footer input[type="submit"] {
    background: var(--cards-gold) !important;
    border-color: var(--cards-gold) !important;
    color: #090b0d !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

#footer .btn:hover,
#footer button:hover,
#footer input[type="submit"]:hover {
    background: var(--cards-gold-hover) !important;
    border-color: var(--cards-gold-hover) !important;
}

/* =========================================================
   OVERLAYS — CART / SEARCH / LOGIN
   STEP uses generic white surface windows; force all layers dark.
   ========================================================= */

.content-window,
.content-window-in,
.cart-window,
.cart-window-in,
.search-window,
.search-window-in,
#cart-widget,
#cart-widget .content-window-in,
#cart-widget .place-cart-here,
#cart-widget .cart-wrapper,
#cart-widget #cart-wrapper,
#cart-widget .cart-inner,
#cart-widget .cart-empty,
dialog,
.dialog,
.dialog__wrapper,
.dialog__content,
.dialog__body,
.dialog__header,
#login,
#login .dialog__wrapper,
#login .dialog__content,
#customerLogin {
    background: var(--cards-bg) !important;
    background-color: var(--cards-bg) !important;
    color: var(--cards-text) !important;
}

/* Browser dialog backdrop */
dialog::backdrop,
.dialog::backdrop {
    background: rgba(0,0,0,.82) !important;
}

.content-window h1,
.content-window h2,
.content-window h3,
.content-window h4,
.content-window strong,
.dialog h1,
.dialog h2,
.dialog h3,
.dialog h4,
.dialog strong {
    color: var(--cards-white) !important;
}

.content-window p,
.content-window li,
.content-window span,
.content-window label,
.dialog p,
.dialog li,
.dialog span,
.dialog label {
    color: var(--cards-text) !important;
}

.content-window a,
.dialog a { color: var(--cards-white) !important; }
.content-window a:hover,
.dialog a:hover { color: var(--cards-gold) !important; }

/* Back to shop button in overlays */
.content-window .toggle-window-arr,
.dialog .toggle-window-arr,
.dialog__close button {
    background: var(--cards-gold) !important;
    border-color: var(--cards-gold) !important;
    color: #090b0d !important;
}

/* Empty cart search */
#cart-widget input,
.cart-window input,
.search-window input,
.dialog input {
    background: var(--cards-panel) !important;
    color: var(--cards-white) !important;
    border-color: rgba(255,255,255,.15) !important;
}

/* Search submit arrow */
.search-window .btn-arrow-right,
#cart-widget .btn-arrow-right {
    background: var(--cards-gold) !important;
    border-color: var(--cards-gold) !important;
    color: #090b0d !important;
}

/* Login primary action */
#login .btn-primary,
.dialog .btn-primary {
    background: var(--cards-gold) !important;
    border-color: var(--cards-gold) !important;
    color: #090b0d !important;
}

/* =========================================================
   TABLES
   ========================================================= */

table,.table {
    background: var(--cards-panel) !important;
    color: var(--cards-text) !important;
}

table th,.table th {
    background: var(--cards-panel-2) !important;
    color: var(--cards-white) !important;
}

table td,table th,.table td,.table th {
    border-color: var(--cards-border) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
    .cards-about {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 80px 30px 60px;
    }
    .cards-about__right { max-width: none; }
}

@media (max-width: 767px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #header .site-name { min-width: auto !important; }
    #header .site-name a { height: 60px !important; }
    #header .site-name img {
        max-width: 145px !important;
        max-height: 48px !important;
    }

    .cards-about {
        padding: 60px 20px 50px;
        gap: 35px;
    }

    .cards-about__title { font-size: 36px !important; }
    .cards-about__lead p { font-size: 17px; line-height: 1.6; }
    .cards-about__text p { font-size: 15px; line-height: 1.65; }

    .cards-about__stats {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 25px 0;
    }

    .cards-about__stat {
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .cards-about__stat:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .cards-about + .container--bannersBenefit {
        width: calc(100% - 30px) !important;
        margin-bottom: 60px !important;
    }

    .benefitBanner {
        background: var(--cards-bg) !important;
    }
}

/* =========================================================
   89CARDS — PRODUCT LIST + DETAIL REBUILD
   Version: 1.4.0
   ========================================================= */

/* ---------- CATEGORY / PRODUCT LIST ---------- */

/* Keep the listing compact and premium instead of letting STEP stretch one item. */
body.type-category #products.products-block,
body.in-nabidka #products.products-block,
body.type-category .products-block,
body.in-nabidka .products-block {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

body.type-category #products.products-block > .product,
body.in-nabidka #products.products-block > .product,
body.type-category .products-block > .product,
body.in-nabidka .products-block > .product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    background: #0f1216 !important;
    border: 1px solid rgba(227,179,65,.20) !important;
    overflow: hidden !important;
}

body.type-category .products-block .product .image,
body.in-nabidka .products-block .product .image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 360px !important;
    padding: 18px !important;
    background: #090b0d !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    overflow: hidden !important;
}

body.type-category .products-block .product .image img,
body.in-nabidka .products-block .product .image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
}

body.type-category .products-block .product .p-in,
body.in-nabidka .products-block .product .p-in {
    min-height: 205px !important;
    padding: 20px 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.type-category .products-block .product .name,
body.in-nabidka .products-block .product .name {
    margin: 0 0 14px !important;
    min-height: 44px !important;
}

body.type-category .products-block .product .name a,
body.in-nabidka .products-block .product .name a {
    font-size: 19px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    color: var(--cards-white) !important;
}

body.type-category .products-block .product .availability,
body.in-nabidka .products-block .product .availability {
    margin-top: auto !important;
    color: #7ac943 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

body.type-category .products-block .product .price,
body.in-nabidka .products-block .product .price {
    margin: 8px 0 14px !important;
    color: var(--cards-gold) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

body.type-category .products-block .product .btn,
body.in-nabidka .products-block .product .btn {
    width: 100% !important;
    min-height: 46px !important;
    background: var(--cards-gold) !important;
    border: 1px solid var(--cards-gold) !important;
    color: #090b0d !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

body.type-category .products-block .product .btn:hover,
body.in-nabidka .products-block .product .btn:hover {
    background: var(--cards-gold-hover) !important;
    border-color: var(--cards-gold-hover) !important;
}

/* sorting + filters */
body.type-category .category-header,
body.in-nabidka .category-header {
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

body.type-category .category-header input + label,
body.type-category .category-header a,
body.type-category .category-header button,
body.in-nabidka .category-header input + label,
body.in-nabidka .category-header a,
body.in-nabidka .category-header button {
    background: #0f1216 !important;
    color: var(--cards-text) !important;
    border-color: rgba(255,255,255,.12) !important;
}

body.type-category .category-header .active,
body.in-nabidka .category-header .active {
    color: #090b0d !important;
    background: var(--cards-gold) !important;
}

/* ---------- PRODUCT DETAIL ---------- */

body.type-detail .p-detail-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr) !important;
    gap: 48px !important;
    align-items: start !important;
}

body.type-detail .p-image-wrapper,
body.type-detail .p-image {
    width: 100% !important;
    max-width: none !important;
    background: #090b0d !important;
}

body.type-detail .p-image {
    min-height: 560px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
    border: 1px solid rgba(227,179,65,.16) !important;
    overflow: hidden !important;
}

body.type-detail .p-image #wrap,
body.type-detail .p-image .mousetrap,
body.type-detail .p-image .p-main-image,
body.type-detail .p-image a {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

body.type-detail .p-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 520px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
}

/* Kill STEP's mouseover image overlay that visually tints/duplicates the photo. */
body.type-detail .p-image .mousetrap {
    background-image: none !important;
}

body.type-detail .p-thumbnails,
body.type-detail .p-thumbnail {
    background: #090b0d !important;
}

body.type-detail .p-thumbnail {
    border: 1px solid rgba(255,255,255,.12) !important;
    margin-right: 8px !important;
}

body.type-detail .p-thumbnail:hover,
body.type-detail .p-thumbnail.active {
    border-color: var(--cards-gold) !important;
}

body.type-detail .p-info-wrapper {
    background: transparent !important;
    padding-top: 18px !important;
}

body.type-detail .p-info-wrapper h1 {
    margin: 0 0 32px !important;
    font-size: 40px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
}

body.type-detail .p-final-price-wrapper,
body.type-detail .price-final,
body.type-detail .price-final-holder {
    color: var(--cards-gold) !important;
}

body.type-detail .p-final-price-wrapper {
    padding: 22px 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
}

body.type-detail .p-final-price-wrapper strong,
body.type-detail .price-final {
    color: var(--cards-gold) !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

/* Purchase controls */
body.type-detail .add-to-cart {
    gap: 10px !important;
}

body.type-detail .add-to-cart .btn-conversion,
body.type-detail .p-info-wrapper .btn-conversion {
    min-height: 52px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
    background: var(--cards-gold) !important;
    color: #090b0d !important;
    border-color: var(--cards-gold) !important;
    font-weight: 900 !important;
}

/* CATEGORY row is secondary — don't let it look like a headline. */
body.type-detail .p-info-wrapper .p-info-grid,
body.type-detail .p-info-wrapper .p-info {
    border-color: rgba(255,255,255,.08) !important;
}

/* ---------- COLLECTOR PARAMETERS ---------- */

.cards-collector-data {
    margin: 22px 0 24px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-top: 1px solid rgba(227,179,65,.28) !important;
    border-left: 1px solid rgba(227,179,65,.18) !important;
}

.cards-collector-data__item {
    min-height: 78px !important;
    padding: 15px 17px !important;
    background: #0f1216 !important;
    border-right: 1px solid rgba(227,179,65,.18) !important;
    border-bottom: 1px solid rgba(227,179,65,.18) !important;
}

.cards-collector-data__label {
    display: block !important;
    margin-bottom: 7px !important;
    color: var(--cards-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
}

.cards-collector-data__value {
    display: block !important;
    color: var(--cards-white) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

.cards-collector-data__item[data-key="Hráč"] .cards-collector-data__value {
    color: var(--cards-gold) !important;
}

/* Benefits on detail: more compact and subordinate to the product. */
body.type-detail .container--bannersBenefit {
    margin-top: 34px !important;
    border-top: 1px solid rgba(227,179,65,.16) !important;
}

body.type-detail .benefitBanner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1199px) {
    body.type-category #products.products-block,
    body.in-nabidka #products.products-block,
    body.type-category .products-block,
    body.in-nabidka .products-block {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.type-detail .p-detail-inner {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr) !important;
        gap: 32px !important;
    }
}

@media (max-width: 767px) {
    body.type-category #products.products-block,
    body.in-nabidka #products.products-block,
    body.type-category .products-block,
    body.in-nabidka .products-block {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.type-category .products-block .product .image,
    body.in-nabidka .products-block .product .image {
        height: 330px !important;
    }

    body.type-detail .p-detail-inner {
        display: block !important;
    }

    body.type-detail .p-image {
        min-height: 390px !important;
        padding: 12px !important;
    }

    body.type-detail .p-image img {
        max-height: 365px !important;
    }

    body.type-detail .p-info-wrapper {
        padding-top: 28px !important;
    }

    body.type-detail .p-info-wrapper h1 {
        font-size: 32px !important;
    }

    .cards-collector-data {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   89CARDS — SHOPTET WHITE IMAGE CUT CROP
   Version: 1.6.1
   Shoptet adds white pixels to generated image cuts.
   We keep the generated image, but crop the white side bands
   inside a portrait viewport instead of rewriting CDN URLs.
   ========================================================= */

/* ---------- PRODUCT LIST ---------- */

body.type-category .products-block .product .image,
body.in-nabidka .products-block .product .image {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 390px !important;
    padding: 18px !important;
    overflow: hidden !important;
    background: #090b0d !important;
}

/* Portrait viewport that visually cuts away Shoptet's white side fill. */
body.type-category .products-block .product .image img,
body.in-nabidka .products-block .product .image img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #090b0d !important;
}

/* Limit the visible width to a portrait 3:4 card-photo ratio. */
body.type-category .products-block .product .image,
body.in-nabidka .products-block .product .image {
    clip-path: inset(0);
}

/* We crop horizontally by making the source taller than the visible canvas.
   The generated Shoptet cut is landscape, so the white bands fall outside. */
body.type-category .products-block .product .image img,
body.in-nabidka .products-block .product .image img {
    transform: scale(1.34) !important;
    transform-origin: center center !important;
}

/* ---------- PRODUCT DETAIL ---------- */

/* Restore a stable gallery box after the experimental 1.6.0 rules. */
body.type-detail .p-detail-inner {
    display: grid !important;
    grid-template-columns: minmax(430px, 1fr) minmax(380px, .82fr) !important;
    gap: 54px !important;
    align-items: start !important;
}

body.type-detail .p-image-wrapper {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    background: #090b0d !important;
}

body.type-detail .p-image {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 620px !important;
    min-height: 620px !important;
    padding: 18px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #090b0d !important;
}

body.type-detail .p-image #wrap,
body.type-detail .p-image > a,
body.type-detail .p-image .p-main-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    background: #090b0d !important;
    overflow: hidden !important;
}

body.type-detail .p-image img,
body.type-detail .p-image img.p-main-image {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #090b0d !important;
    transform: scale(1.34) !important;
    transform-origin: center center !important;
}

/* Keep STEP zoom hit-area, but remove its own background image. */
body.type-detail .p-image .mousetrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 20 !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Thumbnail strip stays untouched except for dark canvas. */
body.type-detail .p-thumbnails,
body.type-detail .p-thumbnail {
    background: #090b0d !important;
}

/* Keep detail price on one line. */
body.type-detail .p-final-price-wrapper,
body.type-detail .price-final,
body.type-detail .price-final strong {
    white-space: nowrap !important;
}

@media (max-width: 1199px) {
    body.type-detail .p-detail-inner {
        grid-template-columns: minmax(360px, 1fr) minmax(330px, .85fr) !important;
        gap: 32px !important;
    }

    body.type-detail .p-image {
        height: 540px !important;
        min-height: 540px !important;
    }
}

@media (max-width: 767px) {
    body.type-category .products-block .product .image,
    body.in-nabidka .products-block .product .image {
        height: 350px !important;
    }

    body.type-detail .p-detail-inner {
        display: block !important;
    }

    body.type-detail .p-image-wrapper {
        max-width: 100% !important;
    }

    body.type-detail .p-image {
        height: 500px !important;
        min-height: 500px !important;
        padding: 10px !important;
    }
}

/* =========================================================
   89CARDS — IMAGE CROP FINAL OVERRIDE
   Version: 1.6.2
   IMPORTANT: this block is intentionally last in the file.
   ========================================================= */

/* CATEGORY: stronger crop of Shoptet's white side fill */
body.type-category #products.products-block .product > .p > a.image,
body.in-nabidka #products.products-block .product > .p > a.image {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 410px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #090b0d !important;
}

body.type-category #products.products-block .product > .p > a.image img,
body.in-nabidka #products.products-block .product > .p > a.image img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.52) !important;
    transform-origin: center center !important;
    background: #090b0d !important;
}

/* DETAIL: preserve the working 1.6.1 appearance */
body.type-detail .p-image img,
body.type-detail .p-image img.p-main-image {
    transform: scale(1.34) !important;
}

/* small visual marker in DOM for debugging via DevTools */
html.cards-js-v162 body::after {
    content: "";
    display: none;
}

@media (max-width: 767px) {
    body.type-category #products.products-block .product > .p > a.image,
    body.in-nabidka #products.products-block .product > .p > a.image {
        height: 360px !important;
    }

    body.type-category #products.products-block .product > .p > a.image img,
    body.in-nabidka #products.products-block .product > .p > a.image img {
        transform: scale(1.46) !important;
    }
}

/* =========================================================
   89CARDS — PRODUCT DETAIL THUMBNAILS FIX
   Version: 1.6.3
   Removes/crops Shoptet white fill in gallery thumbnails.
   ========================================================= */

body.type-detail .p-thumbnails,
body.type-detail .p-thumbnails-inner,
body.type-detail .p-thumbnail,
body.type-detail .p-thumbnail a {
    background: #090b0d !important;
    background-color: #090b0d !important;
}

/* Each thumbnail becomes a dark portrait viewport. */
body.type-detail .p-thumbnail,
body.type-detail .p-thumbnail a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 94px !important;
    height: 116px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

/* Crop white side bands generated inside Shoptet thumbnail files. */
body.type-detail .p-thumbnail img,
body.type-detail .p-thumbnails img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.42) !important;
    transform-origin: center center !important;
    background: #090b0d !important;
}

/* Active/hover state in 89cards gold. */
body.type-detail .p-thumbnail {
    border: 1px solid rgba(255,255,255,.12) !important;
}

body.type-detail .p-thumbnail:hover,
body.type-detail .p-thumbnail.active,
body.type-detail .p-thumbnail.highlighted {
    border-color: #e3b341 !important;
}

@media (max-width: 767px) {
    body.type-detail .p-thumbnail,
    body.type-detail .p-thumbnail a {
        width: 78px !important;
        height: 98px !important;
    }

    body.type-detail .p-thumbnail img,
    body.type-detail .p-thumbnails img {
        transform: scale(1.38) !important;
    }
}

/* =========================================================
   89CARDS — HOMEPAGE TABS + CART IMAGE FIX
   Version: 1.6.4
   Applies the same dark crop treatment to:
   - homepage Akční zboží / Novinky
   - cart product thumbnail
   ========================================================= */

/* ---------- HOMEPAGE PRODUCT TABS ---------- */

body.type-index .products-block .product > .p > a.image,
body.type-index .products-block .product a.image {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 390px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #090b0d !important;
    background-color: #090b0d !important;
}

body.type-index .products-block .product > .p > a.image img,
body.type-index .products-block .product a.image img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.52) !important;
    transform-origin: center center !important;
    background: #090b0d !important;
}

/* ---------- CART PRODUCT THUMBNAIL ---------- */

/* Shoptet can use several wrappers in cart/checkout. Keep all layers dark. */
body.type-cart .cart-table .p-image,
body.type-cart .cart-table .image,
body.type-cart .cart-table .cart-p-image,
body.type-cart .cart-table .p-image a,
body.type-cart .cart-table .image a,
body.type-cart .cart-table .cart-p-image a,
body.in-kosik .cart-table .p-image,
body.in-kosik .cart-table .image,
body.in-kosik .cart-table .cart-p-image,
body.in-kosik .cart-table .p-image a,
body.in-kosik .cart-table .image a,
body.in-kosik .cart-table .cart-p-image a {
    background: #090b0d !important;
    background-color: #090b0d !important;
}

/* Crop the white side fill inside cart thumbnail. */
body.type-cart .cart-table .p-image img,
body.type-cart .cart-table .image img,
body.type-cart .cart-table .cart-p-image img,
body.in-kosik .cart-table .p-image img,
body.in-kosik .cart-table .image img,
body.in-kosik .cart-table .cart-p-image img,
body.type-cart .cart-table img,
body.in-kosik .cart-table img {
    display: block !important;
    width: auto !important;
    height: 78px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.42) !important;
    transform-origin: center center !important;
    background: #090b0d !important;
}

/* Ensure the visible cart image cell clips the scaled source. */
body.type-cart .cart-table .p-image,
body.type-cart .cart-table .image,
body.type-cart .cart-table .cart-p-image,
body.in-kosik .cart-table .p-image,
body.in-kosik .cart-table .image,
body.in-kosik .cart-table .cart-p-image {
    overflow: hidden !important;
}

/* Cart/checkout tab readability: active step must stay dark-on-gold, not pale-on-white. */
body.type-cart .cart-header .active,
body.type-cart .checkout-header .active,
body.in-kosik .cart-header .active,
body.in-kosik .checkout-header .active {
    background: var(--cards-gold) !important;
    color: #090b0d !important;
}

@media (max-width: 767px) {
    body.type-index .products-block .product > .p > a.image,
    body.type-index .products-block .product a.image {
        height: 350px !important;
    }

    body.type-index .products-block .product > .p > a.image img,
    body.type-index .products-block .product a.image img {
        transform: scale(1.46) !important;
    }

    body.type-cart .cart-table img,
    body.in-kosik .cart-table img {
        height: 68px !important;
        transform: scale(1.38) !important;
    }
}

/* =========================================================
   89CARDS — CART + BACK BUTTON + COLLECTOR PARAMS
   Version: 1.6.5
   ========================================================= */

/* ---------- BACK TO SHOP: always readable ---------- */

.content-window .toggle-window-arr,
.content-window .toggle-window-arr *,
.cart-window .toggle-window-arr,
.cart-window .toggle-window-arr *,
.dialog .toggle-window-arr,
.dialog .toggle-window-arr *,
button[data-testid="backToShop"],
button[data-testid="backToShop"] *,
[data-testid="backToShop"],
[data-testid="backToShop"] * {
    color: #090b0d !important;
    fill: #090b0d !important;
    stroke: #090b0d !important;
}

.content-window .toggle-window-arr::before,
.content-window .toggle-window-arr::after,
.cart-window .toggle-window-arr::before,
.cart-window .toggle-window-arr::after,
.dialog .toggle-window-arr::before,
.dialog .toggle-window-arr::after,
[data-testid="backToShop"]::before,
[data-testid="backToShop"]::after {
    color: #090b0d !important;
    border-color: #090b0d !important;
    fill: #090b0d !important;
    stroke: #090b0d !important;
}

/* ---------- CART IMAGE: works regardless of current body page ---------- */

#cart-wrapper .cart-table td.cart-p-image,
#cart-widget .cart-table td.cart-p-image,
.cart-window .cart-table td.cart-p-image {
    width: 86px !important;
    min-width: 86px !important;
    padding: 3px 5px !important;
    background: #090b0d !important;
    background-color: #090b0d !important;
    vertical-align: middle !important;
}

/* JS adds this crop wrapper around cart thumbnail */
.cards-cart-image-crop {
    width: 76px !important;
    height: 78px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #090b0d !important;
}

.cards-cart-image-crop img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.44) !important;
    transform-origin: center center !important;
    background: #090b0d !important;
}

/* ---------- IMPORTANT PRODUCT PARAMETERS ---------- */

/* STEP table itself */
body.type-detail table.detail-parameters.second {
    width: 100% !important;
    margin: 20px 0 24px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(227,179,65,.24) !important;
}

body.type-detail table.detail-parameters.second tbody {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
}

body.type-detail table.detail-parameters.second tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    min-height: 76px !important;
    padding: 14px 16px !important;
    background: #0f1216 !important;
    border-right: 1px solid rgba(227,179,65,.16) !important;
    border-bottom: 1px solid rgba(227,179,65,.16) !important;
}

body.type-detail table.detail-parameters.second tr:nth-child(2n) {
    border-right: 0 !important;
}

body.type-detail table.detail-parameters.second th,
body.type-detail table.detail-parameters.second td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}

body.type-detail table.detail-parameters.second th {
    color: #918c84 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

body.type-detail table.detail-parameters.second td {
    color: #f5f2ea !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

/* Rows marked by JS as the five key collector attributes */
body.type-detail table.detail-parameters.second tr.cards-key-param {
    background:
        linear-gradient(180deg, rgba(227,179,65,.06), rgba(227,179,65,.015)),
        #0f1216 !important;
}

body.type-detail table.detail-parameters.second tr.cards-key-param td {
    color: #e3b341 !important;
}

body.type-detail table.detail-parameters.second tr.cards-key-param::before {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    margin-bottom: 3px;
    background: #e3b341;
}

/* Hide the duplicate JS collector panel if an older script created it.
   We style the real Shoptet parameter table directly now. */
body.type-detail .cards-collector-data {
    display: none !important;
}

@media (max-width: 767px) {
    body.type-detail table.detail-parameters.second tbody {
        grid-template-columns: 1fr !important;
    }

    body.type-detail table.detail-parameters.second tr {
        border-right: 0 !important;
    }

    .cards-cart-image-crop {
        width: 66px !important;
        height: 70px !important;
    }

    .cards-cart-image-crop img {
        transform: scale(1.40) !important;
    }
}

/* =========================================================
   89CARDS — PRODUCT PARAMS PREMIUM LAYOUT
   Version: 1.6.6
   ========================================================= */

/* Give the parameter area the full width of the product info column. */
body.type-detail .p-param-block,
body.type-detail .detail-parameters-wrapper {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
}

/* Put print / ask links below the parameter panel, not beside it. */
body.type-detail .social-buttons-wrapper {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Premium collector grid */
body.type-detail table.detail-parameters.second {
    display: block !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(227,179,65,.28) !important;
    border-top: 3px solid #e3b341 !important;
    background: #0b0e11 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

body.type-detail table.detail-parameters.second tbody {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
}

body.type-detail table.detail-parameters.second tr {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 86px !important;
    padding: 16px 18px 15px !important;
    background: linear-gradient(180deg, rgba(227,179,65,.035), rgba(255,255,255,.01)) !important;
    border-right: 1px solid rgba(227,179,65,.14) !important;
    border-bottom: 1px solid rgba(227,179,65,.14) !important;
}

/* 3-column borders */
body.type-detail table.detail-parameters.second tr:nth-child(3n) {
    border-right: 0 !important;
}

/* last row line cleanup for 6 common items */
body.type-detail table.detail-parameters.second tr:nth-last-child(-n+3) {
    border-bottom: 0 !important;
}

body.type-detail table.detail-parameters.second th,
body.type-detail table.detail-parameters.second td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}

body.type-detail table.detail-parameters.second th {
    margin-bottom: 8px !important;
    color: #e3b341 !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

body.type-detail table.detail-parameters.second td {
    color: #f5f2ea !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
}

/* Five key collector attributes get an extra gold cue */
body.type-detail table.detail-parameters.second tr.cards-key-param {
    background:
        linear-gradient(180deg, rgba(227,179,65,.09), rgba(227,179,65,.025)),
        #0f1216 !important;
}

body.type-detail table.detail-parameters.second tr.cards-key-param::before {
    content: "";
    position: absolute !important;
    left: 18px !important;
    top: 0 !important;
    width: 34px !important;
    height: 2px !important;
    margin: 0 !important;
    background: #e3b341 !important;
}

body.type-detail table.detail-parameters.second tr.cards-key-param td {
    color: #fff !important;
}

/* Player stands out as the primary identity of the card. */
body.type-detail table.detail-parameters.second tr[data-cards-param="hrac"] td,
body.type-detail table.detail-parameters.second tr[data-cards-param="hráč"] td {
    color: #e3b341 !important;
}

/* Category is useful, but visually secondary. */
body.type-detail table.detail-parameters.second tr.cards-category-param th {
    color: #918c84 !important;
}

body.type-detail table.detail-parameters.second tr.cards-category-param td {
    color: #d2cec6 !important;
}

@media (max-width: 991px) {
    body.type-detail table.detail-parameters.second tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.type-detail table.detail-parameters.second tr:nth-child(3n) {
        border-right: 1px solid rgba(227,179,65,.14) !important;
    }

    body.type-detail table.detail-parameters.second tr:nth-child(2n) {
        border-right: 0 !important;
    }

    body.type-detail table.detail-parameters.second tr:nth-last-child(-n+3) {
        border-bottom: 1px solid rgba(227,179,65,.14) !important;
    }

    body.type-detail table.detail-parameters.second tr:nth-last-child(-n+2) {
        border-bottom: 0 !important;
    }
}

@media (max-width: 560px) {
    body.type-detail table.detail-parameters.second tbody {
        grid-template-columns: 1fr !important;
    }

    body.type-detail table.detail-parameters.second tr,
    body.type-detail table.detail-parameters.second tr:nth-child(2n),
    body.type-detail table.detail-parameters.second tr:nth-child(3n) {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(227,179,65,.14) !important;
    }

    body.type-detail table.detail-parameters.second tr:last-child {
        border-bottom: 0 !important;
    }
}

/* =========================================================
   89CARDS — PRODUCT DETAIL LINK ICONS FIX
   Version: 1.6.7
   Moves STEP .link-icons below the parameter grid and
   prevents it from floating over the collector attributes.
   ========================================================= */

body.type-detail .p-info-wrapper .link-icons,
body.type-detail .p-info-wrapper div.link-icons {
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 14px 0 0 !important;
    padding: 12px 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 18px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    z-index: auto !important;
}

body.type-detail .p-info-wrapper .link-icons a,
body.type-detail .p-info-wrapper .link-icons span,
body.type-detail .p-info-wrapper .link-icons button {
    position: static !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    margin: 0 !important;
    color: #d2cec6 !important;
    background: transparent !important;
    white-space: nowrap !important;
}

body.type-detail .p-info-wrapper .link-icons a:hover,
body.type-detail .p-info-wrapper .link-icons button:hover {
    color: #e3b341 !important;
}

/* Ensure the parameter panel owns its row. */
body.type-detail .p-param-block,
body.type-detail .detail-parameters-wrapper,
body.type-detail table.detail-parameters.second {
    clear: both !important;
}

/* Some STEP builds keep link-icons before/inside the param area.
   Force it visually after the table. */
body.type-detail .p-param-block {
    display: flex !important;
    flex-direction: column !important;
}

body.type-detail .p-param-block .detail-parameters-wrapper,
body.type-detail .p-param-block table.detail-parameters.second {
    order: 1 !important;
}

body.type-detail .p-param-block .link-icons {
    order: 2 !important;
}

/* If link-icons is a sibling of p-param-block, keep space under params. */
body.type-detail .p-param-block + .link-icons {
    margin-top: 14px !important;
}

@media (max-width: 767px) {
    body.type-detail .p-info-wrapper .link-icons {
        gap: 12px !important;
        padding-top: 10px !important;
    }
}

/* =========================================================
   89CARDS — PREMIUM COLLECTOR DATA PANEL
   Version: 1.6.8
   Main product identity block — modern 2-column system.
   ========================================================= */

/* Main parameter container */
body.type-detail .p-param-block,
body.type-detail .detail-parameters-wrapper {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
}

/* Rebuild STEP parameter table as a premium collector panel */
body.type-detail table.detail-parameters.second {
    display: block !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(227,179,65,.24) !important;
    border-top: 3px solid #e3b341 !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(227,179,65,.07), transparent 36%),
        #0b0e11 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
}

body.type-detail table.detail-parameters.second tbody {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
}

/* Every property is a small collector card */
body.type-detail table.detail-parameters.second tr {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 86px !important;
    padding: 17px 20px 16px !important;
    background: rgba(255,255,255,.012) !important;
    border-right: 1px solid rgba(227,179,65,.12) !important;
    border-bottom: 1px solid rgba(227,179,65,.12) !important;
    overflow: hidden !important;
}

/* default two-column border rhythm */
body.type-detail table.detail-parameters.second tr:nth-child(2n) {
    border-right: 0 !important;
}

body.type-detail table.detail-parameters.second th,
body.type-detail table.detail-parameters.second td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

body.type-detail table.detail-parameters.second th {
    margin-bottom: 8px !important;
    color: #e3b341 !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

body.type-detail table.detail-parameters.second td {
    color: #f5f2ea !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: .005em !important;
}

/* subtle gold marker in every important cell */
body.type-detail table.detail-parameters.second tr.cards-key-param::before {
    content: "";
    position: absolute !important;
    left: 20px !important;
    top: 0 !important;
    width: 28px !important;
    height: 2px !important;
    background: #e3b341 !important;
}

/* Hráč = main identity of the card */
body.type-detail table.detail-parameters.second tr[data-cards-param="hráč"],
body.type-detail table.detail-parameters.second tr[data-cards-param="hrac"] {
    grid-column: 1 / -1 !important;
    min-height: 98px !important;
    background:
        linear-gradient(90deg, rgba(227,179,65,.12), rgba(227,179,65,.025) 55%, transparent),
        #0f1216 !important;
    border-right: 0 !important;
}

body.type-detail table.detail-parameters.second tr[data-cards-param="hráč"] th,
body.type-detail table.detail-parameters.second tr[data-cards-param="hrac"] th {
    color: #b9a36e !important;
}

body.type-detail table.detail-parameters.second tr[data-cards-param="hráč"] td,
body.type-detail table.detail-parameters.second tr[data-cards-param="hrac"] td {
    color: #e3b341 !important;
    font-size: 23px !important;
    line-height: 1.05 !important;
    letter-spacing: -.015em !important;
}

/* Set usually has the longest value — give it full width */
body.type-detail table.detail-parameters.second tr[data-cards-param="set"] {
    grid-column: 1 / -1 !important;
    min-height: 94px !important;
    border-right: 0 !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025), transparent),
        #0d1014 !important;
}

body.type-detail table.detail-parameters.second tr[data-cards-param="set"] td {
    font-size: 18px !important;
    line-height: 1.2 !important;
}

/* Card number + limit are collectible highlights */
body.type-detail table.detail-parameters.second tr[data-cards-param="číslo karty"] td,
body.type-detail table.detail-parameters.second tr[data-cards-param="cislo karty"] td,
body.type-detail table.detail-parameters.second tr[data-cards-param="limit"] td {
    color: #e3b341 !important;
    font-size: 20px !important;
}

/* Manufacturer and club slightly stronger than generic metadata */
body.type-detail table.detail-parameters.second tr[data-cards-param="výrobce"] td,
body.type-detail table.detail-parameters.second tr[data-cards-param="vyrobce"] td,
body.type-detail table.detail-parameters.second tr[data-cards-param="klub"] td {
    font-size: 18px !important;
}

/* Category = supporting metadata, not primary collector identity */
body.type-detail table.detail-parameters.second tr.cards-category-param {
    background: #0b0d10 !important;
}

body.type-detail table.detail-parameters.second tr.cards-category-param th {
    color: #817b72 !important;
}

body.type-detail table.detail-parameters.second tr.cards-category-param td {
    color: #b9b4ac !important;
    font-size: 14px !important;
}

/* Make the last visible grid row clean */
body.type-detail table.detail-parameters.second tr:last-child,
body.type-detail table.detail-parameters.second tr:nth-last-child(2):nth-child(odd) {
    border-bottom-color: transparent !important;
}

/* Tisk / Zeptat se sit cleanly below the panel */
body.type-detail .p-info-wrapper .link-icons,
body.type-detail .p-param-block .link-icons {
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    background: transparent !important;
}

body.type-detail .p-info-wrapper .link-icons a,
body.type-detail .p-param-block .link-icons a {
    color: #aaa59c !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body.type-detail .p-info-wrapper .link-icons a:hover,
body.type-detail .p-param-block .link-icons a:hover {
    color: #e3b341 !important;
}

/* desktop product info can breathe a little more */
@media (min-width: 1200px) {
    body.type-detail .p-detail-inner {
        grid-template-columns: minmax(470px, 1.05fr) minmax(430px, .95fr) !important;
        gap: 64px !important;
    }
}

@media (max-width: 767px) {
    body.type-detail table.detail-parameters.second tbody {
        grid-template-columns: 1fr !important;
    }

    body.type-detail table.detail-parameters.second tr,
    body.type-detail table.detail-parameters.second tr:nth-child(2n),
    body.type-detail table.detail-parameters.second tr[data-cards-param="hráč"],
    body.type-detail table.detail-parameters.second tr[data-cards-param="hrac"],
    body.type-detail table.detail-parameters.second tr[data-cards-param="set"] {
        grid-column: 1 !important;
        border-right: 0 !important;
    }

    body.type-detail table.detail-parameters.second tr[data-cards-param="hráč"] td,
    body.type-detail table.detail-parameters.second tr[data-cards-param="hrac"] td {
        font-size: 21px !important;
    }
}

/* =========================================================
   89CARDS — DETAIL WIDTH + CART COUNT ONLY
   Version: 1.6.8.2
   Intentionally touches only:
   1) product-detail right column width/spacing
   2) native Shoptet header cart count <i>
   ========================================================= */

/* ---------- PRODUCT DETAIL: WIDER DATA COLUMN ---------- */

@media (min-width: 1200px) {
    body.type-detail .p-detail {
        width: 100% !important;
        max-width: 1260px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.type-detail .p-detail-inner {
        width: 100% !important;
        max-width: 1260px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: minmax(520px, 0.92fr) minmax(560px, 1.08fr) !important;
        gap: 28px !important;
        align-items: start !important;
    }

    /* Keep the already working image crop from 1.7.1. */
    body.type-detail .p-detail-inner > .p-image-wrapper,
    body.type-detail .p-image-wrapper {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 !important;
        justify-self: end !important;
    }

    /* Expand the information column toward the image and to the right,
       but only inside the normal content width. */
    body.type-detail .p-detail-inner > .p-data-wrapper,
    body.type-detail .p-data-wrapper {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-self: stretch !important;
    }

    body.type-detail .p-data-wrapper .p-info-wrapper,
    body.type-detail .p-data-wrapper .p-param-block,
    body.type-detail .p-data-wrapper .detail-parameters-wrapper,
    body.type-detail .p-data-wrapper table.detail-parameters.second {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Slightly narrower desktops: still use more width, but keep two safe columns. */
@media (min-width: 992px) and (max-width: 1199px) {
    body.type-detail .p-detail,
    body.type-detail .p-detail-inner {
        width: 100% !important;
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.type-detail .p-detail-inner {
        grid-template-columns: minmax(430px, .96fr) minmax(430px, 1.04fr) !important;
        gap: 26px !important;
    }
}

/* ---------- CART COUNT: STYLE THE REAL SHOPTET <i> ONLY ---------- */

/* Do NOT style a.cart-count itself. This is only the number element
   visible in the supplied DOM: <i data-testid="headerCartCount">1</i>. */
#header .navigation-buttons a[data-target="cart"] > i[data-testid="headerCartCount"],
#header a.cart-count > i[data-testid="headerCartCount"],
#header i[data-testid="headerCartCount"] {
    position: absolute !important;
    top: 12px !important;
    right: 11px !important;
    left: auto !important;
    bottom: auto !important;

    width: 19px !important;
    min-width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    padding: 0 4px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #e3b341 !important;
    color: #090b0d !important;
    border: 2px solid #090b0d !important;
    border-radius: 999px !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 900 !important;

    box-shadow:
        0 0 0 1px rgba(227,179,65,.50),
        0 3px 8px rgba(0,0,0,.35) !important;

    z-index: 10 !important;
}

/* Ensure the cart link is just the positioning context, nothing more. */
#header .navigation-buttons a[data-target="cart"],
#header a.cart-count {
    position: relative !important;
}
@media (max-width: 767px) {

    .carousel-inner .item img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

}
/* =========================================================
   89CARDS – ZLATÉ TLAČÍTKO DO KOŠÍKU VE VÝPISU PRODUKTŮ
   ========================================================= */

.products-block .product .p-tools .btn.btn-cart,
.products-block .product .p-tools button.btn-cart,
.products-block .product .p-tools .add-to-cart-button {
    background: #e3b341 !important;
    background-color: #e3b341 !important;
    color: #050708 !important;

    border: 2px solid #e3b341 !important;
    box-shadow: none !important;

    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .7px !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}

/* HOVER */
.products-block .product .p-tools .btn.btn-cart:hover,
.products-block .product .p-tools button.btn-cart:hover,
.products-block .product .p-tools .add-to-cart-button:hover {
    background: #f1c550 !important;
    background-color: #f1c550 !important;
    border-color: #f1c550 !important;
    color: #050708 !important;
}

/* =========================================================
   89CARDS — MOBILE HOMEPAGE CARD + CART CHECKOUT FIX
   Version: 1.6.8.3
   ========================================================= */

/* ---------- HOMEPAGE PRODUCT CARD: FULL WIDTH ON MOBILE ---------- */
@media (max-width: 767px) {
    body.type-index .products-block,
    body.type-index #products.products-block,
    body.type-index .homepage-tabs-wrapper .products-block,
    body.type-index .tab-content .products-block {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
        gap: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.type-index .products-block > .product,
    body.type-index #products.products-block > .product,
    body.type-index .products-block .product {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.type-index .products-block .product > .p,
    body.type-index .products-block .product .p,
    body.type-index .products-block .product .p-in,
    body.type-index .products-block .product .p-bottom,
    body.type-index .products-block .product .p-tools {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Keep the product image wide enough to match the card. */
    body.type-index .products-block .product > .p > a.image,
    body.type-index .products-block .product a.image {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Gold cart button, without influencing the card width. */
    body.type-index .products-block .product .p-tools .btn.btn-cart,
    body.type-index .products-block .product .p-tools button.btn-cart,
    body.type-index .products-block .product .p-tools .add-to-cart-button {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 13px 22px !important;
        background: var(--cards-gold) !important;
        border-color: var(--cards-gold) !important;
        color: #090b0d !important;
    }
}

/* ---------- CART / CHECKOUT STEP NAVIGATION ---------- */

/* STEP renders the label itself inside span; override the native white surface. */
ol.cart-header,
.cart-header,
.checkout-header {
    background: transparent !important;
    border-color: var(--cards-border) !important;
}

ol.cart-header li,
.cart-header li,
.checkout-header li,
ol.cart-header li a,
.cart-header li a,
.checkout-header li a,
ol.cart-header li strong,
.cart-header li strong,
.checkout-header li strong {
    background: transparent !important;
    color: var(--cards-text) !important;
    border-color: var(--cards-border) !important;
}

ol.cart-header li a span,
ol.cart-header li strong span,
.cart-header li a span,
.cart-header li strong span,
.checkout-header li a span,
.checkout-header li strong span {
    background: var(--cards-panel) !important;
    background-color: var(--cards-panel) !important;
    color: var(--cards-white) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
}

/* Current checkout step = gold, never white. */
ol.cart-header li.active a span,
ol.cart-header li.active strong span,
.cart-header li.active a span,
.cart-header li.active strong span,
.checkout-header li.active a span,
.checkout-header li.active strong span,
ol.cart-header li.step.active a span,
ol.cart-header li.step.active strong span {
    background: var(--cards-gold) !important;
    background-color: var(--cards-gold) !important;
    color: #090b0d !important;
    border-color: var(--cards-gold) !important;
}

/* Completed / clickable steps keep dark surface with gold accent. */
ol.cart-header li.completed a span,
.cart-header li.completed a span,
.checkout-header li.completed a span,
ol.cart-header li a:hover span,
.cart-header li a:hover span,
.checkout-header li a:hover span {
    background: #11151a !important;
    color: var(--cards-gold) !important;
    border-color: rgba(227,179,65,.35) !important;
}

/* ---------- CART + CHECKOUT PANELS ---------- */
body.type-cart .cart-inner,
body.type-cart #cart-wrapper,
body.type-cart .cart-wrapper,
body.type-cart .cart-table,
body.type-cart .cart-table tbody,
body.type-cart .cart-table tr,
body.type-cart .cart-summary,
body.type-cart .checkout-content,
body.in-kosik .cart-inner,
body.in-kosik #cart-wrapper,
body.in-kosik .cart-wrapper,
body.in-kosik .cart-table,
body.in-kosik .cart-table tbody,
body.in-kosik .cart-table tr,
body.in-kosik .cart-summary,
body.in-kosik .checkout-content {
    background: var(--cards-bg) !important;
    background-color: var(--cards-bg) !important;
    color: var(--cards-text) !important;
}

body.type-cart .cart-table td,
body.type-cart .cart-table th,
body.in-kosik .cart-table td,
body.in-kosik .cart-table th {
    background-color: transparent !important;
    color: var(--cards-text) !important;
    border-color: var(--cards-border) !important;
}

body.type-cart .cart-table strong,
body.in-kosik .cart-table strong,
body.type-cart .cart-summary strong,
body.in-kosik .cart-summary strong {
    color: var(--cards-white) !important;
}

body.type-cart .cart-table .price,
body.in-kosik .cart-table .price,
body.type-cart .cart-summary .price,
body.in-kosik .cart-summary .price,
body.type-cart .cart-total,
body.in-kosik .cart-total {
    color: var(--cards-gold) !important;
}

/* =========================================================
   89CARDS 1.6.8.4 - FOOTER / PRVNI-KLIK.CZ
   ========================================================= */

#footer .footer-bottom .cards-author {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: #8f8b82 !important;
    font-size: 11px !important;
    line-height: 1.4;
    letter-spacing: .04em;
    white-space: nowrap;
}

#footer .footer-bottom .cards-author a {
    color: var(--cards-gold, #e3b341) !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: color .18s ease, opacity .18s ease;
}

#footer .footer-bottom .cards-author a::after {
    content: " \2197";
}

#footer .footer-bottom .cards-author a:hover {
    color: #f2c654 !important;
    opacity: 1;
}

@media (max-width: 767px) {
    #footer .footer-bottom .cards-author {
        display: flex !important;
        justify-content: center;
        width: 100%;
        margin-top: 8px;
        white-space: normal;
        text-align: center;
    }
}

/* =========================================================
   89CARDS — MOBILE PRODUCT DETAIL ORDER
   Version: 1.6.8.5
   Product gallery first on mobile.
   ========================================================= */

@media (max-width: 767px) {
    body.type-detail .p-detail-inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    body.type-detail .p-detail-inner > .p-image-wrapper,
    body.type-detail .p-image-wrapper {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 22px 0 !important;
    }

    body.type-detail .p-detail-inner > .p-data-wrapper,
    body.type-detail .p-data-wrapper {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Keep the gallery visually first and compact on mobile. */
    body.type-detail .p-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #090b0d !important;
    }

    body.type-detail .p-image #wrap,
    body.type-detail .p-image > a,
    body.type-detail .p-image .p-main-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        background: #090b0d !important;
        overflow: hidden !important;
    }

    body.type-detail .p-image img,
    body.type-detail .p-image img.p-main-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
        background: #090b0d !important;
    }

    body.type-detail .p-thumbnails,
    body.type-detail .p-thumbnails-inner {
        width: 100% !important;
        margin-top: 10px !important;
    }
}


/* =========================================================
   89CARDS — MOBILE PRODUCT PHOTO CROP + QUESTION MODAL
   Version: 1.6.8.6
   ========================================================= */

/* ---------- MOBILE PRODUCT PHOTO: HIDE SHOPTET WHITE SIDE PADDING ---------- */
@media (max-width: 767px) {
    body.type-detail .p-image-wrapper,
    body.type-detail .p-image {
        background: #090b0d !important;
    }

    /* Shoptet creates a landscape derivative with white side padding.
       Use a portrait viewport and crop the side padding instead of showing it. */
    body.type-detail .p-image {
        width: 100% !important;
        aspect-ratio: 10 / 13 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }

    body.type-detail .p-image #wrap,
    body.type-detail .p-image > a,
    body.type-detail .p-image .p-main-image {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: #090b0d !important;
    }

    body.type-detail .p-image img,
    body.type-detail .p-image img.p-main-image {
        display: block !important;
        width: auto !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        object-fit: cover !important;
        object-position: center center !important;
        background: #090b0d !important;
    }

    body.type-detail .p-thumbnails,
    body.type-detail .p-thumbnails-inner {
        background: #090b0d !important;
    }
}

/* ---------- PRODUCT QUESTION / COLORBOX MODAL ---------- */
/* Shoptet's "Zeptat se" popup is rendered through Colorbox on some STEP builds. */
#colorbox,
#cboxWrapper,
#cboxContent,
#cboxLoadedContent,
.colorbox-html-content,
#colorbox .content-window,
#colorbox .content-window-in,
#colorbox form,
#colorbox .form-group,
#colorbox .form-control-wrapper {
    background: #090b0d !important;
    background-color: #090b0d !important;
    color: #d2cec6 !important;
}

#colorbox,
#cboxWrapper,
#cboxContent {
    border-color: rgba(227,179,65,.35) !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.72) !important;
}

#cboxLoadedContent {
    border: 1px solid rgba(227,179,65,.22) !important;
}

#colorbox h1,
#colorbox h2,
#colorbox h3,
#colorbox h4,
#colorbox strong,
.colorbox-html-content h1,
.colorbox-html-content h2,
.colorbox-html-content h3 {
    color: #f5f2ea !important;
}

#colorbox label,
#colorbox p,
#colorbox span,
#colorbox .form-group,
.colorbox-html-content label,
.colorbox-html-content p,
.colorbox-html-content span {
    color: #d2cec6 !important;
}

#colorbox a,
.colorbox-html-content a {
    color: #e3b341 !important;
}

#colorbox input[type="text"],
#colorbox input[type="email"],
#colorbox input[type="tel"],
#colorbox textarea,
.colorbox-html-content input[type="text"],
.colorbox-html-content input[type="email"],
.colorbox-html-content input[type="tel"],
.colorbox-html-content textarea {
    width: 100% !important;
    background: #11151a !important;
    background-color: #11151a !important;
    color: #f5f2ea !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: none !important;
}

#colorbox input:focus,
#colorbox textarea:focus,
.colorbox-html-content input:focus,
.colorbox-html-content textarea:focus {
    border-color: #e3b341 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #e3b341 !important;
}

#colorbox .btn,
#colorbox button[type="submit"],
#colorbox input[type="submit"],
.colorbox-html-content .btn,
.colorbox-html-content button[type="submit"],
.colorbox-html-content input[type="submit"] {
    background: #e3b341 !important;
    background-color: #e3b341 !important;
    border-color: #e3b341 !important;
    color: #090b0d !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

#cboxClose {
    background: transparent !important;
    color: #e3b341 !important;
    border: 0 !important;
    opacity: 1 !important;
}

/* Colorbox close icon is often a sprite/pseudo-element; force a visible gold X. */
#cboxClose::before,
#cboxClose::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 28px !important;
    height: 2px !important;
    background: #e3b341 !important;
    transform-origin: center !important;
}

#cboxClose::before { transform: translate(-50%,-50%) rotate(45deg) !important; }
#cboxClose::after  { transform: translate(-50%,-50%) rotate(-45deg) !important; }

@media (max-width: 767px) {
    #colorbox,
    #cboxWrapper,
    #cboxContent {
        max-width: calc(100vw - 20px) !important;
    }

    #cboxLoadedContent,
    .colorbox-html-content {
        padding: 22px !important;
        box-sizing: border-box !important;
    }

    #colorbox h2,
    .colorbox-html-content h2 {
        font-size: 34px !important;
        line-height: 1.05 !important;
        margin-bottom: 22px !important;
    }

    #cboxClose {
        width: 44px !important;
        height: 44px !important;
        right: 8px !important;
        top: 8px !important;
    }
}

/* =========================================================
   89CARDS — MOBILE DETAIL PHOTO FINAL CROP
   Version: 1.6.8.7
   The Shoptet detail derivative contains white side padding.
   Crop it slightly harder on phones while keeping the gallery first.
   ========================================================= */

@media (max-width: 767px) {
    body.type-detail .p-image-wrapper {
        overflow: hidden !important;
        background: #090b0d !important;
    }

    body.type-detail .p-image {
        width: 100% !important;
        aspect-ratio: 10 / 13 !important;
        overflow: hidden !important;
        background: #090b0d !important;
    }

    body.type-detail .p-image #wrap,
    body.type-detail .p-image > a,
    body.type-detail .p-image .p-main-image {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: #090b0d !important;
    }

    body.type-detail .p-image img,
    body.type-detail .p-image img.p-main-image {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: translate(-50%, -50%) scale(1.16) !important;
        transform-origin: center center !important;
        background: #090b0d !important;
    }

    body.type-detail .p-thumbnails,
    body.type-detail .p-thumbnails-inner,
    body.type-detail .p-thumbnail,
    body.type-detail .p-thumbnail a {
        background: #090b0d !important;
    }
}