/* ==================== RESPONSIVENESS ==================== */
/* Dold som standard; layout.css exkluderar .menu-toggle från global knappstil. Mobil: inline-flex nedan. */
.site-header button.menu-toggle {
    display: none;
}

@media (max-width: 1024px) {

    ul.products,
    .related.products ul.products,
    .up-sells ul.products,
    .wc-block-product-categories-list,
    .wc-block-grid__products,
    .wp-block-woocommerce-product-collection ul.wc-block-product-template,
    ul.wc-block-product-template {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .st-single-product {
        grid-template-columns: 1fr;
    }

    .product-summary-card {
        position: static;
    }

    .product-gallery {
        position: static;
    }
}

@media (min-width: 769px) {

    .header-container > .site-logo,
    .header-container > .header-search,
    .header-container > .header-actions {
        order: unset;
        flex-basis: unset;
    }
}

@media (max-width: 768px) {
    /* Grid: rad 1 (logo + ikoner) är fast — endast rad 2 (sök) kollapsar */
    .header-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 0;
        row-gap: 4px;
    }

    .header-container > .site-logo {
        grid-column: 1;
        grid-row: 1;
        order: unset;
        flex: unset;
        width: auto;
        min-width: 0;
        max-width: none;
        padding-right: 0;
        box-sizing: border-box;
    }

    .site-logo .custom-logo-link-wrapper {
        gap: 10px;
        width: auto;
        max-width: 100%;
        align-items: center;
    }

    .site-logo .logo-symbol {
        flex-shrink: 0;
        height: 44px;
    }

    .site-logo .logo-text-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        overflow: hidden;
    }

    .site-logo .logo-text-main {
        font-family: 'Playfair Display', serif;
        font-size: clamp(0.95rem, 4.2vw, 1.35rem);
        font-weight: 700;
        line-height: 1.1;
        color: #3d342d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-logo .logo-text-url {
        display: none;
    }

    /* Ikoner på rad 1 — oförändrade när sök döljs */
    .header-container > .header-actions {
        grid-column: 2;
        grid-row: 1;
        order: unset;
        flex: unset;
        width: auto;
        justify-content: flex-end;
        align-self: center;
        margin: 0 calc(48px + 10px) 0 0;
        padding: 0;
        gap: 12px;
    }

    .login-link-label,
    .st-header-likes-label,
    .cart-link-label {
        font-size: 0.7rem;
        letter-spacing: 0.06em;
    }

    .header-actions-divider {
        height: 20px;
    }

    /* Rad 2: sök — endast denna rad påverkas av .st-search-collapsed */
    .header-container > .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
        order: unset;
        flex: unset;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        position: relative;
        z-index: 10070;
        overflow: visible;
        max-height: 56px;
        opacity: 1;
        transition:
            max-height 0.28s ease,
            opacity 0.22s ease,
            margin 0.28s ease;
    }

    .site-header.st-search-collapsed .header-container > .header-search {
        max-height: 0;
        opacity: 0;
        margin: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .site-header {
        overflow: visible;
    }

    #st-search-results {
        max-height: min(52vh, 380px);
        -webkit-overflow-scrolling: touch;
    }

    /*
     * layout.css scope:ar knappar till .site-header — denna regel måste ändå vinna för hamburger-ikonen.
     * Mer specifik selector + !important så vit knapp + guld streck/X syns (tema-accent).
     */
    .site-header button.menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0 !important;
        border: 1px solid var(--sp-chrome-bg) !important;
        border-radius: 10px !important;
        font-size: 0 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        line-height: 0 !important;
        cursor: pointer;
        position: absolute;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: max(24px, env(safe-area-inset-right, 0px));
        z-index: 10060;
    }

    .site-header button.menu-toggle:hover,
    .site-header button.menu-toggle:focus-visible {
        border: 1px solid var(--sp-chrome-bg) !important;
    }

    .site-header button.menu-toggle span,
    .site-header button.menu-toggle::before,
    .site-header button.menu-toggle::after {
        content: '';
        position: absolute;
        width: 22px;
        height: 2px;
        background: #d4af37;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .site-header button.menu-toggle::before {
        transform: translateY(-7px);
    }

    .site-header button.menu-toggle::after {
        transform: translateY(7px);
    }

    .site-header button.menu-toggle.is-active span {
        opacity: 0;
    }

    .site-header button.menu-toggle.is-active::before {
        transform: rotate(45deg);
    }

    .site-header button.menu-toggle.is-active::after {
        transform: rotate(-45deg);
    }

    /* Drawer + dim above header chrome; .menu-toggle (last sibling, high z-index) stays on top */
    .site-header {
        z-index: 10050;
    }

    .st-mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(34, 34, 34, 0.45);
        z-index: 10040;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .st-mobile-nav-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Drawer open: sök + live results under menyn (sök hade z-index 10070 > drawer 10045) */
    .site-header:has(#st-category-nav.is-active) .header-container > .header-search,
    .site-header:has(#st-category-nav.is-active) #st-search-results {
        z-index: 10030;
        visibility: hidden;
        pointer-events: none;
    }

    /* Collapse nav row on mobile; menu lives in fixed drawer */
    .category-nav {
        position: static;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent !important;
    }

    .category-nav-inner {
        padding: 0;
    }

    /* Full-width sheet: avoids a wide dim “stripe” on the left (was min(85%, 420px)) */
    .category-nav #st-category-nav-menu {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: calc(env(safe-area-inset-top, 0px) + clamp(200px, 32vh, 280px)) 20px calc(24px + env(safe-area-inset-bottom, 0));
        background: var(--sp-chrome-bg);
        box-shadow: none;
        z-index: 10045;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.3s ease, visibility 0.3s ease;
    }

    .category-nav.is-active #st-category-nav-menu {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        background-color: var(--sp-chrome-bg);
        padding-top: 40px;
    }

    @media (prefers-reduced-motion: reduce) {
        .category-nav #st-category-nav-menu,
        .st-mobile-nav-backdrop {
            transition-duration: 0.01ms;
        }
    }

    .st-mega-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding: 12px 0 8px !important;
        border-bottom: 0;
    }

    .st-mega-link {
        padding: 14px 16px !important;
        font-size: 15px;
        letter-spacing: 0.04em;
        color: #222 !important;
        border-bottom: 1px solid rgba(70, 70, 70, 0.1) !important;
    }

    .category-nav #st-category-nav-menu .st-cat-count {
        color: #7a6f63;
        font-weight: 500;
    }

    .st-mega-item.is-expanded > .st-mega-link {
        background: rgba(255, 255, 255, 0.14);
    }

    /* No desktop “white card”; submeny följer drawer-beige + diskret accentlinje */
    .st-mega-dropdown {
        display: none !important;
        position: static !important;
        transform: none !important;
        min-width: 100%;
        box-shadow: none !important;
        border-top: 0 !important;
        margin: 4px 0 10px 10px !important;
        padding: 4px 0 12px 12px !important;
        z-index: auto;
        background: transparent !important;
        border-left: 2px solid rgba(193, 134, 83, 0.5);
        border-radius: 0 8px 8px 0;
    }

    .st-mega-item.is-expanded .st-mega-dropdown {
        display: block !important;
    }

    .st-mega-columns {
        display: flex;
        flex-direction: column;
    }

    .st-mega-subitem {
        margin-bottom: 2px;
        white-space: normal !important;
    }

    .st-mega-subitem a {
        display: block;
        padding: 10px 12px 10px 6px !important;
        font-size: 14px !important;
        font-weight: 500;
        color: #3d3832 !important;
        text-transform: none !important;
        border-radius: 6px;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .st-mega-subitem a:hover,
    .st-mega-subitem a:focus-visible {
        color: var(--sp-accent) !important;
        background: rgba(255, 255, 255, 0.2);
        padding-left: 6px !important;
    }

    /* Mobil: nivå 3 ska vara synlig direkt (ingen extra expand/collapse). */
    .st-mega-grandchildren {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        min-width: 0 !important;
        margin: 4px 0 8px 0 !important;
        padding: 0 0 0 14px !important;
        border: 0 !important;
        border-left: 1px solid rgba(193, 134, 83, 0.4) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .st-mega-grandchild-item a {
        display: block;
        padding: 7px 10px 7px 0 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #6a5f55 !important;
        line-height: 1.35;
    }

    .st-mega-subitem.has-grandchildren > a::after {
        content: '';
    }

    .has-children > .st-mega-link::after {
        float: right;
        transition: transform 0.2s ease, color 0.2s ease;
        color: var(--sp-accent) !important;
        opacity: 0.85;
        font-size: 11px;
    }

    .st-mega-item.is-expanded > .st-mega-link::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    ul.products,
    .related.products ul.products,
    .up-sells ul.products,
    .wc-block-product-categories-list,
    .wc-block-grid__products,
    .wp-block-woocommerce-product-collection ul.wc-block-product-template,
    ul.wc-block-product-template {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* Default mobile frontpage rails: 3-col wrap (Rea!, Utvalda, small lists). */
    body.home .st-frontpage-rail__list:not(.st-frontpage-rail__list--latest):not(.st-frontpage-rail__list--price-asc):not(.st-frontpage-rail__list--price-desc):not(.st-frontpage-rail__list--likes),
    body.front-page .st-frontpage-rail__list:not(.st-frontpage-rail__list--latest):not(.st-frontpage-rail__list--price-asc):not(.st-frontpage-rail__list--price-desc):not(.st-frontpage-rail__list--likes) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: auto;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        align-items: stretch;
        gap: 8px !important;
        overflow-x: visible;
        overflow-y: visible;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: auto;
        overscroll-behavior-x: auto;
        padding: 0 !important;
    }

    /* Nya produkter, Prisvänliga fynd, Handplockad premium: 2-row horizontal rail. */
    body.home .st-frontpage-rail--latest .st-frontpage-rail__list,
    body.home .st-frontpage-rail--price-asc .st-frontpage-rail__list,
    body.home .st-frontpage-rail--price-desc .st-frontpage-rail__list,
    body.front-page .st-frontpage-rail--latest .st-frontpage-rail__list,
    body.front-page .st-frontpage-rail--price-asc .st-frontpage-rail__list,
    body.front-page .st-frontpage-rail--price-desc .st-frontpage-rail__list {
        --st-rail-peek: 18px;
        display: grid !important;
        grid-template-columns: none !important;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 16px - var(--st-rail-peek)) / 3);
        align-items: stretch;
        gap: 8px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding: 0 8px 8px 0 !important;
    }

    /* Mest gillade: single-row horizontal rail. */
    body.home .st-frontpage-rail--likes .st-frontpage-rail__list,
    body.front-page .st-frontpage-rail--likes .st-frontpage-rail__list {
        --st-rail-peek: 18px;
        display: grid !important;
        grid-template-columns: none !important;
        grid-template-rows: minmax(0, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 16px - var(--st-rail-peek)) / 3);
        align-items: stretch;
        gap: 8px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding: 0 8px 8px 0 !important;
    }

    body.home .st-frontpage-rail__list > li,
    body.front-page .st-frontpage-rail__list > li {
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        max-width: none !important;
        height: auto;
        min-height: 0;
    }

    body.home .st-frontpage-rail--latest .st-frontpage-rail__list > li,
    body.home .st-frontpage-rail--price-asc .st-frontpage-rail__list > li,
    body.home .st-frontpage-rail--price-desc .st-frontpage-rail__list > li,
    body.front-page .st-frontpage-rail--latest .st-frontpage-rail__list > li,
    body.front-page .st-frontpage-rail--price-asc .st-frontpage-rail__list > li,
    body.front-page .st-frontpage-rail--price-desc .st-frontpage-rail__list > li,
    body.home .st-frontpage-rail--likes .st-frontpage-rail__list > li,
    body.front-page .st-frontpage-rail--likes .st-frontpage-rail__list > li {
        height: 100%;
        min-height: 0;
        scroll-snap-align: start;
    }

    body.home .st-frontpage-rail__list .product-card-link,
    body.front-page .st-frontpage-rail__list .product-card-link {
        flex: 1 1 auto;
        height: 100%;
    }

    body.home .st-frontpage-rail--single-row[data-rail-items="2"] .product-card > .product-card-meta,
    body.front-page .st-frontpage-rail--single-row[data-rail-items="2"] .product-card > .product-card-meta,
    body.home .st-frontpage-rail--single-row[data-rail-items="2"] .product-card-info > .product-card-meta,
    body.front-page .st-frontpage-rail--single-row[data-rail-items="2"] .product-card-info > .product-card-meta {
        padding-bottom: 12px;
    }

    body.home .entry-content :is(h2, h3):has(+ .st-frontpage-rail),
    body.front-page .entry-content :is(h2, h3):has(+ .st-frontpage-rail) {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 28px 0 10px;
        font-size: 1.15rem;
        line-height: 1.15;
        letter-spacing: 0.01em;
    }

    body.home .entry-content :is(h2, h3):has(+ .st-frontpage-rail)::after,
    body.front-page .entry-content :is(h2, h3):has(+ .st-frontpage-rail)::after {
        content: "";
        flex: 1 1 auto;
        height: 2px;
        background: linear-gradient(90deg, rgba(150, 126, 91, 0.65), rgba(150, 126, 91, 0.08));
    }

    body.home .entry-content :is(h2, h3) + .st-frontpage-rail,
    body.front-page .entry-content :is(h2, h3) + .st-frontpage-rail {
        margin-top: 0;
    }

    body.home .st-frontpage-rail,
    body.front-page .st-frontpage-rail {
        position: relative;
    }

    body.home .st-frontpage-rail--single-row::after,
    body.front-page .st-frontpage-rail--single-row::after,
    body.home .st-frontpage-rail--compact-grid::after,
    body.front-page .st-frontpage-rail--compact-grid::after,
    body.home .st-frontpage-rail--sale::after,
    body.front-page .st-frontpage-rail--sale::after,
    body.home .st-frontpage-rail--featured::after,
    body.front-page .st-frontpage-rail--featured::after {
        display: none;
    }

    body.home .st-frontpage-rail--latest::after,
    body.home .st-frontpage-rail--price-asc::after,
    body.home .st-frontpage-rail--price-desc::after,
    body.front-page .st-frontpage-rail--latest::after,
    body.front-page .st-frontpage-rail--price-asc::after,
    body.front-page .st-frontpage-rail--price-desc::after,
    body.home .st-frontpage-rail--likes::after,
    body.front-page .st-frontpage-rail--likes::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 8px;
        width: 26px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(233, 228, 209, 0), rgba(233, 228, 209, 0.92) 82%);
    }

    body.home .st-frontpage-rail--single-row .st-frontpage-rail__list,
    body.front-page .st-frontpage-rail--single-row .st-frontpage-rail__list {
        grid-template-rows: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow-x: visible;
        scroll-snap-type: none;
        padding-right: 0 !important;
    }

    body.home .st-frontpage-rail--single-row[data-rail-items="1"] .st-frontpage-rail__list,
    body.front-page .st-frontpage-rail--single-row[data-rail-items="1"] .st-frontpage-rail__list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.home .st-frontpage-rail--single-row[data-rail-items="2"] .st-frontpage-rail__list,
    body.front-page .st-frontpage-rail--single-row[data-rail-items="2"] .st-frontpage-rail__list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.home .st-frontpage-rail--compact-grid .st-frontpage-rail__list,
    body.front-page .st-frontpage-rail--compact-grid .st-frontpage-rail__list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow-x: visible;
        scroll-snap-type: none;
        padding-right: 0 !important;
    }

    body.home .st-frontpage-rail__cta-tile,
    body.front-page .st-frontpage-rail__cta-tile {
        display: flex !important;
    }

    .st-frontpage-rail__desktop-link-wrap {
        display: none;
    }

    .product-card-info {
        padding: 8px 10px 12px;
    }

    .st-shop-sort {
        margin-bottom: 20px;
    }

    .st-shop-sort__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .st-shop-sort__list::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .st-shop-sort__link {
        min-height: 38px;
        padding: 0 14px;
        font-size: 0.84rem;
        white-space: nowrap;
    }

    /* Single Product Mobile Layout */
    .woocommerce-product-gallery {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .flex-control-nav {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: auto;
        padding-bottom: 8px !important;
        gap: 12px !important;
    }

    .flex-control-nav img {
        width: 70px !important;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .st-top-bar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-container {
        padding: 10px 16px;
    }

    /* Smal mobil: kompakt ikonrad bredvid hamburger */
    .header-container > .header-actions {
        gap: 10px;
        margin-right: calc(44px + 8px);
    }

    .site-logo .logo-symbol {
        height: 40px;
    }

    .header-actions-divider {
        display: none;
    }

    .login-link-label,
    .st-header-likes-label,
    .cart-link-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .st-header-likes-link,
    .st-header-account-link,
    .cart-link,
    .st-header-mini-cart-trigger .cart-link {
        min-width: 36px;
        min-height: 36px;
        justify-content: center;
        padding: 0 !important;
    }

    .cart-link {
        padding-right: 14px !important;
    }

    .site-header button.menu-toggle {
        width: 44px;
        height: 44px;
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
    }

    .category-nav-inner {
        padding: 0 16px;
    }

    .woocommerce-listing {
        padding: 16px 16px 40px;
    }

    .single-product-main {
        padding: 16px;
    }

    .product-summary-card {
        padding: 20px;
    }
}

/* Cart / Checkout blocks — see assets/css/cart-checkout-blocks.css */
@media (max-width: 900px) {
    .wp-block-woocommerce-cart .wc-block-cart,
    .woocommerce-cart .wc-block-cart,
    .wp-block-woocommerce-checkout .wc-block-checkout,
    .woocommerce-checkout .wc-block-checkout {
        flex-wrap: wrap;
        max-width: none;
    }

    .wp-block-woocommerce-cart .wc-block-cart__sidebar,
    .woocommerce-cart .wc-block-cart__sidebar,
    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar,
    .woocommerce-checkout .wc-block-checkout__sidebar {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
    }

}

/* Cart/checkout sid-padding: cart-checkout-blocks.css (@container 699px + @media 730px) */

/* Cart row layout (incl. line total / kr): cart-checkout-blocks.css @media (max-width: 900px) */

@media (max-width: 600px) {
    .wc-block-checkout .wc-block-checkout__main .wc-block-components-checkout-step,
    .wc-block-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-contact-information-block,
    .wc-block-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-shipping-address-block,
    .wc-block-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-billing-address-block,
    .wc-block-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-shipping-methods-block,
    .wc-block-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-payment-block,
    .wc-block-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-additional-information-block {
        padding: 16px 14px 14px !important;
    }

    .wc-block-checkout .wc-block-components-address-form {
        grid-template-columns: 1fr !important;
    }

    .wc-block-checkout .wc-block-checkout__main .wc-block-components-radio-control__label-group {
        flex-direction: column;
        align-items: flex-start;
    }
}