/*
 * Pelt Ram component styles.
 * Structural + visual rules aligned with Shoptet main-12.less.*.css and
 * peltram custom overlay (style_4_*.css). Dark theme with neon-green accent.
 */

/* ---------- Header ---------- */
.site-header {
    background: var(--color-bg);
    color: var(--color-fg);
    border-bottom: 1px solid var(--color-bg-line);
}
.site-header a { color: var(--color-fg); }
.site-header a:hover { color: var(--color-link); }
.site-header .container.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 18px;
    padding-bottom: 18px;
    flex-wrap: wrap;
}
.site-header .brand a {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--color-fg);
}
.site-header .brand img { max-height: 56px; width: auto; }

/* html.header-background-dark hint from source template */
html.header-background-dark .site-header { background: var(--color-bg); }

/* ---------- Primary navigation ---------- */
.site-nav .menu-level-1,
.site-nav .primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.site-nav .menu-level-1 > li,
.site-nav .primary-menu > li {
    position: relative;
    transition: background-color var(--transition-base);
}
.site-nav .menu-level-1 > li:hover,
.site-nav .primary-menu > li:hover {
    background-color: rgba(23, 255, 0, .2);
}
.site-nav .menu-level-1 > li > a,
.site-nav .primary-menu > li > a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-fg);
    white-space: nowrap;
    text-transform: none;
    position: relative;
}
.site-nav .menu-level-1 > li > a::after,
.site-nav .primary-menu > li > a::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 4px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-fast);
}
.site-nav .menu-level-1 > li:hover > a::after,
.site-nav .menu-level-1 > li > a:focus-visible::after,
.site-nav .primary-menu > li:hover > a::after { transform: scaleX(1); }

/* Sub menu — Shoptet menu-level-2 */
.site-nav .menu-level-2,
.site-nav .sub-menu,
.site-nav .navigationActions__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-bg-line);
    color: var(--color-fg);
    border: 1px solid var(--color-bg-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    padding: 8px 0;
    list-style: none;
    z-index: 40;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.site-nav li:hover > .menu-level-2,
.site-nav li:hover > .sub-menu,
.site-nav li:hover > .navigationActions__submenu,
.site-nav li:focus-within > .sub-menu,
.site-nav .menu-level-2.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.site-nav .menu-level-2 li,
.site-nav .sub-menu li { border-bottom: 1px solid var(--color-bg-mute); }
.site-nav .menu-level-2 li:last-child,
.site-nav .sub-menu li:last-child { border-bottom: 0; }
.site-nav .menu-level-2 a,
.site-nav .sub-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--color-fg);
    font-size: 14px;
}
.site-nav .menu-level-2 a:hover,
.site-nav .sub-menu a:hover {
    background: var(--color-bg-elev);
    color: var(--color-link);
}

/* ---------- Header actions ---------- */
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions .cart-count,
.header-actions .search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: transparent;
    color: var(--color-fg);
    border: 1px solid transparent;
    transition: background var(--transition-base), border-color var(--transition-base);
}
.header-actions .cart-count:hover,
.header-actions .search-toggle:hover {
    background: rgba(23, 255, 0, .12);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ---------- Hero / banners ---------- */
.hero {
    padding: 40px 0;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    margin: 24px 0;
}
.hero__title { font-size: 32px; margin-bottom: 12px; color: var(--color-fg); }
.hero__lead { max-width: 720px; color: var(--color-fg-muted); }

.banners-row,
.banner-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 32px 0;
    max-width: 100%;
}

/* ---------- Category header ---------- */
.category-top { margin: 16px 0 24px; }
.category-title { font-size: 28px; margin-bottom: 8px; color: var(--color-fg); }
.category-perex { color: var(--color-fg-muted); max-width: 800px; }

/* ---------- Product grid (Shoptet .products.products-page + .product > .p) ---------- */
.product-grid,
.products.products-page,
.products.products-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin: 24px 0 40px;
    list-style: none;
    padding: 0;
}

