/*
Theme Name: Storefront ArtSets
Template: storefront
Version: 1.0.9
Description: ArtSets child theme based on Storefront
*/

/* ===========================================
   Storefront overrides
   =========================================== */

/* Banner HTML content injected via ACF is a full standalone document whose
   <style> sets body { display: flex; padding: 48px 20px } plus a global reset.
   The flex turned the real page <body> into a flex row, shrinking #page to its
   content width and leaving a background strip on the right. Force the page body
   back to normal block flow so injected standalone-page styles cannot affect the
   WordPress layout. */
body {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-header,
#masthead {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
}

/* Sticky header must clear the WP admin bar when the user is logged in */
html.admin-bar .site-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    html.admin-bar .site-header {
        top: 46px !important;
    }
}

/* Ensure inner header padding survives any page-content CSS reset
   (e.g. * { padding: 0 } injected by ACF banner HTML field) */
.header-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Nav visibility override — desktop ONLY. Must not be global or it overrides mobile display:none. */
@media (min-width: 768px) {
    #header-primary-nav,
    #header-primary-nav > ul.nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* Sub-menus: hidden by default, absolutely positioned */
    #header-primary-nav .sub-menu,
    #header-primary-nav ul ul {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        flex-direction: column !important;
        height: auto !important;
    }

    /* Show sub-menu on hover */
    #header-primary-nav li.menu-item-has-children:hover > .sub-menu,
    #header-primary-nav li.menu-item-has-children:focus-within > .sub-menu {
        display: block !important;
    }
}

.header-nav .nav-menu a,
.header-nav .nav-menu li a,
#header-primary-nav .nav-menu a {
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

p.site-description { display: none !important; }

/* Hamburger must never inherit Storefront's purple button styles — global reset */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
    text-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    outline: none !important;
}

/* Storefront draws its own hamburger bars via pseudo-elements, absolutely
   positioned on top of our custom .hamburger icon + "MENU" label — suppress
   them so only our markup renders. */
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span::before {
    content: none !important;
    display: none !important;
}

/* Mobile-overlay-only elements — hidden on desktop */
.nav-close,
.mobile-nav-content,
.mobile-nav-extras,
.header-lang-mobile { display: none !important; }

/* ===========================================
   Sidebar removal
   =========================================== */
.widget-area,.sidebar,#secondary,
body.storefront #secondary,body .widget-area#secondary,
#secondary.widget-area { display: none !important; }

.site-main,.woocommerce-page .site-main { width: 100% !important; float: none !important; }

.storefront-full-width-content .entry-content,
.woocommerce-page #primary,#primary {
    width: 100% !important; float: none !important; margin: 0 auto !important;
}

/* ===========================================
   Design tokens
   =========================================== */
:root {
    --pink:       #8e07bb;
    --pink-bg:    #d0b0eb;
    --pink-dark:  #c2185b;
    --text:       #1a1a1a;
    --muted:      #777;
    --bg:         #fff;
    --border:     #ebebeb;
    --h:          68px;
    --z:          1000;
    --r:          8px;
    --shadow:     0 8px 32px rgba(0,0,0,.09);
    --ease:       0.18s ease;
    --font:       'Outfit', system-ui, -apple-system, sans-serif;
}

/* ===========================================
   Reusable modal system — artsets-modal
   Base pattern for all modals on this site.
   Specific modals extend with their own classes
   (e.g. atc-popup-* for the add-to-cart popup).
   =========================================== */

/* Overlay */
.artsets-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.artsets-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Card */
.artsets-modal__card {
    background: #ffffff;
    background-image: linear-gradient(180deg, #f3e8ff 0%, #ffffff 88px);
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    padding: 28px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 12px 48px rgba(142, 7, 187, 0.13), 0 2px 8px rgba(0, 0, 0, 0.06);
    font-family: var(--font);
    transform: translateY(14px);
    transition: transform 0.2s ease;
}

.artsets-modal.is-open .artsets-modal__card {
    transform: translateY(0);
}

/* Close × button — !important needed to beat Storefront Customizer's
   inline button { background-color } injection */
.artsets-modal__close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: #b0b0b0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: color 0.15s, background-color 0.15s;
    line-height: 1 !important;
}

.artsets-modal__close:hover,
.artsets-modal__close:focus {
    color: #7100ba !important;
    background-color: #ede0f7 !important;
    outline: none !important;
}

.artsets-modal__close svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Header */
.artsets-modal__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-right: 36px;
}

/* Icon circle */
.artsets-modal__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--pink, #8e07bb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(142, 7, 187, 0.28);
}

.artsets-modal__icon svg {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Title */
.artsets-modal__title {
    font-family: var(--font) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--text, #1a1a1a) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Body */
.artsets-modal__body {
    font-family: var(--font);
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.55;
}

/* Divider */
.artsets-modal__divider {
    height: 1px;
    background: #ede0f7;
    margin: 0 -28px;
}

/* Actions row */
.artsets-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
}

/* Base button */
.artsets-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    border: 2px solid transparent;
}

/* Primary — warm coral/peach from ArtSets logo "ART" letters */
.artsets-modal__btn--primary {
    background: #faa8b3 !important;
    background-color: #faa8b3 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(250, 168, 179, 0.35);
}

.artsets-modal__btn--primary:hover,
.artsets-modal__btn--primary:focus {
    background: #e8849a !important;
    background-color: #e8849a !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(250, 168, 179, 0.45);
    outline: none !important;
    text-decoration: none !important;
}

/* Secondary — soft lavender fill (not ghost outline).
   Ghost outlines become invisible when Storefront injects button { color: #fff }.
   Lavender fill is visually quieter than primary while always readable. */
.artsets-modal__btn--ghost {
    background: #f0e3ff !important;
    background-color: #f0e3ff !important;
    color: #8e07bb !important;
    border: none !important;
    box-shadow: none !important;
}

.artsets-modal__btn--ghost:hover,
.artsets-modal__btn--ghost:focus {
    background: #e5cfff !important;
    background-color: #e5cfff !important;
    color: #7100ba !important;
    outline: none !important;
}

@media ( max-width: 540px ) {
    .artsets-modal {
        padding: 0;
        align-items: flex-end;
    }

    .artsets-modal__card {
        border-radius: 24px 24px 0 0;
        max-width: 100%;
        padding: 24px 20px 36px;
        background-image: linear-gradient(180deg, #f3e8ff 0%, #ffffff 72px);
    }

    .artsets-modal__divider {
        margin: 0 -20px;
    }

    .artsets-modal__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .artsets-modal__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
   Announcement bar
   =========================================== */
.as-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 6px 48px 10px;
    background: #d0b0eb;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 400;
    color: #444;
    letter-spacing: .01em;
}

.as-banner__text { text-align: center; }

.as-banner__close,
#as-banner-close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px;
    transition: color var(--ease);
}

.as-banner__close:hover,
#as-banner-close:hover { color: #333; }

/* ===========================================
   Store-closed notice — site-wide, below header
   =========================================== */
.as-store-notice-wrap {
    margin: 20px auto 0;
}

.as-store-notice {
    padding: 18px 24px;
    border: 1px solid #e8a0a0;
    border-radius: var(--r);
    background: #f6b9b9;
    font-family: var(--font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: #8a1f1f;
    text-align: center;
}

.as-store-notice--checkout {
    margin: 20px 0 24px;
}

@media (max-width: 600px) {
    .as-store-notice {
        padding: 14px 16px;
        font-size: 15px;
    }
}

/* ===========================================
   Site header
   =========================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-family: var(--font);
}

.header-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--h);
    padding: 0 24px;
    width: 100%;
}

/* ===========================================
   Logo
   =========================================== */
.header-logo {
    flex-shrink: 0;
    margin-right: 24px;
}

.header-logo img {
    display: block;
    max-height: 44px;
    width: auto;
}

/* Storefront's .col-full adds ~2.6em side margins at the exact point where
   the mobile header switches to desktop. On tablet widths that shifts the
   whole row right and pushes the trailing controls outside the viewport. */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-wrap::before,
    .header-wrap::after {
        content: none !important;
        display: none !important;
    }

    .header-wrap {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 16px !important;
        padding-left: 16px !important;
        box-sizing: border-box !important;
        gap: 12px;
    }

    .header-logo {
        margin-right: 12px;
    }

    .header-logo img,
    .header-logo .custom-logo,
    .header-logo .custom-logo-link img {
        max-width: none !important;
        max-height: 35px !important;
        width: auto !important;
        height: auto !important;
    }

    .header-logo .custom-logo-link {
        max-width: none !important;
    }
}

