/* ==================== BASE ==================== */
* {
    box-sizing: border-box;
}

a {
    text-decoration: none !important;
    color: inherit;
}

body {
    background-color: var(--sp-content-bg) !important;
    color: var(--text-color) !important;
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: var(--theme-transition);
}

/* Force all WordPress / WooCommerce content areas to respect theme variables */
.site-main,
.entry-content,
.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-column,
.woocommerce,
.woocommerce-page,
.wp-block-woocommerce-product-collection,
.wp-block-woocommerce-featured-category {
    color: var(--text-color) !important;
    transition: var(--theme-transition);
}

/* Startsida / front page: första direkta barn i .entry-content får inte egen bak —
   på övriga sidor gjorde samma selektor formulärwrapper (Fluent) osynlig (transparent !important). */
body.home .site-main .entry-content > *,
body.front-page .site-main .entry-content > * {
    background-color: transparent !important;
}

/*
 * Front page rails scroll inside .st-frontpage-rail__list; clip bleed here only.
 * Do not set max-width on .site-main — body.home .site-main beats .site-main.container (1400px).
 */
body.home .site-main.container,
body.front-page .site-main.container {
    overflow-x: clip;
}

.wp-block-group {
    background-color: transparent !important;
}
/* Force text inside front-page blocks to follow theme */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content p,
.entry-content span,
.entry-content a:not(.button),
.site-main h1,
.site-main h2,
.site-main h3,
.page-title {
    color: var(--text-color) !important;
    transition: color 0.35s ease;
}

/* WooCommerce block category cards */
.wc-block-grid__product,
ul.wc-block-product-template > li.wc-block-product,
.wc-block-featured-category {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    transition: var(--theme-transition);
}

.wc-block-grid__product-title,
.wc-block-featured-category__title {
    color: var(--text-color) !important;
}

.wc-block-grid__product-price {
    color: var(--text-dim) !important;
}

/* WordPress block cover overlays should still work */
.wp-block-cover .wp-block-cover__inner-container {
    color: var(--white) !important;
}

/* Startsida: hero-cover — maxhöjd + rundning (8px även på bildlager) */
body.home .site-main .entry-content > .wp-block-cover:first-child,
body.front-page .site-main .entry-content > .wp-block-cover:first-child,
body.home .site-main .entry-content > .wp-block-group:first-child .wp-block-cover:first-child,
body.front-page .site-main .entry-content > .wp-block-group:first-child .wp-block-cover:first-child {
    max-height: 300px;
    min-height: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    isolation: isolate;
}

body.home .site-main .entry-content > .wp-block-cover:first-child .wp-block-cover__image-background,
body.front-page .site-main .entry-content > .wp-block-cover:first-child .wp-block-cover__image-background,
body.home .site-main .entry-content > .wp-block-group:first-child .wp-block-cover:first-child .wp-block-cover__image-background,
body.front-page .site-main .entry-content > .wp-block-group:first-child .wp-block-cover:first-child .wp-block-cover__image-background,
body.home .site-main .entry-content > .wp-block-cover:first-child .wp-block-cover__background,
body.front-page .site-main .entry-content > .wp-block-cover:first-child .wp-block-cover__background,
body.home .site-main .entry-content > .wp-block-group:first-child .wp-block-cover:first-child .wp-block-cover__background,
body.front-page .site-main .entry-content > .wp-block-group:first-child .wp-block-cover:first-child .wp-block-cover__background {
    border-radius: 8px;
    object-fit: cover;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.logo {
    font-family: var(--font-heading) !important;
    color: var(--sp-dark) !important;
    letter-spacing: 0.03em;
}

h1 {
    font-size: 1.8rem;
    line-height: normal;
}

.gold-text {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}


/* ==================== TOP BAR (smal rad ovanför header) ==================== */
.st-top-bar {
    background: #3d352d;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.3;
    padding: 4px 24px;
    text-align: center;
}

.st-top-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.st-top-bar-text {
    display: block;
    color: inherit;
}

/* ==================== HEADER ==================== */
.site-header {
    background: var(--sp-chrome-bg) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition), var(--theme-transition);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    background: transparent !important;
}

.logo a,
.site-logo .logo,
.site-logo .custom-logo-link {
    font-size: 1.3rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.12em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.custom-logo-link-wrapper {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 18px;
}

.logo-symbol {
    height: 60px; /* Din önskade höjd */
    width: auto;
    display: block;
}

.logo-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.logo-text-main {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: #3d342d; /* Mörkbrun färg för "Pickers" */
}

/* Här återställer vi den bruna/beige färgen för första ordet */
.text-brown {
    color: #8b7355; 
}

.logo-text-url {
    font-family: sans-serif;
    font-size: 10px;
    color: #3d342d;
    letter-spacing: 1.8px;
    margin-top: 3px;
    opacity: 0.7;
    text-transform: uppercase;
}

/* Mobil: kompakt logotyp – se responsive.css */
@media (max-width: 768px) {
    .logo-symbol {
        height: 50px;
    }
}

/* Inline Search Bar (Vinted-style pill) */
.header-search {
    flex: 1;
    max-width: 600px;
}

.header-search-form {
    display: flex;
    align-items: center;
    background: var(--search-bg);
    border: 1px solid rgba(193, 134, 83, 0.28);
    border-radius: 999px;
    padding: 8px 16px;
    gap: 8px;
    transition: var(--transition);
}

.header-search-form:focus-within {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 2px rgba(193, 134, 83, 0.14);
}

.search-icon {
    color: var(--text-dim);
    flex-shrink: 0;
}

.header-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
}