.product-card,
.product .p {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
    position: relative;
    color: var(--color-fg);
}
.product-card:hover,
.product .p:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
    border-color: var(--color-accent);
}

.product-card .thumb,
.product .p > a.image {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--color-bg-mute);
    overflow: hidden;
}
.product-card .thumb img,
.product .p > a.image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.product-card:hover .thumb img,
.product .p:hover > a.image img { transform: scale(1.05); }

.product-card .body,
.product .p-in { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product .p-in-in { display: flex; flex-direction: column; gap: 6px; }

.product-card .title,
.product .p a.name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-fg);
    display: block;
}
.product-card .title a:hover,
.product .p a.name:hover { color: var(--color-link); }

.product .availability { font-size: 13px; color: var(--color-fg-muted); }
.product .availability span { font-weight: 500; }
.product .availability.stock { color: var(--color-accent-strong); }
.product .availability.out { color: var(--color-fg-subtle); }

.product-card .price,
.product .price.price-final,
.product .price-final {
    font-weight: 700;
    color: var(--color-price);
    font-size: 18px;
    margin-top: auto;
}
.product .price-final strong { font-weight: 700; }
.product .price-additional { font-size: 12px; color: var(--color-fg-muted); }

.product .p-bottom { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 0 16px 14px; }
.product .p-tools { margin-top: 8px; }
.product .btn.btn-cart,
.btn.btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    color: var(--color-accent-strong);
    border: 1px solid var(--color-accent-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    width: 100%;
    text-decoration: none;
}
.product .btn.btn-cart:hover,
.btn.btn-cart:hover {
    background: var(--color-accent-strong);
    color: var(--color-fg-inverse);
    border-color: var(--color-accent-strong);
}

.product .p-code {
    display: block;
    padding: 6px 16px 12px;
    font-size: 11px;
    color: var(--color-fg-muted);
    letter-spacing: .3px;
}

/* Stock / sale badges */
.badge-stock, .badge-sale {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.badge-stock { background: var(--color-badge-stock); color: var(--color-fg-inverse); }
.badge-sale  { background: var(--color-badge-sale);  color: var(--color-fg); }

/* ---------- Breadcrumbs ---------- */
.breadcrumb,
.breadcrumbs {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    font-size: 13px;
    color: var(--color-fg-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.breadcrumb li + li::before,
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--color-fg-subtle); }
.breadcrumbs a { color: var(--color-fg-muted); }
.breadcrumbs a:hover { color: var(--color-link); }

/* ---------- Single product ---------- */
.single-product .layout,
.p-detail .p-detail-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    margin: 24px 0 48px;
    background: var(--color-bg-surface-alt);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.p-detail .p-detail-inner .p-data-wrapper { padding-right: 20px; }
.p-detail-inner-header { display: flex; flex-direction: column; gap: 12px; }
.p-detail-inner-header h1 { color: var(--color-accent-strong); font-size: 28px; }

.single-product .gallery__main img,
.p-detail .p-detail-inner img {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-mute);
}
.single-product .gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.single-product .gallery__thumbs img { border-radius: var(--radius-sm); }

.single-product .meta .price,
.p-detail .price-final,
.p-detail strong.price-final {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-price);
    display: inline-block;
    letter-spacing: .2px;
}
.p-detail .price-final-holder { display: inline-block; }
.single-product .meta .sku,
.p-basic-info-block .block .p-code { color: var(--color-fg); font-size: 13px; }

.p-detail .p-short-description {
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: 8px;
    color: var(--color-fg);
}

.availability-label {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    padding: 0;
    margin-left: 0;
    margin-bottom: 6px;
    color: var(--color-accent-strong);
}
.availability-label.out { color: var(--color-fg-subtle); }