/* The full account/currency group cannot coexist with the desktop nav at the
   narrowest tablet widths. Keep navigation, search and cart visible instead. */
@media (min-width: 768px) and (max-width: 899px) {
    .header-user {
        display: none !important;
    }

    .header-search .aws-search-field,
    .header-search input[type="search"],
    .header-search input[type="text"] {
        width: 120px !important;
    }
}

.site-name-link {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--text);
}

.logo-icon { flex-shrink: 0; }

.logo-text {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--text);
    line-height: 1;
}

/* ===========================================
   Navigation
   =========================================== */
.header-nav {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: var(--h);
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    align-items: center;
}

.header-nav .nav-menu {
    display: flex !important;
    list-style: none !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.nav-menu > li { position: relative; }

.nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease);
}

.nav-menu > li > a:hover {
    background: var(--pink-bg);
    color: var(--pink);
}

/* Chevron on items with children */
.nav-menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform var(--ease), filter var(--ease);
}

.nav-menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
    filter: brightness(0) saturate(100%) invert(18%) sepia(93%) saturate(2000%) hue-rotate(306deg);
}

/* Submenu */
.nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    z-index: calc(var(--z) + 1);
    animation: dropIn .15s ease;
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-menu > li:hover > .sub-menu,
#header-primary-nav .nav-menu > li:hover > .sub-menu { display: block !important; }

.nav-menu .sub-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease);
}

.nav-menu .sub-menu a:hover {
    background: var(--pink-bg);
    color: var(--pink);
}

/* ===========================================
   Search
   =========================================== */

/* Explicit height shared by the form, input and button.
   Storefront can apply margin-top/vertical-align to form children —
   fixing via box-sizing + explicit heights beats all of those. */
:root { --search-h: 38px; }

.header-search {
    margin: 0 4px;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: var(--search-h);
    /* Zero out any Storefront top-margin on the container */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.search-form {
    display: flex !important;
    align-items: center !important;
    height: var(--search-h) !important;
    background: #f4f4f4;
    border-radius: var(--r);
    border: 1.5px solid transparent;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}

.search-form:focus-within {
    background: #fff;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(233,30,140,.08);
}

.search-input,
.header-search input[type="search"],
.header-search input[type="text"] {
    border: none !important;
    background: transparent !important;
    padding: 0 10px !important;
    margin: 0 !important;
    height: var(--search-h) !important;
    width: 170px;
    font-size: 13.5px;
    font-family: var(--font);
    color: var(--text);
    outline: none !important;
    box-shadow: none !important;
    line-height: var(--search-h) !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.search-input::placeholder,
.header-search input::placeholder { color: #aaa; }

.search-btn,
.header-search button[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--search-h) !important;
    height: var(--search-h) !important;
    min-height: var(--search-h) !important;
    border: none !important;
    background: #e8e8e8 !important;
    color: #555 !important;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--ease), color var(--ease);
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.search-btn:hover,
.header-search button[type="submit"]:hover {
    background: #ddd !important;
    color: var(--pink) !important;
}

/* ===========================================
   Advanced Woo Search — header form skin
   =========================================== */

.header-search .aws-container {
    height: var(--search-h) !important;
    margin: 0 !important;
}

.header-search .aws-search-wrapper,
.header-search .aws-container form {
    display: flex !important;
    align-items: center !important;
    height: var(--search-h) !important;
    background: #f4f4f4 !important;
    border-radius: var(--r) !important;
    border: 1.5px solid transparent !important;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}

.header-search .aws-container form:focus-within {
    background: #fff !important;
    border-color: var(--pink) !important;
    box-shadow: 0 0 0 3px rgba(233,30,140,.08) !important;
}

.header-search .aws-search-field {
    border: none !important;
    background: transparent !important;
    padding: 0 10px !important;
    margin: 0 !important;
    height: var(--search-h) !important;
    width: 170px !important;
    font-size: 13.5px !important;
    font-family: var(--font) !important;
    color: var(--text) !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: var(--search-h) !important;
    box-sizing: border-box !important;
}

.header-search .aws-search-field::placeholder { color: #aaa; }

.header-search .aws-search-btn,
.header-search button[type="submit"].aws-search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--search-h) !important;
    height: var(--search-h) !important;
    border: none !important;
    background: #e8e8e8 !important;
    color: #555 !important;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.header-search .aws-search-btn:hover {
    background: #ddd !important;
    color: var(--pink) !important;
}

/* ===========================================
   Cart
   =========================================== */
.header-cart {
    position: relative;
    flex-shrink: 0;
}

/* Invisible bridge fills the gap between the cart icon and the dropdown panel,
   keeping .header-cart:hover true as the mouse travels downward. */
.header-cart::after {
    content: '';
    position: absolute;
    bottom: -10px; /* matches the gap in .header-cart-dropdown top: calc(100% + 10px) */
    left: -20px;
    right: -20px;
    height: 10px;
}

.header-cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r);
    color: var(--text);
    text-decoration: none;
    position: relative;
    transition: background var(--ease), color var(--ease);
}

.header-cart-link:hover {
    background: var(--pink-bg);
    color: var(--pink);
}

.header-cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--text);
    color: #fff;
    border: 2px solid var(--bg);
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font);
    line-height: 12px;
    text-align: center;
    border-radius: 10px;
}

.header-cart-count:empty { display: none; }

.header-cart-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 16px;
    box-shadow: var(--shadow);
    z-index: calc(var(--z) + 1);
}

.header-cart:hover .header-cart-dropdown { display: block; }

/* ── Mini-cart dropdown contents ──────────────────────────────────────────── */

/* Product list */
.header-cart-dropdown .woocommerce-mini-cart {
    list-style: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* Each cart item — block layout so name + quantity stack vertically */
.header-cart-dropdown .woocommerce-mini-cart-item {
    display: block !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    position: relative !important;
}

/* Product link (wraps thumbnail + name): flex so image can be ordered to the right */
.header-cart-dropdown .woocommerce-mini-cart-item > a:not(.remove) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Thumbnail — pushed to right via order; remove button overlaps its top-right corner */
.header-cart-dropdown .woocommerce-mini-cart-item > a:not(.remove) img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}

/* Quantity × price — sits below the product link in block flow */
.header-cart-dropdown .woocommerce-mini-cart-item .quantity {
    display: block !important;
    font-size: 13px !important;
    color: var(--muted) !important;
    margin-top: 4px !important;
}

/* Remove (×) button — top-right corner of the thumbnail */
.header-cart-dropdown .woocommerce-mini-cart-item .remove {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    left: auto !important;
    float: none !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid var(--border) !important;
    background: var(--bg) !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.header-cart-dropdown .woocommerce-mini-cart-item .remove:hover {
    color: #e00 !important;
    border-color: #e00 !important;
}

/* Subtotal row */
.header-cart-dropdown .woocommerce-mini-cart__total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 8px 0 12px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    border: none !important;
}

.header-cart-dropdown .woocommerce-mini-cart__total .label { font-weight: 600 !important; }

