/* OK-IT Aimeos Shop Stylesheet
   Overrides the default Aimeos theme with the OK-IT design system.
   Must be loaded after Aimeos' own CSS.
*/

/* ============================================
   AIMEOS BRAND VARIABLES
   ============================================ */

/* ── OverlayScrollbars Brand Styling ────────────────────────────────── */
.os-scrollbar-handle {
    background: var(--okit-grey-400) !important;
    border-radius: 99px !important;
    opacity: 0.4 !important;
}
.os-scrollbar:hover .os-scrollbar-handle {
    opacity: 0.7 !important;
    background: var(--okit-grey-700) !important;
}
.os-scrollbar {
    --os-size: 6px !important;
    --os-padding-perpendicular: 0px !important;
    --os-padding-axis: 2px !important;
}

.aimeos,
.aimeos.catalog-detail,
.aimeos.basket-mini {
    --ai-warning: var(--okit-accent);
    --ai-warning-light: rgba(var(--okit-accent-rgb), 0.15);
    --ai-product-image-ratio: 16 / 9;
}

/* Aimeos-Theme setzt 'Roboto Condensed' hardcoded — mit Inter übersteuern */
.aimeos,
.aimeos * {
    font-family: var(--okit-font-body) !important;
}

.aimeos h2,
.container-xxl h2.header {
    text-transform: unset !important;
}

/* ============================================
   GLOBAL SHOP CONTAINER
   ============================================ */

.container:has(.aimeos) {
    max-width: 100%;
}

/* ============================================
   NAVBAR SEARCH
   ============================================ */

.site-navbar__search {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0.4rem 0;
}

.site-navbar__search-input {
    width: 200px;
    padding: 0.35rem 0.75rem;
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-sm);
    background: var(--okit-grey-900);
    color: var(--okit-grey-200);
    border: 1px solid var(--okit-grey-700);
    border-right: none;
    border-radius: var(--okit-border-radius) 0 0 var(--okit-border-radius);
    outline: none;
    transition: border-color var(--okit-transition), background var(--okit-transition);
}

.site-navbar__search-input::placeholder {
    color: var(--okit-grey-400);
}

.site-navbar__search-input:focus {
    border-color: var(--okit-accent);
    background: var(--okit-grey-700);
}

.site-navbar__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    background: var(--okit-accent);
    color: var(--okit-black);
    border: 1px solid var(--okit-accent);
    border-radius: 0 var(--okit-border-radius) var(--okit-border-radius) 0;
    cursor: pointer;
    transition: background var(--okit-transition);
}

.site-navbar__search-btn:hover {
    background: var(--okit-accent-dark);
    border-color: var(--okit-accent-dark);
}

/* ============================================
   HIDDEN ELEMENTS
   ============================================ */

/* View type switcher (grid/list toggle) */
.aimeos .type-item.type-list,
.aimeos .type-item.type-grid,
.aimeos.catalog-list .catalog-list-type,
.aimeos .catalog-list-type {
    display: none !important;
}

/* Breadcrumb / stage */
.aimeos .catalog-stage-breadcrumb,
.aimeos.catalog-stage {
    display: none !important;
}

/* Product badges */
.aimeos.catalog-list .product.row .list-column:first-child .badges,
.aimeos.catalog-detail .badges {
    display: none !important;
}

/* Social sharing — .catalog-social ist sichtbar (okit-social-share Template), nur alte Einzelbuttons ausblenden */
.aimeos.catalog-detail .catalog-actions .social-button {
    display: none !important;
}

/* Detail navigator */
.aimeos .catalog-detail-navigator {
    display: none !important;
}

/* product-info div in list */
.aimeos.catalog-list .product .product-info {
    display: none !important;
}

/* Upper catalog-list-head (redundant header) */
.aimeos.catalog-list .catalog-list-head {
    display: none !important;
}

/* Sort label text */
.aimeos .sort > span {
    display: none !important;
}

/* Old filter frame (legacy Aimeos ID) */
#c7 {
    display: none !important;
}

/* Category tree "show all" button */
.aimeos .catalog-filter-tree .show-all {
    display: none !important;
}

/* Category "menu" toggle link */
.aimeos .catalog-filter-tree > a.menu {
    display: none !important;
}

/* Filter subparts: only tree is visible */
.aimeos.catalog-filter .catalog-filter-search,
.aimeos.catalog-filter .catalog-filter-price,
.aimeos.catalog-filter .catalog-filter-supplier,
.aimeos.catalog-filter .catalog-filter-attribute,
.aimeos .catalog-filter-search,
.aimeos .catalog-filter-price,
.aimeos .catalog-filter-supplier,
.aimeos .catalog-filter-attribute {
    display: none !important;
}

/* Search form inside filter sidebar frame */
.container:has(.aimeos.catalog-filter) > div:first-child .catalog-filter-search,
.container:has(.aimeos.catalog-filter) > div:first-child form {
    display: none !important;
}

/* Detail attribute selector */
.aimeos.catalog-detail .catalog-detail-basket-attribute {
    display: none;
}

.container-xxl {
    max-width: unset !important;
}

/* Second catalog-list-head (empty duplicate) */
.aimeos.catalog-list .container-xxl > div.catalog-list-head + div.catalog-list-head {
    display: none !important;
}

/* ============================================
   GLOBAL SHOP LAYOUT SAFETY
   On all shop pages: site-main is a fixed-height flex row.
   overflow: hidden keeps sidebars stationary.
   The .container scrolls internally — not the whole page.
   ============================================ */

.site-main:has(.aimeos.catalog-filter),
.site-main:has(.aimeos.catalog-detail),
.site-main:has(.aimeos.basket-standard),
.site-main:has(.aimeos.checkout-standard),
.site-main:has(.aimeos.checkout-confirm),
.site-main:has(.aimeos.account-history),
.site-main:has(.aimeos.account-profile),
.site-main:has(.aimeos.account-watch),
.site-main:has(.aimeos.account-favorite),
.site-main:has(.aimeos.account-download) {
    overflow: hidden !important;
}

.site-main:has(.aimeos.catalog-detail) > .container,
.site-main:has(.aimeos.basket-standard) > .container,
.site-main:has(.aimeos.checkout-standard) > .container,
.site-main:has(.aimeos.checkout-confirm) > .container,
.site-main:has(.aimeos.account-history) > .container,
.site-main:has(.aimeos.account-profile) > .container,
.site-main:has(.aimeos.account-watch) > .container,
.site-main:has(.aimeos.account-favorite) > .container,
.site-main:has(.aimeos.account-download) > .container {
    overflow: hidden !important;
}

.site-main:has(.aimeos.catalog-filter) > .container {
    overflow: hidden !important;
}

.site-main:has(.aimeos.account-basket) > .container,
.site-main:has(.aimeos.account-basket) > .container .frame-type-list {
    width: 100% !important;
}

.site-main .form-control:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--okit-accent) !important;
    border-color: transparent !important;
}

/* ============================================
   PAGE LAYOUT — CATALOG FILTER PAGES ONLY
   Scoped with :has() so the detail page is not affected.
   ============================================ */

.site-main:has(.aimeos.catalog-filter) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
    height: 100vh !important;
}

.site-main:has(.aimeos.catalog-filter) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Session panel: right column, rendered outside .container */
.site-main:has(.aimeos.catalog-filter) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}

/* ============================================
   CATALOG FILTER SIDEBAR
   ============================================ */

/* Container: flex row — catalog-filter is outside .container in .site-main,
   so we target the actual content classes that ARE inside .container */
.container:has(.aimeos.catalog-list),
.container:has(.aimeos.catalog-detail),
.container:has(.aimeos.basket-standard),
.container:has(.aimeos.checkout-standard),
.container:has(.aimeos.checkout-confirm),
.container:has(.aimeos.account-history),
.container:has(.aimeos.account-profile),
.container:has(.aimeos.account-basket),
.container:has(.aimeos.account-watch),
.container:has(.aimeos.account-favorite),
.container:has(.aimeos.account-download),
.container:has(.frame-type-felogin_login),
.container:has(.femanager_new) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    /*max-width: 100% !important;
    padding: 0 !important; */
    height: 100% !important;
}

/* Content frame: grows to fill remaining space */
.container:has(.aimeos.catalog-list) > div:has(.aimeos.catalog-list),
.container:has(.aimeos.catalog-detail) > div:has(.aimeos.catalog-detail),
.container:has(.aimeos.basket-standard) > div:has(.aimeos.basket-standard),
.container:has(.aimeos.checkout-standard) > div:has(.aimeos.checkout-standard),
.container:has(.aimeos.checkout-confirm) > div:has(.aimeos.checkout-confirm),
.container:has(.aimeos.account-history) > div:has(.aimeos.account-history),
.container:has(.aimeos.account-profile) > div:has(.aimeos.account-profile),
.container:has(.aimeos.account-watch) > div:has(.aimeos.account-watch),
.container:has(.aimeos.account-favorite) > div:has(.aimeos.account-favorite),
.container:has(.aimeos.account-download) > div:has(.aimeos.account-download),
.container:has(.frame-type-felogin_login) > div:has(.frame-type-felogin_login),
.container:has(.femanager_new) > div:has(.femanager_new) {
    flex: 1 !important;
    /* min-width: 0 !important; */
    height: 100% !important;
    width: 100% !important;
}


/* ============================================
   CATALOG DETAIL — same layout as catalog
   ============================================ */

.site-main:has(.aimeos.catalog-detail) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.catalog-detail) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Session panel: right column, rendered outside .container */
.site-main:has(.aimeos.catalog-detail) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


/* ============================================
   BASKET, CHECKOUT, ACCOUNT — same layout
   ============================================ */

.site-main:has(.aimeos.basket-standard) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.basket-standard) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.site-main:has(.aimeos.basket-standard) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


.site-main:has(.aimeos.checkout-standard) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.checkout-standard) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.site-main:has(.aimeos.checkout-standard) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


.site-main:has(.aimeos.checkout-confirm) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.checkout-confirm) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.site-main:has(.aimeos.checkout-confirm) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


.site-main:has(.aimeos.account-history) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.account-history) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.site-main:has(.aimeos.account-history) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


.site-main:has(.aimeos.account-profile) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.account-profile) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.site-main:has(.aimeos.account-profile) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


.site-main:has(.aimeos.account-watch) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.account-watch) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.site-main:has(.aimeos.account-watch) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


.site-main:has(.aimeos.account-favorite) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.account-favorite) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.site-main:has(.aimeos.account-favorite) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


.site-main:has(.aimeos.account-download) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.site-main:has(.aimeos.account-download) > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.site-main:has(.aimeos.account-download) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}


/* catalog-filter section: always visible */
.aimeos.catalog-filter,
.aimeos .catalog-filter,
div.section.aimeos.catalog-filter {
    display: block !important;
    visibility: visible !important;
    height: 100% !important;
    min-height: 100% !important;
    flex-shrink: 0 !important;
}

.aimeos.catalog-filter .container-xxl,
.aimeos.catalog-filter .container-xxl form {
    height: 100% !important;
}

/* catalog-filter-tree: sidebar background */
.aimeos .catalog-filter-tree {
    border-radius: 0 !important;
    min-height: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent;
    border-right: 2px solid var(--okit-grey-200) !important;
    box-shadow: 4px 0 4px rgba(0, 0, 0, 0.06) !important;
}

.aimeos.catalog-filter .container-xxl {
    padding-right: 0 !important;
}

.aimeos .catalog-filter-tree:has(.account-subnav--sidebar),
.aimeos .catalog-filter-tree:has(.auth-tabs--sidebar) {
    display: flex !important;
    flex-direction: column !important;
}

/* catalog-list: flex 1, no shrink */
.aimeos.catalog-list {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* ============================================
   CATALOG TREE (alternative to catalog-filter)
   ============================================ */

.container:has(.aimeos.catalog-tree) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: var(--okit-space-lg) !important;
    max-width: 90% !important;
}

.container:has(.aimeos.catalog-tree) > div:first-child {
    width: 200px !important;
    min-width: 200px !important;
    flex-shrink: 0 !important;
}

.container:has(.aimeos.catalog-tree) > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
}

.aimeos.catalog-tree,
section.aimeos.catalog-tree,
div.section.aimeos.catalog-tree {
    display: block !important;
    visibility: visible !important;
}

/* ============================================
   CATEGORY TREE STYLING
   (applies to both catalog-filter-tree and catalog-tree)
   ============================================ */

/* Heading */
.aimeos .catalog-filter-tree h2 {
    font-size: var(--okit-text-xs) !important;
    font-weight: 500 !important;
    /* text-transform: uppercase !important; */
    letter-spacing: 0.08em !important;
    color: var(--okit-grey-400) !important;
    margin-bottom: var(--okit-space-sm) !important;
    padding-bottom: var(--okit-space-xs) !important;
    border-bottom: 1px solid var(--okit-grey-200) !important;
}

/* Lists */
.aimeos .catalog-filter-tree ul,
.aimeos .catalog-filter-tree li,
.aimeos.catalog-tree .catalog-tree-list,
.aimeos.catalog-tree li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tree container: vertical column */
.aimeos .catalog-filter-tree .list-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.aimeos .catalog-filter-tree .list-container.level-0 {
    padding-top: var(--okit-space-sm) !important;
}

/* Cat items: full width */
.aimeos .catalog-filter-tree .cat-item,
.aimeos.catalog-tree .cat-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Item links wrapper */
.aimeos .catalog-filter-tree .cat-item .item-links {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Tree links */
.aimeos .catalog-filter-tree .cat-item .cat-link,
.aimeos .catalog-filter-tree .cat-item a,
.aimeos.catalog-tree .cat-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--okit-space-sm) !important;
    width: 100% !important;
    padding: 0.4rem 0.6rem !important;
    font-size: var(--okit-text-base) !important;
    color: var(--okit-grey-700) !important;
    text-decoration: none !important;
    border-radius: var(--okit-border-radius) !important;
    transition: color var(--okit-transition), background var(--okit-transition) !important;
}

.aimeos .catalog-filter-tree .cat-item .cat-link:hover,
.aimeos .catalog-filter-tree .cat-item a:hover,
.aimeos.catalog-tree .cat-item a:hover {
    color: var(--okit-black) !important;
    background: rgba(var(--okit-accent-rgb), 0.1) !important;
}

.aimeos .catalog-filter-tree .cat-item.active a,
.aimeos .catalog-filter-tree .cat-item.selected a,
.aimeos.catalog-tree .cat-item.active > a,
.aimeos.catalog-tree .cat-item.selected > a {
    color: var(--okit-accent-dark) !important;
    font-weight: 500 !important;
    background: rgba(var(--okit-accent-rgb), 0.1) !important;
}

.aimeos .catalog-filter-tree .item-links.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Count badge */
.aimeos .catalog-filter-tree .cat-count {
    font-size: var(--okit-text-xs) !important;
    color: var(--okit-grey-400) !important;
    font-family: var(--okit-font-mono) !important;
}

/* Sub-category indent */
.aimeos .catalog-filter-tree .cat-item ul,
.aimeos.catalog-tree .cat-item ul {
    padding-left: var(--okit-space-md) !important;
    margin-top: 2px !important;
}

/* ============================================
   SESSION PANELS (pinned / recently seen)
   ============================================ */
.catalog-session {
    padding: 0 !important;
    margin: 0 !important;
    width: 9vw !important;
    height: 100% !important;
    max-height: 100% !important;
    background: transparent !important;
    border-left: 2px solid var(--okit-grey-200) !important;
    box-shadow: -4px 0 8px rgba(0,0,0,0.06) !important;
}

.catalog-session .stock-list .stockitem .stocklevel {
    height: 12px !important;
    width: 12px !important;
}

.catalog-session .container-xxl {
    padding: var(--okit-space-md) !important;
    max-height: 100% !important;
    height: 100% !important;
}

.catalog-session .container-xxl h2.header-pinned,
.catalog-session .container-xxl h2.header-seen {
    max-height: 15%;
    height: 15%;
}

.catalog-session .section {
    overflow-y: hide !important;
}

.catalog-session .section .container-xxl ul.pinned-items,
.catalog-session .section .container-xxl ul.seen-items {
    max-height: 85% !important;
    height: 85% !important;
    overflow: hidden !important;
}

.catalog-session-pinned,
.catalog-session-seen {
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
    background: transparent !important;
    max-height: 50% !important;
    margin: 0 !important;
    height: 50% !important;
    overflow-y: hidden !important;
}

/* Section header — matches catalog-filter-tree h2 */
.catalog-session-pinned h2.header,
.catalog-session-seen h2.header {
    font-size: var(--okit-text-xs) !important;
    font-weight: 500 !important;
/*    text-transform: uppercase !important; */
    letter-spacing: 0.08em !important;
    color: var(--okit-grey-400) !important;
    text-align: left !important;
    margin-bottom: var(--okit-space-xs) !important;
    padding: var(--okit-space-xs) 0 !important;
    border-bottom: 1px solid var(--okit-grey-200) !important;
}

/* Item wrapper */
.catalog-session-seen li.seen-item,
.catalog-session-pinned li.pinned-item {
    display: block !important;
    margin-bottom: var(--okit-space-sm) !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--okit-grey-200) !important;
    overflow: hidden !important;
    background: var(--okit-white) !important;
    transition: box-shadow var(--okit-transition) !important;
}

.catalog-session-seen li.seen-item:hover,
.catalog-session-pinned li.pinned-item:hover {
    box-shadow: var(--okit-shadow-sm) !important;
}

/* Image: 16:9 */
.catalog-session-seen .media-item,
.catalog-session-pinned .media-item {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--okit-grey-100) !important;
    display: block !important;
}

/* Info area below image */
.catalog-session-seen .seen-item > a,
.catalog-session-pinned .pinned-item > a {
    display: block !important;
    text-decoration: none !important;
    padding: 4px 6px 5px !important;
}

/* Product name */
.catalog-session-seen .seen-items li.seen-item h2.name,
.catalog-session-pinned .pinned-items li.pinned-item h2.name {
    display: block !important;
    font-size: 1.0rem !important;
    font-weight: 400 !important;
    color: var(--okit-grey-700) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 0 2px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 0 !important;
}

/* Price + stock row */
.catalog-session-seen .item-footer,
.catalog-session-pinned .item-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin: 0 !important;
}