.detail-parameters {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 12px 0;
    color: var(--color-fg);
}
.detail-parameters th,
.detail-parameters td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.detail-parameters th { width: 40%; color: var(--color-fg-muted); font-weight: 500; }
.detail-parameters a {
    color: var(--color-accent);
    text-decoration: underline dotted var(--color-accent);
    text-underline-offset: .2em;
}
.detail-parameters a:hover { color: var(--color-accent-hover); }
.detail-parameters-wrapper { margin: 24px 0; }

.p-add-to-cart-wrapper { margin: 16px 0; }
.add-to-cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.add-to-cart .quantity { border: none; }
.add-to-cart .amount {
    width: 64px;
    padding: 8px 10px;
    background: var(--color-bg-mute);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    text-align: center;
}
.btn.btn-conversion,
.add-to-cart-button,
a.btn.btn-conversion {
    background: transparent;
    color: var(--color-accent-strong);
    border: 1px solid var(--color-accent-strong);
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn.btn-conversion:hover,
.add-to-cart-button:hover,
a.btn.btn-conversion:hover {
    background: var(--color-accent-strong);
    color: var(--color-fg-inverse);
    border-color: var(--color-accent-strong);
}

.p-detail-tabs-wrapper { margin: 32px 0; }
.shp-tabs.p-detail-tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.shp-tabs.p-detail-tabs li a {
    display: inline-block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-fg-muted);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
    text-decoration: none;
}
.shp-tabs.p-detail-tabs li a:hover,
.shp-tabs.p-detail-tabs li.active a,
.shp-tabs.p-detail-tabs li a[aria-selected="true"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.description-inner { padding: 16px 0; line-height: 1.7; color: var(--color-fg); }
.description-inner p { margin: 0 0 1em; }
.description-inner img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Simple button style used across templates */
.simpleBtn,
a[data-testid="buttonBackToShop"] {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);
    display: inline-block;
}
.simpleBtn:hover,
a[data-testid="buttonBackToShop"]:hover {
    background-color: var(--color-accent);
    color: var(--color-fg-inverse);
}

/* ---------- Sidebar layout ---------- */
.main-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    margin: 30px 0;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-bg-surface);
    color: var(--color-fg);
    padding: 40px 0 20px;
    margin-top: 60px;
    border-top: 1px solid var(--color-bg-line);
}
.site-footer a { color: var(--color-fg); }
.site-footer a:hover { color: var(--color-link); }

.custom-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding: 16px 0;
}
.custom-footer h3, .custom-footer h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-accent);
    margin-bottom: 12px;
}
.custom-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}
.custom-footer p { color: var(--color-fg-muted); margin: 0 0 8px; }

.footer-newsletter {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-bg-line);
    margin-bottom: 24px;
}
.footer-bottom {
    border-top: 1px solid var(--color-bg-line);
    padding-top: 16px;
    margin-top: 24px;
    font-size: 13px;
    color: var(--color-fg-muted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 8px; margin: 30px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-fg);
    text-decoration: none;
}
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .current {
    background: var(--color-accent);
    color: var(--color-fg-inverse);
    border-color: var(--color-accent);
}

/* ---------- Widgets ---------- */
.widget { margin-bottom: 24px; }
.widget h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-fg);
}

.not-found { text-align: center; padding: 60px 20px; color: var(--color-fg-muted); }

/* Social row link-icons */
.social-buttons-wrapper .link-icons a.link-icon {
    color: var(--color-fg);
    transition: color var(--transition-base);
}
.social-buttons-wrapper .link-icons a.link-icon:hover { color: var(--color-accent); }

/* ---------- Front page welcome + tile gallery ---------- */
.welcome-wrapper { padding: 32px 0 48px; }
.welcome { text-align: center; color: var(--color-fg); }
.welcome__title {
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: .5px;
    margin: 0 0 12px;
    color: var(--color-fg);
    line-height: 1.25;
}
.welcome__subtitle {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 24px;
    color: var(--color-fg-muted);
}
.welcome__benefits {
    font-size: 13px;
    color: var(--color-fg-muted);
    margin: 24px 0;
    line-height: 2;
}
.welcome__benefits span { margin: 0 8px; white-space: nowrap; }
.welcome__section-title {
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 24px;
    color: var(--color-fg);
}