/* Buttons area */
.header-cart-dropdown .woocommerce-mini-cart__buttons {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Hide "View cart" — show only Checkout */
.header-cart-dropdown .woocommerce-mini-cart__buttons a.button:not(.checkout) {
    display: none !important;
}

/* Checkout / Pokladna button */
.header-cart-dropdown .woocommerce-mini-cart__buttons a.checkout {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #7c3aed !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 6px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: background .14s, transform .12s !important;
}

.header-cart-dropdown .woocommerce-mini-cart__buttons a.checkout:hover {
    background: #5b21b6 !important;
    transform: translateY(-1px) !important;
}

.header-cart-dropdown .woocommerce-mini-cart__buttons a.checkout::before,
.header-cart-dropdown .woocommerce-mini-cart__buttons a.checkout::after {
    content: none !important;
    display: none !important;
}

/* ===========================================
   User / Login / Currency / Lang
   =========================================== */
.header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    padding-left: 14px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
}

.header-login a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ease);
}

.header-login a:hover { color: var(--pink); }

.header-divider {
    display: block;
    width: 1px;
    height: 16px;
    background: var(--border);
}


/* ===========================================
   Hamburger — hidden on desktop
   =========================================== */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--r);
    transition: background var(--ease);
}

.menu-toggle:hover { background: #f4f4f4; }

.hamburger { display: flex; flex-direction: column; gap: 5px; width: 22px; }

.hamburger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .25s ease, opacity .2s ease, width .2s ease;
}

.hamburger span:nth-child(2) { width: 15px; }
.menu-toggle:hover .hamburger span:nth-child(2) { width: 22px; }

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================
   Mobile (≤767px)
   CSS Grid layout — single fixed row, header pinned to top.
   Logo is positioned against the viewport centre, independently of the
   unequal controls on the left and right.
   =========================================== */
@media (max-width: 767px) {

    /* Storefront sets body{overflow-x:hidden}, which breaks position:sticky
       on iOS Safari — pin the icon row with position:fixed instead, and let
       the announcement bar scroll away normally with the rest of the page. */
    .site-header {
        position: static !important;
    }

    /* Compensate for the now out-of-flow fixed header row */
    body {
        padding-top: 56px !important;
    }

    html.admin-bar body {
        padding-top: calc(56px + 46px) !important;
    }

    /* Switch header-wrap from flex to a single-row grid, fixed to the top.
       .header-wrap also carries Storefront's .col-full class, which on mobile
       adds margin-left/right (~22.65px each) + max-width:1064px + content-box
       sizing — that shrinks the fixed bar and leaves a gap on the right. Reset
       all of that so the bar is a true edge-to-edge full-width box. */
    .header-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px 48px;
        grid-template-areas: "toggle search cart";
        padding: 0 12px !important;
        gap: 4px !important;
        min-height: 56px !important;
        align-items: center;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: var(--z);
    }

    html.admin-bar .header-wrap {
        top: 46px !important;
    }

    /* ---- MENU button: hamburger icon + label ---- */
    .menu-toggle {
        grid-area: toggle;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px;
        width: auto !important;
        min-width: 0 !important;
        height: 48px !important;
        padding: 8px 0 !important;
        align-self: center;
        cursor: pointer;
    }

    .menu-toggle .hamburger {
        width: 26px;
        gap: 6px;
    }

    .menu-toggle .hamburger span {
        width: 26px;
        height: 2px;
    }

    .menu-toggle .hamburger span:nth-child(2) {
        width: 18px;
    }

    .menu-toggle:hover .hamburger span:nth-child(2) {
        width: 26px;
    }

    .menu-toggle-label {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text);
        line-height: 1;
    }

    /* ---- Logo — centred against the viewport, not the remaining grid cell ---- */
    .header-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0;
        z-index: 1;
    }

    /* Force logo image to stay within bounds regardless of natural size */
    .header-logo img,
    .header-logo .custom-logo,
    .header-logo .custom-logo-link img {
        display: block !important;
        max-width: none !important;
        max-height: 35px !important;
        width: auto !important;
        height: auto !important;
    }

    .header-logo .custom-logo-link {
        display: block !important;
        max-width: none !important;
    }

    /* ---- Search — collapses to a single icon, expands on tap ---- */
    .header-search {
        grid-area: search;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 0;
        position: relative;
        z-index: 2;
    }

    .header-search .search-form,
    .header-search .aws-container,
    .header-search .aws-search-form,
    .header-search .aws-container form.aws-search-form {
        width: 48px !important;
        height: 48px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .header-search .search-input,
    .header-search .aws-wrapper,
    .header-search input[type="search"],
    .header-search input[type="text"] {
        display: none !important;
    }

    .header-search .search-btn,
    .header-search .aws-search-btn,
    .header-search button[type="submit"] {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        background: transparent !important;
        color: var(--text) !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        align-self: center !important;
    }

    .header-search .search-btn svg {
        width: 20px;
        height: 20px;
    }

    .header-search .aws-search-btn_icon {
        width: 29px !important;
        height: 29px !important;
        line-height: 29px !important;
    }

    .header-search .search-btn:hover,
    .header-search .aws-search-btn:hover,
    .header-search button[type="submit"]:hover {
        background: transparent !important;
        color: var(--pink) !important;
    }

    /* Expanded state: dropdown search bar anchored below the header row */
    .header-search.search-open {
        /* A grid item's absolute containing block is its own grid area, which
           collapses the AWS form to the icon width. Anchor the expanded form
           to the viewport instead so left/right define the usable width. */
        position: fixed;
        top: 56px;
        left: 10px;
        right: 10px;
        width: auto !important;
        height: auto !important;
        z-index: calc(var(--z) + 5);
        padding: 10px !important;
        background: #fff;
        border-radius: var(--r);
        box-shadow: var(--shadow);
    }

    html.admin-bar .header-search.search-open {
        top: 102px;
    }

    .header-search.search-open .search-form,
    .header-search.search-open .aws-container,
    .header-search.search-open .aws-search-form,
    .header-search.search-open .aws-container form.aws-search-form {
        width: 100% !important;
        height: var(--search-h) !important;
        background: #f4f4f4 !important;
        border-radius: var(--r);
    }

    .header-search.search-open .search-input,
    .header-search.search-open .aws-wrapper,
    .header-search.search-open .aws-search-field {
        display: block !important;
        flex: 1 !important;
        width: 100% !important;
    }

    .header-search.search-open .aws-search-btn {
        width: var(--search-h) !important;
        height: var(--search-h) !important;
        min-height: var(--search-h) !important;
        border-radius: 0 var(--r) var(--r) 0 !important;
    }

    .header-search.search-open .aws-search-btn_icon {
        width: 24px !important;
        height: 24px !important;
        line-height: 24px !important;
    }

    /* ---- Language switcher ---- */
    .header-lang-mobile {
        grid-area: lang;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* ---- Cart ---- */
    .header-cart {
        grid-area: cart;
        display: flex !important;
        align-items: center !important;
        justify-content: center;
        padding: 0 !important;
        margin: 0 !important;
        align-self: center;
        width: 48px;
        height: 48px;
        position: relative;
        z-index: 2;
    }

    .header-cart-link {
        width: 48px;
        height: 48px;
    }

    .header-cart-link svg {
        width: 26px;
        height: 26px;
    }

    .header-cart-count {
        top: 2px;
        right: 2px;
    }

    /* ── Desktop menu hidden in mobile overlay context ── */
    .header-nav > ul.nav-menu { display: none !important; }

    /* ── Nav overlay: hidden by default, full-screen on .nav-open ── */
    .header-nav {
        display: none !important;
        position: fixed !important;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #fff;
        overflow: hidden;
        z-index: calc(var(--z) + 10);
        padding: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .header-nav.nav-open { display: flex !important; position: fixed !important; }

    /* Mobile overlay content: fills entire overlay, scrolls independently */
    .header-nav.nav-open .mobile-nav-content {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        flex: 1;
        overflow-y: auto;
        padding: 16px 24px 48px;
        box-sizing: border-box;
    }

    /* ── Close button ── */
    .header-nav.nav-open .nav-close {
        display: flex !important;
        align-self: flex-end;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        font-size: 22px;
        line-height: 1;
        color: var(--text) !important;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-height: 0 !important;
        cursor: pointer;
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    .header-user { display: none !important; }

    /* ── Mobile nav menu (mobile-primary or primary fallback) ── */
    .mobile-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .mobile-nav-menu > li { width: 100%; }

    /* Optional icon before a top-level item's label, set via the "Icon"
       field (assets/icons/*.svg) on the menu item — see
       inc/homepage-setup.php nav_menu_item_title filter. */
    .mobile-nav-item-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-nav-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        object-fit: contain;
    }

    /* Category items at top: bold (no children → bold, direct link) */
    .mobile-nav-menu > li:not(.menu-item-has-children) > a {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--text) !important;
        padding: 16px 0 !important;
        display: block !important;
        border-bottom: 1px solid var(--border) !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    /* Parent items (Informace, Blog): regular weight + › arrow */
    .mobile-nav-menu > li.menu-item-has-children > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        color: var(--text) !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid var(--border) !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    .mobile-nav-menu > li.menu-item-has-children > a::after {
        content: '›' !important;
        font-size: 24px !important;
        font-weight: 300 !important;
        color: var(--muted) !important;
        flex-shrink: 0;
        background: none !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
        filter: none !important;
    }

    .mobile-nav-menu > li.open > a::after {
        content: '‹' !important;
        transform: rotate(-90deg) !important;
    }

    /* Sub-menu inside mobile overlay — accordion */
    .mobile-nav-menu .sub-menu {
        display: none !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 0 0 12px !important;
        margin: 0 !important;
        animation: none !important;
        list-style: none !important;
        width: 100% !important;
    }

    .mobile-nav-menu > li.open > .sub-menu { display: block !important; }

    .mobile-nav-menu .sub-menu li a {
        font-size: 16px !important;
        font-weight: 400 !important;
        padding: 12px 0 !important;
        display: block !important;
        color: #555 !important;
        border-bottom: 1px solid var(--border) !important;
        text-decoration: none !important;
    }

    .mobile-nav-menu li a:hover { color: var(--pink) !important; background: none !important; }

    /* ── Extras: account + language ── */
    .header-nav.nav-open .mobile-nav-extras {
        display: block !important;
        width: 100%;
        margin-top: 4px;
    }

    .mobile-nav-account {
        border-bottom: 1px solid var(--border);
    }

    .mobile-account-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        font-weight: 400;
        color: var(--text);
        text-decoration: none;
        padding: 16px 0;
        width: 100%;
    }

    .mobile-account-link::after {
        content: '›';
        font-size: 24px;
        font-weight: 300;
        color: var(--muted);
    }

    .mobile-account-link:hover { color: var(--pink); }

    .mobile-nav-lang {
        display: flex !important;
        flex-direction: column;
    }

    .mobile-lang-link {
        display: flex !important;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 400;
        color: var(--text);
        text-decoration: none;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
    }

    .mobile-lang-link:hover { color: var(--pink); }

    /* ── Announcement bar ── */
    .as-banner {
        padding: 10px 40px 10px 14px !important;
        font-size: .875rem;
        line-height: 1.4;
        font-weight: 400;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 359px) {
    .header-wrap {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        padding-right: 4px !important;
        padding-left: 4px !important;
        gap: 0 !important;
    }

    .header-search,
    .header-cart,
    .header-cart-link {
        width: 44px !important;
    }

    /* Keep the enlarged logo clear of the search control on 320px devices. */
    .header-logo img,
    .header-logo .custom-logo,
    .header-logo .custom-logo-link img {
        max-height: 29px !important;
    }

    .header-search .search-form,
    .header-search .aws-container,
    .header-search .aws-search-form,
    .header-search .aws-container form.aws-search-form,
    .header-search .search-btn,
    .header-search .aws-search-btn,
    .header-search button[type="submit"] {
        width: 44px !important;
    }

    .menu-toggle-label {
        font-size: 10px;
    }
}

/* ===========================================
   Shortcode elements: login / currency / language
   =========================================== */
.artsets-login-link,
a.artsets-login-link {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ease);
}

.artsets-login-link:hover { color: var(--pink); }

/* Currency and language selector wrappers */
.artsets-currency-selector,
.artsets-language-selector {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    transition: border-color var(--ease);
    position: relative;
}

.artsets-currency-selector:hover,
.artsets-language-selector:hover { border-color: #bbb; }

/* Native <select> — invisible overlay for click target, styled via wrapper */
.artsets-lang-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
    z-index: 1;
}

.selector-label { line-height: 1; pointer-events: none; }

.selector-chevron { color: var(--muted); flex-shrink: 0; pointer-events: none; }

.flag-icon { border-radius: 2px; flex-shrink: 0; pointer-events: none; }

/* ===========================================
   Currency selector — all tiers
   =========================================== */

/* Shared chevron SVG inside selector */
.artsets-cs-chevron {
    color: var(--muted);
    flex-shrink: 0;
    pointer-events: none;
    margin-left: 2px;
}

/* ── Tier 3 static fallback ── */
/* .selector-label already styled above; no ::before needed */


/* ── Currency selector — native dropdown (always-used path) ─────────────── */
.artsets-currency-selector.artsets-wcml-native {
    overflow: visible;
    cursor: pointer;
    padding: 0;
}

.artsets-wcml-native .artsets-cs-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

.artsets-wcml-native .artsets-cs-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    position: relative;
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    line-height: 1;
}