.catalog-session-seen .item-footer .stock-list,
.catalog-session-pinned .item-footer .stock-list {
    margin: 0 !important;
}

/* Price */
.catalog-session-seen .seen-items li.seen-item .price-list,
.catalog-session-pinned .pinned-items li.pinned-item .price-list {
    display: flex !important;
    font-size: 0.8rem !important;
    font-family: var(--okit-font-mono) !important;
    color: var(--okit-black) !important;
    font-weight: 500 !important;
    margin-right: var(--okit-space-md);
}

.catalog-session-seen .seen-items li.seen-item .price-item,
.catalog-session-pinned .pinned-items li.pinned-item .price-item {
    display: block !important;
    font-size: 1.0rem !important;
}

.catalog-session-seen .seen-items li.seen-item .price-item .value,
.catalog-session-pinned .pinned-items li.pinned-item .price-item .value {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

.catalog-session-seen .seen-items li.seen-item .price-item .quantity,
.catalog-session-pinned .pinned-items li.pinned-item .price-item .quantity {
    display: none !important;
}

/* Stock indicator dot in session bar */
.catalog-session-seen .stock-list,
.catalog-session-pinned .stock-list {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    flex-direction: row;
    justify-content: flex-end;
}

/* The dot itself via ::before on the stockitem */
.catalog-session-seen .stock-list .stockitem,
.catalog-session-pinned .stock-list .stockitem {
    border-radius: 50% !important;
    background: var(--okit-grey-200) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.catalog-session-seen .stock-list .stockitem.stock-high,
.catalog-session-seen .stock-list .stockitem.stock-unlimited,
.catalog-session-pinned .stock-list .stockitem.stock-high,
.catalog-session-pinned .stock-list .stockitem.stock-unlimited {
    background: var(--okit-accent-dark) !important;
}

.catalog-session-seen .stock-list .stockitem.stock-low,
.catalog-session-pinned .stock-list .stockitem.stock-low {
    background: #e07b00 !important;
}

.catalog-session-seen .stock-list .stockitem.stock-out,
.catalog-session-pinned .stock-list .stockitem.stock-out {
    background: #c0392b !important;
}

/* Delete button — pinned and seen */
.catalog-session-pinned .pinned-item,
.catalog-session-seen .seen-item {
    position: relative !important;
}

.catalog-session-pinned form,
.catalog-session-seen form {
    margin: 0 !important;
    padding: 0 !important;
}

.catalog-session-pinned .minibutton.delete,
.catalog-session-seen .minibutton.delete {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 22px !important;
    height: 22px !important;
    background: rgba(0,0,0,0.45) !important;
    border: none !important;
    border-radius: var(--okit-border-radius) !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 2 !important;
    opacity: 0 !important;
    transition: opacity var(--okit-transition), background var(--okit-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.catalog-session-pinned .minibutton.delete::before,
.catalog-session-seen .minibutton.delete::before {
    content: '' !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.catalog-session-pinned .minibutton.delete::after,
.catalog-session-seen .minibutton.delete::after {
    content: none !important;
}

.catalog-session-pinned .pinned-item:hover .minibutton.delete,
.catalog-session-seen .seen-item:hover .minibutton.delete {
    opacity: 1 !important;
}

.catalog-session-pinned .minibutton.delete:hover,
.catalog-session-seen .minibutton.delete:hover {
    background: rgba(0,0,0,0.65) !important;
}

/* ============================================
   CATALOG LIST — ITEM LIST LAYOUT
   ============================================ */

/* catalog-list-items: vertical stack */
.aimeos:not(.cms-page) .catalog-list-items:not(.swffy-slider),
.aimeos.catalog-list .catalog-list-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 12px 0 0 0 !important;
    margin: 0 !important;
}

.aimeos .catalog-list-items .stock-list .stocktext {
    display: flex !important;
    padding-left: 10px !important;
}

/* Wrapper divs inside the list: no extra spacing */
.aimeos.catalog-list .catalog-list-items > div {
    padding: 0 !important;
    height: auto !important;
    max-height: unset !important;
    overflow: unset !important;
    box-sizing: border-box !important;
}

/* ============================================
   PRODUCT ROW
   ============================================ */

.aimeos.catalog-list .product.row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    height: 120px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #c2c5c9 !important;
    border-radius: var(--okit-border-radius-md) !important;
    background: linear-gradient(
        160deg,
        #f7f8f9 0%,
        #eaecef 35%,
        #f2f3f5 55%,
        #e2e5e8 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -1px 0 rgba(0,0,0,0.06),
        0 1px 3px rgba(0,0,0,0.08) !important;
    transition: box-shadow var(--okit-transition), transform var(--okit-transition) !important;
}

.aimeos.catalog-list .product.row:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -1px 0 rgba(0,0,0,0.06),
        0 4px 14px rgba(0,0,0,0.14) !important;
    transform: translateY(-1px) !important;
}

/* Stretched link overlay (makes full row clickable) */
.aimeos.catalog-list .product.row .name::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
}

/* Action area stays on top of the stretched link */
.aimeos.catalog-list .product.row .addbasket,
.aimeos.catalog-list .product.row .offer-actions {
    display: flex !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: var(--okit-space-xs) !important;
}

/* ============================================
   PRODUCT ROW — IMAGE COLUMN
   ============================================ */

.aimeos.catalog-list .product.row .list-column:first-child {
    width: 213px !important;
    min-width: 213px !important;
    max-width: 213px !important;
    flex: 0 0 213px !important;
    height: 120px !important;
    padding: 0 !important;
    position: relative !important;
    background: rgba(255,255,255,0.6) !important;
    border-right: 1px solid #c2c5c9 !important;
    overflow: hidden !important;
}

/* media-list link: fill the image frame absolutely */
.aimeos.catalog-list .product.row .list-column:first-child a.media-list {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* figure and media-item: fill container */
.aimeos.catalog-list .product.row .list-column:first-child figure,
.aimeos.catalog-list .product.row .list-column:first-child .media-item {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Product image */
.aimeos.catalog-list .product.row .list-column:first-child img {
    width: 100% !important;
    height: 100% !important;
    max-width: 213px !important;
    max-height: 120px !important;
    object-fit: cover !important;
    image-orientation: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform var(--okit-transition-slow) !important;
}

.aimeos.catalog-list .product.row:hover .list-column:first-child img {
    transform: scale(1.03) !important;
}

/* ============================================
   PRODUCT ROW — INFO COLUMN
   ============================================ */

.aimeos.catalog-list .product.row .list-column:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 120px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: var(--okit-space-md) !important;
    padding: var(--okit-space-sm) var(--okit-space-md) !important;
}

/* Text area (name + description): grows to fill */
.aimeos.catalog-list .product.row .list-column:last-child > *:not(.offer):not(.price-list):not(.addbasket) {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 2px !important;
}

/* Product name */
.aimeos.catalog-list .product.row .list-column:last-child .name {
    font-size: var(--okit-text-base) !important;
    font-weight: 500 !important;
    color: var(--okit-black) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    margin-bottom: 2px !important;
    display: block !important;
}

.aimeos.catalog-list .product.row .list-column:last-child .name:hover {
    color: var(--okit-accent) !important;
}

/* Short description */
.aimeos.catalog-list .product.row .list-column:last-child .text-item {
    font-size: var(--okit-text-sm) !important;
    color: var(--okit-grey-700) !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Offer container: 3-row vertical layout */
.aimeos.catalog-list .product.row .list-column:last-child .offer {
    flex-shrink: 0 !important;
    min-width: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 2px !important;
}

/* Zeile 1: Preis */
.aimeos.catalog-list .product.row .offer {
    margin-top: 0.2rem !important;
}

/* Zeile 1: Preis */
.aimeos.catalog-list .product.row .offer-price {
    /* display: flex !important;
    justify-content: flex-end !important; */
}

.aimeos.catalog-list .product.row .offer-price .price-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
}

.aimeos.catalog-list .product.row .offer-price .price-actual {
    font-size: var(--okit-text-base) !important;
    font-weight: 600 !important;
    color: var(--okit-black) !important;
    font-family: var(--okit-font-mono) !important;
    white-space: nowrap !important;
}

.aimeos.catalog-list .product.row .offer-price .price-list .price-list {
    font-size: var(--okit-text-sm) !important;
    color: var(--okit-grey-400) !important;
    text-decoration: line-through !important;
}

/* Zeile 2: Verfügbarkeit */
.aimeos.catalog-list .product.row .offer-stock {
    display: flex !important;
    justify-content: flex-end !important;
}

.aimeos.catalog-list .product.row .offer-stock .stock-list {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.aimeos.catalog-list .product.row .offer-stock .stockitem {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: var(--okit-text-xs) !important;
}

.aimeos.catalog-list .product.row .offer-stock .stocklevel {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    background: var(--okit-grey-300) !important;
}

.aimeos.catalog-list .product.row .offer-stock .stocktext {
    display: inline !important;
    font-size: var(--okit-text-xs) !important;
    color: var(--okit-grey-600) !important;
    white-space: nowrap !important;
}

.aimeos.catalog-list .product.row .offer-stock .stockitem.stock-high .stocklevel,
.aimeos.catalog-list .product.row .offer-stock .stockitem.stock-unlimited .stocklevel {
    background: var(--okit-accent-dark) !important;
}
.aimeos.catalog-list .product.row .offer-stock .stockitem.stock-high .stocktext,
.aimeos.catalog-list .product.row .offer-stock .stockitem.stock-unlimited .stocktext {
    color: var(--okit-accent-dark) !important;
}
.aimeos.catalog-list .product.row .offer-stock .stockitem.stock-low .stocklevel { background: #e07b00 !important; }
.aimeos.catalog-list .product.row .offer-stock .stockitem.stock-low .stocktext { color: #e07b00 !important; }
.aimeos.catalog-list .product.row .offer-stock .stockitem.stock-out .stocklevel { background: #c0392b !important; }
.aimeos.catalog-list .product.row .offer-stock .stockitem.stock-out .stocktext { color: #c0392b !important; }

/* Zeile 3: Aktionen */
/* .aimeos.catalog-list .product.row .offer-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
} */

.aimeos.catalog-list .product.row .offer-actions form {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
}

.aimeos.catalog-list .product.row .offer-actions form.basket {
    margin-left: var(--okit-space-md) !important;
}

.aimeos.catalog-list .product.row .offer-actions .catalog-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.aimeos.catalog-list .product.row .offer-actions .catalog-actions li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
}

/* ============================================
   PRODUCT ROW — BASKET (list view)
   ============================================ */

.aimeos.catalog-list .product .addbasket {
    margin-top: 0 !important;
}

.aimeos.catalog-list .addbasket form,
.aimeos.catalog-list .addbasket .basket-standard {
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
    margin-left: auto !important;
}

.aimeos.catalog-list .addbasket .input-group {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    text-align: left !important;
    vertical-align: middle !important;
    flex-wrap: nowrap !important;
}

/* Quantity field — reset Aimeos/Bootstrap form-control defaults */
.aimeos.catalog-list .addbasket .input-group input[type="number"] {
    width: 48px !important;
    height: 34px !important;
    min-height: 0 !important;
    text-align: center !important;
    font-family: var(--okit-font-mono) !important;
    font-size: var(--okit-text-sm) !important;
    border: 1px solid var(--okit-grey-200) !important;
    border-radius: var(--okit-border-radius) !important;
    background: var(--okit-white) !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    /* Reset Bootstrap border-bottom-only style from .form-control */
    border-bottom: 1px solid var(--okit-grey-200) !important;
}

/* Add-to-cart button — reset Bootstrap/Aimeos btn defaults first */
.aimeos.catalog-list .addbasket button.btn-action {
    /* Reset Bootstrap .btn defaults that break alignment */
    --bs-btn-padding-y: 0 !important;
    --bs-btn-padding-x: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    letter-spacing: 0 !important;
    /* Our sizing */
    height: 34px !important;
    width: 44px !important;
    padding: 0 !important;
    background: var(--okit-accent) !important;
    color: var(--okit-black) !important;
    border: none !important;
    border-radius: var(--okit-border-radius) !important;
    font-size: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background var(--okit-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.aimeos.catalog-list .addbasket button.btn-action::before {
    font-family: bootstrap-icons !important;
    content: "\f180" !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.aimeos.catalog-list .addbasket button.btn-action:hover {
    background: var(--okit-accent-dark) !important;
    color: var(--okit-white) !important;
}

/* ============================================
   SORTING BAR
   ============================================ */

/* Hide the bottom sort bar; keep only the top one */
.aimeos.catalog-list nav.pagination:last-of-type .sort {
    display: none !important;
}

.aimeos .sort {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-right: var(--okit-space-md) !important;
    height: 2rem !important;
    margin: 0 0 2px 0 !important;
    margin-left: auto !important;
}

.aimeos .sort ul {
    display: flex !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    height: 2rem !important;
}

.aimeos .sort ul li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2rem !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
}

.aimeos .sort ul li a {
    font-size: var(--okit-text-sm) !important;
    color: var(--okit-grey-400) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    line-height: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    padding: 0 var(--okit-space-sm) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: color var(--okit-transition) !important;
}

.aimeos .sort ul li a:hover {
    color: var(--okit-black) !important;
    background: none !important;
}

.aimeos .sort ul li a.active,
.aimeos .sort ul li.active a {
    color: var(--okit-accent-dark) !important;
    font-weight: 500 !important;
}

/* No custom arrows — Aimeos handles direction indicators */
.aimeos .sort ul li a::after {
    content: none !important;
}

/* ============================================
   CATALOG LIST — HEADER ROW (title + sort)
   ============================================ */

/* container-xxl: flex row for title + sort */
section.aimeos.catalog-list .container-xxl,
div.section.aimeos.catalog-list .container-xxl {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
}

/* First catalog-list-head: 50% left */
.aimeos.catalog-list .container-xxl > div.catalog-list-head:first-child {
    display: block !important;
    order: 1 !important;
    width: 50% !important;
    flex: 0 0 50% !important;
    padding-top: var(--okit-space-md) !important;
    padding-bottom: 0 !important;
    padding-left: var(--okit-space-md) !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

.aimeos.catalog-list .container-xxl > div.catalog-list-head:first-child * {
    text-align: left !important;
}

/* First pagination (sort controls): 50% right */
.aimeos.catalog-list .container-xxl > nav.pagination:nth-of-type(1) {
    order: 2 !important;
    width: 50% !important;
    flex: 0 0 50% !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding-top: var(--okit-space-md) !important;
    padding-bottom: 0 !important;
}

/* Product list: full width */
.aimeos.catalog-list .container-xxl > div.catalog-list-items {
    order: 3 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.aimeos.catalog-list .container-xxl > div.catalog-list-items::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: var(--okit-grey-200) !important;
    margin-bottom: var(--okit-space-sm) !important;
}

/* Second pagination (page navigation): full width */
.aimeos.catalog-list .container-xxl > nav.pagination:nth-of-type(2) {
    order: 4 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* Category title text */
.aimeos.catalog-list h1,
.aimeos.catalog-list .catalog-navigator h1 {
    font-size: var(--okit-text-base) !important;
    font-weight: 400 !important;
    color: var(--okit-grey-400) !important;
    padding: var(--okit-space-xs) 0 !important;
    margin: 0 !important;
    text-transform: none !important;
}

.aimeos .catalog-list-head,
.aimeos .catalog-list-footer {
    padding: 0 0.5rem !important;
    text-align: left !important;
    color: var(--okit-grey-400) !important;
    letter-spacing: 1.5px !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.aimeos .pagination {
    display: flex !important;
    gap: var(--okit-space-xs) !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    list-style: none !important;
}

.aimeos .pagination a,
.aimeos .pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--okit-grey-200);
    border-radius: var(--okit-border-radius);
    font-size: var(--okit-text-sm);
    text-decoration: none;
    color: var(--okit-grey-700);
    transition: border-color var(--okit-transition), color var(--okit-transition);
}

.aimeos .pagination a:hover {
    border-color: var(--okit-accent);
    color: var(--okit-accent);
}

.aimeos .pagination .active a,
.aimeos .pagination .active span {
    background: var(--okit-accent);
    border-color: var(--okit-accent);
    color: var(--okit-black);
}

/* ============================================
   PRODUCT DETAIL
   ============================================ */

/* Outer container: 2-column grid */
.aimeos.catalog-detail {
    padding-top: var(--okit-space-md) !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: hidden;
}

.site-main .catalog-detail .catalog-detail-additional {
    margin: 0 !important;
    padding-top: var(--okit-space-md) !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.site-main .catalog-detail .catalog-detail-additional div.tab-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.catalog-detail .row > div {
    max-height: 50% !important;
    min-height: 50% !important;
    height: 50% !important;
    margin: 0 !important;
    overflow-y: hidden;
}

.catalog-detail .container-xxl {
    padding: 0 var(--okit-space-lg) var(--okit-space-md) !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Inner product row: image | info | tabs */
.catalog-detail .product {
    height: 100% !important;
    max-height: 100% !important;
}

.aimeos .catalog-detail .product {
    display: grid !important;
    grid-template-columns: 450px 1fr !important;
    grid-template-rows: auto 1fr !important;
    row-gap: var(--okit-space-sm) !important;
    column-gap: var(--okit-space-lg) !important;
    align-items: start !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Image column: grid col 1, row 1 */
.aimeos .catalog-detail .product > .col-sm-6:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
}

/* Info column: grid col 2, row 1 */
.aimeos .catalog-detail .product > .col-sm-6:last-of-type {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 0 0 var(--okit-space-md) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--okit-space-md) !important;
}

/* Tab area: full width, row 2 */
.aimeos .catalog-detail .product > .col-sm-12 {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    padding: var(--okit-space-md) 0 0 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* White background for letterboxing/pillarboxing */
.aimeos .catalog-detail .catalog-detail-image .image-single .media-item {
    background: #ffffff !important;
    overflow: hidden !important;
}

/* div[itemscope] is positioned absolute by swiffy (position:absolute; w:100%; h:100%).
   Make it a flex container so the img centers inside it. overflow:hidden clips any overrun. */
.aimeos .catalog-detail .catalog-detail-image .image-single .media-item > div[itemscope] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

/* The img must not use position:absolute (swiffy sets it on > * > *, but the img is one level deeper).
   Reset to static, constrain to the flex container via max-width/max-height. */
.aimeos .catalog-detail .catalog-detail-image .image-single .media-item > div[itemscope] > img,
.aimeos .catalog-detail .catalog-detail-image .image-single .media-item > div[itemscope] img.item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    flex-shrink: 1 !important;
}

/* Thumbnails below slider */
.aimeos .catalog-detail .catalog-detail-image .image-thumbnails,
.aimeos .catalog-detail .catalog-detail-image .slider-indicators {
    margin-top: var(--okit-space-sm) !important;
}

/* Thumbnail strip: fixed on right side of viewport */
.aimeos .catalog-detail .catalog-detail-image .catalog-detail-image-list {
    position: fixed !important;
    right: var(--okit-space-md) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--okit-space-xs) !important;
    z-index: 50 !important;
}

.aimeos .catalog-detail .catalog-detail-image .catalog-detail-image-list a,
.aimeos .catalog-detail .catalog-detail-image .catalog-detail-image-list li {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    border-radius: var(--okit-border-radius) !important;
    overflow: hidden !important;
    transition: border-color var(--okit-transition) !important;
}

.aimeos .catalog-detail .catalog-detail-image .catalog-detail-image-list a:hover,
.aimeos .catalog-detail .catalog-detail-image .catalog-detail-image-list a.active {
    border-color: var(--okit-accent) !important;
}

.aimeos .catalog-detail .catalog-detail-image .catalog-detail-image-list img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-height: unset !important;
}

/* Thumbnail slider in right column below basket */
.aimeos .catalog-detail .catalog-detail-basket .thumbs {
    margin-top: var(--okit-space-md) !important;
}

/* Product name */
.aimeos .catalog-detail .catalog-detail-basic h1 {
    font-size: var(--okit-text-2xl) !important;
    font-weight: 500 !important;
    color: var(--okit-black) !important;
    margin-bottom: var(--okit-space-xs) !important;
}

/* Override Aimeos default width: 100% on stock-list */
.aimeos .catalog-detail-basket .stock-list {
    width: auto !important;
    padding: 0 !important;
}

/* Price + stock row */
.aimeos .catalog-detail .catalog-detail-basket .price-stock-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* justify-content: flex-end !important; */
    gap: var(--okit-space-md) !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .price-list {
    flex: 1 1 auto !important;
    width: auto !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list,
.aimeos .catalog-detail .product .catalog-detail-basket .price-stock-row .stock-list {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .articleitem {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stocklevel {
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    background: var(--okit-grey-300) !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stocktext {
    display: inline !important;
    font-size: var(--okit-text-xs, 0.75rem) !important;
    white-space: nowrap !important;
    color: var(--okit-grey-600) !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem.stock-high .stocklevel,
.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem.stock-unlimited .stocklevel {
    background: var(--okit-accent-dark) !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem.stock-high .stocktext,
.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem.stock-unlimited .stocktext {
    color: var(--okit-accent-dark) !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem.stock-low .stocklevel {
    background: #e07b00 !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem.stock-low .stocktext {
    color: #e07b00 !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem.stock-out .stocklevel {
    background: #c0392b !important;
}

.aimeos .catalog-detail .catalog-detail-basket .price-stock-row .stock-list .stockitem.stock-out .stocktext {
    color: #c0392b !important;
}

/* Price */
.aimeos .catalog-detail .catalog-detail-basket .price-list {
    font-size: var(--okit-text-2xl) !important;
    font-weight: 500 !important;
    color: var(--okit-black) !important;
    text-align: right;
}

.aimeos .product .stockitem {
	display: inline-flex !important;
}

/* .aimeos .product .stocktext {
        display: inline-flex !important;
} */

.catalog-detail-basket,
.catalog-detail-basic {
    margin: 1rem 0 !important;
}

.catalog-detail-image {
    margin-bottom: 0 !important;
}

.aimeos .catalog-detail .price-item.default .value {
    font-size: 160% !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
}

.aimeos .catalog .stocklevel {
    display: inline-block !important;
    border-radius: var(--ai-radius-round) !important;
    margin-top: 0.2rem !important;
    height: 1.0rem !important;
    width: 1.0rem !important;
}

/* Add-to-cart button */
.aimeos .catalog-detail .catalog-detail-basket button[type="submit"] {
    background: var(--okit-accent) !important;
    color: var(--okit-black) !important;
    border: none !important;
    padding: var(--okit-space-sm) var(--okit-space-lg) !important;
    font-size: var(--okit-text-base) !important;
    font-weight: 500 !important;
    border-radius: var(--okit-border-radius) !important;
    cursor: pointer !important;
    transition: background var(--okit-transition) !important;
    width: auto !important;
}

.aimeos .catalog-detail .catalog-detail-basket button[type="submit"]:hover {
    background: var(--okit-accent-dark) !important;
}

/* Quantity field */
.aimeos .catalog-detail .catalog-detail-basket input[type="number"] {
    width: 64px !important;
    height: 36px !important;
    text-align: center !important;
    border: 1px solid var(--okit-grey-200) !important;
    border-radius: var(--okit-border-radius) !important;
    font-family: var(--okit-font-mono) !important;
    margin-bottom: 0 !important;
}

/* Actions bar: stock + addbasket + actions in one row */

/* Stock + Warenkorb + Actions in einer Zeile */
.aimeos .catalog-detail-basket .stock-addbasket-actions-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* justify-content: flex-end !important; */
    gap: var(--okit-space-md) !important;
    flex-wrap: nowrap !important;
    padding-top: var(--okit-space-sm) !important;
    margin-bottom: var(--okit-space-sm) !important;
    padding-bottom: var(--okit-space-lg) !important;
    border-bottom: 1px solid var(--okit-grey-200) !important;
}

.aimeos .catalog-detail-basket .stock-addbasket-actions-row .addbasket {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.aimeos .catalog-detail-basket .stock-addbasket-actions-row .addbasket .input-group {
    width: max-content !important;
    max-width: none !important;
    flex-wrap: nowrap !important;
    display: inline-flex !important;
    min-width: 0 !important;
}

.aimeos .catalog-detail-basket .stock-addbasket-actions-row .addbasket .input-group input[type="number"] {
    width: 64px !important;
    min-width: 0 !important;
    flex: 0 0 64px !important;
    margin-bottom: 0 !important;
    height: 38px !important;
}

.aimeos .catalog-detail-basket .stocktext {
    display: inline-block !important;
    padding-left: var(--okit-space-md) !important;
    height: 100%;
    vertical-align: middle;
}

.aimeos .catalog-detail-basket .stock-addbasket-actions-row .addbasket .input-group button,
.aimeos .catalog-detail-basket .stock-addbasket-actions-row .addbasket .input-group .btn-action,
.aimeos .catalog-detail-basket .stock-addbasket-actions-row .addbasket .input-group .btn {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.aimeos .catalog-detail-basket .stock-addbasket-actions-row .catalog-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-sm) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.aimeos .catalog-detail-basket .catalog-actions {
    display: flex !important;
    flex-direction: row !important;
    /* justify-content: flex-end !important; */
    gap: var(--okit-space-sm) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: var(--okit-space-md) 0 var(--okit-space-sm) 0 !important;
}

.aimeos .catalog-detail-basket .catalog-actions li {
    margin: 0 !important;
    padding: 0 !important;
}

.aimeos .catalog-detail-basket .catalog-actions .actions-button {
    background: none !important;
    border: 1px solid var(--okit-grey-200) !important;
    border-radius: var(--okit-border-radius) !important;
    padding: 0 var(--okit-space-sm) !important;
    cursor: pointer !important;
    color: var(--okit-grey-700) !important;
    font-size: var(--okit-text-sm) !important;
    transition: border-color var(--okit-transition), color var(--okit-transition) !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.aimeos .catalog-detail-basket .catalog-actions .actions-button:hover {
    border-color: var(--okit-accent) !important;
    color: var(--okit-accent-dark) !important;
}

.aimeos .catalog-detail-basket .catalog-actions .actions-button-pin::before {
    font-family: bootstrap-icons !important;
    content: "\f4ea" !important;
    vertical-align: middle !important;
}

.aimeos .catalog-detail-basket .catalog-actions .actions-button-pin.active {
    background-color: var(--ai-warning) !important;
    border-color: var(--ai-warning) !important;
    color: var(--ai-bg) !important;
}

.aimeos .catalog-detail-basket .catalog-actions .actions-button-watch::before {
    font-family: bootstrap-icons !important;
    content: "\f341" !important;
    vertical-align: middle !important;
}

.aimeos .catalog-detail-basket .catalog-actions .actions-button-favorite::before {
    font-family: bootstrap-icons !important;
    content: "\f417" !important;
    vertical-align: middle !important;
}

.aimeos .catalog-detail-basket .catalog-actions .actions-button-watch.is-active,
.aimeos .catalog-detail-basket .catalog-actions .actions-button-favorite.is-active {
    background-color: var(--okit-accent) !important;
    border-color: var(--okit-accent) !important;
    color: #fff !important;
}

/* Action icon buttons in product list (Pin, Watch, Favourite) */
.aimeos.catalog-list .product .btn-action-icon {
    background: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--okit-border-radius) !important;
    padding: 0 !important;
    width: 34px !important;
    height: 34px !important;
    cursor: pointer !important;
    color: var(--okit-grey-700) !important;
    font-size: 1.05rem !important;
    transition: border-color var(--okit-transition), color var(--okit-transition), background var(--okit-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.aimeos.catalog-list .product .btn-action-icon:hover {
    border-color: var(--okit-accent) !important;
    color: var(--okit-accent-dark) !important;
}

.aimeos.catalog-list .product .btn-pin::before {
    font-family: bootstrap-icons !important;
    content: "\f4eb" !important;
}

.aimeos.catalog-list .product .btn-pin.active {
    background-color: var(--ai-warning) !important;
    border-color: var(--ai-warning) !important;
    color: var(--ai-bg) !important;
}

.aimeos.catalog-list .product .btn-watch::before {
    font-family: bootstrap-icons !important;
    content: "\f341" !important;
}

.aimeos.catalog-list .product .btn-watch.is-active {
    background-color: var(--okit-accent) !important;
    border-color: var(--okit-accent) !important;
    color: #fff !important;
}

.aimeos.catalog-list .product .btn-favorite::before {
    font-family: bootstrap-icons !important;
    content: "\f417" !important;
}

.aimeos.catalog-list .product .btn-favorite.is-active {
    background-color: var(--okit-accent) !important;
    border-color: var(--okit-accent) !important;
    color: #fff !important;
}

/* Additional section (description, reviews) */
.aimeos .catalog-detail .catalog-detail-additional {
    margin-top: var(--okit-space-md) !important;
    padding-top: var(--okit-space-md) !important;
}

/* ============================================
   PRODUCT DETAIL — TABS
   ============================================ */

.aimeos .catalog-detail .nav-tabs {
    border-bottom: 2px solid var(--okit-grey-200) !important;
    gap: 0 !important;
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-color: var(--okit-accent);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--okit-accent);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-link-hover-color: #fff;
}

.aimeos .catalog-detail .nav-tabs .nav-link {
    font-size: var(--okit-text-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    /* text-transform: uppercase !important; */
    color: var(--okit-grey-400) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    padding: var(--okit-space-sm) var(--okit-space-md) !important;
    background: none !important;
    transition: none !important;
}

.aimeos .catalog-detail .nav-tabs .nav-link:hover {
    background: var(--okit-grey-700) !important;
    color: #fff !important;
    border-bottom-color: transparent !important;
}

.aimeos .catalog-detail-additional .nav-tabs .nav-link.active:not(.btn),
.aimeos .catalog-detail .nav-tabs .nav-link.active {
    color: var(--okit-accent) !important;
    border-bottom-color: var(--okit-accent) !important;
    background: none !important;
}

.aimeos .catalog-detail-additional .nav-tabs .nav-link:not(.btn):hover,
.aimeos .catalog-detail .nav-tabs .nav-link:hover {
    background: var(--okit-grey-700) !important;
    color: #fff !important;
}

/* Reviews badge: brand green instead of Aimeos yellow */
.aimeos .catalog-detail .nav-tabs .badge,
.aimeos .catalog-detail .catalog-detail-additional .badge {
    background: var(--okit-accent) !important;
    color: var(--okit-black) !important;
}

/* Tab panel visibility */
.aimeos .catalog-detail .tab-content .tab-pane,
.aimeos .catalog-detail .tab-content [data-overlayscrollbars-viewport] .tab-pane {
    display: none !important;
}

.aimeos .catalog-detail .tab-content .tab-pane.active,
.aimeos .catalog-detail .tab-content [data-overlayscrollbars-viewport] .tab-pane.active {
    display: block !important;
    height: 100% !important;
    overflow: hidden !important;
}

.catalog-detail .content-block {
    margin: var(--okit-space-md) 0 !important;
}

/* ============================================
   BASKET / CART
   ============================================ */

.aimeos .common-summary-detail .supplier h3 {
    display: none !important;
}

.aimeos .basket-standard .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--okit-space-lg);
}

.aimeos .basket-standard .table th {
    font-size: var(--okit-text-xs);
    /* text-transform: uppercase; */
    letter-spacing: 0.08em;
    color: var(--okit-grey-400);
    font-weight: 500;
    padding: var(--okit-space-sm) var(--okit-space-md);
    border-bottom: 1px solid var(--okit-grey-200);
    text-align: left;
}

.aimeos .basket-standard .table td {
    padding: var(--okit-space-md);
    border-bottom: 1px solid var(--okit-grey-100);
    vertical-align: middle;
    font-size: var(--okit-text-sm);
}

.aimeos .basket-standard .price {
    font-family: var(--okit-font-mono);
    font-weight: 500;
}

.aimeos .basket-standard .btn-primary,
.aimeos .basket-standard button[type="submit"] {
    background: var(--okit-accent);
    color: var(--okit-black);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--okit-border-radius);
    font-size: var(--okit-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--okit-transition);
}

.aimeos .basket-standard .btn-primary:hover,
.aimeos .basket-standard button[type="submit"]:hover {
    background: var(--okit-accent-dark);
}

.aimeos .basket-standard .totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--okit-space-xs);
    margin-top: var(--okit-space-lg);
}

.aimeos .basket-standard .total {
    font-size: var(--okit-text-lg);
    font-weight: 600;
    font-family: var(--okit-font-mono);
}

/* ============================================
   CHECKOUT
   ============================================ */

.aimeos.checkout-standard .steps {
    padding-bottom: 0 !important;
}

.aimeos.checkout-standard h1,
.aimeos.checkout-confirm h1 {
    padding-top: 0 !important;
}

.aimeos.checkout-standard .success,
.aimeos.checkout-confirm .success {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* Label-Spalte im Adressformular schmaler (Bootstrap col-md-5 übersteuern) */
@media (min-width: 768px) {
    #address-payment-new .col-md-5,
    #address-payment .col-md-5,
    #address-delivery-new .col-md-5,
    #address-delivery .col-md-5 {
        width: 33% !important;
        flex: 0 0 auto !important;
    }

    .checkout-standard-address .form-horizontal.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .checkout-standard-address-delivery.col-xl {
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .checkout-standard-address-payment.col-xl {
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

@media (min-width: 769px) {
    .aimeos.checkout-standard .section.checkout-standard-address,
    .aimeos.checkout-standard .section.checkout-standard-delivery,
    .aimeos.checkout-standard .section.checkout-standard-payment,
    .aimeos.checkout-standard .section.checkout-standard-summary {
        padding-left: var(--okit-space-xl);
        padding-right: var(--okit-space-xl);
        margin-bottom: var(--okit-space-md);
    }

    .aimeos.basket-standard .container-xxl {
        padding-left: var(--okit-space-xl);
        padding-right: var(--okit-space-xl);
    }

    /* Versand & Zahlung nebeneinander 50/50 */
    .aimeos.checkout-standard form.container-xxl:has(.checkout-standard-delivery):has(.checkout-standard-payment) {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    .aimeos.checkout-standard .section.checkout-standard-delivery,
    .aimeos.checkout-standard .section.checkout-standard-payment {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 0 !important;
        box-sizing: border-box;
    }

    .aimeos.checkout-standard .section.checkout-standard-address,
    .aimeos.checkout-standard .section.checkout-standard-summary {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Button-Group außerhalb der 50/50-Columns, über volle Breite zentriert */
    .aimeos.checkout-standard .okit-checkout-button-group-outer {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: var(--okit-space-sm) !important;
        padding: var(--okit-space-md) var(--okit-space-xl) !important;
    }
}

.aimeos.checkout-standard .section.checkout-standard-address h2,
.aimeos.checkout-standard .section.checkout-standard-delivery h2,
.aimeos.checkout-standard .section.checkout-standard-payment h2,
.aimeos.checkout-standard .section.checkout-standard-summary h2 {
    font-size: var(--okit-text-lg);
    margin-bottom: var(--okit-space-md);
    padding-bottom: var(--okit-space-sm);
    border-bottom: 1px solid var(--okit-grey-200);
}

.checkout-standard-address h1,
.checkout-standard-address p.note {
    padding-left: 0.75rem;
}

.aimeos .checkout-standard input,
.aimeos .checkout-standard select {
    margin-bottom: var(--okit-space-sm);
}

.aimeos .checkout-standard .btn-primary,
.aimeos .checkout-standard button[type="submit"]:not(.btn-secondary) {
    background: var(--okit-accent);
    color: var(--okit-black);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: var(--okit-border-radius);
    font-size: var(--okit-text-base);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--okit-transition), transform var(--okit-transition);
}

.aimeos .checkout-standard .btn-primary:hover,
.aimeos .checkout-standard button[type="submit"]:not(.btn-secondary):hover {
    background: var(--okit-accent-dark);
    transform: translateY(-1px);
}

/* ===== Delivery & Payment: Aimeos-Defaults zurücksetzen ===== */
.checkout-standard-delivery .item,
.checkout-standard-payment .item {
    border: none !important;
    margin: 0 !important;
    background: none !important;
}

.checkout-standard-delivery .item.item-service,
.checkout-standard-payment .item.item-service {
    border: none !important;
    margin-bottom: var(--okit-space-sm) !important;
}

.checkout-standard .item-service .description {
    max-width: none !important;
    padding: 0 !important;
}

.checkout-standard .item-service .description h2,
.checkout-standard .item-service .description p {
    margin: 0 !important;
    border: none !important;
}

.checkout-standard-delivery h2,
.checkout-standard-payment h2 {
    border: none !important;
}

/* ===== Delivery & Payment Service Cards ===== */
.checkout-standard-delivery,
.checkout-standard-payment {
    display: flex;
    flex-direction: column;
    gap: var(--okit-space-sm);
}

.checkout-standard-delivery .item.item-service,
.checkout-standard-payment .item.item-service {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
}

.checkout-standard-delivery .item.item-service .col-sm-6:first-child,
.checkout-standard-payment .item.item-service .col-sm-6:first-child {
    flex: 1;
    padding: 0;
}

.checkout-standard-delivery .item.item-service .col-sm-6:last-child,
.checkout-standard-payment .item.item-service .col-sm-6:last-child {
    display: none;
}

.checkout-standard-delivery .item.item-service label.description,
.checkout-standard-payment .item.item-service label.description {
    display: flex;
    align-items: center;
    gap: var(--okit-space-md);
    padding: var(--okit-space-md) var(--okit-space-lg);
    border: none;
    border-radius: var(--okit-border-radius);
    cursor: pointer;
    transition: background var(--okit-transition);
    width: 100%;
    margin-bottom: var(--okit-space-sm);
}

.checkout-standard-delivery .item.item-service label.description:has(input:checked),
.checkout-standard-payment .item.item-service label.description:has(input:checked) {
    border-color: var(--okit-accent);
    background: rgba(var(--okit-accent-rgb), 0.04);
}

.checkout-standard-delivery .item.item-service input.option,
.checkout-standard-payment .item.item-service input.option {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--okit-accent);
    margin: 0;
}

.checkout-standard-delivery .item.item-service .icons,
.checkout-standard-payment .item.item-service .icons {
    display: flex;
    align-items: center;
    gap: var(--okit-space-xs);
    flex-shrink: 0;
}

.checkout-standard-delivery .item.item-service .icons img,
.checkout-standard-payment .item.item-service .icons img {
    max-height: 24px;
    width: auto;
}

.checkout-standard-delivery .item.item-service h2,
.checkout-standard-payment .item.item-service h2 {
    font-size: var(--okit-text-base);
    font-weight: 500;
    margin: 0;
    flex: 1;
}

.checkout-standard-delivery .item.item-service .price-value,
.checkout-standard-payment .item.item-service .price-value {
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-500);
    flex-shrink: 0;
}

.checkout-standard-delivery .item.item-service .text,
.checkout-standard-payment .item.item-service .text {
    display: none;
}

/* ============================================
   CONFIRMATION PAGE
   ============================================ */

.aimeos .checkout-confirm {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.aimeos .checkout-confirm h1 {
    font-size: var(--okit-text-2xl);
    margin-bottom: var(--okit-space-md);
}

/* ============================================
   MY ACCOUNT
   ============================================ */

.aimeos .account-history .table {
    width: 100%;
    border-collapse: collapse;
}

.aimeos .account-history .table th {
    font-size: var(--okit-text-xs);
    /* text-transform: uppercase; */
    letter-spacing: 0.08em;
    color: var(--okit-grey-400);
    padding: var(--okit-space-sm) var(--okit-space-md);
    border-bottom: 1px solid var(--okit-grey-200);
    text-align: left;
}

.aimeos .account-history .table td {
    padding: var(--okit-space-md);
    border-bottom: 1px solid var(--okit-grey-100);
    font-size: var(--okit-text-sm);
}

.aimeos .account-history .status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    font-size: var(--okit-text-xs);
    font-weight: 500;
}

.history-modal-products .details a,
.history-modal-products .details p {
    color: var(--ai-primary) !important;
    text-decoration: none !important;
}

.history-modal-services .hm-service-label {
    width: 12% !important;
}
.history-modal-services .hm-service-name {
    width: 20% !important;
}
.history-modal-services .hm-service ul {
    display: inline-block !important;
    width: 38% !important;
    list-style: none;
    padding: 0 !important;
}

.history-modal-services .delivery-trackingid .name {
    display: none !important;
}

.history-modal-services .hm-service .attr-list .name,
.history-modal-services .hm-service .attr-list .value {
    width: auto !important;
}

/* ============================================
   STOCK INDICATORS
   ============================================ */

.aimeos .catalog-stock-low  { color: #e07b00; }
.aimeos .catalog-stock-high { color: var(--okit-accent-dark); }
.aimeos .catalog-stock-none { color: #c0392b; }

/* ============================================
   MESSAGES
   ============================================ */

.aimeos .error-list,
.aimeos .error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--okit-border-radius);
    padding: var(--okit-space-md);
    color: #c0392b;
    font-size: var(--okit-text-sm);
    margin-bottom: var(--okit-space-md);
}

.aimeos .success {
    background: rgba(var(--okit-accent-rgb), 0.08);
    border: 1px solid rgba(var(--okit-accent-rgb), 0.3);
    border-radius: var(--okit-border-radius);
    padding: var(--okit-space-md);
    color: var(--okit-accent-dark);
    font-size: var(--okit-text-sm);
    margin-bottom: var(--okit-space-md);
}

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

@media (max-width: 900px) {
    .container:has(.aimeos) {
        max-width: 100%;
    }

    .aimeos .catalog-detail {
        grid-template-columns: 1fr;
    }

    .aimeos.catalog-list .product.row {
        flex-direction: column !important;
        height: auto !important;
    }

    .aimeos.catalog-list .product.row .list-column:first-child {
        width: 100% !important;
        max-width: 100% !important;
        height: 160px !important;
        flex: 0 0 auto !important;
        border-right: none !important;
        border-bottom: 1px solid #c2c5c9 !important;
    }

    .aimeos.catalog-list .product.row .list-column:first-child a,
    .aimeos.catalog-list .product.row .list-column:first-child figure,
    .aimeos.catalog-list .product.row .list-column:first-child .media-list,
    .aimeos.catalog-list .product.row .list-column:first-child .media-item,
    .aimeos.catalog-list .product.row .list-column:first-child img {
        width: 100% !important;
        height: 160px !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child {
        height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .price-list {
        align-items: flex-start !important;
    }

    .site-navbar__search-input {
        width: 140px;
    }
}

@media (max-width: 480px) {
    .site-navbar__search {
        display: none;
    }
}

.account-subnav {
    background: var(--okit-white);
    border-bottom: 1px solid var(--okit-grey-200);
}

.account-subnav__list {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    gap: var(--okit-space-md) !important;
    padding: var(--okit-space-sm) 0 !important;
    margin: 0 !important;
}

.account-subnav__link {
    text-decoration: none;
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-700);
    padding: var(--okit-space-xs) var(--okit-space-sm);
    border-radius: var(--okit-border-radius);
    transition: color var(--okit-transition);
}

.account-subnav__link:hover {
    color: var(--okit-black);
}

.account-subnav__item.is-active .account-subnav__link {
    color: var(--okit-accent-dark);
    font-weight: 500;
}

.account-subnav__link--logout {
    margin-left: auto;
    color: var(--okit-grey-400);
}

/* Sidebar variant — rendered inside catalog-filter-tree */
.catalog-filter-tree .account-subnav--sidebar {
    background: transparent !important;
    border-bottom: none !important;
    border-top: 1px solid var(--okit-grey-200) !important;
    margin-top: auto !important;
    padding: var(--okit-space-sm) 0 var(--okit-space-md) 2.0rem !important;
}

.catalog-filter-tree .account-subnav--sidebar .account-subnav__list {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
}

.catalog-filter-tree .account-subnav--sidebar .account-subnav__item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.catalog-filter-tree .account-subnav--sidebar .account-subnav__link {
    display: flex !important;
    width: 100% !important;
    padding: 0.4rem 0.6rem !important;
    font-size: var(--okit-text-base) !important;
    color: var(--okit-grey-700) !important;
    border-radius: var(--okit-border-radius) !important;
}

.catalog-filter-tree .account-subnav--sidebar .account-subnav__link:hover {
    color: var(--okit-black) !important;
    background: rgba(var(--okit-accent-rgb), 0.1) !important;
}

.catalog-filter-tree .account-subnav--sidebar .account-subnav__item.is-active .account-subnav__link {
    color: var(--okit-accent-dark) !important;
    font-weight: 500 !important;
    background: rgba(var(--okit-accent-rgb), 0.1) !important;
}

.catalog-filter-tree .account-subnav--sidebar .account-subnav__link--logout {
    margin-left: 0 !important;
    color: var(--okit-grey-400) !important;
    font-size: var(--okit-text-sm) !important;
    margin-top: var(--okit-space-sm) !important;
}

.catalog-filter-tree .account-subnav--sidebar .account-subnav__link--logout:hover {
    color: #c0392b !important;
    background: none !important;
}

.auth-tabs {
    background: var(--okit-white);
    border-bottom: 1px solid var(--okit-grey-200);
}

.auth-tabs__list {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: var(--okit-space-md);
    padding: var(--okit-space-sm) 0;
    margin: 0;
    justify-content: center;
}

.auth-tabs__link {
    text-decoration: none;
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-700);
    padding: var(--okit-space-xs) var(--okit-space-sm);
    border-radius: var(--okit-border-radius);
    transition: color var(--okit-transition);
}

.auth-tabs__link:hover {
    color: var(--okit-black);
}

.auth-tabs__item.is-active .auth-tabs__link {
    color: var(--okit-accent-dark);
    font-weight: 500;
}

/* Sidebar variant — rendered inside catalog-filter-tree */
.catalog-filter-tree .auth-tabs--sidebar {
    background: transparent !important;
    border-bottom: none !important;
    border-top: 1px solid var(--okit-grey-200) !important;
    margin-top: auto !important;
    padding: var(--okit-space-sm) 0 var(--okit-space-md) 2.0rem !important;
}

.catalog-filter-tree .auth-tabs--sidebar .auth-tabs__list {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

.catalog-filter-tree .auth-tabs--sidebar .auth-tabs__item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.catalog-filter-tree .auth-tabs--sidebar .auth-tabs__link {
    display: flex !important;
    width: 100% !important;
    padding: 0.4rem 0.6rem !important;
    font-size: var(--okit-text-base) !important;
    color: var(--okit-grey-700) !important;
    border-radius: var(--okit-border-radius) !important;
}

.catalog-filter-tree .auth-tabs--sidebar .auth-tabs__link:hover {
    color: var(--okit-black) !important;
    background: rgba(var(--okit-accent-rgb), 0.1) !important;
}

/* ============================================
   FELOGIN — LOGIN FORM
   ============================================ */

.frame-type-felogin_login {
    padding: var(--okit-space-lg);
    /* max-width: 420px; */
}

.frame-type-felogin_login h2,
.frame-type-felogin_login h3 {
    font-family: var(--okit-font-display);
    font-size: var(--okit-text-xl);
    font-weight: 500;
    color: var(--okit-black);
    margin-bottom: var(--okit-space-lg);
    padding-bottom: var(--okit-space-sm);
    border-bottom: 2px solid var(--okit-accent);
    letter-spacing: -0.01em;
}

/* Grid: Label links (feste Breite), Input rechts */
.frame-type-felogin_login form fieldset {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: var(--okit-space-sm);
    column-gap: var(--okit-space-sm);
    border: none;
    padding: 0;
    margin: 0;
}

.frame-type-felogin_login form fieldset > legend {
    grid-column: 1 / -1;
    display: none;
}

.frame-type-felogin_login form fieldset > div:not(.felogin-submit-row):not(.felogin-hidden) {
    grid-column: 1 / -1;
    display: contents;
}

.frame-type-felogin_login form label {
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-700);
    font-weight: 400;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    grid-column: 1;
    align-self: center;
}

#tx-felogin-input-username,
#tx-felogin-input-password,
#tx-felogin-input-data,
#felogin-captcha-response {
    width: 25%;
    padding: 0.4rem 0.6rem;
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-sm);
    color: var(--okit-black);
    background: var(--okit-white);
    border: 1px solid var(--okit-grey-200);
    border-radius: var(--okit-border-radius);
    outline: none;
    transition: border-color var(--okit-transition);
    box-sizing: border-box;
    margin: 0 0 0 var(--okit-space-md);
    grid-column: 2;
}

#tx-felogin-input-username:focus,
#tx-felogin-input-password:focus,
#tx-felogin-input-data:focus,
#felogin-captcha-response:focus {
    border-color: var(--okit-accent);
}

/* Submit-Row: bündig mit Spalte 2, Button + Link nebeneinander */
.frame-type-felogin_login form .felogin-submit-row {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: var(--okit-space-md);
    margin-left: var(--okit-space-md);
}

/* Submit-Button */
.frame-type-felogin_login form button[type="submit"],
.frame-type-felogin_login form input[type="submit"] {
    padding: 0.4rem 1.2rem;
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-sm);
    font-weight: 500;
    background: var(--okit-accent);
    color: var(--okit-black);
    border: none;
    border-radius: var(--okit-border-radius);
    cursor: pointer;
    transition: background var(--okit-transition), color var(--okit-transition);
}

.frame-type-felogin_login form button[type="submit"]:hover,
.frame-type-felogin_login form input[type="submit"]:hover {
    background: var(--okit-accent-dark);
    color: var(--okit-white);
}

a.felogin-forgot-password-link {
    font-size: var(--okit-text-xs);
    color: var(--okit-grey-400);
    text-decoration: none;
    transition: color var(--okit-transition);
}

a.felogin-forgot-password-link:hover {
    color: var(--okit-accent-dark);
}

.frame-type-felogin_login .alert {
    grid-column: 1 / -1;
    font-size: var(--okit-text-xs);
    margin-top: var(--okit-space-xs);
}

.felogin-captcha-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--okit-space-xs);
    margin-left: var(--okit-space-md);
}

.felogin-captcha-wrap #felogin-captcha-response {
    margin-left: 0;
}

.felogin-captcha-wrap img {
    max-width: 200px;
    height: auto;
    border-radius: var(--okit-border-radius);
}

.frame-type-felogin_login .felogin-forgot-password-link a {
    color: var(--okit-grey-400);
    text-decoration: none;
    transition: color var(--okit-transition);
}

.frame-type-felogin_login .felogin-forgot-password-link a:hover {
    color: var(--okit-accent-dark);
}

.frame-type-felogin_login .alert-danger {
    color: #c0392b;
}

/* OAuth2 Social Login Buttons */
.felogin-oauth-divider {
    display: flex;
    align-items: center;
    gap: var(--okit-space-md);
    margin: var(--okit-space-lg) var(--okit-space-md);
    color: var(--okit-grey-400);
    font-size: var(--okit-text-xs);
}

.felogin-oauth-divider::before,
.felogin-oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--okit-grey-200);
}

.felogin-oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--okit-space-sm);
    margin: 0 var(--okit-space-md) var(--okit-space-md);
}

.felogin-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.45rem 1.2rem;
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-sm);
    font-weight: 500;
    border-radius: var(--okit-border-radius);
    text-decoration: none;
    transition: background var(--okit-transition), box-shadow var(--okit-transition);
    border: 1px solid var(--okit-grey-200);
    background: var(--okit-white);
    color: var(--okit-black);
}

.felogin-oauth-btn:hover {
    background: var(--okit-grey-100, #f5f5f0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    color: var(--okit-black);
}

.felogin-oauth-btn__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.felogin-oauth-btn--facebook:hover {
    background: #e7f0fd;
    border-color: #1877F2;
}

.felogin-oauth-btn--github:hover {
    background: #f0f0f0;
    border-color: #24292f;
}

.felogin-oauth-btn--apple:hover {
    background: #f5f5f5;
    border-color: #000;
}

.felogin-oauth-btn__icon--apple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    flex-shrink: 0;
}

/* ============================================
   FEMANAGER — REGISTRATION FORM
   ============================================ */

.okit-register {
    padding: var(--okit-space-md);
}

@media (min-width: 769px) {
    .okit-register {
        padding-left: var(--okit-space-xl);
        padding-right: var(--okit-space-xl);
    }

    .okit-register__field:not(.okit-register__field--row) {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    .okit-register__field--row {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    .okit-register__col-title,
    .okit-register__captcha,
    .okit-register__submit-row .okit-btn-primary {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    .okit-register__captcha #sjbr-freecap-captcha-response {
        width: 75%;
    }
}

.okit-register__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--okit-space-lg);
    padding-bottom: var(--okit-space-sm);
    border-bottom: 2px solid var(--okit-accent);
}

.okit-register__title {
    font-family: var(--okit-font-display);
    font-size: var(--okit-text-xl);
    font-weight: 500;
    color: var(--okit-black);
    letter-spacing: -0.01em;
    margin: 0;
    padding: 0;
    border: none;
}

/* 2-spaltiges Grid */
.okit-register__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--okit-space-lg);
    margin-bottom: var(--okit-space-lg);
}