.plus-gallery-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0 40px;
    justify-content: center;
}
.plus-gallery-item {
    position: relative;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 240 / 172;
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.plus-gallery-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}
.plus-gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    color: var(--color-fg);
}
.plus-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.plus-gallery-item:hover img { transform: scale(1.05); }
.plus-gallery-item__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 6px 10px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
    color: var(--color-fg);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3px;
}

/* Section header (front-page + archive) */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 40px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.section-header__title { font-size: 22px; font-weight: 700; color: var(--color-fg); margin: 0; }
.section-header__all {
    font-size: 13px;
    color: var(--color-accent);
    text-decoration: none;
}
.section-header__all:hover { color: var(--color-accent-hover); }

/* ---------- Hamburger toggle (hidden >=992px) ---------- */
.site-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-bg-line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    width: 40px; height: 40px;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 4px;
    cursor: pointer;
    transition: border-color var(--transition-base);
}
.site-nav-toggle:hover { border-color: var(--color-accent); }
.site-nav-toggle__bar {
    display: block;
    height: 2px;
    background: var(--color-fg);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- p-detail image swap thumbs ---------- */
.p-detail-images {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.p-image-preview {
    background: var(--color-bg-mute);
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    display: block;
}
.p-image-preview .p-main-image { display: block; height: 100%; }
.p-detail-main-img {
    width: 100%; height: 100%;
    object-fit: contain;
    background: var(--color-bg-mute);
}
.p-detail-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 4px;
}
.p-detail-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-mute);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.p-detail-thumb:hover,
.p-detail-thumb.is-active { border-color: var(--color-accent); }
.p-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tabs: only .active .tab-pane is visible */
.tab-content .tab-pane { display: none; }
.tab-content .tab-pane.active { display: block; }
.shp-tabs .shp-tab { list-style: none; padding: 0; margin: 0; }
.shp-tabs .shp-tab.active .shp-tab-link {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* p-detail categories chip row */
.p-detail-cats { margin-top: 16px; font-size: 13px; color: var(--color-fg-muted); }
.p-detail-cats a {
    color: var(--color-accent);
    text-decoration: underline dotted var(--color-accent);
    text-underline-offset: .2em;
}
.p-detail-cats a:hover { color: var(--color-accent-hover); }
.p-detail-cats__label { margin-right: 6px; color: var(--color-fg-muted); }

/* p-basic-info-block layout */
.p-basic-info-block {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}
.p-basic-info-block .block { display: flex; align-items: center; }
.p-basic-info-block .p-code { color: var(--color-fg); font-size: 13px; }
.p-basic-info-block .p-code-label { color: var(--color-fg-muted); margin-right: 4px; }

.p-to-cart-block { margin-top: 12px; }
.p-final-price-wrapper { margin-bottom: 12px; }

/* Archive layout tuning */
.main-with-sidebar.category-layout .category-sidebar {
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--color-border);
    align-self: start;
}
.p-cats-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 12px;
    color: var(--color-accent);
}
.p-cats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.p-cats-item a {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-fg);
    font-size: 14px;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.p-cats-item a:hover { background: var(--color-bg-elev); color: var(--color-accent); }
.p-cats-item.is-active > a { background: rgba(23, 255, 0, .12); color: var(--color-accent); }
.p-cats-count { color: var(--color-fg-muted); font-size: 12px; }