.artsets-wcml-native .artsets-cs-toggle:hover { background: transparent !important; }

.artsets-wcml-native .artsets-cs-current {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* Submenu: hidden by default, shown on click via .artsets-cs-open class */
.artsets-wcml-native .artsets-cs-submenu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 70px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    z-index: 1001;
    padding: 4px 0;
    list-style: none !important;
    margin: 0 !important;
}

.artsets-currency-selector.artsets-cs-open .artsets-cs-submenu { display: block; }

/* Chevron rotation when open */
.artsets-currency-selector.artsets-cs-open .artsets-cs-chevron { transform: rotate(180deg); transition: transform .2s; }
.artsets-currency-selector .artsets-cs-chevron { transition: transform .2s; }

.artsets-wcml-native .artsets-cs-submenu li {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.artsets-wcml-native .artsets-cs-option {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

.artsets-wcml-native .artsets-cs-option:hover {
    background: var(--pink-bg);
    color: var(--pink);
}


/* =============================================
   Footer (shared base)
   ============================================= */

#colophon.site-footer {
    background: #5f458b;
    color: #fff;
    padding: 0;
    margin: 0;
    width: 100%;
    border-top: none !important;
}

#colophon.site-footer .footer-inner,
#colophon.site-footer .footer-top {
    border-top: none !important;
}

#colophon.site-footer::before,
#colophon.site-footer::after {
    display: none !important;
}

.footer-inner::before,
.footer-inner::after {
    display: none !important;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

#colophon .footer-heading {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 18px;
    padding: 0;
    line-height: 1.25;
    background: none;
    border: none;
    text-transform: none;
    letter-spacing: normal;
    border-top: none !important;
}

.footer-col--categories .footer-heading,
.footer-col--info .footer-heading {
    font-size: 20px;
    margin-bottom: 14px;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin: 0 0 0px;
    padding: 0;
}

.footer-links li:last-child {
    margin-bottom: 0;
}

#colophon .footer-links a,
#colophon .footer-links a:visited {
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    transition: color 0.15s ease;
}

#colophon .footer-links a:hover,
#colophon .footer-links a:focus {
    color: #fff !important;
}

.footer-subtext {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    margin: 0 0 14px;
    padding: 0;
}