.header-search-input::placeholder {
    color: var(--text-dim);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.header-actions-divider {
    width: 1px;
    height: 22px;
    background: #d1bc9b;
    flex-shrink: 0;
}

.st-header-account-link,
.st-header-likes-link,
.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-color);
    transition: var(--transition);
}

.st-header-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.st-header-action-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.login-link-label,
.st-header-likes-label,
.cart-link-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    white-space: nowrap;
}

.st-header-account-link:hover,
.st-header-likes-link:hover,
.cart-link:hover {
    color: var(--accent-gold);
}

.cart-link {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    /* Reserverad plats för badge – etiketten hoppar inte vid 0/1+ */
    padding-right: 22px;
}

.cart-count-slot {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    pointer-events: none;
}

.cart-count {
    background: var(--accent-gold);
    color: var(--bg-color);
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 1;
}

.cart-count.is-empty {
    visibility: hidden;
}


/* Category Nav (below header, like Vinted) */
.category-nav {
    border-top: 0;
    background: var(--sp-chrome-bg) !important;
    position: relative; /* anchor for absolute dropdown */
    overflow: visible;
    z-index: 1001;
}

.category-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    overflow: visible;
}

/* ==================== VINTED-STYLE MEGA MENU ==================== */

/* Behållaren för hela menyn */
.st-mega-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center; /* Centrerar menyn under sökfältet */
    align-items: center;
    gap: 40px; /* Generöst avstånd mellan huvudkategorierna */
    list-style: none !important;
    margin: 0 auto !important;
    border-bottom: 0;
    background: var(--sp-chrome-bg) !important;
    width: 100%;
    overflow: visible;
}

/* Huvudlänkarna (Toppnivå: Antikt & Design, Hem & Inredning) */
.st-mega-item {
    position: relative; /* Krävs för att dropdownen ska veta var den ska öppnas */
    flex: 0 0 auto;
}