/* Pagination inner list wrap */
.pagination .pagination-list {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

/* ---------- Responsive breakpoints (mirror Shoptet 480/768/992/1200) ---------- */
@media (max-width: 1199px) {
    .custom-footer { grid-template-columns: repeat(2, 1fr); }
    .single-product .layout,
    .p-detail .p-detail-inner { grid-template-columns: 1fr; }
    .p-detail .p-detail-inner .p-data-wrapper { padding-right: 0; }
}
@media (max-width: 991px) {
    .site-nav-toggle { display: inline-flex; order: -1; }
    .site-nav {
        flex-basis: 100%;
        order: 3;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base);
    }
    .site-nav.is-open { max-height: 90vh; overflow-y: auto; }
    .site-nav .menu-level-1,
    .site-nav .primary-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .site-nav .menu-level-1 > li,
    .site-nav .primary-menu > li {
        border-bottom: 1px solid var(--color-bg-line);
        width: 100%;
    }
    .site-nav .menu-level-2,
    .site-nav .sub-menu {
        position: static;
        box-shadow: none;
        border: 0;
        opacity: 1;
        transform: none;
        min-width: 0;
        background: var(--color-bg-elev);
    }
    .main-with-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .site-header .container.row { flex-wrap: wrap; gap: 12px; }
    .site-nav .menu-level-2,
    .site-nav .sub-menu,
    .site-nav .navigationActions__submenu {
        position: static;
        box-shadow: none;
        border: 0;
        opacity: 1;
        transform: none;
    }
    .hero__title { font-size: 24px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .single-product .layout,
    .p-detail .p-detail-inner { padding: 16px; gap: 20px; }
    .p-detail-inner-header h1 { font-size: 22px; }
}
@media (max-width: 479px) {
    .custom-footer { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: 1fr; }
}

/* ---------- Accessibility ---------- */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--color-accent);
    color: var(--color-fg-inverse);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
    left: 0;
    outline: 2px solid var(--color-accent-hover);
    outline-offset: 2px;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

[aria-current="page"] { color: var(--color-accent) !important; font-weight: 700; }
.site-nav .menu-level-1 > li > a[aria-current="page"]::after,
.site-nav .primary-menu > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Reduce motion honoring */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Cross-browser polish ---------- */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-bg);
    -webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
    background: var(--color-bg-line);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

::selection {
    background: var(--color-accent);
    color: var(--color-fg-inverse);
}
::-moz-selection {
    background: var(--color-accent);
    color: var(--color-fg-inverse);
}

.product-card .thumb img,
.product .p > a.image img,
.p-detail-main-img,
.plus-gallery-item img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-user-select: none;
    user-select: none;
}

/* Flexbox gap fallback for old Safari (<14) — approximates gap via margin */
@supports not (gap: 1px) {
    .site-nav .menu-level-1 > li,
    .site-nav .primary-menu > li { margin-right: 20px; }
    .p-basic-info-block > * { margin-right: 16px; }
    .header-actions > * + * { margin-left: 16px; }
}

/* Safari backdrop / mask prefixes for potential overlay elements */
.site-nav.is-open,
.site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ---------- Print ---------- */
@media print {
    :root {
        --color-bg: #ffffff;
        --color-bg-surface: #ffffff;
        --color-bg-surface-alt: #ffffff;
        --color-bg-elev: #ffffff;
        --color-bg-mute: #ffffff;
        --color-bg-line: #cccccc;
        --color-fg: #000000;
        --color-fg-muted: #333333;
        --color-fg-subtle: #666666;
        --color-accent: #000000;
        --color-accent-strong: #000000;
        --color-accent-hover: #000000;
    }
    html, body {
        background: #fff !important;
        color: #000 !important;
    }
    .site-header,
    .site-footer,
    .site-nav,
    .site-nav-toggle,
    .header-actions,
    .breadcrumbs,
    .category-sidebar,
    .shp-tabs,
    .pagination,
    .p-add-to-cart-wrapper,
    .related-products,
    .skip-to-content {
        display: none !important;
    }
    .p-detail-inner,
    .single-product .layout {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        background: #fff !important;
    }
    .p-detail-images img,
    .p-detail-main-img {
        max-width: 100%;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .p-detail-inner-header h1 { color: #000 !important; font-size: 20pt; }
    .price-final,
    strong.price-final {
        color: #000 !important;
        font-weight: 700;
    }
    a { color: #000 !important; text-decoration: underline !important; }
    a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 90%; }
    img { max-width: 100% !important; }
}