.footer-trust-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
    padding-top: 0;
    padding-bottom: 28px;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-social-block,
.footer-payment-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.footer-payment-block {
    align-items: flex-start;
}

.footer-aside-label,
.footer-social-label {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
    padding: 0;
}

.footer-payment-block .footer-payment--trust {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

.footer-trust-row .footer-payment-strip {
    height: 34px;
    max-width: min(520px, 100%);
}

.footer-social {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
}

#colophon .footer-social-link,
#colophon .footer-social-link:visited {
    color: inherit !important;
    text-decoration: none !important;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

#colophon .footer-social-link:hover,
#colophon .footer-social-link:focus {
    opacity: 0.9;
    text-decoration: none !important;
    transform: translateY(-1px);
}

#colophon .footer-social-link .footer-social-icon-img,
#colophon .footer-social-link img {
    display: block;
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 5px;
}

.footer-copy {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.footer-payment {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}

.footer-payment-strip {
    display: block;
    height: 34px;
    width: auto;
    max-width: min(520px, 100%);
    flex-shrink: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    object-fit: contain;
}

.footer-lang .artsets-language-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    color: #fff;
}

.footer-lang .artsets-lang-select {
    cursor: pointer;
}

.footer-lang .selector-chevron {
    color: rgba(255, 255, 255, 0.85);
}

/* Desktop footer layout */
@media (min-width: 768px) {
    #colophon.site-footer {
        padding: 48px 0 36px;
    }

    .footer-inner {
        display: flex;
        flex-direction: column;
        max-width: 1180px;
        margin: 0 auto;
        /* Left padding (74px) lines the footer columns up with the header logo:
           the footer block already shares the header's right edge, so the extra
           42px over the base 32px shifts only the left edge to the ARTSETS logo. */
        padding: 0 32px 0 74px;
        box-sizing: border-box;
    }

    .footer-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.45fr);
        gap: 40px 56px;
        align-items: start;
    }

    .footer-newsletter-stack {
        width: 92%;
        max-width: 294px;
        margin: 0;
        padding: 0;
    }

    .footer-newsletter-stack .footer-heading {
        width: 100%;
        max-width: none;
        margin: 0 0 14px;
        padding: 0 !important;
    }

    .footer-newsletter-stack .footer-newsletter-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .footer-trust-row {
        display: grid;
        margin-top: 28px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.45fr);
        column-gap: 56px;
        row-gap: 24px;
        align-items: start;
    }

    .footer-trust-row .footer-social-block {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: start;
    }

    .footer-trust-row .footer-payment-block,
    .footer-trust-row .footer-payment-stack {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        align-self: start;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .footer-trust-row .footer-payment-stack .footer-aside-label {
        margin-left: 0;
        padding-left: 0;
    }

    #colophon.site-footer .footer-trust-row .footer-payment-stack .footer-payment-icons,
    #colophon.site-footer .footer-trust-row .footer-payment.footer-payment--trust {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    #colophon.site-footer .footer-trust-row .footer-payment-strip {
        display: block !important;
        width: auto !important;
        max-width: min(520px, 100%) !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .footer-trust-row .footer-lang--trust {
        grid-column: 3;
        grid-row: 1;
        justify-self: start;
        align-self: end;
        width: 92%;
        max-width: 294px;
        display: flex;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
    }

    .footer-bottom--mobile {
        display: none !important;
    }

    .footer-bottom--desktop {
        display: block;
        margin-top: 20px;
        padding-top: 0;
        border-top: none;
        text-align: center;
    }

    .footer-bottom--desktop .footer-copy {
        margin: 0;
        text-align: center;
    }

    .footer-bottom-mobile {
        display: none !important;
    }

    /* MailPoet — beat inline #mailpoet_form_5 form { padding: 20px } (injected after theme CSS) */
    #colophon.site-footer .footer-newsletter-stack .footer-newsletter-form #mailpoet_form_5,
    #colophon.site-footer .footer-newsletter-stack .footer-newsletter-form #mailpoet_form_5 form.mailpoet_form,
    #colophon.site-footer .footer-newsletter-stack .footer-newsletter-form form.mailpoet_form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .footer-newsletter-form label,
    .footer-newsletter-form .mailpoet_paragraph label {
        margin: 0;
        padding: 0;
    }

    #colophon.site-footer .footer-newsletter-form .mailpoet_form_columns_container,
    #colophon.site-footer .footer-newsletter-form .mailpoet_form_column,
    #colophon.site-footer .footer-newsletter-form .mailpoet_column_with_background,
    .footer-newsletter-form .mailpoet_form_columns_container,
    .footer-newsletter-form .mailpoet_form_column,
    .footer-newsletter-form .mailpoet_column_with_background {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }

    .footer-newsletter-form .mailpoet_form_column:not(:first-child) {
        margin-left: 0 !important;
    }

    #colophon.site-footer .footer-newsletter-form .mailpoet_paragraph,
    #colophon.site-footer .footer-newsletter-form .mailpoet_form_paragraph,
    .footer-newsletter-form .mailpoet_paragraph,
    .footer-newsletter-form .mailpoet_form_paragraph {
        width: 100%;
        margin: 0 0 10px !important;
        padding: 0 !important;
        line-height: normal !important;
    }

    .footer-newsletter-form .mailpoet_paragraph:last-of-type {
        margin-bottom: 0 !important;
    }

    .footer-newsletter-form .mailpoet_text,
    .footer-newsletter-form .mailpoet_email,
    .footer-newsletter-form input[type="text"],
    .footer-newsletter-form input[type="email"] {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        height: 40px;
        padding: 10px 12px;
        border: none;
        border-radius: 4px;
        background: #fff;
        color: #333;
        font-size: 14px;
        line-height: 1.2;
    }

    .footer-newsletter-form .mailpoet_text::placeholder,
    .footer-newsletter-form .mailpoet_email::placeholder,
    .footer-newsletter-form input::placeholder {
        color: #888;
    }

    .footer-newsletter-form .mailpoet_submit,
    .footer-newsletter-form input[type="submit"] {
        display: block;
        width: 100%;
        height: 42px;
        margin: 4px 0 0;
        padding: 0 16px;
        border: none;
        border-radius: 4px;
        background: #b565f2;
        color: #2b1445;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .footer-newsletter-form .mailpoet_submit:hover,
    .footer-newsletter-form input[type="submit"]:hover {
        background: #8c1ad4;
    }

    .footer-newsletter-form .mailpoet_message,
    .footer-newsletter-form .parsley-errors-list {
        margin: 0 !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
    }
}

/* Mobile footer layout */
@media (max-width: 767px) {
    #colophon.site-footer {
        padding: 40px 0 0;
    }

    .footer-inner {
        padding: 0 16px;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .footer-col--categories { order: 1; }
    .footer-col--info       { order: 2; }
    .footer-col--newsletter { order: 3; }

    .footer-newsletter-stack {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .footer-col--newsletter {
        margin: 0;
        padding: 0;
    }

    .footer-newsletter-stack .footer-heading {
        margin-left: 0;
        padding-left: 0;
    }

    .footer-newsletter-stack .footer-newsletter-form {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* MailPoet — remove form padding so fields align with heading (mobile) */
    #colophon.site-footer .footer-newsletter-stack .footer-newsletter-form #mailpoet_form_5,
    #colophon.site-footer .footer-newsletter-stack .footer-newsletter-form #mailpoet_form_5 form.mailpoet_form,
    #colophon.site-footer .footer-newsletter-stack .footer-newsletter-form form.mailpoet_form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    #colophon.site-footer .footer-newsletter-form .mailpoet_form_columns_container,
    #colophon.site-footer .footer-newsletter-form .mailpoet_form_column,
    #colophon.site-footer .footer-newsletter-form .mailpoet_column_with_background,
    .footer-newsletter-form .mailpoet_form_columns_container,
    .footer-newsletter-form .mailpoet_form_column,
    .footer-newsletter-form .mailpoet_column_with_background {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }

    .footer-newsletter-form .mailpoet_form_column:not(:first-child) {
        margin-left: 0 !important;
    }

    #colophon.site-footer .footer-newsletter-form .mailpoet_paragraph,
    #colophon.site-footer .footer-newsletter-form .mailpoet_form_paragraph,
    .footer-newsletter-form .mailpoet_paragraph,
    .footer-newsletter-form .mailpoet_form_paragraph {
        width: 100%;
        margin: 0 0 10px !important;
        padding: 0 !important;
        line-height: normal !important;
    }

    .footer-newsletter-form .mailpoet_paragraph:last-of-type {
        margin-bottom: 0 !important;
    }

    .footer-newsletter-form .mailpoet_text,
    .footer-newsletter-form .mailpoet_email,
    .footer-newsletter-form input[type="text"],
    .footer-newsletter-form input[type="email"] {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        height: 40px;
        padding: 10px 12px;
        border: none;
        border-radius: 4px;
        background: #fff;
        color: #333;
        font-size: 14px;
        line-height: 1.2;
    }

    .footer-newsletter-form .mailpoet_submit,
    .footer-newsletter-form input[type="submit"] {
        display: block;
        width: 100%;
        height: 42px;
        margin: 4px 0 0;
        padding: 0 16px;
        border: none;
        border-radius: 4px;
        background: #b565f2;
        color: #2b1445;
        font-size: 15px;
        font-weight: 700;
    }

    .footer-bottom--desktop {
        display: none !important;
    }

    .footer-trust-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "social lang"
            "payment payment";
        column-gap: 16px;
        row-gap: 28px;
        align-items: end;
        margin-top: 32px;
        padding-top: 0;
        padding-bottom: 28px;
        border-bottom: none;
    }

    .footer-trust-row .footer-social-block {
        grid-area: social;
        min-width: 0;
    }

    .footer-trust-row .footer-lang--trust {
        grid-area: lang;
        justify-self: end;
        align-self: end;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        justify-content: flex-end;
    }

    .footer-trust-row .footer-payment-block,
    .footer-trust-row .footer-payment-stack {
        grid-area: payment;
    }

    .footer-payment-stack {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .footer-payment-stack .footer-aside-label {
        margin-left: 0;
        padding-left: 0;
    }

    .footer-payment-stack .footer-payment-icons {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Payment strip — same left alignment reset as newsletter (mobile) */
    #colophon.site-footer .footer-payment-stack .footer-payment-icons,
    #colophon.site-footer .footer-payment-stack .footer-payment.footer-payment--trust {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        text-align: left !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    #colophon.site-footer .footer-payment-stack .footer-payment-strip,
    #colophon.site-footer .footer-payment-stack img.footer-payment-strip {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .footer-bottom--mobile {
        display: block !important;
        margin: 0 -16px;
        padding: 16px 16px 20px;
        text-align: center;
        background: rgba(0, 0, 0, 0.12);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-bottom--mobile .footer-copy {
        color: rgba(255, 255, 255, 0.78);
        font-size: 13px;
        font-weight: 700;
        margin: 0;
    }
}

/* ===========================================
   Homepage — Storefront layout overrides
   =========================================== */

/* Remove Storefront's ~68px gap below header and side padding on front page */
.home .site-header {
    margin-bottom: 0 !important;
}

.home .site-main {
    padding-top: 0;
    margin-bottom: 0;
}

.home #content .col-full {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ===========================================
   Blog index page (page-blog.php)
   =========================================== */

.blog-index {
    padding: 40px 0 60px;
}

.blog-index__header {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 24px;
}

.blog-index__title {
    font-family: var(--font);
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .blog-index__title {
        font-size: 22px;
    }
}

.blog-cards {
    display: flex;
    flex-direction: row;
    width: 80%;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .blog-cards {
        width: 612px;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .blog-cards {
        flex-direction: column;
        width: 100%;
        padding: 0 16px;
    }
}

.blog-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 6px 6px 10px 0 rgba(67, 55, 55, 0.32);
    margin: 10px;
}

@media (max-width: 1024px) {
    .blog-card {
        margin: 0 0 16px;
    }
}

.blog-card__bg-wrap {
    position: relative;
    min-height: 250px;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .blog-card__bg-wrap {
        min-height: 200px;
    }
}

.blog-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.5s ease;
}

.blog-card:hover .blog-card__bg {
    transform: scale(1.06);
}

.blog-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
}

.blog-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    min-height: 100px;
    background: #fff;
    flex: 1;
}

@media (max-width: 767px) {
    .blog-card__content {
        padding: 20px 0 25px;
    }
}

.blog-card__title {
    font-family: var(--font);
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 15px;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .blog-card__title {
        margin-bottom: 10px;
    }
}

.blog-card__desc {
    font-family: var(--font);
    font-size: 15px;
    color: var(--muted);
    margin: 0 0 15px;
    line-height: 1.5;
    flex: 1;
}

@media (max-width: 767px) {
    .blog-card__desc {
        margin-bottom: 10px;
    }
}

.blog-card__btn {
    display: inline-block;
    background-color: var(--pink);
    color: #e2e2e2;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 4px;
    border: 1px solid var(--pink);
    transition: opacity var(--ease);
    margin-top: auto;
}

.blog-card:hover .blog-card__btn {
    opacity: 0.88;
}

/* ===========================================
   Blog article pages — .ba-* components
   =========================================== */

.blog-article {
    padding: 40px 0 60px;
}

.ba-header {
    text-align: center;
    margin-bottom: 36px;
    padding: 0 16px;
}

.ba-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
}