.okit-register__col-title {
    font-size: var(--okit-text-xs);
    font-weight: 500;
    /* text-transform: uppercase; */
    letter-spacing: 0.08em;
    color: var(--okit-grey-400);
    margin-bottom: var(--okit-space-md);
    padding-bottom: var(--okit-space-xs);
    border-bottom: 1px solid var(--okit-grey-200);
}

/* Einzelnes Feld: Label + Input untereinander */
.okit-register__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--okit-space-sm);
}

.okit-register__field label {
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-700);
    font-weight: 400;
}

/* PLZ + Ort nebeneinander */
.okit-register__field--row {
    flex-direction: row;
    gap: var(--okit-space-sm);
    align-items: flex-end;
}

.okit-register__subfield {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 90px;
    flex-shrink: 0;
}

.okit-register__subfield--grow {
    flex: 1;
    width: auto;
}

/* Linke Spalte: Zugangsdaten + Profileinstellungen übereinander */
.okit-register__col--left {
    display: flex;
    flex-direction: column;
    gap: var(--okit-space-lg);
}

.okit-register__subgroup {
    display: block;
}

.okit-register__submit-row {
    display: flex;
    flex-direction: column;
    gap: var(--okit-space-md);
}

.okit-register__submit-row .okit-btn-primary {
    align-self: flex-start;
}