.st-mega-link {
    text-decoration: none !important;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.5px;
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

.st-mega-link:hover {
    color: var(--sp-accent);
}

/* Siffran efter kategorin (Count) */
.st-cat-count {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 400;
    margin-left: 4px;
}

/* ==================== DROPDOWN LOGIK ==================== */

.st-mega-dropdown {
    display: none;
    position: absolute;
    top: 100%; /* Precis under huvudlänken */
    left: 50%;
    transform: translateX(-50%); /* Centrerar dropdownen under ordet */
    background: var(--sp-content-bg);
    min-width: 220px;
    border: 1px solid rgba(193, 134, 83, 0.2);
    border-top: 2px solid var(--sp-accent);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow:
        0 14px 32px rgba(45, 38, 32, 0.07),
        0 2px 8px rgba(45, 38, 32, 0.04);
    z-index: 9999;
    padding: 18px 20px;
}

/* Visa dropdown vid hover */
.st-mega-item:hover .st-mega-dropdown {
    display: block;
}

.st-mega-item:focus-within .st-mega-dropdown {
    display: block;
}

.st-mega-item.is-active .st-mega-dropdown {
    display: block;
}

/* Underkategorierna (Glas, Konst, Keramik etc.) */
.st-mega-columns {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.st-mega-subitem {
    margin-bottom: 10px;
    white-space: nowrap; /* Hindrar radbrytning i dropdownen */
    position: relative;
}

.st-mega-subitem a {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 24px 2px 2px; /* keep your tight spacing + reserve arrow gutter */
    font-size: 14px;
    color: var(--sp-dark);
    text-transform: none; /* Inte uppercase på underkategorier för bättre läsbarhet */
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
}

.st-mega-subitem a .st-cat-count {
    margin-left: auto;
    min-width: 3ch;
    text-align: right;
    display: inline-block;
}

.st-mega-subitem a:hover {
    color: var(--sp-accent);
    transform: translateX(3px); /* Liten snygg animation vid hover */
    background: rgba(255, 255, 255, 0.25);
}

/* Level 3 fly-out (desktop) */
.st-mega-grandchildren {
    display: none;
    list-style: none !important;
    margin: 0;
    padding: 10px 12px;
    min-width: 220px;
    position: absolute;
    top: -6px;
    left: 100%;
    background: var(--sp-content-bg);
    border: 1px solid rgba(193, 134, 83, 0.2);
    border-top: 2px solid var(--sp-accent);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(45, 38, 32, 0.08);
    z-index: 10000;
}

/* Hover-bro mellan nivå 2 och nivå 3 så pekaren inte "tappar" menyn */
.st-mega-subitem.has-grandchildren > a::before {
    content: '';
    position: absolute;
    top: -6px;
    right: -10px;
    width: 12px;
    height: calc(100% + 12px);
}

.st-mega-subitem.has-grandchildren:hover > .st-mega-grandchildren,
.st-mega-subitem.has-grandchildren:focus-within > .st-mega-grandchildren {
    display: block;
}

.st-mega-grandchild-item {
    margin: 0;
}

.st-mega-grandchild-item + .st-mega-grandchild-item {
    margin-top: 6px;
}

.st-mega-grandchild-item a {
    display: block;
    font-size: 13px;
    color: #4b433c;
    text-transform: none;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.35;
}

.st-mega-grandchild-item a:hover,
.st-mega-grandchild-item a:focus-visible {
    color: var(--sp-accent);
}

.st-mega-subitem.has-grandchildren > a::after {
    content: '›';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: rgba(193, 134, 83, 0.8);
}

/* Snygg pil eller indikator om det finns barn (valfritt) */
.has-children > .st-mega-link::after {
    content: '▾';
    font-size: 10px;
    margin-left: 5px;
    vertical-align: middle;
    color: rgba(193, 134, 83, 0.55);
}

/* ==================== GENERAL BUTTONS (scoped till sidlayout) ==================== */
/*
 * Tidigare: globala `button`-regler + långa :not()-kedjor (PhotoSwipe, mediabibliotek, CookieYes …).
 * Nu: bara inuti tydliga wrappers så tredjeparts-UI på `body` (CookieYes, PhotoSwipe, wp.media) inte träffas.
 * .menu-toggle styrs i responsive.css (endast mobil).
 */
.site-header :is(.button, button):not(.menu-toggle),
.site-header input[type="submit"],
.category-nav :is(.button, button),
.category-nav input[type="submit"],
.site-main :is(.button, button, input[type="submit"]):not(
	.wc-block-cart-item__remove-link,
	.wc-block-components-button,
	.st-tile-quick-add,
	.st-tile-like,
	.sp-product-likes__button,
	.st-frontpage-rail__scroll-btn
),
.woocommerce-listing :is(.button, button, input[type="submit"]):not(
	.st-tile-quick-add,
	.st-tile-like,
	.sp-product-likes__button,
	.st-frontpage-rail__scroll-btn
),
.site-footer :is(.button, button, input[type="submit"]) {
    background: var(--st-btn-primary-bg) !important;
    border: 1px solid var(--st-btn-primary-border) !important;
    color: var(--st-btn-primary-fg) !important;
    padding: 8px 8px !important;
    border-radius: var(--st-btn-radius) !important;
    font-size: 0.8rem;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition) !important;
    text-decoration: none;
    display: inline-block;
    box-shadow: none !important;
}

.site-header :is(.button, button):not(.menu-toggle):hover,
.site-header input[type="submit"]:hover,
.category-nav :is(.button, button):hover,
.category-nav input[type="submit"]:hover,
.site-main :is(.button, button, input[type="submit"]):not(
	.wc-block-cart-item__remove-link,
	.wc-block-components-button,
	.st-tile-quick-add,
	.st-tile-like,
	.sp-product-likes__button,
	.st-frontpage-rail__scroll-btn
):hover,
.woocommerce-listing :is(.button, button, input[type="submit"]):not(
	.st-tile-quick-add,
	.st-tile-like,
	.sp-product-likes__button,
	.st-frontpage-rail__scroll-btn
):hover,
.site-footer :is(.button, button, input[type="submit"]):hover {
    background: var(--st-btn-primary-bg-hover) !important;
    border-color: var(--st-btn-primary-bg-hover) !important;
    color: var(--st-btn-primary-fg) !important;
    transform: none;
}

.sp-vmb-catalog-text {
    color: var(--sp-accent) !important;
    font-weight: 700;
}


/* ==================== FOOTER ==================== */
.site-footer {
    background: var(--sp-chrome-bg) !important;
    border-top: 0;
    box-shadow: none;
    padding: 64px 0 36px;
    margin-top: 80px;
    text-align: center;
    transition: var(--theme-transition);
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    background: transparent !important;
}

.footer-logo a {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sp-dark);
}

.footer-info {
    margin-top: 12px;
}

.footer-info p {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title,
.site-footer .sp-sp-footer__title,
.site-footer .sp-sp-footer__title--brand {
    color: #c18653 !important;
}

.site-footer a,
.site-footer li,
.site-footer p,
.site-footer .sp-sp-footer__lead,
.site-footer .sp-sp-footer__muted,
.site-footer .sp-sp-footer__contact a,
.site-footer .sp-sp-footer__list a,
.site-footer .sp-sp-footer__bottom {
    color: #464646 !important;
}

.site-footer a:hover {
    color: var(--sp-dark);
}