.ba-intro,
.ba-section {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 0 16px;
}

.ba-intro--media {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.ba-intro__text {
    flex: 1;
}

.ba-intro__image {
    flex: 0 0 280px;
    margin: 0;
}

.ba-intro__image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.ba-lead {
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.ba-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.ba-section__body {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.ba-section__text {
    max-width: 820px;
}

.ba-section__body .ba-section__text {
    flex: 1;
    max-width: none;
}

.ba-section__image {
    flex: 0 0 280px;
    margin: 0;
}

.ba-section__image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.ba-products {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
    padding: 0 16px;
}

.ba-products h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1a1a1a;
}

.ba-products .blog-cards {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin: 0 -10px;
}

.ba-products .blog-card {
    flex: 0 0 calc(50% - 20px);
}

.ba-products .blog-card__bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #f7f3fb;
}

@media (max-width: 1024px) {
    .ba-intro--media {
        flex-direction: column;
    }

    .ba-intro__image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
    }

    .ba-section__body {
        flex-direction: column;
    }

    .ba-section__image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 767px) {
    .blog-article {
        padding: 24px 0 40px;
    }

    .ba-title {
        font-size: 1.4rem;
    }

    .ba-section h2,
    .ba-products h2 {
        font-size: 1.25rem;
    }

    .ba-products .blog-card {
        flex: 0 0 100%;
    }
}

/* ===========================================
   About page — .about-* components
   =========================================== */

.about-page {
    padding: 40px 0 60px;
}

.about-article {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}

.about-header {
    text-align: center;
    margin-bottom: 36px;
}

.about-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
}

.about-intro {
    margin-bottom: 40px;
}

.about-story {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.about-story__image {
    flex: 0 0 300px;
    margin: 0;
}

.about-story__image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.about-story__text {
    flex: 1;
}

.about-duo {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.about-duo__item {
    flex: 1;
    margin: 0;
}

.about-duo__item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.about-closing {
    margin-bottom: 48px;
}

.about-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.about-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1;
}

.about-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.about-gallery__item:hover img {
    transform: scale(1.05);
}

@media (max-width: 1024px) {
    .about-story {
        flex-direction: column;
    }

    .about-story__image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
    }

    .about-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .about-page {
        padding: 24px 0 40px;
    }

    .about-title {
        font-size: 1.4rem;
    }

    .about-duo {
        flex-direction: column;
    }

    .about-duo__item img {
        height: 240px;
    }

    .about-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   Contact page — .contact-* components
   =========================================== */

.contact-page {
    padding: 40px 0 60px;
}

.contact-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}