/* Inputs */
.okit-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-sm);
    color: var(--okit-black);
    background: var(--okit-white);
    border: 1px solid var(--okit-grey-200);
    border-radius: var(--okit-border-radius);
    outline: none;
    transition: border-color var(--okit-transition);
    box-sizing: border-box;
}

.okit-input:focus {
    border-color: var(--okit-accent);
}

/* Pflichtfeld-Stern */
.okit-required {
    color: var(--okit-accent-dark);
    font-weight: 500;
}

/* Footer: Pflichtfeldhinweis + Button */
.okit-register__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--okit-space-md);
    border-top: 1px solid var(--okit-grey-200);
}

.okit-register__required-note {
    font-size: var(--okit-text-xs);
    color: var(--okit-grey-400);
}

.okit-register__oauth-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--okit-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--okit-accent) 30%, transparent);
    border-radius: var(--okit-radius);
    padding: 0.75rem 1rem;
    font-size: var(--okit-text-sm);
    color: var(--okit-text);
}

.okit-register__oauth-banner svg {
    flex-shrink: 0;
}

.account-profile-address .address-card-actions .btn,
.basket-standard-coupon .coupon-new .coupon-code {
    width: unset !important;
}

.btn-default {
    padding: 0.4rem 1.4rem !important;
    font-family: var(--okit-font-body) !important;
    font-size: var(--okit-text-sm) important;
    font-weight: 500 !important;
    color: var(--okit-black) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: background var(--okit-transition) !important;
    border-radius: var(--okit-border-radius) !important;
}

/* Primary Button (wiederverwendbar) */
.btn-primary,
.btn-address-add,
.btn-address-edit,
.okit-btn-primary,
.okit-btn-secondary {
    display: inline-block;
    padding: 0.4rem 1.4rem;
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-md);
    font-weight: 500;
    background: var(--okit-accent) !important;
    color: var(--okit-black) !important;
    border: 1px solid var(--okit-accent) !important;
    border-radius: var(--okit-border-radius) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: background var(--okit-transition) !important;
    vertical-align: unset !important;
}

.basket-standard-coupon .coupon-new .btn {
    width: unset !important;
}

.btn:hover,
.btn-primary:hover,
.btn-address-add:hover,
.btn-address-edit:hover,
.okit-btn-primary:hover,
.okit-btn-secondary:hover {
    background: var(--okit-accent-dark) !important;
    color: var(--okit-white) !important;
}

/* ============================================
   MODAL OVERLAY (Watch / Favorite)
   ============================================ */

.aimeos-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1501 !important;
    background: var(--okit-white) !important;
    border: 1px solid var(--okit-grey-200) !important;
    border-top: 3px solid var(--okit-accent) !important;
    border-radius: var(--okit-border-radius) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18) !important;
    /* max-width: 780px !important;
    width: 94vw !important; */
    max-width: 75rem !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    padding: var(--okit-space-md) !important;
}

.aimeos-container .btn-close {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    margin-left: auto !important;
    margin-bottom: var(--okit-space-sm) !important;
    cursor: pointer !important;
    background: none !important;
    border: 1px solid var(--okit-grey-200) !important;
    border-radius: var(--okit-border-radius) !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.aimeos-container .btn-close::before,
.aimeos-container .btn-close::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 12px !important;
    height: 1.5px !important;
    background: var(--okit-grey-700) !important;
}

.aimeos-container .btn-close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.aimeos-container .btn-close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.aimeos-container .btn-close:hover {
    border-color: var(--okit-accent) !important;
}

.aimeos-container .header {
    font-size: var(--okit-text-sm) !important;
    font-weight: 500 !important;
    /* text-transform: uppercase !important; */
    letter-spacing: 0.08em !important;
    color: var(--okit-grey-700) !important;
    margin-bottom: var(--okit-space-md) !important;
    padding-bottom: var(--okit-space-xs) !important;
    border-bottom: 1px solid var(--okit-grey-200) !important;
}

/* ============================================
   WATCH / FAVORITE — gemeinsame Basis
   ============================================ */
.account-watch .product.watch-item {
    max-width: unset !important;
}

.aimeos.account-watch .watch-items,
.aimeos.account-favorite .favorite-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
}

.aimeos.account-favorite .favorite-item {
    width: 100% !important;
}

.aimeos.account-watch .watch-item,
.aimeos.account-favorite .favorite-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    text-align: start !important;
    border: 1px solid var(--okit-grey-200) !important;
    border-radius: var(--okit-border-radius) !important;
    background: var(--okit-white) !important;
    transition: border-color var(--okit-transition) !important;
}

.aimeos.account-watch .watch-item:hover,
.aimeos.account-favorite .favorite-item:hover {
    border-color: var(--okit-grey-400) !important;
}

/* Delete-Button — absolut oben rechts, on hover sichtbar */
.aimeos.account-watch .watch-item,
.aimeos.account-favorite .favorite-item {
    position: relative !important;
}

.aimeos.account-watch .watch-item form.delete,
.aimeos.account-favorite .favorite-item form.delete,
.aimeos.account-basket .basket-item form.delete {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    order: unset !important;
}

.aimeos.account-watch .minibutton.delete,
.aimeos.account-favorite .minibutton.delete,
.aimeos.account-basket .minibutton.delete {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    min-width: unset !important;
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    color: var(--okit-grey-400) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity var(--okit-transition), color var(--okit-transition) !important;
}

.aimeos.account-watch .watch-item:hover .minibutton.delete,
.aimeos.account-favorite .favorite-item:hover .minibutton.delete,
.aimeos.account-basket .basket-item:hover .minibutton.delete {
    opacity: 1 !important;
}

.aimeos.account-watch .minibutton.delete::before,
.aimeos.account-favorite .minibutton.delete::before,
.aimeos.account-basket .minibutton.delete::before {
    content: none !important;
}

.aimeos.account-watch .minibutton.delete::after,
.aimeos.account-favorite .minibutton.delete::after,
.aimeos.account-basket .minibutton.delete::after {
    font-family: bootstrap-icons !important;
    content: "\f5de" !important;
    font-size: 0.9rem !important;
    vertical-align: middle !important;
}

.aimeos.account-watch .minibutton.delete:hover,
.aimeos.account-favorite .minibutton.delete:hover,
.aimeos.account-basket .minibutton.delete:hover {
    color: var(--okit-grey-700) !important;
}

.aimeos.account-watch .watch-basic {
    max-width: 35% !important;
    margin: 0 !important;
}

/* Thumbnail */
.aimeos.account-watch .watch-basic .media-item,
.aimeos.account-favorite .favorite-item > a .media-item {
    overflow: hidden !important;
    border-radius: var(--okit-border-radius) !important;
    background: var(--okit-grey-200) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.aimeos.account-watch .watch-basic .media-item img,
.aimeos.account-favorite .favorite-item > a .media-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Name */
.aimeos.account-watch .watch-basic .name,
.aimeos.account-favorite .favorite-item > a .name {
    font-weight: 400 !important;
    color: var(--okit-black) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.aimeos.account-watch .watch-basic:hover .name,
.aimeos.account-favorite .favorite-item > a:hover .name {
    color: var(--okit-accent-dark) !important;
}

/* Preis */
.aimeos.account-watch .watch-basic .price-list,
.aimeos.account-favorite .favorite-item > a .price-list {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.aimeos.account-watch .watch-basic .price-item,
.aimeos.account-favorite .favorite-item > a .price-item {
    font-weight: 500 !important;
    color: var(--okit-grey-700) !important;
    white-space: nowrap !important;
}

/* Watch-Details */
.aimeos.account-watch .watch-details .form-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-sm) !important;
}

.aimeos.account-watch .watch-details .form-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--okit-grey-700) !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    /* min-width: 200px; */
    margin-left: var(--okit-space-md) !important;
}

.site-main .container-xxl .watch-details li {
    min-width: 200px;
}

.aimeos.account-watch .watch-details select {
    border: 1px solid var(--okit-grey-200) !important;
    border-radius: var(--okit-border-radius) !important;
    background: var(--okit-white) !important;
    color: var(--okit-black) !important;
}

.aimeos.account-watch .watch-details input[type="checkbox"] {
    accent-color: var(--okit-accent) !important;
    flex-shrink: 0 !important;
}

.aimeos.account-watch .watch-details .btn-primary.btn-action {
    background: var(--okit-accent) !important;
    color: var(--okit-black) !important;
    border: none !important;
    border-radius: var(--okit-border-radius) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: background var(--okit-transition) !important;
    max-width: unset !important;
    margin-left: var(--okit-space-lg);
}

.aimeos.account-watch .watch-details .btn-primary.btn-action:hover {
    background: var(--okit-accent-dark) !important;
    color: var(--okit-white) !important;
}

/* Pagination */
.aimeos.account-watch .pagination,
.aimeos.account-favorite .pagination {
    margin-top: var(--okit-space-md) !important;
    display: flex !important;
    justify-content: center !important;
    gap: var(--okit-space-sm) !important;
    font-size: var(--okit-text-sm) !important;
}

.aimeos.account-watch .pagination a,
.aimeos.account-favorite .pagination a {
    color: var(--okit-grey-700) !important;
    text-decoration: none !important;
    padding: 2px 6px !important;
    border: 1px solid var(--okit-grey-200) !important;
    border-radius: var(--okit-border-radius) !important;
}

.aimeos.account-watch .pagination a:hover,
.aimeos.account-favorite .pagination a:hover {
    border-color: var(--okit-accent) !important;
    color: var(--okit-accent-dark) !important;
}

/* ============================================
   MODAL — kompakte Flex-Rows (Desktop)
   ============================================ */

.aimeos-container .watch-item,
.aimeos-container .favorite-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-sm) !important;
    padding: var(--okit-space-xs) var(--okit-space-sm) !important;
    min-height: unset !important;
}

.aimeos-container .watch-basic,
.aimeos-container .favorite-item > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-sm) !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 40% !important;
}

.aimeos-container .watch-basic .media-item,
.aimeos-container .favorite-item > a .media-item {
    width: 48px !important;
    height: 48px !important;
}

.aimeos-container .watch-basic .name,
.aimeos-container .favorite-item > a .name {
    font-size: var(--okit-text-sm) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.aimeos-container .watch-basic .price-list,
.aimeos-container .favorite-item > a .price-list {
    display: none !important;
}

/* Watch-Details im Modal — kompakt inline */
.aimeos-container .watch-details {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-xs) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.aimeos-container .watch-details .form-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-sm) !important;
}

.aimeos-container .watch-details input[type="checkbox"] {
    width: 13px !important;
    height: 13px !important;
}


/* ============================================
   PROFILSEITE — volle Breite, luftige Rows
   ============================================ */

.site-main .aimeos.account-watch,
.site-main .aimeos.account-favorite {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.site-main .watch-items,
.site-main .favorite-items {
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
}

.site-main .watch-item,
.site-main .favorite-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-md) !important;
    padding: var(--okit-space-xs) var(--okit-space-md) !important;
    min-height: 64px !important;
    margin: 0 !important;
    text-align: start !important;
}

.site-main .watch-basic,
.site-main .favorite-item > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-md) !important;
    text-decoration: none !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.site-main .watch-basic .media-item,
.site-main .favorite-item > a .media-item {
    width: 56px !important;
    height: 56px !important;
}

.site-main .watch-basic .name,
.site-main .favorite-item > a .name {
    font-size: 0.9375rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.site-main .watch-basic .price-list,
.site-main .favorite-item > a .price-list {
    flex-shrink: 0 !important;
}

.site-main .watch-basic .price-item,
.site-main .favorite-item > a .price-item {
    font-size: 0.9375rem !important;
    white-space: nowrap !important;
}

/* Watch-Details: Labels verstecken, nur Controls + Speichern */
.site-main .watch-details {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-sm) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.site-main .watch-details .form-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--okit-space-sm) !important;
}

.site-main .watch-details .form-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.site-main .watch-details select {
    width: unset !important;
}

.site-main .watch-details input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
}

.site-main .watch-details .btn-primary.btn-action {
    font-size: var(--okit-text-sm) !important;
}

.account-basket .basket-item {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--okit-grey-200) !important;
    border-radius: var(--okit-border-radius) !important;
    background: var(--okit-white) !important;
    transition: border-color var(--okit-transition) !important;
}

.account-basket .basket-item:hover {
    border-color: var(--okit-grey-400) !important;
}

.account-basket .basket-item-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--okit-space-sm) var(--okit-space-lg) var(--okit-space-sm) var(--okit-space-md);
    text-decoration: none;
    color: var(--okit-black);
}

.account-basket .basket-item-name {
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-sm);
    text-align: center;
}

.account-history .action .btn {
    border: 1px solid var(--ai-secondary);
    display: block;
    width: 100%;
    max-width: unset !important;
    margin: auto;
}

/* ===== okshop Modal ===== */
.okshop-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    align-items: center;
    justify-content: center;
}
.okshop-modal.is-open {
    display: flex;
}
.okshop-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}
.okshop-modal__dialog {
    position: relative;
    z-index: 1;
    background: var(--okit-white);
    border-radius: var(--okit-border-radius-md);
    border-top: 3px solid var(--okit-accent);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    margin: 1rem;
    box-shadow: var(--okit-shadow-lg);
    font-family: var(--okit-font-body);
}
.okshop-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--okit-space-md) 1.25rem 0.75rem;
    border-bottom: 1px solid var(--okit-grey-200);
    background: var(--okit-grey-100);
    border-radius: var(--okit-border-radius-md) var(--okit-border-radius-md) 0 0;
}
.okshop-modal__title {
    font-family: var(--okit-font-body);
    font-weight: 500;
    font-size: var(--okit-text-base);
    color: var(--okit-black);
    letter-spacing: -0.01em;
}
.okshop-modal__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    color: var(--okit-grey-400);
    transition: color var(--okit-transition);
}
.okshop-modal__close:hover { color: var(--okit-black); }
.okshop-modal__close::after {
    content: '×';
}
.okshop-modal__body {
    padding: 1.25rem;
    flex: 1;
    color: var(--okit-black);
}
.okshop-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: var(--okit-space-md);
    border-top: 1px solid var(--okit-grey-200);
    margin-top: var(--okit-space-md);
}

/* ===== Basket modal product list ===== */
.basket-modal-products {
    list-style: none;
    margin: 0 0 var(--okit-space-md);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--okit-space-sm);
}
.basket-modal-product {
    display: flex;
    align-items: baseline;
    gap: var(--okit-space-sm);
    padding: var(--okit-space-sm) 0;
    border-bottom: 1px solid var(--okit-grey-200);
    font-size: var(--okit-text-sm);
}
.basket-modal-product:last-child { border-bottom: none; }
.basket-modal-product__qty {
    font-family: var(--okit-font-mono);
    font-size: var(--okit-text-xs);
    color: var(--okit-accent);
    white-space: nowrap;
    min-width: 2rem;
}
.basket-modal-product__name {
    color: var(--okit-grey-700);
}
#basket-modal .supplier,
#basket-modal .delivery,
#basket-modal .payment,
#basket-modal .subtotal,
#basket-modal .total,
#basket-modal .tax,
#basket-modal .rebate,
#basket-modal .headline { display: none !important; }

#basket-modal .common-summary-detail {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--okit-font-body);
    color: var(--okit-black);
}

#basket-modal .product-item {
    border-bottom: 1px solid var(--okit-grey-200) !important;
    padding: var(--okit-space-sm) 0 !important;
    align-items: center !important;
}

#basket-modal .product-item .image img.detail {
    max-width: 4rem;
    max-height: 5rem;
}

#basket-modal .product-item .product-name {
    font-size: var(--okit-text-sm);
    color: var(--okit-black);
    letter-spacing: normal !important;
    margin: 0 0 var(--okit-space-xs) !important;
}

#basket-modal .product-item .code,
#basket-modal .product-item .timeframe {
    font-size: var(--okit-text-xs);
    color: var(--okit-grey-400);
}

#basket-modal .product-item .quantity,
#basket-modal .product-item .unitprice,
#basket-modal .product-item .price {
    font-family: var(--okit-font-mono);
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-700);
    text-align: end;
    white-space: nowrap;
}

#basket-modal .button-group {
    display: flex;
    gap: var(--okit-space-sm);
    justify-content: flex-end;
    padding-top: var(--okit-space-md);
    margin-top: var(--okit-space-md);
}

#basket-modal .button-group .btn-primary {
    background: var(--okit-accent) !important;
    border-color: var(--okit-accent) !important;
    color: var(--okit-black) !important;
}

#basket-modal .button-group .btn-primary:hover {
    background: var(--okit-accent-dark) !important;
    border-color: var(--okit-accent-dark) !important;
    color: var(--okit-white) !important;
}

#basket-modal .button-group .btn-secondary {
    background: transparent !important;
    border-color: var(--okit-grey-400) !important;
    color: var(--okit-grey-700) !important;
}

#basket-modal .button-group .btn-secondary:hover {
    border-color: var(--okit-black) !important;
    color: var(--okit-black) !important;
}

#basket-modal a {
    color: var(--okit-black);
    text-decoration: none;
}

#basket-modal a:hover {
    color: var(--okit-accent);
}

/* History modal — 2-row layout */
.okshop-modal__dialog--wide {
    max-width: min(50vw);
}
#history-modal .okshop-modal__dialog {
    max-height: 90vh;
    height: 90vh;
}
#history-modal .okshop-modal__body {
    overflow: hidden;
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
#history-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.history-modal-inner {
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    min-height: 0;
    gap: 0;
}
/* Row 1: addresses — fixed height, no scroll */
.history-modal-addresses {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.history-modal-col {
    flex: 1;
    min-width: 0;
}
/* Row 2: products — takes remaining height, scrolls internally */
.history-modal-products {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.history-modal-products .supplier {
    display: none !important;
}
.history-modal-products .hm-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.history-modal-products .hm-content .row .status,
.history-modal-products .hm-content .row .image {
    width: 25% !important;
}
.history-modal-products .hm-content .row .details{
    width: 45% !important;
}

/* Labels */
.hm-label {
    font-size: 0.75rem;
    font-weight: 700;
    /* text-transform: uppercase; */
    letter-spacing: 0.06em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3rem;
    margin-bottom: 0.6rem;
}
.hm-content {
    font-size: 0.9rem;
    line-height: 1.6;
}
.hm-service {
    display: inline-block;
    width: 100%;
    padding-bottom: 1rem;
}
.hm-service span,
.hm-service .item {
    display: inline-block !important;
    width: 20%;
    font-size: 1.2rem;
}

.hm-service span,
.hm-service .item,
.hm-service .item h4 {
    font-size: 1.2rem !important;
}

.history-modal-services {
    width: 100% !important;
}
.hm-service .item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hm-service img {
    max-height: 20px;
    width: auto;
}
/* Product list in modal */
#history-modal .product-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.88rem;
}
#history-modal .product-name {
    font-weight: 500;
    margin: 0 0 0.15rem;
}
#history-modal .headline {
    font-size: 0.8rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
}
#history-modal .total,
#history-modal .subtotal {
    font-weight: 600;
    padding-top: 0.5rem;
}
#history-modal .product-item .image img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}
#history-modal .code,
#history-modal .product-description {
    font-size: 0.8rem;
    margin: 0;
}
#history-modal .button-group {
    padding-top: 1rem;
    border-top: 1px solid #eee;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