.contact-info {
    margin-bottom: 48px;
}

.contact-info h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-info h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 24px 0 12px;
}

.contact-details {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.contact-details li {
    padding: 6px 0;
}

.contact-details a {
    color: inherit;
    text-decoration: underline;
}

.contact-form-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-form-section .wpcf7-submit {
    background-color: var(--pink);
    color: #e2e2e2;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 4px;
    border: 1px solid var(--pink);
    cursor: pointer;
    transition: opacity var(--ease);
}

.contact-form-section .wpcf7-submit:hover {
    opacity: 0.88;
}

@media (max-width: 767px) {
    .contact-page {
        padding: 24px 0 40px;
    }

    .contact-info h1 {
        font-size: 1.5rem;
    }
}

/* ===========================================
   Delivery info page — .delivery-* components
   =========================================== */

.delivery-page {
    padding: 40px 0 60px;
}

.delivery-article {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}

.delivery-header {
    margin-bottom: 32px;
}

.delivery-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
}

.delivery-content p {
    margin-bottom: 16px;
    line-height: 1.7;
}

.delivery-content a {
    color: var(--pink);
    text-decoration: underline;
}

.delivery-content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 32px 0 8px;
}

.delivery-content ul {
    margin: 0 0 16px;
    padding-left: 0;
    list-style: none;
}

.delivery-content ul li {
    position: relative;
    padding: 4px 0 4px 20px;
    line-height: 1.7;
}

.delivery-content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    font-weight: 700;
}

@media (max-width: 767px) {
    .delivery-page {
        padding: 24px 0 40px;
    }

    .delivery-title {
        font-size: 1.5rem;
    }
}

/* ===========================================
   Simple article pages — .simple-article
   (zasilkovna, and future plain-text pages)
   =========================================== */

.zasilkovna-page,
.privacy-policy-page,
.terms-page,
.instrukce-page,
.informace-page {
    padding: 40px 0 60px;
}

.simple-article {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}

.instrukce-page .simple-article,
.informace-page .simple-article,
.privacy-policy-page .simple-article,
.delivery-page .simple-article,
.contact-page .simple-article {
    max-width: 900px;
}

.simple-article__header {
    margin-bottom: 32px;
}

.simple-article__title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
}

.simple-article__content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 36px 0 12px;
}

.simple-article__content h2:first-child {
    margin-top: 0;
}

.simple-article__content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 24px 0 10px;
}

.simple-article__content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin: 18px 0 8px;
}

.simple-article__content p {
    margin-bottom: 16px;
    line-height: 1.7;
}

.simple-article__content a {
    color: var(--pink);
    text-decoration: underline;
}

.simple-article__content ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.simple-article__content ul li {
    position: relative;
    padding: 6px 0 6px 20px;
    line-height: 1.7;
}

.simple-article__content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--pink);
}

@media (max-width: 767px) {
    .zasilkovna-page,
    .privacy-policy-page,
    .terms-page,
    .instrukce-page,
    .informace-page {
        padding: 24px 0 40px;
    }

    .simple-article__title {
        font-size: 1.5rem;
    }
}

/* ==========================================
   Instrukce sub-pages — Elementor content without Elementor CSS
   Target: .parent-pageid-7866 (WP body class for all /instrukce/* child pages)
   ========================================== */

.parent-pageid-7866 .site-main {
    padding: 40px 0 60px;
}

.parent-pageid-7866 .entry-header,
.parent-pageid-7866 .entry-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.parent-pageid-7866 .entry-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0 0 32px;
}

.parent-pageid-7866 .elementor-heading-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin: 0 0 16px;
}

.parent-pageid-7866 .elementor-widget-container h2,
.parent-pageid-7866 .elementor-widget-container h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin: 24px 0 12px;
}

.parent-pageid-7866 .elementor-widget-container h2:first-child,
.parent-pageid-7866 .elementor-widget-container h3:first-child {
    margin-top: 0;
}

.parent-pageid-7866 .elementor-widget-container p {
    font-family: 'Outfit', sans-serif;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Default image styling (pages without video: zrcadla, hodin) */
.parent-pageid-7866 .elementor-widget-image img {
    max-width: 460px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 16px;
    border-radius: 6px;
}

/* Video: fill left column, constrain height to fit viewport without scrolling */
.parent-pageid-7866 .elementor-video {
    width: 100%;
    max-height: 60vh;
    display: block;
    border-radius: 8px;
    object-fit: contain;
}

/*
 * 2-column layout: video (left) + product images (right).
 * Rules are intentionally NOT grouped — LiteSpeed's CSS optimizer strips selectors
 * from grouped rules when they contain child combinators (>), causing global leakage.
 *
 * Container IDs:
 *   instrukce-mobilni-kryty      page 8545  → elementor-element-8e67b5a
 *   instrukce-podtacku           page 7999  → elementor-element-d4f1075
 *   instrukce-pro-tvorbu-fotoramecku  page 9025  → elementor-element-38b1c07
 *   instrukce-pro-tvorbu-stojanku-na-tuzky page 10082 → elementor-element-1399eb7
 */
.page-id-8545  .elementor-element-8e67b5a  { display: flex; flex-direction: row; gap: 32px; align-items: flex-start; }
.page-id-7999  .elementor-element-d4f1075  { display: flex; flex-direction: row; gap: 32px; align-items: flex-start; }
.page-id-9025  .elementor-element-38b1c07  { display: flex; flex-direction: row; gap: 32px; align-items: flex-start; }
.page-id-10082 .elementor-element-1399eb7  { display: flex; flex-direction: row; gap: 32px; align-items: flex-start; }

.page-id-8545  .elementor-element-8e67b5a  > .e-con.e-child { flex: 1; min-width: 0; }
.page-id-7999  .elementor-element-d4f1075  > .e-con.e-child { flex: 1; min-width: 0; }
.page-id-9025  .elementor-element-38b1c07  > .e-con.e-child { flex: 1; min-width: 0; }
.page-id-10082 .elementor-element-1399eb7  > .e-con.e-child { flex: 1; min-width: 0; }

.page-id-8545  .elementor-element-8e67b5a  .elementor-widget-image img { max-width: 100%; margin: 0 0 16px; }
.page-id-7999  .elementor-element-d4f1075  .elementor-widget-image img { max-width: 100%; margin: 0 0 16px; }
.page-id-9025  .elementor-element-38b1c07  .elementor-widget-image img { max-width: 100%; margin: 0 0 16px; }
.page-id-10082 .elementor-element-1399eb7  .elementor-widget-image img { max-width: 100%; margin: 0 0 16px; }

@media (max-width: 767px) {
    .parent-pageid-7866 .site-main { padding: 24px 0 40px; }
    .parent-pageid-7866 .entry-title { font-size: 1.5rem; }
    .page-id-8545  .elementor-element-8e67b5a  { flex-direction: column; }
    .page-id-7999  .elementor-element-d4f1075  { flex-direction: column; }
    .page-id-9025  .elementor-element-38b1c07  { flex-direction: column; }
    .page-id-10082 .elementor-element-1399eb7  { flex-direction: column; }
}

/* ===========================================
   Instrukce Mobile Cases PHP template
   =========================================== */


.instrukce-mc-page,
.instrukce-stojanky-page,
.instrukce-podtacky-page,
.instrukce-fotoramecky-page {
    padding: 40px 0 60px;
}

.instrukce-mc-page .simple-article,
.instrukce-stojanky-page .simple-article,
.instrukce-podtacky-page .simple-article,
.instrukce-fotoramecky-page .simple-article {
    max-width: 960px;
}

.instrukce-mc-layout {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    margin-top: 32px;
}

.instrukce-video {
    flex: 0 0 440px;
    max-width: 440px;
}

.instrukce-video h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    text-align: center;
}