#address-modal-fields .row {
    margin-top: 1rem !important;
}

/* Address section cards on profile page */
.address-section {
    margin-bottom: 2rem;
}
.address-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.address-section-header .header {
    margin: 0;
}
.address-summary {
    margin: 0.25rem 0 0.5rem;
    line-height: 1.5;
}
.address-card {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.address-card .address-summary {
    margin: 0;
    flex: 1;
}   
.address-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.address-card-actions .btn {
    max-width: unset !important;
}

.address-card--add {
    justify-content: center;
}

/* ============================================
   FAQ PAGE LAYOUT
   ============================================ */

.site-main:has(.faq-page) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.site-main:has(.faq-page) > .faq-page {
    flex: 1 !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    padding: var(--okit-space-md) 0 !important;
    scrollbar-color: var(--okit-grey-200) transparent;
    scrollbar-width: thin;
}

.site-main:has(.faq-page) > .faq-page::-webkit-scrollbar { width: 4px; }
.site-main:has(.faq-page) > .faq-page::-webkit-scrollbar-track { background: transparent; }
.site-main:has(.faq-page) > .faq-page::-webkit-scrollbar-thumb { background: var(--okit-grey-200); border-radius: 2px; }

.site-main:has(.faq-page) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}

/* Legal pages: Impressum, Datenschutz, AGB, Widerruf, Zahlungsinfo */
.legal-page .container {
    padding: var(--okit-space-sm) var(--okit-space-md) !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.legal-page .content > .container,
.legal-page .content > .container-xl,
.legal-page .content > .container-xxl,
.legal-page .content > .container-fluid {
    padding-top: var(--okit-space-sm) !important;
    padding-bottom: var(--okit-space-sm) !important;
}

.site-main:has(.legal-page) {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.site-main:has(.legal-page) > .legal-page {
    flex: 1 !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    padding: var(--okit-space-md) 0 !important;
    scrollbar-color: var(--okit-grey-200) transparent;
    scrollbar-width: thin;
}

.site-main:has(.legal-page) > .legal-page::-webkit-scrollbar { width: 4px; }
.site-main:has(.legal-page) > .legal-page::-webkit-scrollbar-track { background: transparent; }
.site-main:has(.legal-page) > .legal-page::-webkit-scrollbar-thumb { background: var(--okit-grey-200); border-radius: 2px; }

.site-main:has(.legal-page) > .catalog-session {
    border-left: 1px solid var(--okit-grey-200) !important;
    width: 12vw !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
    align-self: stretch !important;
}

/* Legal pages — Typography & Brand */
.legal-page {
    font-family: var(--okit-font-body);
    color: var(--okit-black);
    padding: var(--okit-space-md) var(--okit-space-lg);
}

.legal-page h1 {
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-2xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--okit-black);
    margin: 0 0 var(--okit-space-lg);
    padding-bottom: var(--okit-space-sm);
    border-bottom: 2px solid var(--okit-accent);
}

.legal-page h2 {
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-base);
    font-weight: 600;
    color: var(--okit-black);
    margin: var(--okit-space-lg) 0 var(--okit-space-xs);
    padding-bottom: var(--okit-space-xs);
    border-bottom: 1px solid var(--okit-grey-200);
    letter-spacing: 0;
}

.legal-page h3 {
    font-family: var(--okit-font-body);
    font-size: var(--okit-text-sm);
    font-weight: 600;
    color: var(--okit-grey-700);
    margin: var(--okit-space-md) 0 var(--okit-space-xs);
    letter-spacing: 0;
}

.legal-page p {
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-700);
    line-height: 1.7;
    margin: 0 0 var(--okit-space-sm);
}

.legal-page ul,
.legal-page ol {
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-700);
    line-height: 1.7;
    margin: 0 0 var(--okit-space-sm);
    padding-left: var(--okit-space-lg);
}

.legal-page li {
    margin-bottom: 0.2rem;
}

.legal-page a {
    color: var(--okit-accent-dark);
    text-decoration: none;
    transition: color var(--okit-transition);
}

.legal-page a:hover {
    color: var(--okit-accent);
    text-decoration: underline;
}

.legal-page strong {
    color: var(--okit-black);
    font-weight: 600;
}

.legal-page address {
    font-style: normal;
    font-size: var(--okit-text-sm);
    color: var(--okit-grey-700);
    line-height: 1.7;
    margin-bottom: var(--okit-space-md);
}

.legal-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--okit-text-sm);
    margin-bottom: var(--okit-space-md);
}

.legal-page table th {
    text-align: left;
    font-weight: 600;
    color: var(--okit-black);
    padding: var(--okit-space-xs) var(--okit-space-sm);
    border-bottom: 2px solid var(--okit-grey-200);
}

.legal-page table td {
    padding: var(--okit-space-xs) var(--okit-space-sm);
    color: var(--okit-grey-700);
    border-bottom: 1px solid var(--okit-grey-200);
    vertical-align: top;
}

/* ============================================
   AIMEOS MOBILE — alle Anpassungen < 768px
   Desktop-CSS bleibt unverändert.
   ============================================ */