.instrukce-video__player {
    width: auto;
    max-width: 100%;
    max-height: 65vh;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

.instrukce-products {
    flex: 1;
    min-width: 0;
}

.instrukce-products h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 20px;
    text-align: center;
}

.instrukce-products h2 a {
    color: var(--pink);
    text-decoration: underline;
}

.instrukce-products h2 a:hover {
    opacity: 0.8;
}

.instrukce-products__gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 65vh;
}

.instrukce-products__item {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 0;
}

.instrukce-products__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

@media (max-width: 767px) {
    .instrukce-mc-page,
    .instrukce-stojanky-page,
    .instrukce-podtacky-page,
    .instrukce-fotoramecky-page {
        padding: 24px 0 40px;
    }

    .instrukce-mc-layout {
        flex-direction: column;
        gap: 32px;
    }

    .instrukce-video {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .instrukce-products__gallery {
        height: auto;
    }

    .instrukce-products__item {
        flex: none;
    }

    .instrukce-products__item img {
        height: auto;
    }
}

/* ===========================================
   Instrukce Mirror PHP template
   =========================================== */

.instrukce-zrcadla-page,
.instrukce-hodin-page {
    padding: 40px 0 60px;
}

.instrukce-zrcadla-page .simple-article,
.instrukce-hodin-page .simple-article {
    max-width: 960px;
}

.instrukce-zrcadla__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.instrukce-zrcadla-page .instrukce-video,
.instrukce-hodin-page .instrukce-video {
    flex: 1;
    max-width: none;
}

.instrukce-products__gallery--single {
    height: auto;
}

.instrukce-products__gallery--single .instrukce-products__item {
    flex: none;
}

.instrukce-products__gallery--single .instrukce-products__item img {
    height: auto;
    object-fit: unset;
}

@media (max-width: 767px) {
    .instrukce-zrcadla-page,
    .instrukce-hodin-page {
        padding: 24px 0 40px;
    }

    .instrukce-products__gallery--single {
        height: auto;
    }
}

/* ===========================================
   My Account page
   =========================================== */

.my-account-page {
    font-family: var(--font);
    padding: 40px 0 60px;
}

.my-account-page *,
.my-account-page h1,
.my-account-page h2,
.my-account-page label,
.my-account-page p,
.my-account-page a,
.my-account-page input,
.my-account-page select,
.my-account-page textarea,
.my-account-page table,
.my-account-page td,
.my-account-page th {
    font-family: var(--font);
}

/* Headings */
.my-account-page h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
}

.my-account-page h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 20px;
}

/* -------------------------------------------
   Login form — two-column flex layout
   ------------------------------------------- */

.my-account-page .col2-set {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.my-account-page .col2-set .u-column1,
.my-account-page .col2-set .u-column2 {
    flex: 1;
    float: none;
    width: auto !important;
}

/* -------------------------------------------
   Buttons — match site's primary purple
   ------------------------------------------- */

.my-account-page .button,
.my-account-page button[type="submit"],
.my-account-page input[type="submit"],
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
    background-color: #7c3aed !important;
    background-image: none !important;
    color: #fff !important;
    border: 2px solid #7c3aed !important;
    border-radius: 10px !important;
    font-family: var(--font) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    padding: 12px 28px !important;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.14s, border-color 0.14s, transform 0.12s;
    box-shadow: none !important;
    text-shadow: none;
    line-height: 1.5;
}

.my-account-page .button:hover,
.my-account-page .button:focus,
.my-account-page button[type="submit"]:hover,
.my-account-page button[type="submit"]:focus,
.my-account-page input[type="submit"]:hover,
.my-account-page input[type="submit"]:focus,
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-login__submit:focus,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:focus {
    background-color: #5b21b6 !important;
    border-color: #5b21b6 !important;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

/* -------------------------------------------
   Logged-in layout — nav + content flex
   ------------------------------------------- */

/* Override WC float layout with flexbox */
.my-account-page .woocommerce {
    display: block;
}

.my-account-page .woocommerce-MyAccount-navigation,
.my-account-page .woocommerce-MyAccount-content {
    float: none !important;
}

.my-account-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.my-account-page .woocommerce-MyAccount-navigation {
    flex: 0 0 220px;
    width: 220px !important;
}

.my-account-page .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
}

/* -------------------------------------------
   Navigation sidebar — card style
   ------------------------------------------- */

.my-account-page .woocommerce-MyAccount-navigation {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ebebeb;
    overflow: hidden;
}

.my-account-page .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-account-page .woocommerce-MyAccount-navigation li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f4f0fb;
}

.my-account-page .woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.my-account-page .woocommerce-MyAccount-navigation a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    color: #43454b;
    font-family: var(--font);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}

.my-account-page .woocommerce-MyAccount-navigation a:hover {
    background: #f3e8ff;
    color: #7100ba;
    text-decoration: none;
}

.my-account-page .woocommerce-MyAccount-navigation li.is-active a,
.my-account-page .woocommerce-MyAccount-navigation li.is-active > a {
    background: #f3e8ff;
    color: #7100ba;
    font-weight: 700;
    border-left-color: #7100ba;
    padding-left: 15px;
}

/* -------------------------------------------
   Content area
   ------------------------------------------- */

.my-account-page .woocommerce-MyAccount-content p {
    color: #43454b;
    line-height: 1.65;
    margin-bottom: 16px;
}

.my-account-page .woocommerce-MyAccount-content a {
    color: #7100ba;
    text-decoration: none;
}

.my-account-page .woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* -------------------------------------------
   Responsive
   ------------------------------------------- */

@media (max-width: 767px) {
    .my-account-page {
        padding: 24px 0 48px;
    }

    /* Stack nav above content on mobile */
    .my-account-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
        flex-direction: column;
        gap: 20px;
    }

    .my-account-page .woocommerce-MyAccount-navigation {
        flex: none;
        width: 100% !important;
    }

    /* Stack login columns on mobile */
    .my-account-page .col2-set {
        flex-direction: column;
        gap: 32px;
    }

    .my-account-page .button,
    .my-account-page button[type="submit"],
    .my-account-page input[type="submit"],
    .woocommerce-account .woocommerce-form-login__submit,
    .woocommerce-account .woocommerce-form-register__submit {
        width: 100%;
        text-align: center;
    }
}

/* TEMPORARY: language switcher hidden */
.artsets-language-selector,
.mobile-nav-lang,
.header-lang-mobile {
    display: none !important;
}

/* ── Thank-you page (FunnelKit, ID 10696) ────────────────────────────────── */

/* Fix: Elementor shape divider SVG renders at natural size (giant triangle).
   Elementor wraps it in .elementor-shape with position:absolute and
   overflow:hidden — the parent section must have position:relative for that
   to work. Without per-page inline CSS the section loses that, so the SVG
   overflows at full viewport scale. Hidden here; the visual gap between
   sections is preserved by section padding. */
.postid-10696 .elementor-shape {
    display: none !important;
}

/* Fix: Outfit font not applied to FunnelKit / WooCommerce order details on
   the thank-you page. FunnelKit enqueues its own stylesheet that doesn't
   inherit --font. Explicitly cascade Outfit here. */
.postid-10696,
.postid-10696 input,
.postid-10696 select,
.postid-10696 textarea,
.postid-10696 button,
.postid-10696 .button,
.postid-10696 .wfty_wrap,
.postid-10696 .woocommerce-order,
.postid-10696 .woocommerce-thankyou-order-received,
.postid-10696 .elementor-widget-container {
    font-family: var( --font ) !important;
}