@media (max-width: 768px) {

    /* --- Globales Layout: kein fixed-height flex, normales Scrollen ---
         overflow: unset hebt den Desktop-overflow:hidden komplett auf,
         damit der body (overflow:auto auf Mobile) scrollen kann. */
    .site-main:has(.aimeos.catalog-detail),
    .site-main:has(.aimeos.basket-standard),
    .site-main:has(.aimeos.checkout-standard),
    .site-main:has(.aimeos.checkout-confirm),
    .site-main:has(.aimeos.account-history),
    .site-main:has(.aimeos.account-profile),
    .site-main:has(.aimeos.account-watch),
    .site-main:has(.aimeos.account-favorite),
    .site-main:has(.aimeos.account-download),
    .site-main:has(.faq-page),
    .site-main:has(.legal-page),
    .site-main:has(.account-dashboard) {
        display: block !important;
        overflow: unset !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* Container: full width, kein overflow-clip */
    .site-main:has(.aimeos.catalog-detail) > .container,
    .site-main:has(.aimeos.basket-standard) > .container,
    .site-main:has(.aimeos.checkout-standard) > .container,
    .site-main:has(.aimeos.checkout-confirm) > .container,
    .site-main:has(.aimeos.account-history) > .container,
    .site-main:has(.aimeos.account-profile) > .container,
    .site-main:has(.aimeos.account-watch) > .container,
    .site-main:has(.aimeos.account-favorite) > .container,
    .site-main:has(.aimeos.account-download) > .container {
        overflow-y: visible !important;
        max-width: 100% !important;
        padding: 0 var(--okit-space-sm) !important;
        display: block !important;
        height: auto !important;
    }


    /* --- Catalog-Session: ausblenden --- */
    .catalog-session,
    .site-main:has(.aimeos.catalog-filter) > .catalog-session,
    .site-main:has(.aimeos.catalog-detail) > .catalog-session,
    .site-main:has(.aimeos.basket-standard) > .catalog-session,
    .site-main:has(.aimeos.checkout-standard) > .catalog-session,
    .site-main:has(.aimeos.checkout-confirm) > .catalog-session,
    .site-main:has(.aimeos.account-history) > .catalog-session,
    .site-main:has(.aimeos.account-profile) > .catalog-session,
    .site-main:has(.aimeos.account-watch) > .catalog-session,
    .site-main:has(.aimeos.account-favorite) > .catalog-session,
    .site-main:has(.aimeos.account-download) > .catalog-session,
    .site-main:has(.faq-page) > .catalog-session,
    .site-main:has(.legal-page) > .catalog-session {
        display: none !important;
    }

    /* --- Catalog-Filter Sidebar: ausblenden --- */
    .aimeos.catalog-filter,
    div.section.aimeos.catalog-filter {
        display: none !important;
    }

    /* Ausnahme: in der Navbar sichtbar, aber nur der ctx-dropdown */
    .site-navbar__context-nav .aimeos.catalog-filter,
    .site-navbar__context-nav div.section.aimeos.catalog-filter {
        display: block !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Desktop-Tree-Wrapper und accountMenu in der Navbar ausblenden */
    .site-navbar__context-nav .catalog-filter-tree,
    .site-navbar__context-nav .account-subnav,
    .site-navbar__context-nav .auth-tabs,
    .site-navbar__context-nav .aimeos-overlay-offscreen,
    .site-navbar__context-nav a.menu {
        display: none !important;
    }

    /* Nur den Mobile-Dropdown sichtbar lassen */
    .site-navbar__context-nav .site-navbar__ctx-dropdown--aimeos {
        display: flex !important;
    }

    /* --- Container mit Aimeos: Stack statt flex-row --- */
    .container:has(.aimeos.catalog-detail),
    .container:has(.aimeos.basket-standard),
    .container:has(.aimeos.checkout-standard),
    .container:has(.aimeos.checkout-confirm),
    .container:has(.aimeos.account-history),
    .container:has(.aimeos.account-profile),
    .container:has(.aimeos.account-basket),
    .container:has(.aimeos.account-watch),
    .container:has(.aimeos.account-favorite),
    .container:has(.aimeos.account-download),
    .container:has(.frame-type-felogin_login),
    .container:has(.femanager_new) {
        display: block !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* --- Produktliste: Höhenkette für scrollende Produktliste --- */
    body:has(.aimeos.catalog-list) {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .site-main:has(.aimeos.catalog-list) {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .site-main:has(.aimeos.catalog-list) > .container {
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .site-main:has(.aimeos.catalog-list) > .container > .frame-type-list:has(.catalog-list) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .aimeos.catalog-list {
        padding: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    div.section.aimeos.catalog-list .container-xxl {
        padding: 0 var(--okit-space-sm) !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    div.section.aimeos.catalog-list .container-xxl > nav.pagination {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    div.section.aimeos.catalog-list .container-xxl > div.catalog-list-items {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        width: 100% !important;
    }

    .aimeos.catalog-list .product.row {
        flex-direction: row !important;
        height: auto !important;
        min-height: 130px !important;
    }

    .aimeos.catalog-list .product.row .list-column:first-child {
        width: 130px !important;
        max-width: 130px !important;
        min-width: 130px !important;
        flex: 0 0 130px !important;
        height: 130px !important;
        border-right: 1px solid #c2c5c9 !important;
        border-bottom: none !important;
    }

    .aimeos.catalog-list .product.row .list-column:first-child a,
    .aimeos.catalog-list .product.row .list-column:first-child figure,
    .aimeos.catalog-list .product.row .list-column:first-child .media-list,
    .aimeos.catalog-list .product.row .list-column:first-child .media-item,
    .aimeos.catalog-list .product.row .list-column:first-child img {
        width: 130px !important;
        height: 130px !important;
        max-width: 130px !important;
        max-height: 130px !important;
    }

    /* Bootstrap col-Padding nullen */
    .aimeos.catalog-list .product.row .list-column.col-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Rechte Spalte: feste Höhe, column, space-between */
    .aimeos.catalog-list .product.row .list-column:last-child {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 130px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 6px 8px !important;
    }

    /* Rating ausblenden */
    .aimeos.catalog-list .product.row .list-column:last-child .rating {
        display: none !important;
    }

    /* text-list: nur Name, kein eigenes Padding/Margin */
    .aimeos.catalog-list .product.row .list-column:last-child .text-list {
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Supplier ausblenden */
    .aimeos.catalog-list .product.row .list-column:last-child .supplier {
        display: none !important;
    }

    /* Name: max 2 Zeilen */
    .aimeos.catalog-list .product.row .list-column:last-child h2 {
        font-size: 0.78rem !important;
        font-weight: 500 !important;
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Kurzbeschreibung ausblenden */
    .aimeos.catalog-list .product.row .list-column:last-child .text-item {
        display: none !important;
    }

    /* Offer: Desktop-Overrides resetten, sauber column */
    .aimeos.catalog-list .product.row .list-column:last-child .offer {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Section: Preis und Stock untereinander, linksbündig */
    .aimeos.catalog-list .product.row .list-column:last-child .offer .section {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Stock-Liste: Aimeos-Theme margin nullen */
    .aimeos.catalog-list .product.row .list-column:last-child .stock-list {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    /* Preis: margin-inline-start:auto vom Theme nullen */
    .aimeos.catalog-list .product.row .list-column:last-child .price-list {
        margin-inline-start: 0 !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .articleitem {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .stocktext {
        padding-left: 0 !important;
    }

    /* Stock-Indikator: perfekt rund */
    .aimeos.catalog-list .product.row .list-column:last-child .stocklevel {
        width: 7px !important;
        height: 7px !important;
        min-width: 7px !important;
        min-height: 7px !important;
        max-width: 7px !important;
        max-height: 7px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        display: inline-block !important;
        box-sizing: border-box !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .stocktext {
        font-size: 0.7rem !important;
        line-height: 1 !important;
        padding-left: 4px !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .stock-list {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    /* Preis-Liste */
    .aimeos.catalog-list .product.row .list-column:last-child .price-list {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-direction: row !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .price-actual {
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Basket-Form: kompakt, eine Zeile */
    .aimeos.catalog-list .product.row .list-column:last-child form.basket {
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .addbasket {
        margin: 0 !important;
        padding: 0 !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .input-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .input-group input[type="number"] {
        width: 32px !important;
        height: 26px !important;
        font-size: 0.72rem !important;
        margin: 0 !important;
        padding: 0 4px !important;
        flex-shrink: 0 !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child button.btn-action {
        height: 26px !important;
        width: 32px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .aimeos.catalog-list .product.row .list-column:last-child .btn-pin,
    .aimeos.catalog-list .product.row .list-column:last-child .btn-pin.active,
    .aimeos.catalog-list .product.row .list-column:last-child .btn-action-icon,
    .aimeos.catalog-list .product.row .list-column:last-child .btn-action-icon.is-active {
        width: 32px !important;
        height: 26px !important;
        min-width: 32px !important;
        min-height: 26px !important;
        max-width: 32px !important;
        max-height: 26px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* --- Produktdetail: Stack --- */
    .aimeos .catalog-detail .product {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    .aimeos.catalog-detail {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-top: var(--okit-space-sm) !important;
    }

    .catalog-detail .row > div {
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: visible !important;
    }

    .aimeos .catalog-detail .product > .col-sm-6:first-child,
    .aimeos .catalog-detail .product > .col-sm-6:last-of-type,
    .aimeos .catalog-detail .product > .col-sm-12 {
        grid-column: unset !important;
        grid-row: unset !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .catalog-detail .container-xxl {
        padding: 0 var(--okit-space-sm) !important;
    }

    /* Thumbnail-Strip: auf Mobile ausblenden */
    .aimeos .catalog-detail .catalog-detail-image .catalog-detail-image-list {
        display: none !important;
    }

    .site-main .catalog-detail .catalog-detail-additional div.tab-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .aimeos .catalog-detail .nav-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    /* --- Basket / Checkout / Account: volle Breite --- */
    .aimeos.basket-standard,
    .aimeos.checkout-standard,
    .aimeos.checkout-confirm,
    .aimeos.account-history,
    .aimeos.account-profile,
    .aimeos.account-watch,
    .aimeos.account-favorite,
    .aimeos.account-download {
        width: 100% !important;
        padding: var(--okit-space-sm) !important;
    }

    .aimeos.account-watch .watch-item form.delete,
    .aimeos.account-favorite .favorite-item form.delete,
    .aimeos.account-basket .basket-item form.delete {
        position: absolute !important;
        top: unset !important;
        right: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        order: unset !important;
    }

    /* --- Watch/Favorite Listen: Stack --- */
    .site-main .watch-item,
    .site-main .favorite-item {
        flex-wrap: wrap !important;
        min-height: 0 !important;
        padding: var(--okit-space-sm) !important;
    }

    .site-main .watch-details {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* --- Account-Subnav: scrollbar horizontal --- */
    .catalog-filter-tree .account-subnav--sidebar {
        display: none !important;
    }

    .account-subnav {
        overflow-x: auto !important;
    }

    .account-subnav__list {
        flex-wrap: nowrap !important;
        padding-bottom: var(--okit-space-xs) !important;
    }

    /* --- Login-Form --- */
    .frame-type-felogin_login {
        padding: var(--okit-space-md) !important;
    }

    .frame-type-felogin_login form fieldset {
        grid-template-columns: 1fr !important;
    }

    .frame-type-felogin_login form label {
        grid-column: 1 !important;
        margin-bottom: 2px !important;
    }

    #tx-felogin-input-username,
    #tx-felogin-input-password {
        width: 100% !important;
        grid-column: 1 !important;
    }

    .frame-type-felogin_login form .felogin-submit-row {
        grid-column: 1 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--okit-space-sm) !important;
    }

    .frame-type-felogin_login form button[type="submit"],
    .frame-type-felogin_login form input[type="submit"] {
        width: 100% !important;
        justify-self: stretch !important;
    }

    .frame-type-felogin_login .felogin-forgot-password-link {
        text-align: center !important;
    }

    /* --- Registrierung --- */
    .okit-register__grid {
        display: flex !important;
        flex-direction: column !important;
    }

    .okit-register__col--left {
        display: contents !important;
    }

    .okit-register__col--left > .okit-register__subgroup:not(.okit-register__submit-row) {
        order: 1;
    }

    .okit-register__col:not(.okit-register__col--left) {
        order: 2;
    }

    .okit-register__submit-row {
        order: 3;
    }


    /* --- FAQ + Legal: kein Overflow-hidden --- */
    .site-main:has(.faq-page) > .faq-page,
    .site-main:has(.legal-page) > .legal-page {
        overflow-y: visible !important;
        padding: var(--okit-space-sm) !important;
    }

    .faq-page .container,
    .legal-page .container {
        padding: 0 !important;
    }

    .faq-grid {
        flex-direction: column !important;
    }

    /* --- Katalog: Kategorie-Titel + Sortierung untereinander --- */
    .aimeos.catalog-list .container-xxl > div.catalog-list-head:first-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        padding-bottom: 0 !important;
    }

    .aimeos.catalog-list .container-xxl > div.catalog-list-head:first-child h1,
    .aimeos.catalog-list .container-xxl > div.catalog-list-head:first-child h2 {
        font-size: var(--okit-text-base) !important;
    }

    .aimeos.catalog-list .container-xxl > nav.pagination:nth-of-type(1) {
        width: 100% !important;
        flex: 0 0 100% !important;
        justify-content: flex-start !important;
        padding-top: var(--okit-space-xs) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--okit-white) !important;
    }

    .aimeos .sort {
        padding-right: 0 !important;
        width: 100% !important;
    }

    .aimeos .sort ul {
        width: 100% !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    .aimeos .sort ul li {
        min-width: 0 !important;
        flex-shrink: 1 !important;
        flex: 1 1 0 !important;
    }

    .aimeos .sort ul li a {
        font-size: var(--okit-text-xs) !important;
        padding: 0 2px !important;
        white-space: nowrap !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* --- Bottom-Sheets: Mobile-optimiert --- */

    /* Body einfrieren wenn Modal offen — verhindert scroll-chaining auf iOS/Android */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* okshop-modal: am unteren Rand ausrichten */
    .okshop-modal {
        align-items: flex-end !important;
    }

    /* Dialog: feste Höhe + flex-column → Header bleibt oben, Body scrollt */
    .okshop-modal__dialog {
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        height: 85dvh !important;
        max-height: 85dvh !important;
        border-radius: var(--okit-border-radius-md) var(--okit-border-radius-md) 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Header: nicht schrumpfen */
    .okshop-modal__header {
        flex-shrink: 0 !important;
        border-radius: var(--okit-border-radius-md) var(--okit-border-radius-md) 0 0 !important;
        padding: var(--okit-space-sm) var(--okit-space-md) !important;
    }

    .okshop-modal__close {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Body: wächst in den restlichen Platz, scrollt bei Überlauf */
    .okshop-modal__body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: var(--okit-space-sm) var(--okit-space-md) !important;
    }

    /* History-Bottom-Sheet: Adressen untereinander statt nebeneinander */
    .history-modal-addresses {
        flex-direction: column !important;
        gap: var(--okit-space-sm) !important;
    }

    .history-modal-col {
        width: 100% !important;
    }

    /* History-modal: overflow fix — Desktop baut eine nested-scroll-Kette (overflow:hidden überall),
       Mobile scrollt einfach den __body-Container durch; alle inneren Elemente fließen normal */
    #history-modal .okshop-modal__body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #history-modal-body {
        overflow: visible !important;
        flex: 0 0 auto !important;
        display: block !important;
        height: auto !important;
    }
    .history-modal-inner {
        display: block !important;
        height: auto !important;
    }
    .history-modal-products {
        flex: none !important;
        overflow: visible !important;
        height: auto !important;
    }
    .history-modal-products .hm-content {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
    }

    /* hm-service: Schriftgröße angleichen an Rest des Bottom-Sheets */
    .hm-service {
        padding-bottom: var(--okit-space-xs) !important;
    }
    .hm-service span,
    .hm-service .item,
    .hm-service .item h4,
    .hm-service .hm-service-label,
    .hm-service .hm-service-name,
    .hm-service .hm-status,
    .hm-service .name {
        display: block !important;
        width: 100% !important;
        font-size: var(--okit-text-sm) !important;
        font-weight: normal !important;
    }
    .hm-service .item {
        flex-wrap: wrap !important;
    }
    .hm-service .hm-service-label {
        font-weight: 600 !important;
        color: var(--okit-grey-500) !important;
    }

    /* Produktliste im Modal: kompaktes Layout
       [Bild ~40%] | [Name (oben) / Anzahl·Preis (unten, rechtsbündig)]
    */

    /* Headline dezent, nur Qty + Preis rechts */
    #history-modal .headline {
        font-size: var(--okit-text-xs) !important;
        color: var(--okit-grey-400) !important;
        border-bottom: 1px solid var(--okit-grey-200) !important;
        padding-bottom: var(--okit-space-xs) !important;
        margin-bottom: var(--okit-space-xs) !important;
    }
    #history-modal .headline {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
    }
    #history-modal .headline > [class*="col-"] {
        flex: 0 0 60% !important;
        width: 60% !important;
        max-width: 60% !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: var(--okit-space-xs) !important;
    }
    #history-modal .headline > [class*="col-"] > .row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        width: 100% !important;
        gap: var(--okit-space-xs) !important;
    }
    #history-modal .headline .quantity {
        flex: 0 0 3rem !important;
        width: 3rem !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    #history-modal .headline .price {
        flex: 0 0 5rem !important;
        width: 5rem !important;
        text-align: right !important;
        white-space: nowrap !important;
        padding-right: var(--okit-space-lg);
    }
    #history-modal .headline .unitprice {
        display: none !important;
    }

    /* product-item: flex-row, Bild ~40%, Rest ~60% */
    #history-modal .product-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: var(--okit-space-xs) !important;
        padding: var(--okit-space-xs) 0 !important;
        border-bottom: 1px solid var(--okit-grey-100) !important;
    }
    /* Linke Seite (Bild): ~40% */
    #history-modal .product-item > .col-5 {
        flex: 0 0 40% !important;
        width: 40% !important;
        max-width: 40% !important;
        padding: 0 !important;
    }
    /* Innere Row der linken Seite: Bild zentriert, status + details weg */
    #history-modal .product-item .row.g-0:first-child {
        display: flex !important;
        /* align-items: center !important; */
        justify-content: flex-end !important;
        height: 100% !important;
    }
    #history-modal .product-item .status {
        display: none !important;
    }
    #history-modal .product-item .image {
        flex: 0 0 auto !important;
        width: auto !important;
        text-align: center !important;
    }
    #history-modal .product-item .image img {
        max-width: 60px !important;
        max-height: 60px !important;
        object-fit: contain !important;
    }
    #history-modal .product-item .details {
        display: none !important;
    }

    /* Rechte Seite: ~60%, flex-column, Name oben — Qty+Preis unten */
    #history-modal .product-item > .col-7 {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    /* Name aus .details holen — aber details ist versteckt, also name direkt über product-item zeigen */
    /* Bootstrap .col-7 enthält .order-row mit quantity/price — wir brauchen aber den Namen.
       Lösung: details wieder einblenden, image darin ausblenden */
    #history-modal .product-item > .col-5 .details {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    #history-modal .product-item > .col-5 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--okit-space-xs) !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    #history-modal .product-item > .col-5 .row.g-0:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: var(--okit-space-xs) !important;
        justify-content: flex-start !important;
        height: auto !important;
    }
    #history-modal .product-item .details .product-name {
        font-size: var(--okit-text-sm) !important;
        font-weight: 500 !important;
        margin: 0 !important;
        word-break: break-word !important;
        padding: var(--okit-space-sm) 0 0 var(--okit-space-sm) !important;
    }

    #history-modal .product-item .details .code {
        font-size: var(--okit-text-xs) !important;
        color: var(--okit-grey-400) !important;
        margin: 0 !important;
        display: block !important;
        padding-left: var(--okit-space-sm);
    }
    #history-modal .product-item .details .product-description,
    #history-modal .product-item .details .attr-list,
    #history-modal .product-item .details .timeframe {
        display: none !important;
    }

    /* Rechte Seite: Qty | Preis rechtsbündig */
    #history-modal .product-item .order {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: var(--okit-space-xs) !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    #history-modal .product-item .quantity {
        flex: 0 0 3rem !important;
        width: 3rem !important;
        text-align: center !important;
        font-size: var(--okit-text-xs) !important;
        color: var(--okit-grey-500) !important;
        white-space: nowrap !important;
        border-right: 1px solid var(--okit-grey-200) !important;
    }
    #history-modal .product-item .unitprice {
        display: none !important;
    }
    #history-modal .product-item .price {
        flex: 0 0 5rem !important;
        width: 5rem !important;
        text-align: left !important;
        font-size: var(--okit-text-sm) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        padding-left: 2% !important;
    }

    #history-modal .hm-content .price {
        text-align: right !important;
    }

    #history-modal .hm-content .product-item .row .price {
        text-align: left !important;
    }

    /* Total/Subtotal kompakt */
    #history-modal .total,
    #history-modal .subtotal,
    #history-modal .delivery.row,
    #history-modal .tax {
        font-size: var(--okit-text-sm) !important;
    }
    /* Button-group: Abstand nach unten */
    #history-modal .button-group {
        padding-bottom: var(--okit-space-md) !important;
        text-align: center;
    }

    /* aimeos-container (Watch/Fav): Bottom-Sheet mit interner Scroll-Kette */
    .aimeos-container {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 80dvh !important;
        border-radius: var(--okit-border-radius-md) var(--okit-border-radius-md) 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Header und Close-Button: nicht schrumpfen */
    .aimeos-container .btn-close {
        flex-shrink: 0 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: var(--okit-space-sm) var(--okit-space-sm) 0 auto !important;
    }

    .aimeos-container .header {
        flex-shrink: 0 !important;
        padding: 0 var(--okit-space-md) var(--okit-space-sm) !important;
        margin-bottom: 0 !important;
    }

    /* Artikel-Listen: scrollbarer Bereich */
    .aimeos.aimeos-container .watch-items,
    .aimeos.aimeos-container .favorite-items {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: var(--okit-space-sm) var(--okit-space-md) !important;
        padding-bottom: env(safe-area-inset-bottom, var(--okit-space-md)) !important;
    }

    /* --- Favoriten im aimeos-container: Mobile --- */
    .aimeos.aimeos-container .favorite-item {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        flex-wrap: nowrap !important;
        border-bottom: 1px solid var(--okit-grey-200) !important;
    }

    /* Link: order 1, volle Breite minus Delete-Button */
    .aimeos.aimeos-container .favorite-item > a {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 44px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--okit-space-sm) !important;
        padding: var(--okit-space-sm) 0 !important;
        text-decoration: none !important;
    }

    .aimeos.aimeos-container .favorite-item > a .media-item {
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
    }

    .aimeos.aimeos-container .favorite-item > a .name {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        min-width: 0 !important;
        flex: 1 !important;
        font-size: var(--okit-text-sm) !important;
    }

    /* Delete-Button: order 2, rechts, volle Höhe */
    .aimeos.aimeos-container .favorite-item form.delete {
        order: 2 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        align-self: stretch !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-left: 1px solid var(--okit-grey-200) !important;
    }

    .aimeos.aimeos-container .favorite-item .minibutton.delete {
        position: static !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        aspect-ratio: unset !important;
        background: none !important;
        color: var(--okit-grey-400) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Delete-Button: aus absolute herausnehmen, immer sichtbar */
    .aimeos.account-watch .watch-item form.delete,
    .aimeos.account-favorite .favorite-item form.delete,
    .aimeos.account-basket .basket-item form.delete {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* --- Watch im aimeos-container: Mobile ---
       DOM: form.delete (1) → a.watch-basic (2) → form.watch-details (3)
       order 1 = watch-basic links, order 2 = delete rechts, order 3 = details volle Breite
    */
    .aimeos.aimeos-container .watch-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 0 !important;
        row-gap: var(--okit-space-xs) !important;
        padding: var(--okit-space-sm) 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        border-bottom: 1px solid var(--okit-grey-200) !important;
    }

    /* Zeile 1 links: Bild + Name */
    .aimeos.aimeos-container .watch-basic {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 44px) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--okit-space-sm) !important;
        text-decoration: none !important;
    }

    .aimeos.aimeos-container .watch-basic .media-item {
        width: 52px !important;
        height: 52px !important;
        flex-shrink: 0 !important;
        background: var(--okit-grey-100) !important;
        border-radius: var(--okit-border-radius) !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .aimeos.aimeos-container .watch-basic .media-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .aimeos.aimeos-container .watch-basic .name {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: var(--okit-text-sm) !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Preis ausblenden — kein Platz auf Mobile */
    .aimeos.aimeos-container .watch-basic .price-list {
        display: none !important;
    }

    /* Zeile 1 rechts: Delete */
    .aimeos.aimeos-container .watch-item form.delete {
        order: 2 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .aimeos.aimeos-container .watch-item .minibutton.delete {
        position: static !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        background: none !important;
        color: var(--okit-grey-400) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Zeile 2: Watch-Details — volle Breite, Felder untereinander */
    .aimeos.aimeos-container .watch-details {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--okit-space-xs) !important;
        margin: var(--okit-space-xs) 0 0 0 !important;
        padding: 0 !important;
    }

    .aimeos.aimeos-container .watch-details .form-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--okit-space-xs) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .aimeos.aimeos-container .watch-details .form-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--okit-space-sm) !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .aimeos.aimeos-container .watch-details .form-item label {
        font-size: var(--okit-text-xs) !important;
        color: var(--okit-grey-600) !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .aimeos.aimeos-container .watch-details .form-item.timeframe select {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: var(--okit-text-xs) !important;
        height: 30px !important;
        max-width: 100% !important;
    }

    .aimeos.aimeos-container .watch-details .form-item input[type="checkbox"] {
        flex-shrink: 0 !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    .aimeos.aimeos-container .watch-details .btn-action {
        width: 100% !important;
        margin: var(--okit-space-xs) 0 0 0 !important;
        height: 36px !important;
        font-size: var(--okit-text-sm) !important;
    }

    /* Kategorietitel im Hauptinhalt ausblenden — steht bereits in der Navbar */
    .aimeos.catalog-list .container-xxl > div.catalog-list-head:first-child {
        display: none !important;
    }

    /* Nicht-Shop-Seiten: mehr Seitenabstand */
    .legal-page .container.page-content {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    .page-content {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* TYPO3 Content-Header (doppelte Überschrift) ausblenden */
    .legal-page .container.page-content .frame header,
    .page-content .frame header {
        display: none !important;
    }

    .faq-hero {
        display: none !important;
    }

    .faq-grid {
        padding-top: var(--okit-space-md) !important;
    }

    /* --- Warenkorb (basket-standard): Mobile-Layout --- */

    /* Titel "Warenkorb" ausblenden — steht bereits in der Navbar */
    .aimeos.basket-standard .row.header h2 {
        display: none !important;
    }

    .aimeos .common-summary-detail .header {
        display: none !important;
    }

    /* Speichern-Bereich: fixed am unteren Rand, dezent */
    .aimeos.basket-standard .basket-save {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 45px !important;
        z-index: 1060 !important;
        background: var(--okit-grey-100) !important;
        border-top: 1px solid var(--okit-grey-200) !important;
        padding: 0 var(--okit-space-md) !important;
        display: flex !important;
        align-items: center !important;
        opacity: 0.75 !important;
        box-sizing: border-box !important;
    }

    .aimeos.basket-standard .basket-save .form-control,
    .aimeos.basket-standard .basket-save .btn {
        font-size: var(--okit-text-xs) !important;
        padding: 2px 8px !important;
        height: 28px !important;
    }

    /* Scroll-Bereich: Platz für fixed basket-save freihalten */
    .aimeos.basket-standard {
        padding-bottom: 45px !important;
    }

    /* Gutschein: kompakter */
    .aimeos.basket-standard .basket-standard-coupon {
        margin-top: var(--okit-space-xs) !important;
        margin-bottom: var(--okit-space-sm) !important;
        padding: 0 0 var(--okit-space-sm) 0 !important;
        align-items: stretch !important;
        text-align: left !important;
    }

    .aimeos.basket-standard .basket-standard-coupon .header {
        display: none !important;
    }

    .aimeos.basket-standard .basket-standard-coupon .content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    .aimeos.basket-standard .basket-standard-coupon .coupon-new {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        opacity: 0.7 !important;
    }

    .aimeos.basket-standard .basket-standard-coupon .coupon-new .coupon-code {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 30px !important;
        font-size: var(--okit-text-xs) !important;
        padding: 2px 8px !important;
    }

    .aimeos.basket-standard .basket-standard-coupon .coupon-new .btn {
        flex-shrink: 0 !important;
        width: auto !important;
        height: 30px !important;
        font-size: var(--okit-text-xs) !important;
        padding: 2px 10px !important;
    }

    /* Zurück-Button ausblenden */
    .aimeos.basket-standard .button-group .btn-back {
        display: none !important;
    }

    /* Button-Gruppe: volle Breite, untereinander, weniger Abstand oben */
    .aimeos.basket-standard .button-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--okit-space-xs) !important;
        margin-top: var(--okit-space-xs) !important;
        padding-top: 0 !important;
    }

    .aimeos.basket-standard .button-group .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* --- Bestellhistorie: kompaktere Items --- */
    .aimeos.account-history {
        padding: 0 !important;
    }

    .aimeos.account-history .history-item {
        padding: var(--okit-space-sm) !important;
        margin: var(--okit-space-sm) 0 !important;
    }

    /* --- Bestellhistorie: Label + Order-ID in einer Zeile --- */
    .aimeos.account-history .order-basic {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: var(--okit-space-xs) !important;
        flex-wrap: nowrap !important;
    }

    .aimeos.account-history .order-basic .name,
    .aimeos.account-history .order-basic .value {
        display: inline !important;
        white-space: nowrap !important;
    }

    /* --- Bestellhistorie: Titel ausblenden (Breadcrumb in Nav) --- */
    .aimeos.account-history .container-xxl h2.header {
        display: none !important;
    }

    /* --- Bestellhistorie: Buttons zentriert + top-Abstand --- */
    .aimeos.account-history .history-item .okit-action {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: var(--okit-space-xs) !important;
        padding-top: var(--okit-space-sm) !important;
    }

    .aimeos.account-history .history-item .okit-action .btn,
    .aimeos.account-history .history-item .okit-action button {
        width: auto !important;
    }

    /* ============================================================
       DASHBOARD — 1-Column Layout auf Mobile
       ============================================================ */
    .account-dashboard {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        overflow: visible !important;
    }

    .account-dashboard__panel--favorite,
    .account-dashboard__panel--basket,
    .account-dashboard__panel--watch {
        width: 100% !important;
        height: auto !important;
        overflow-y: visible !important;
        padding: var(--okit-space-sm) !important;
    }

    /* ============================================================
       DASHBOARD — Watch/Fav/Basket Items auf der Vorgemerkt-Seite
       ============================================================ */

    /* Watch-item: Zeile 1 = Bild+Name+Delete, Zeile 2 = Details */
    .aimeos.account-watch .watch-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 0 !important;
        row-gap: var(--okit-space-xs) !important;
        padding: var(--okit-space-sm) !important;
        position: relative !important;
    }

    /* watch-basic: volle Breite minus Delete-Button */
    .aimeos.account-watch .watch-basic {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 44px) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--okit-space-sm) !important;
        text-decoration: none !important;
        margin: 0 !important;
    }

    .aimeos.account-watch .watch-basic .media-item {
        width: 52px !important;
        height: 52px !important;
        flex-shrink: 0 !important;
    }

    .aimeos.account-watch .watch-basic .name {
        flex: 1 !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        font-size: var(--okit-text-sm) !important;
    }

    /* Delete-Button: sichtbar, rechts, Zeile 1 */
    .aimeos.account-watch .watch-item form.delete {
        order: 2 !important;
        position: static !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .aimeos.account-watch .watch-item .minibutton.delete {
        position: static !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Watch-Details: volle Breite, Felder untereinander */
    .aimeos.account-watch .watch-details {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        text-align: left !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--okit-space-xs) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .aimeos.account-watch .watch-details .form-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--okit-space-xs) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .aimeos.account-watch .watch-details .form-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--okit-space-sm) !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .aimeos.account-watch .watch-details .form-item label {
        font-size: var(--okit-text-xs) !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .aimeos.account-watch .watch-details .form-list label,
    .aimeos.account-watch .watch-details .form-list input,
    .aimeos.account-watch .watch-details .form-list select {
        width: auto !important;
    }

    .aimeos.account-watch .watch-details .form-item.timeframe select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 30px !important;
        font-size: var(--okit-text-xs) !important;
    }

    .aimeos.account-watch .watch-details .form-item input[type="checkbox"] {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .aimeos.account-watch .watch-details .btn-primary.btn-action {
        width: 100% !important;
        margin: var(--okit-space-xs) 0 0 0 !important;
        height: 36px !important;
        font-size: var(--okit-text-sm) !important;
    }

    /* Fav-item: Link volle Breite, Delete sichtbar rechts */
    .aimeos.account-favorite .favorite-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
    }

    .aimeos.account-favorite .favorite-item > a {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 44px) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--okit-space-sm) !important;
        padding: var(--okit-space-sm) !important;
        text-decoration: none !important;
    }

    .aimeos.account-favorite .favorite-item > a .media-item {
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
    }

    .aimeos.account-favorite .favorite-item > a .name {
        flex: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: var(--okit-text-sm) !important;
    }

    .aimeos.account-favorite .favorite-item form.delete {
        order: 2 !important;
        position: static !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-left: 1px solid var(--okit-grey-200) !important;
    }

    .aimeos.account-favorite .favorite-item .minibutton.delete {
        position: static !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Basket-item: Delete immer sichtbar rechts */
    .account-basket .basket-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        padding: 0 !important;
    }

    .account-basket .basket-item-link {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: var(--okit-space-sm) !important;
    }

    .aimeos.account-basket .basket-item form.delete {
        order: 2 !important;
        position: static !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-left: 1px solid var(--okit-grey-200) !important;
        transform: none !important;
    }

    .aimeos.account-basket .minibutton.delete {
        position: static !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ===== account-profile: Adressbereiche ===== */

    /* Section-Header bündig mit address-cards */
    .aimeos.account-profile h2.header {
        padding: 0 !important;
        margin-bottom: var(--okit-space-md) !important;
    }
    .aimeos.account-profile .account-profile-address .header {
        padding: 0 !important;
        margin: 0 0 var(--okit-space-md) 0 !important;
    }

    /* Row-Gutters neutralisieren damit h3 bündig mit address-card ist */
    .aimeos.account-profile .account-profile-address .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Rechnungs- und Lieferadresse untereinander, kein col-padding */
    .aimeos.account-profile .account-profile-address .payment,
    .aimeos.account-profile .account-profile-address .delivery {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: var(--okit-space-sm) !important;
    }

    /* address-card: Adresstext oben, Buttons darunter */
    .aimeos.account-profile .address-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--okit-space-xs) !important;
        padding: var(--okit-space-sm) !important;
    }

    /* Buttons: einheitliche Größe, zentriert, kompaktere Schrift */
    .aimeos.account-profile .address-card-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: var(--okit-space-xs) !important;
    }
    .aimeos.account-profile .address-card-actions .btn,
    .aimeos.account-profile .address-card--add .btn {
        width: fit-content !important;
        min-width: 60% !important;
        max-width: 100% !important;
        align-self: center !important;
        text-align: center !important;
        font-size: var(--okit-text-sm) !important;
        padding: 0.3rem 1rem !important;
    }

    /* Persönliche Daten: Label-Spalte volle Breite */
    .aimeos.account-profile .account-profile-settings .row.form-item > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .aimeos.account-profile .profile-settings-actions {
        display: flex !important;
        justify-content: center !important;
    }
    .aimeos.account-profile .profile-settings-actions .okit-btn-primary {
        width: fit-content !important;
        min-width: 60% !important;
        font-size: var(--okit-text-sm) !important;
        padding: 0.3rem 1rem !important;
    }

    /* ===== Widerruf (order-cancellation im history-modal Bottom-Sheet) ===== */

    .order-cancellation__product {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--okit-space-xs) !important;
        padding: var(--okit-space-sm) 0 !important;
        border-bottom: 1px solid var(--okit-grey-100) !important;
    }
    .order-cancellation__select {
        display: flex !important;
        align-items: flex-start !important;
        gap: var(--okit-space-sm) !important;
        font-size: var(--okit-text-sm) !important;
    }
    .order-cancellation__checkbox {
        flex-shrink: 0 !important;
        margin-top: 3px !important;
    }
    .order-cancellation__qty-wrap {
        display: flex !important;
        align-items: center !important;
        gap: var(--okit-space-sm) !important;
        flex-wrap: wrap !important;
    }
    .order-cancellation__qty {
        width: 5rem !important;
        font-size: var(--okit-text-sm) !important;
    }
    .order-cancellation__product-price {
        font-size: var(--okit-text-xs) !important;
        color: var(--okit-grey-400) !important;
    }
    .order-cancellation__submit {
        padding-top: var(--okit-space-md) !important;
        padding-bottom: var(--okit-space-md) !important;
    }
    .order-cancellation__submit button {
        width: 100% !important;
    }

    /* ===== basket-standard ===== */

    /* Tabellen-Layout auf Flex umstellen */
    .aimeos.basket-standard .table,
    .aimeos.basket-standard .table tbody,
    .aimeos.basket-standard .table tr,
    .aimeos.basket-standard .table td,
    .aimeos.basket-standard .table th {
        display: block !important;
        width: 100% !important;
    }
    .aimeos.basket-standard .table thead {
        display: none !important;
    }
    .aimeos.basket-standard .table tr {
        border-bottom: 1px solid var(--okit-grey-200) !important;
        padding: var(--okit-space-sm) 0 !important;
    }
    .aimeos.basket-standard .table td {
        padding: var(--okit-space-xs) 0 !important;
        border-bottom: none !important;
    }
    /* Basket-Save: Input flex, Button rechts daneben */
    .aimeos.basket-standard .basket-save .basket-name {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
    }
    .aimeos.basket-standard .basket-save .btn {
        flex-shrink: 0 !important;
        width: auto !important;
    }
    /* Coupon-Bereich kompakt */
    .aimeos.basket-standard .basket-standard-coupon .header,
    .aimeos.basket-standard .basket-standard-coupon .content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Button-Group: Checkout-Button volle Breite */
    .aimeos.basket-standard .button-group {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--okit-space-sm) !important;
    }
    .aimeos.basket-standard .button-group .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* ===== checkout-standard ===== */

    /* Stepper: Steps umbrechen, kleiner */
    .aimeos.checkout-standard .steps {
        padding-bottom: var(--okit-space-sm) !important;
    }
    .aimeos.checkout-standard .step {
        width: auto !important;
        font-size: var(--okit-text-xs) !important;
        padding: var(--okit-space-xs) var(--okit-space-sm) !important;
    }
    /* Step-Sections: weniger Padding */
    .aimeos.checkout-standard .section.checkout-standard-address,
    .aimeos.checkout-standard .section.checkout-standard-delivery,
    .aimeos.checkout-standard .section.checkout-standard-payment,
    .aimeos.checkout-standard .section.checkout-standard-summary {
        padding: var(--okit-space-sm) !important;
    }
    .aimeos.checkout-standard .section.checkout-standard-address h2,
    .aimeos.checkout-standard .section.checkout-standard-delivery h2,
    .aimeos.checkout-standard .section.checkout-standard-payment h2,
    .aimeos.checkout-standard .section.checkout-standard-summary h2 {
        font-size: var(--okit-text-base) !important;
        margin-bottom: var(--okit-space-sm) !important;
    }
    /* Service-Items: volle Breite */
    .aimeos.checkout-standard .service-list {
        gap: var(--okit-space-xs) !important;
    }
    .aimeos.checkout-standard .service-item {
        padding: var(--okit-space-sm) !important;
        gap: var(--okit-space-sm) !important;
    }
    /* Formular-Felder: volle Breite */
    .aimeos.checkout-standard .form-list .form-item > label,
    .aimeos.checkout-standard .form-list .form-item > input,
    .aimeos.checkout-standard .form-list .form-item > select {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Buttons nebeneinander zentriert */
    .aimeos.checkout-standard .button-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: var(--okit-space-sm) !important;
    }
    .aimeos.checkout-standard .button-group .btn,
    .aimeos.checkout-standard .btn-primary,
    .aimeos.checkout-standard button[type="submit"]:not(.btn-secondary) {
        width: auto !important;
        text-align: center !important;
    }

    /* ===== checkout-confirm ===== */
    .aimeos.checkout-confirm {
        max-width: 100% !important;
        padding: var(--okit-space-sm) !important;
    }

    /* Intro-Text: gleiches Padding wie h2 darüber */
    .aimeos.checkout-confirm .checkout-confirm-intro {
        padding: 0 1rem !important;
        margin: 0.5rem !important;
    }

    /* Bestellstatus: name/value untereinander statt nebeneinander */
    .aimeos.checkout-confirm .checkout-confirm-basic .attr-list .name,
    .aimeos.checkout-confirm .checkout-confirm-basic .attr-list .value {
        display: block !important;
        width: 100% !important;
    }
    .aimeos.checkout-confirm .checkout-confirm-basic .attr-list .name {
        font-weight: 600 !important;
        color: var(--okit-grey-500) !important;
        font-size: var(--okit-text-sm) !important;
        margin-top: var(--okit-space-xs) !important;
    }
    .aimeos.checkout-confirm .checkout-confirm-basic .attr-list .value {
        font-size: var(--okit-text-base) !important;
    }

    /* Bootstrap .col-3 width:25% auf .price in common-summary-detail übersteuern */
    .aimeos .common-summary-detail .price.col-3,
    .aimeos .common-summary-detail .col-3.price {
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    /* ===== h1 padding-top aus Aimeos-Theme übersteuern ===== */
    .aimeos h1 {
        padding: 0 1rem;
    }
    .checkout-standard-summary .note {
        padding: 0 1rem !important;
    }

    /* ===== AGB-Bereich: kein Einragen in Kommentarbereich ===== */
    .checkout-standard-summary-option-terms > h3,
    .checkout-standard-summary-option-account > h3 {
        margin: 1rem 0 var(--okit-space-xs) 0 !important;
        padding: 0 !important;
        font-size: var(--okit-text-base) !important;
    }

    /* ===== Summary + Confirm: col-sm-* Bereiche auf 100% ===== */
    .common-summary .common-summary-address .item,
    .common-summary .common-summary-service .item,
    .common-summary .common-summary-additional .item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* ===== Produktliste (common-summary): [Anzahl] [Bild] [Name] / [Preis] ===== */

    /* Headline ausblenden — zu eng */
    .common-summary .common-summary-detail .headline {
        display: none !important;
    }

    /* product-item: Grid mit 4 expliziten Spalten
       [Anzahl] [Bild] [Name/Artikelnr. 1fr] [Preis]
       Alle Wrapper (col-5, inner .row, col-7, .order) = display:contents
       damit Bootstrap-Breiten nie greifen */
    .common-summary .common-summary-detail .product-item {
        display: grid !important;
        grid-template-columns: 2rem 4.5rem 1fr 5rem !important;
        grid-template-areas: "qty img det prc" !important;
        align-items: center !important;
        column-gap: var(--okit-space-sm) !important;
        row-gap: 0 !important;
        padding: var(--okit-space-xs) 0 !important;
        border-bottom: 1px solid var(--okit-grey-100) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Alle Wrapper transparent schalten */
    .common-summary .common-summary-detail .product-item > [class*="col-"],
    .common-summary .common-summary-detail .product-item > [class*="col-"] > .row,
    .common-summary .common-summary-detail .product-item .order {
        display: contents !important;
    }
    /* status: komplett weg */
    .common-summary .common-summary-detail .product-item .status {
        display: none !important;
    }
    /* action (Löschen-Button): weg auf Summary/Confirm */
    .common-summary .common-summary-detail .product-item .action {
        display: none !important;
    }
    /* Bild */
    .common-summary .common-summary-detail .product-item .image {
        grid-area: img !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .common-summary .common-summary-detail .product-item .image img {
        max-width: 60px !important;
        max-height: 60px !important;
        width: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
    /* Details (Name+Artikelnr.) */
    .common-summary .common-summary-detail .product-item .details {
        grid-area: det !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: right !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
    /* Anzahl */
    .common-summary .common-summary-detail .product-item .quantity {
        grid-area: qty !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: var(--okit-text-xs) !important;
        color: var(--okit-grey-500) !important;
        white-space: nowrap !important;
        text-align: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .common-summary .common-summary-detail .product-item .product-name {
        font-size: var(--okit-text-sm) !important;
        font-weight: normal !important;
        margin: 0 !important;
        word-break: break-word !important;
    }
    .common-summary .common-summary-detail .product-item .code {
        font-size: var(--okit-text-xs) !important;
        color: var(--okit-grey-400) !important;
        margin: 0 !important;
        display: block !important;
    }
    .common-summary .common-summary-detail .product-item .product-description,
    .common-summary .common-summary-detail .product-item .attr-list,
    .common-summary .common-summary-detail .product-item .timeframe {
        display: none !important;
    }
    /* Preis: Spalte 4 — Bootstrap col-sm-5/col-md-3 mit höherem Selektor übersteuern */
    .common-summary .common-summary-detail .product-item .unitprice {
        display: none !important;
    }
    .common-summary .common-summary-detail .product-item .order .price,
    .common-summary .common-summary-detail .product-item .price {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        grid-area: prc !important;
        font-size: var(--okit-text-sm) !important;
        font-weight: normal !important;
        white-space: nowrap !important;
        text-align: right !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
    }

    /* ===== AGB-Bereich: Abstand zum Kommentarbereich ===== */
    .checkout-standard-summary-option {
        margin-top: var(--okit-space-md) !important;
    }

    /* ===== Checkout Summary/Confirm: Buttons nebeneinander zentriert ===== */
    /* Spezifität 0-4-0 übersteuert .aimeos.checkout-standard .button-group (0-3-0) */
    .aimeos.checkout-standard .common-summary .button-group,
    .checkout-confirm-retry .button-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: var(--okit-space-sm) !important;
    }
    .aimeos.checkout-standard .common-summary .button-group .btn,
    .checkout-confirm-retry .button-group .btn {
        width: auto !important;
        flex: 0 0 auto !important;
    }

}

.form-item.stripe-payment-element label { display: none; }
.form-item.stripe-payment-element .col-md-6:first-child { display: none; }
.form-item.stripe-payment-element .col-md-6:last-child { width: 100%; max-width: 100%; flex: 0 0 100%; }

.okit-payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .25rem;
    width: 100%;
    order: 99;
    flex-basis: 100%;
}
.okit-payment-icons img {
    height: 24px;
    width: auto;
    border-radius: 3px;
    display: block;
}

/* Social Share Buttons */
.okit-social-share {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: .75rem 0;
}
.okit-social-share ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.okit-share-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}
.okit-share-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.okit-share-btn:hover { background: #e0e0e0; color: #111; text-decoration: none; }
.okit-share-whatsapp  { background: #e7f8ee; color: #25D366; border-color: #b3e9c7; }
.okit-share-whatsapp:hover  { background: #25D366; color: #fff; }
.okit-share-facebook  { background: #e7edf8; color: #1877F2; border-color: #b3c8f5; }
.okit-share-facebook:hover  { background: #1877F2; color: #fff; }
.okit-share-twitter   { background: #f0f0f0; color: #111; border-color: #ccc; }
.okit-share-twitter:hover   { background: #111; color: #fff; }
.okit-share-pinterest { background: #fce8ea; color: #E60023; border-color: #f5b3bc; }
.okit-share-pinterest:hover { background: #E60023; color: #fff; }
.okit-share-telegram  { background: #e5f3fb; color: #229ED9; border-color: #a8d8f0; }
.okit-share-telegram:hover  { background: #229ED9; color: #fff; }
.okit-share-email     { background: #f0f0f0; color: #555; border-color: #ccc; }
.okit-share-email:hover     { background: #555; color: #fff; }
.okit-share-copy      { background: #f0f0f0; color: #555; border-color: #ccc; font-family: inherit; }
.okit-share-copy:hover      { background: #555; color: #fff; }
.okit-share-copy.okit-copied { background: #28a745; color: #fff; border-color: #28a745; }
.okit-share-label-text { display: none; }
@media (min-width: 576px) {
    .okit-share-label-text { display: inline; }
}